1 00:00:00,720 --> 00:00:02,730 Hello and welcome. 2 00:00:02,730 --> 00:00:13,530 This lecture is probably the most important part of the project because it could well we're right we'll 3 00:00:13,830 --> 00:00:22,550 be responsible for the pic show movement across the screen for this screen saver. 4 00:00:22,600 --> 00:00:32,010 While there are several task we are going to perform in this to make the two to make the drawing and 5 00:00:32,010 --> 00:00:36,540 movement of the pictures across the screen possible. 6 00:00:36,540 --> 00:00:42,760 So we're going to break it into several bits and pieces in task. 7 00:00:42,930 --> 00:00:49,710 The first task we are going to make the window update frequently. 8 00:00:49,710 --> 00:00:54,370 The second task is to want. 9 00:00:54,390 --> 00:00:59,630 We want every time that the windows sub dated. 10 00:00:59,730 --> 00:01:10,020 We want a loop that will loop over all the Brit pick in his list. 11 00:01:10,350 --> 00:01:10,690 All right. 12 00:01:10,710 --> 00:01:11,680 So there will be a loop. 13 00:01:11,730 --> 00:01:17,010 We'll try to implement a loop that will look through all the brick pick in the list. 14 00:01:17,010 --> 00:01:26,150 Also for each of the Brit pick we wanted to move to the left by two pixels. 15 00:01:27,020 --> 00:01:36,470 So we want to implement that for also if the Brit pick the position of the new pick. 16 00:01:36,980 --> 00:01:46,130 If the position is slightly off the screen we want to wrap it to the other side of the screen so that 17 00:01:46,190 --> 00:01:47,830 it keeps on moving. 18 00:01:48,560 --> 00:01:51,380 So that also we want to implement. 19 00:01:51,380 --> 00:02:01,520 So these are these are the task we are hoping to implement to achieve the objective of drawing and making 20 00:02:01,520 --> 00:02:12,530 the pitches move across the screen in a way we've already kind of achieved the first option in that 21 00:02:12,560 --> 00:02:22,040 we have added a timer so just that we need to go back into the timer maybe enable the timer. 22 00:02:22,670 --> 00:02:29,270 So let's go to the click on the form design view and click on the timer at the bottom here and let's 23 00:02:29,270 --> 00:02:35,890 click on the properties for the timer and the end the timer at the moment by default is set to force. 24 00:02:35,900 --> 00:02:37,820 So what we're gonna do We're gonna send it to true. 25 00:02:37,840 --> 00:02:43,460 So it will kick in as soon as the application is loaded. 26 00:02:43,460 --> 00:02:46,610 At the moment we've got an interval of a hundred. 27 00:02:46,610 --> 00:02:58,820 What this means is that this will be the interval that the screen will refresh every 100 milli seconds. 28 00:02:58,850 --> 00:03:08,390 So for example if I said this to say 40 milliseconds what that means is that it will trigger every 40 29 00:03:08,390 --> 00:03:15,730 milliseconds we should give us a a refresh rate of 25 screens. 30 00:03:15,760 --> 00:03:20,500 So we have about twenty five screen updates per second. 31 00:03:20,690 --> 00:03:27,740 So if you want if you want your screen to keep refreshing you know that quick then you can set the interval 32 00:03:28,910 --> 00:03:42,630 to that level just to let you know one minute is equivalent to 60 seconds milliseconds and two minute 33 00:03:42,690 --> 00:03:48,320 it will give you a hundred and twenty milliseconds so if you want the screen to refresh every 1 minute 34 00:03:48,740 --> 00:03:53,540 then you can set it to sixty thousand milliseconds. 35 00:03:53,720 --> 00:04:01,190 If you wanted to refresh every two minutes you can set it to a hundred and twenty merely seconds. 36 00:04:01,220 --> 00:04:02,810 It's up to you. 37 00:04:02,810 --> 00:04:06,230 For me I'm going to you see the difference. 38 00:04:06,260 --> 00:04:10,170 We'll do our live at a forty four now but we'll change it later. 39 00:04:10,190 --> 00:04:15,040 So this 40 will give us about twenty five screen updates. 40 00:04:15,180 --> 00:04:22,200 Second that might be a bit too much but we'll play around with that figure later. 41 00:04:22,310 --> 00:04:30,560 We also need to add a line of code for our timer so click on the event the timeout only has one event 42 00:04:30,620 --> 00:04:32,980 which is a tick so double click on it. 43 00:04:33,200 --> 00:04:36,470 And here we are going to add just one line of code here. 44 00:04:36,690 --> 00:04:38,510 It's going to be a refresh method. 45 00:04:38,510 --> 00:04:42,670 There is a method called refresh Naga. 46 00:04:43,700 --> 00:04:52,700 So we're just gonna add that and that will enable that the screen refreshes based on the proper the 47 00:04:52,700 --> 00:04:54,570 interval will set. 48 00:04:54,660 --> 00:04:57,190 Just saved that. 49 00:04:57,200 --> 00:04:59,720 So what we going to try and achieve next. 50 00:04:59,750 --> 00:05:03,950 We want the window to redraw itself. 51 00:05:03,950 --> 00:05:04,370 All right. 52 00:05:04,400 --> 00:05:09,060 So are we going to implement this through the movement and the drawing. 53 00:05:09,110 --> 00:05:14,310 So what we're going to do going to go there is an event called paint event. 54 00:05:14,360 --> 00:05:16,790 This is what we're going to use to achieve that. 55 00:05:16,790 --> 00:05:23,210 So according to the form design and click on y you will form selected. 56 00:05:23,210 --> 00:05:32,620 Make sure you've got the events section and if you scroll down this should be a property called Paint. 57 00:05:33,880 --> 00:05:34,440 Okay. 58 00:05:34,450 --> 00:05:35,980 Think is right there. 59 00:05:36,120 --> 00:05:40,610 So let's have a look all right. 60 00:05:40,610 --> 00:05:43,010 So here we've got the property here. 61 00:05:43,010 --> 00:05:45,050 Cord paint. 62 00:05:45,110 --> 00:05:55,520 So this is what is going to be used to draw and responsible for the movement on the screen as well. 63 00:05:55,520 --> 00:06:03,410 So let's double click on the paint event to generate a stub event and also double click. 64 00:06:03,410 --> 00:06:06,330 So this is our paint event. 65 00:06:06,350 --> 00:06:10,780 So in between the curly braces is where we'll write some code. 66 00:06:11,180 --> 00:06:13,980 So added some code here in blue. 67 00:06:14,510 --> 00:06:18,810 So this is the code added inclusive of that. 68 00:06:18,830 --> 00:06:20,000 OK. 69 00:06:20,060 --> 00:06:20,380 All right. 70 00:06:20,390 --> 00:06:27,310 So here that we have attached a for each for each loop that will look through this here. 71 00:06:27,320 --> 00:06:34,660 So this class and this class as well in this. 72 00:06:34,700 --> 00:06:39,000 So basically it will loop through that and grab that inside this picture. 73 00:06:40,100 --> 00:06:45,010 So here are a bunch of variables. 74 00:06:45,080 --> 00:06:49,360 So this here is what we'll do the drawing of the images. 75 00:06:49,520 --> 00:06:54,110 Position them on the x axis and on the y axis. 76 00:06:54,220 --> 00:06:54,530 OK. 77 00:06:54,550 --> 00:06:59,330 So this will do the drawing and positioning. 78 00:06:59,660 --> 00:07:03,780 Also I have attached an if statement here. 79 00:07:04,490 --> 00:07:13,490 What this will do to basically what it's saying that if the object moves off the left edge of the screen 80 00:07:14,120 --> 00:07:17,000 move it back to the right H. 81 00:07:17,000 --> 00:07:19,960 That's what this piece of code is say. 82 00:07:20,450 --> 00:07:24,180 What we have done here we have. 83 00:07:24,770 --> 00:07:30,440 We've overridden the default behavior of the of the window. 84 00:07:30,440 --> 00:07:37,110 So the normal drawing behavior on Windows is to have every control painted paint itself. 85 00:07:37,610 --> 00:07:37,990 Okay. 86 00:07:38,000 --> 00:07:40,910 So Windows tells your window to draw itself. 87 00:07:40,910 --> 00:07:42,020 So it does. 88 00:07:42,110 --> 00:07:46,420 But what we're doing here we've overwritten that default behavior. 89 00:07:46,430 --> 00:07:55,220 We don't want the windows to draw itself and we don't want to try to draw any child control either because 90 00:07:55,220 --> 00:07:58,310 that's obviously a big waste of resources. 91 00:07:58,310 --> 00:08:06,360 So instead what we've done we use the paint event and do the drawing ourself. 92 00:08:06,500 --> 00:08:11,950 The result of this is that we essentially have a nice blank canvas to draw. 93 00:08:12,400 --> 00:08:13,290 Okay. 94 00:08:13,590 --> 00:08:19,900 Hands is handed over to controlled by this paint. 95 00:08:19,970 --> 00:08:20,830 This event here. 96 00:08:20,840 --> 00:08:26,630 This is what controls the activity of the canvas at the moment. 97 00:08:26,630 --> 00:08:34,280 It's got a black background which will set which was set when the form was generated with the project 98 00:08:34,370 --> 00:08:42,150 initially so save all your code anywhere you find yellow strips it means your code has not been saved. 99 00:08:42,150 --> 00:08:46,290 Look save make sure there are no arrows always click on this. 100 00:08:46,290 --> 00:08:51,600 That's a tab here that says Error list always click on that if there's any arrows in your code it will 101 00:08:51,600 --> 00:08:53,640 tell you if you've got no arrows. 102 00:08:53,670 --> 00:08:55,350 That means you're doing great. 103 00:08:55,350 --> 00:08:56,430 So save your code. 104 00:08:56,460 --> 00:09:01,340 And in our next lecture we'll test what we have done. 105 00:09:01,350 --> 00:09:02,580 Thanks for watching. 106 00:09:02,580 --> 00:09:03,180 By for at.