WEBVTT

0
00:00.570 --> 00:02.370
To begin, as always, head over

1
00:02.370 --> 00:07.050
to the course resources and download the starting project as a zip file.

2
00:07.770 --> 00:10.470
Now, once you've unzipped it, open it using PyCharm

3
00:11.820 --> 00:15.360
and go ahead and take a look inside the starting files.

4
00:16.080 --> 00:18.300
I've included a logo image

5
00:18.360 --> 00:21.450
which is going to be used in our project.

6
00:21.930 --> 00:25.890
And I've got also a very, very blank looking at main.py.

7
00:26.580 --> 00:30.810
Now here comes a challenge already. To start out,

8
00:30.810 --> 00:35.790
we're going to create a window using tkinter that has a title of Password

9
00:35.790 --> 00:36.623
Manager.

10
00:36.960 --> 00:41.960
And the only thing that it's going to have is just a canvas widget displaying

11
00:43.110 --> 00:44.430
that logo image.

12
00:44.790 --> 00:48.210
So the canvas is going to have a width and height of 200 pixels,

13
00:48.690 --> 00:53.690
and the canvas is going to be padded from the edge of the window by 20 pixels on

14
00:54.420 --> 00:55.440
all four sides

15
00:55.620 --> 01:00.570
so that way it could look quite centered like this. And this image finally is

16
01:00.570 --> 01:03.300
going to be bang in the center of the canvas.

17
01:04.770 --> 01:08.580
So I want you to think back to what you learned yesterday about the canvas

18
01:08.580 --> 01:10.890
widget and in the course resources,

19
01:10.920 --> 01:14.730
I've linked to this page on the canvas documentation

20
01:15.090 --> 01:18.300
including that all important create_image method.

21
01:18.690 --> 01:21.840
Have a look through this for what the expected inputs are

22
01:22.110 --> 01:26.340
and you can also scroll up to see more of the references on other things that

23
01:26.340 --> 01:27.660
you can do with the canvas.

24
01:28.110 --> 01:31.110
Or just have a quick look through yesterday's code if you need to.

25
01:31.620 --> 01:36.620
But I want you to be able to create a tkinter program using all the things

26
01:36.870 --> 01:38.730
that you've learned and when you run it,

27
01:38.730 --> 01:42.180
it should look pretty much the same as this. Pause

28
01:42.180 --> 01:44.100
the video and complete this challenge,

29
01:44.960 --> 01:45.793
<v 1>Okay.</v>

30
01:47.420 --> 01:50.360
<v 0>So to begin, we're going to go to the very top of our file,</v>

31
01:50.480 --> 01:54.080
and I'm going to import all of the classes inside tkinter

32
01:54.590 --> 01:58.100
and I'm going to use that to do my UI setup. As always,

33
01:58.100 --> 02:00.020
I start out creating a window

34
02:02.000 --> 02:03.350
and then give it a title.

35
02:04.790 --> 02:08.780
And then I'm going to get my window to start out with my main loop.

36
02:09.350 --> 02:11.990
Now in between, I'm going to create my canvas.

37
02:14.030 --> 02:18.440
And this is from the canvas widget. Now this canvas widget, as I mentioned,

38
02:18.440 --> 02:23.440
is going to have a height of 200 and a width of 200.

39
02:25.160 --> 02:26.120
And in addition,

40
02:26.120 --> 02:31.120
it's going to display this logo.png inside as the image.

41
02:31.640 --> 02:35.060
So I'm going to create our logo image from the photo image class,

42
02:35.330 --> 02:38.000
and then I have to provide the filename.

43
02:38.330 --> 02:42.740
So the filename is just simply logo.png in this case

44
02:42.770 --> 02:47.720
because they're both inside the same folder. So once I've created my image,

45
02:47.750 --> 02:52.730
I can tell my canvas to create a image inside the canvas

46
02:53.150 --> 02:56.030
and then I can specify the image name

47
02:56.480 --> 03:00.550
and that is of course going to be my logo image. Now,

48
03:00.580 --> 03:04.240
the other thing that I have to do before I can actually run my code,

49
03:04.720 --> 03:08.770
because at the moment it's actually going to give me an error and the error

50
03:08.770 --> 03:10.720
says tuple index out of range.

51
03:10.780 --> 03:14.650
It's basically expecting some sort of a tuple to work on

52
03:14.680 --> 03:19.680
and that tuple is the define what the X and Y position is of this image on

53
03:20.110 --> 03:24.430
the canvas. So we do that by simply just adding the raw numbers.

54
03:24.550 --> 03:28.570
So the X position of the center of the image is going to be 100,

55
03:28.900 --> 03:32.980
because remember that the width is 200 so half of that is 100.

56
03:33.340 --> 03:37.510
And similarly for the Y position, it's also going to be 100.

57
03:38.020 --> 03:40.750
So this way we've got the X and Y position to find,

58
03:40.960 --> 03:43.840
and we've created the canvas size. Now,

59
03:43.840 --> 03:48.730
all we need to do is to get our canvas to have some sort of layout dimension.

60
03:49.210 --> 03:53.740
I'm just going to start out by packing my canvas onto the screen because later

61
03:53.740 --> 03:57.760
on, once we have more components, then we can think about using more fancy things

62
03:57.760 --> 04:01.330
like the grid. Now, if I run this as it is,

63
04:01.480 --> 04:06.480
then you can see that I've created my password manager window and I've created

64
04:07.930 --> 04:09.940
my 200 by 200 canvas.

65
04:10.330 --> 04:15.040
The only requirement I haven't yet satisfied is adding some padding between the

66
04:15.040 --> 04:16.540
window and that canvas.

67
04:16.750 --> 04:20.290
So let's do that using our window.config,

68
04:20.770 --> 04:24.820
and I'm going to set the padding using the padx and pady.

69
04:25.270 --> 04:26.380
And as we mentioned,

70
04:26.440 --> 04:30.550
I'm going to set that to 20 on the X and 20 on the Y.

71
04:31.420 --> 04:36.420
So now we get pretty much exactly the image that you saw in the demonstration,

72
04:37.030 --> 04:39.610
and this is the end result we were looking for.

73
04:40.390 --> 04:42.910
Did you manage to complete this challenge?

74
04:43.360 --> 04:46.900
If not, be sure to review some of the lessons that we learned yesterday

75
04:47.110 --> 04:49.990
where we went through the canvas widget in great detail.

76
04:50.920 --> 04:54.580
But if you're happy with all of this code, then in the next lesson,

77
04:54.760 --> 04:58.540
we're going to be learning more about the grid system and how to lay out a

78
04:58.540 --> 05:02.830
complex user interface like this one. So for all of that and more,

79
05:02.980 --> 05:03.520
I'll see you there.