1 00:00:00,570 --> 00:00:02,370 To begin, as always, head over 2 00:00:02,370 --> 00:00:07,050 to the course resources and download the starting project as a zip file. 3 00:00:07,770 --> 00:00:10,470 Now, once you've unzipped it, open it using PyCharm 4 00:00:11,820 --> 00:00:15,360 and go ahead and take a look inside the starting files. 5 00:00:16,079 --> 00:00:18,300 I've included a logo image 6 00:00:18,360 --> 00:00:21,450 which is going to be used in our project. 7 00:00:21,930 --> 00:00:25,890 And I've got also a very, very blank looking at main.py. 8 00:00:26,580 --> 00:00:30,810 Now here comes a challenge already. To start out, 9 00:00:30,810 --> 00:00:35,790 we're going to create a window using tkinter that has a title of Password 10 00:00:35,790 --> 00:00:36,623 Manager. 11 00:00:36,960 --> 00:00:41,960 And the only thing that it's going to have is just a canvas widget displaying 12 00:00:43,110 --> 00:00:44,430 that logo image. 13 00:00:44,790 --> 00:00:48,210 So the canvas is going to have a width and height of 200 pixels, 14 00:00:48,690 --> 00:00:53,690 and the canvas is going to be padded from the edge of the window by 20 pixels on 15 00:00:54,420 --> 00:00:55,440 all four sides 16 00:00:55,620 --> 00:01:00,570 so that way it could look quite centered like this. And this image finally is 17 00:01:00,570 --> 00:01:03,300 going to be bang in the center of the canvas. 18 00:01:04,769 --> 00:01:08,580 So I want you to think back to what you learned yesterday about the canvas 19 00:01:08,580 --> 00:01:10,890 widget and in the course resources, 20 00:01:10,920 --> 00:01:14,730 I've linked to this page on the canvas documentation 21 00:01:15,090 --> 00:01:18,300 including that all important create_image method. 22 00:01:18,690 --> 00:01:21,840 Have a look through this for what the expected inputs are 23 00:01:22,110 --> 00:01:26,340 and you can also scroll up to see more of the references on other things that 24 00:01:26,340 --> 00:01:27,660 you can do with the canvas. 25 00:01:28,110 --> 00:01:31,110 Or just have a quick look through yesterday's code if you need to. 26 00:01:31,620 --> 00:01:36,620 But I want you to be able to create a tkinter program using all the things 27 00:01:36,870 --> 00:01:38,730 that you've learned and when you run it, 28 00:01:38,730 --> 00:01:42,180 it should look pretty much the same as this. Pause 29 00:01:42,180 --> 00:01:44,100 the video and complete this challenge, 30 00:01:44,960 --> 00:01:45,793 Okay. 31 00:01:47,420 --> 00:01:50,360 So to begin, we're going to go to the very top of our file, 32 00:01:50,480 --> 00:01:54,080 and I'm going to import all of the classes inside tkinter 33 00:01:54,590 --> 00:01:58,100 and I'm going to use that to do my UI setup. As always, 34 00:01:58,100 --> 00:02:00,020 I start out creating a window 35 00:02:02,000 --> 00:02:03,350 and then give it a title. 36 00:02:04,790 --> 00:02:08,780 And then I'm going to get my window to start out with my main loop. 37 00:02:09,350 --> 00:02:11,990 Now in between, I'm going to create my canvas. 38 00:02:14,030 --> 00:02:18,440 And this is from the canvas widget. Now this canvas widget, as I mentioned, 39 00:02:18,440 --> 00:02:23,440 is going to have a height of 200 and a width of 200. 40 00:02:25,160 --> 00:02:26,120 And in addition, 41 00:02:26,120 --> 00:02:31,120 it's going to display this logo.png inside as the image. 42 00:02:31,640 --> 00:02:35,060 So I'm going to create our logo image from the photo image class, 43 00:02:35,330 --> 00:02:38,000 and then I have to provide the filename. 44 00:02:38,330 --> 00:02:42,740 So the filename is just simply logo.png in this case 45 00:02:42,770 --> 00:02:47,720 because they're both inside the same folder. So once I've created my image, 46 00:02:47,750 --> 00:02:52,730 I can tell my canvas to create a image inside the canvas 47 00:02:53,150 --> 00:02:56,030 and then I can specify the image name 48 00:02:56,480 --> 00:03:00,550 and that is of course going to be my logo image. Now, 49 00:03:00,580 --> 00:03:04,240 the other thing that I have to do before I can actually run my code, 50 00:03:04,720 --> 00:03:08,770 because at the moment it's actually going to give me an error and the error 51 00:03:08,770 --> 00:03:10,720 says tuple index out of range. 52 00:03:10,780 --> 00:03:14,650 It's basically expecting some sort of a tuple to work on 53 00:03:14,680 --> 00:03:19,680 and that tuple is the define what the X and Y position is of this image on 54 00:03:20,110 --> 00:03:24,430 the canvas. So we do that by simply just adding the raw numbers. 55 00:03:24,550 --> 00:03:28,570 So the X position of the center of the image is going to be 100, 56 00:03:28,900 --> 00:03:32,980 because remember that the width is 200 so half of that is 100. 57 00:03:33,340 --> 00:03:37,510 And similarly for the Y position, it's also going to be 100. 58 00:03:38,020 --> 00:03:40,750 So this way we've got the X and Y position to find, 59 00:03:40,960 --> 00:03:43,840 and we've created the canvas size. Now, 60 00:03:43,840 --> 00:03:48,730 all we need to do is to get our canvas to have some sort of layout dimension. 61 00:03:49,210 --> 00:03:53,740 I'm just going to start out by packing my canvas onto the screen because later 62 00:03:53,740 --> 00:03:57,760 on, once we have more components, then we can think about using more fancy things 63 00:03:57,760 --> 00:04:01,330 like the grid. Now, if I run this as it is, 64 00:04:01,480 --> 00:04:06,480 then you can see that I've created my password manager window and I've created 65 00:04:07,930 --> 00:04:09,940 my 200 by 200 canvas. 66 00:04:10,330 --> 00:04:15,040 The only requirement I haven't yet satisfied is adding some padding between the 67 00:04:15,040 --> 00:04:16,540 window and that canvas. 68 00:04:16,750 --> 00:04:20,290 So let's do that using our window.config, 69 00:04:20,769 --> 00:04:24,820 and I'm going to set the padding using the padx and pady. 70 00:04:25,270 --> 00:04:26,380 And as we mentioned, 71 00:04:26,440 --> 00:04:30,550 I'm going to set that to 20 on the X and 20 on the Y. 72 00:04:31,420 --> 00:04:36,420 So now we get pretty much exactly the image that you saw in the demonstration, 73 00:04:37,030 --> 00:04:39,610 and this is the end result we were looking for. 74 00:04:40,390 --> 00:04:42,910 Did you manage to complete this challenge? 75 00:04:43,360 --> 00:04:46,900 If not, be sure to review some of the lessons that we learned yesterday 76 00:04:47,110 --> 00:04:49,990 where we went through the canvas widget in great detail. 77 00:04:50,920 --> 00:04:54,580 But if you're happy with all of this code, then in the next lesson, 78 00:04:54,760 --> 00:04:58,540 we're going to be learning more about the grid system and how to lay out a 79 00:04:58,540 --> 00:05:02,830 complex user interface like this one. So for all of that and more, 80 00:05:02,980 --> 00:05:03,520 I'll see you there.