1 00:00:00,720 --> 00:00:04,740 In this lecture we are going to start adding some code. 2 00:00:04,740 --> 00:00:09,620 We'll start by creating some variables. 3 00:00:09,780 --> 00:00:12,390 Let's open up our code. 4 00:00:12,480 --> 00:00:16,470 So in the design you make sure you've got the form selected. 5 00:00:16,500 --> 00:00:23,970 Make sure the properties says form one and then click on View and click on code. 6 00:00:23,970 --> 00:00:29,970 You can also hit F seven on your keyboard and that should give us the Skeletor code. 7 00:00:29,970 --> 00:00:35,880 So this is a top level of of the code structure. 8 00:00:35,880 --> 00:00:45,630 The picture box is designed mainly to display pictures but we want to use it to draw images and the 9 00:00:45,630 --> 00:00:53,120 way we're going to achieve this is by using a bit map format to do the drawing. 10 00:00:54,150 --> 00:01:01,020 So what that means is that we'll do all the drawing onto a bitmap and then display the bitmap in the 11 00:01:01,020 --> 00:01:06,310 picture box component which will be displayed in the main window. 12 00:01:06,330 --> 00:01:11,790 So for this to work the bitmap needs to be persistent. 13 00:01:11,790 --> 00:01:20,040 What this means is that the same modified bitmap should be accessible from any method and method in 14 00:01:20,040 --> 00:01:25,670 a way is a function for from any method we choose to create in our application. 15 00:01:26,220 --> 00:01:35,370 And this involves what is known as a scope a scope and basically is the area where you can access a 16 00:01:35,370 --> 00:01:38,090 method or function from. 17 00:01:38,730 --> 00:01:48,000 For example if we created the bitmap in a method attached to the picture box component it would be destroyed 18 00:01:48,270 --> 00:01:56,310 automatically when the application leaves that method and any changes we made to the picture box would 19 00:01:56,310 --> 00:01:57,660 be lost. 20 00:01:57,660 --> 00:02:06,780 But if we create the bitmap higher up the hierarchy which is somewhere here yeah if we create that higher 21 00:02:06,780 --> 00:02:17,700 up in the current king creating entire up in the hierarchy in a method what that happens at that method 22 00:02:17,700 --> 00:02:21,840 will then be inherited by each application component. 23 00:02:21,840 --> 00:02:29,970 So if it is way up in the hierarchy with it can be inherited by other components that uses the application 24 00:02:30,410 --> 00:02:34,230 that that way it be available to all of them. 25 00:02:34,320 --> 00:02:42,290 So it will only be created and destroyed when the application is started and stopped. 26 00:02:42,310 --> 00:02:48,700 So this is the most efficient way to create such methods so we're going to do that now. 27 00:02:48,960 --> 00:02:56,180 So doing it this way will create a new bitmap each time the application loads. 28 00:02:56,190 --> 00:03:04,920 And it also means that the data contained within that bitmap will also be accessible to every method 29 00:03:05,460 --> 00:03:08,880 in the application. 30 00:03:08,880 --> 00:03:11,550 So let's define the variables. 31 00:03:11,550 --> 00:03:17,170 I'm just going to define it here so that it can be accessible to or application. 32 00:03:17,580 --> 00:03:20,930 So let's define the bitmap variable first. 33 00:03:21,250 --> 00:03:30,930 So type in bitmap which will be the type space followed by the name calling it BNP. 34 00:03:31,320 --> 00:03:36,720 I'm gonna set that we're gonna create a new instance of that and to do that you type in the word new 35 00:03:38,340 --> 00:03:42,830 type in the word bitmap. 36 00:03:43,110 --> 00:03:47,670 All right we're gonna pass it some resolution. 37 00:03:47,670 --> 00:03:53,040 This is the standard resolution that most screen use 38 00:03:58,710 --> 00:04:01,250 but you know you can change that if you want. 39 00:04:01,290 --> 00:04:01,590 What. 40 00:04:01,590 --> 00:04:09,330 By setting the resolution that means you babe only able to draw within this dimension. 41 00:04:09,420 --> 00:04:13,730 So if you draw outside that some of your drawings may appear on the edges. 42 00:04:14,250 --> 00:04:20,960 So this is just specified for this application while you can tweak it if you wish. 43 00:04:21,210 --> 00:04:31,830 So they could the code were written here on line 15 create a bitmap that I have called B MP and I have 44 00:04:31,830 --> 00:04:37,280 also defined the size to be 10 to four by 7 6 8. 45 00:04:37,320 --> 00:04:40,200 This is a common screen resolution. 46 00:04:40,200 --> 00:04:47,100 What this means is that we can only draw on a canvas of this size. 47 00:04:47,130 --> 00:04:55,170 So if your windows is any bigger you won't be able to draw in to the edges because of the screen size. 48 00:04:55,200 --> 00:04:57,160 We have defined here. 49 00:04:58,920 --> 00:05:05,560 I'm just going to add two other variables so that they can be accessible from anywhere within the application. 50 00:05:05,670 --> 00:05:13,150 I'll add them on then I'll explain what they do in a minute. 51 00:05:17,150 --> 00:05:20,820 So this would be a pen. 52 00:05:20,820 --> 00:05:26,940 Give me the letter P create in your sense with the word new 53 00:05:30,900 --> 00:05:33,270 and then pass it some parameters 54 00:05:49,690 --> 00:05:59,220 and I'll create another parable which would be a boolean value which means true or false. 55 00:06:00,320 --> 00:06:02,690 And how sad a default to force 56 00:06:07,150 --> 00:06:10,210 so the other two variables I've created here is a pen. 57 00:06:10,240 --> 00:06:20,200 So this pen here represents the pen color so that any of the palette palette buttons the colors on the 58 00:06:20,260 --> 00:06:21,610 form can be changed. 59 00:06:21,610 --> 00:06:29,410 Using that pen color and the next variable here I've set here is the drawing. 60 00:06:29,440 --> 00:06:35,260 Basically what this would do will set this up and said that yes we'll set this so that whenever the 61 00:06:35,260 --> 00:06:44,830 left mouse button is held it's held down over the picture box a tool you know to activate a draw me 62 00:06:45,420 --> 00:06:51,190 so we'll do that will activate that via the picture box property. 63 00:06:51,190 --> 00:06:55,830 So let's switch back to the Design Review and click on the. 64 00:06:55,840 --> 00:07:05,100 Make sure you've got the picture box selected issued say picture box 1 so click on this event. 65 00:07:05,110 --> 00:07:07,990 This same that looks like a lightning bolt. 66 00:07:07,990 --> 00:07:09,280 What we're trying to do here. 67 00:07:09,310 --> 00:07:17,170 We need to create a method that will simply toggle the value of the drawing boolean call the boolean 68 00:07:17,170 --> 00:07:23,910 is either true or false or want a method that will toggle between the values of the drawing. 69 00:07:24,100 --> 00:07:30,820 So when the mouse button is depressed it gives a different value when it is released. 70 00:07:30,910 --> 00:07:33,940 It gives a different value to do this. 71 00:07:33,940 --> 00:07:38,440 We need to look for the mouse events so this is a mouse down. 72 00:07:39,010 --> 00:07:40,960 So where you've got the mouse down. 73 00:07:40,960 --> 00:07:49,400 This is where we want to specify the code that will control this event. 74 00:07:49,690 --> 00:07:59,320 So double click on the mouse down event and that should open up this event handler there. 75 00:07:59,440 --> 00:08:09,280 So what I'm going to do here I'm going to change the name of this method from mouse down to mouse click 76 00:08:12,870 --> 00:08:20,850 and the reason I have changed the name because I want it to be used by the mouse up event as well. 77 00:08:20,850 --> 00:08:30,480 So when the user releases the mouse button it will also you know activate the code. 78 00:08:30,480 --> 00:08:38,310 I'm going to quickly write some conditional statement here and if statement that will display that will 79 00:08:38,730 --> 00:08:44,840 display a certain code based on the action of the user. 80 00:08:46,530 --> 00:08:49,690 So the conditional statement are written here. 81 00:08:49,710 --> 00:08:51,890 This is a conditional statement. 82 00:08:52,050 --> 00:09:02,350 Basically what is saying that if this this variable here is access the drawing the default is false. 83 00:09:02,610 --> 00:09:05,760 Else if it's not false then the drawing will be true. 84 00:09:06,150 --> 00:09:15,210 So based on the mouse click OK on the mouse click or the mouse down key based on the button the users 85 00:09:15,210 --> 00:09:20,620 presses it will activate either of this code based on that. 86 00:09:20,790 --> 00:09:21,420 So that's it. 87 00:09:21,420 --> 00:09:29,030 We are going to end this lecture here and in the next lecture will carry on writing some more code. 88 00:09:29,220 --> 00:09:35,730 So I'm going to save that column got some yellow strips here and will progressed with further code in 89 00:09:35,730 --> 00:09:36,720 the next lecture. 90 00:09:36,720 --> 00:09:37,710 Thanks for watching. 91 00:09:37,710 --> 00:09:38,360 Bye for now.