WEBVTT

0
00:00.390 --> 00:00.780
All right.

1
00:00.780 --> 00:04.770
So hopefully you've headed over to the course resources and downloaded the

2
00:04.770 --> 00:09.480
starting zip file for today's project. So go ahead and unzip it.

3
00:09.660 --> 00:12.780
And then let's open up this folder using PyCharm.

4
00:16.700 --> 00:16.910
<v 1>Okay.</v>

5
00:16.910 --> 00:20.900
<v 0>Here you've already got two folders, data and images.</v>

6
00:21.260 --> 00:26.030
We're going to be using all of these images inside the images folder to create

7
00:26.090 --> 00:29.630
our project. So this is the front of the flashcard,

8
00:29.960 --> 00:33.860
the back of the flashcard, the right button and the wrong button.

9
00:35.210 --> 00:40.100
And we're going to be writing our code inside main.py. So notice here

10
00:40.100 --> 00:43.280
we've already got the background color hex code defined.

11
00:43.310 --> 00:47.870
So we'll be able to use it in our coding as well. This is what we're aiming for.

12
00:47.900 --> 00:50.570
This is the user interface for this program.

13
00:51.110 --> 00:56.110
It's going to have a window with a title and inside this window,

14
00:56.390 --> 01:00.980
we're going to have the card front image here showing up.

15
01:01.220 --> 01:04.490
And on that card, we're going to have two pieces of text,

16
01:04.970 --> 01:09.140
a word that says title and a piece of text that just says word.

17
01:09.680 --> 01:13.340
And these are going to be formatted according to the instructions,

18
01:13.370 --> 01:17.450
so in terms of font and size, et cetera. Finally, at the bottom,

19
01:17.450 --> 01:21.140
we've got two buttons, a cross, and a checkmark.

20
01:21.560 --> 01:26.560
And they're basically buttons that have the images right and wrong inside them.

21
01:27.410 --> 01:30.260
Let's get started. Inside main.py,

22
01:30.290 --> 01:34.640
the first thing I'm going to do is to go ahead and import tkinter.

23
01:35.390 --> 01:38.360
So I'm going to import all the classes from tkinter

24
01:38.810 --> 01:41.540
and then I'll be able to use it to create my window.

25
01:45.200 --> 01:45.590
<v 1>All right.</v>

26
01:45.590 --> 01:50.590
<v 0>I'm going to set a title for my window and I'm going to give it the name of our</v>

27
01:50.870 --> 01:51.260
app

28
01:51.260 --> 01:56.260
which is going to be called Flashy or whatever it is you want to call it. Next,

29
01:56.630 --> 01:58.370
I'm going to give this window, um,

30
01:58.400 --> 02:03.400
a configuration and I'm going to set the padding of the window to 50 pixels in

31
02:04.310 --> 02:07.310
the X and 50 pixels in the Y.

32
02:08.960 --> 02:12.290
Now this window is also going to have a background color

33
02:12.320 --> 02:15.680
which is going to be set to this BACKGROUND_COLOR

34
02:15.680 --> 02:17.450
constant that we have up here.

35
02:18.650 --> 02:21.230
So now that I'm done configuring my window,

36
02:21.260 --> 02:26.260
I can go ahead and get my window to start off in the main loop.

37
02:26.720 --> 02:31.010
And now I should be able to run this code and just check that it works.

38
02:31.580 --> 02:34.550
Here's our window with the background color

39
02:34.820 --> 02:38.030
and there's already some padding in it and making this window a little bit

40
02:38.030 --> 02:39.710
bigger. Now,

41
02:39.740 --> 02:44.740
the next thing to do is to somehow put this card front image onto our window.

42
02:46.490 --> 02:48.860
I'm going to be using a canvas object.

43
02:49.400 --> 02:54.400
And if you remember, canvas object allows us to layer lots of things on top

44
02:54.740 --> 02:57.890
of each other. So here is an image and then on top of that,

45
02:57.890 --> 02:59.770
we've got some text being created.

46
03:00.190 --> 03:03.730
And as long as we specify the position for each of these items,

47
03:04.000 --> 03:06.610
it can all be overlapped on top of each other.

48
03:07.420 --> 03:11.020
So we're creating our canvas from the canvas class

49
03:11.440 --> 03:14.680
and then I'm going to give my canvas a width and height.

50
03:15.190 --> 03:19.240
So I'm going to set the width and height to be the same as the width and height

51
03:19.270 --> 03:20.380
of my card.

52
03:20.740 --> 03:24.400
So the width is 800 and the height is 526.

53
03:25.600 --> 03:30.070
You should've seen these numbers in the instructions as well. Next,

54
03:30.100 --> 03:34.030
we're going to create our image from the photo image class.

55
03:34.360 --> 03:38.080
So let's call it card_front_img

56
03:38.560 --> 03:41.980
and this is going to be created from the photo image class

57
03:42.220 --> 03:45.910
where we have to specify a file name. Now, previously,

58
03:45.940 --> 03:49.600
all we've done is we've just said the actual name of the file,

59
03:49.630 --> 03:54.610
which in this case is card_front.png. But in our case,

60
03:54.880 --> 03:59.530
this particular file is actually inside our images folder.

61
03:59.950 --> 04:04.950
So we have to specify the full file path for this to work; images/card_

62
04:05.560 --> 04:06.550
front.png.

63
04:07.210 --> 04:11.620
And then we can get ahold of our canvas and create our image inside.

64
04:12.160 --> 04:16.420
So the image is going to be set to our card_front_img

65
04:16.990 --> 04:21.990
and then we have to specify the X and Y values of that image. Because it needs

66
04:22.120 --> 04:24.040
to go into the center of the canvas,

67
04:24.250 --> 04:28.270
we're just going to half the width for the X and half the height for the Y.

68
04:28.750 --> 04:30.760
So this goes in as a tuple

69
04:31.030 --> 04:34.630
so half of 526 is 263

70
04:35.470 --> 04:40.470
and then I'm just going to put our canvas onto the grid and I'm going to set the

71
04:41.110 --> 04:45.550
row to zero and the column to zero as well.

72
04:46.240 --> 04:50.080
Now, just be careful when you're writing strings like this,

73
04:50.110 --> 04:55.110
because it's pretty easy to make a typo like I have here. Instead,

74
04:56.980 --> 04:59.440
I prefer using PyCharm's autofill.

75
04:59.470 --> 05:02.140
So when you have a file path,

76
05:02.170 --> 05:07.030
you can type in the name of the folder forwardslash and then the name of the

77
05:07.060 --> 05:11.770
file. And we can just hit enter for it to insert it for us automatically.

78
05:12.880 --> 05:15.100
Now, if I go ahead and hit run,

79
05:16.630 --> 05:21.430
then I'll see that I've got a background which has the background color,

80
05:21.910 --> 05:26.910
and then 50 pixels of padding on all four sides, in the middle

81
05:27.310 --> 05:29.650
I've got my canvas displaying

82
05:29.650 --> 05:34.650
this card_front.png. The only thing about this card is that it's still got

83
05:35.380 --> 05:39.220
that white background. How do we get rid of that? Well,

84
05:39.250 --> 05:44.140
we can change the background into the same color as everything else,

85
05:44.170 --> 05:48.070
so this background color. Let's go ahead and get our canvas

86
05:48.100 --> 05:51.850
and then let's config it to have a background color

87
05:52.150 --> 05:56.110
that's set equal to our constant like this.

88
05:56.870 --> 05:59.270
Now the background color is the same,

89
05:59.780 --> 06:04.780
but we now have a line that is all around our canvas.

90
06:05.930 --> 06:08.510
If you remember from previous lessons,

91
06:08.870 --> 06:13.870
I told you that you can simply get rid of the highlight thickness and set it to

92
06:14.810 --> 06:18.920
zero. And that basically just gets rid of that border.

93
06:19.430 --> 06:24.430
So now we have a window with our flashcard showing up and the image has the

94
06:25.580 --> 06:29.000
shadows which I created in illustrator

95
06:29.270 --> 06:33.530
so that you'll be able to see it as a 3D card. Now,

96
06:33.560 --> 06:36.800
inside the card, not only do we have an image,

97
06:37.100 --> 06:39.440
but we also want to have some text.

98
06:39.770 --> 06:44.770
So let's go ahead and create some text. And we can set the text to say Title.

99
06:46.820 --> 06:50.150
So this is the first piece of text. In addition,

100
06:50.180 --> 06:54.020
I'm going to set the font to a tuple

101
06:54.050 --> 06:58.850
which is going to use the Arial font, and then it's going to be 40 size

102
06:59.060 --> 07:03.350
and finally I'm going to make it italic. Now,

103
07:03.380 --> 07:04.520
before we can hit run,

104
07:04.550 --> 07:09.140
we also have to specify a X and Y position for our text.

105
07:09.440 --> 07:13.190
So our image was created at 400 X, 263

106
07:13.190 --> 07:18.190
Y, our text is going to be created at 400 X and 150 Y.

107
07:19.700 --> 07:23.720
Now remember that these positions are relative to the canvas.

108
07:24.020 --> 07:27.920
So 400 makes it halfway along the width

109
07:28.400 --> 07:32.510
and then this 150 is going to make it a little bit towards the top

110
07:32.810 --> 07:36.470
so that's a good position for the title. Next,

111
07:36.500 --> 07:38.900
we're going to create another piece of text

112
07:39.020 --> 07:44.020
and this piece of text is going to be the actual word, so that the French word or

113
07:44.210 --> 07:45.043
the English word.

114
07:45.530 --> 07:49.580
So we're going to set it at the center of our canvass

115
07:49.910 --> 07:52.100
so exactly centered on the image,

116
07:52.520 --> 07:57.520
and then we're going to say that the text is going to be equal to the word for

117
07:59.270 --> 08:01.820
now anyways. Later on we'll probably change it.

118
08:02.240 --> 08:05.420
And then the font is again also Arial.

119
08:06.680 --> 08:11.680
And this time it's going to be a bit bigger and it's also going to be bold. So

120
08:12.110 --> 08:16.130
there we have it. We've got our flashcard pretty much all laid out.

121
08:16.790 --> 08:21.080
Now we just have to add our two buttons. Below our canvas

122
08:21.110 --> 08:25.520
I'm going to create two buttons. First, there's going to be the unknown button.

123
08:26.780 --> 08:29.750
This is going to be the X which the user presses

124
08:29.780 --> 08:32.360
because they don't know what's on the back of the flashcard.

125
08:33.020 --> 08:37.250
And this button is going to have a special attribute though,

126
08:37.610 --> 08:42.230
the image attribute and that image is going to be a photo image.

127
08:42.560 --> 08:45.290
So let's put this as the cross_image,

128
08:45.890 --> 08:47.870
and it's going to be a photo image

129
08:48.080 --> 08:50.960
which is going to be created from the images folder

130
08:51.440 --> 08:54.650
and it is the wrong.png.

131
08:55.830 --> 09:00.090
And that image is what's going to go inside our unknown button.

132
09:00.840 --> 09:05.010
Let's go ahead and layout our unknown button on the grid so that it'll actually

133
09:05.010 --> 09:07.350
show up. Row is going to be 1,

134
09:07.350 --> 09:11.190
so below the canvas, and then column is going to be 0.

135
09:12.960 --> 09:16.500
So now you can see our X button show up here.

136
09:17.340 --> 09:22.050
Next, I'm going to create the check_image. This is going to be the checkmark.

137
09:22.650 --> 09:24.480
And in this case, its again,

138
09:24.510 --> 09:29.010
a photo image created from a file

139
09:29.010 --> 09:33.450
which is in our images/right.png.

140
09:34.110 --> 09:38.100
And of course, you can always just double click on each of these images and view

141
09:38.100 --> 09:41.190
them and just make sure that they are the ones that you want to use.

142
09:42.480 --> 09:46.020
So once we've got our image, we can create our known_button.

143
09:46.800 --> 09:51.800
And this is going to now have a image attribute set to this check image.

144
09:56.550 --> 10:01.380
And then we can place our known_button onto the grid as well.

145
10:01.620 --> 10:06.000
So row = 1 and column is going to be equal to 1 as well.

146
10:06.300 --> 10:08.550
So its on the same row as the unknown button,

147
10:08.850 --> 10:12.630
but it's just shifted a little bit to the right. Now at this point

148
10:12.630 --> 10:13.710
if I run the code,

149
10:13.740 --> 10:18.740
you can see that our check button is all the way on the right while our canvas

150
10:19.350 --> 10:22.650
and our cross button are in the left most column.

151
10:23.130 --> 10:25.980
So you know what you need to do. You have to change

152
10:26.250 --> 10:31.200
this canvas grid to have a column span of 2.

153
10:31.590 --> 10:35.160
So it starts at column 0 but ends at column 1.

154
10:36.450 --> 10:37.620
Now when you run it,

155
10:37.620 --> 10:42.390
you can see it's nicely placed onto the screen in the way that we want it to

156
10:42.390 --> 10:46.680
look. Now, if you want to get rid of the border around the buttons,

157
10:47.040 --> 10:49.560
then the easiest way is to again,

158
10:49.590 --> 10:52.440
change the highlight thickness to 0.

159
10:52.920 --> 10:56.520
So lets add that here and here.

160
10:57.900 --> 10:59.640
But both on Mac and Windows,

161
10:59.690 --> 11:04.690
you'll see this fine line around the button and it's not easy to get rid of it

162
11:04.920 --> 11:09.720
because it's their so that you can click on the button and you can see this

163
11:09.750 --> 11:11.190
visible depression.

164
11:11.580 --> 11:16.080
That way it lets the user know that the button press was actually successful.

165
11:17.280 --> 11:18.300
But that's fine.

166
11:18.720 --> 11:23.720
And we're now pretty much done with our user interface. In the next step

167
11:24.360 --> 11:28.830
we're going to get rid of these placeholders, title and word, and we're going to

168
11:28.830 --> 11:33.600
start picking out the words from this french_words.csv,

169
11:33.900 --> 11:38.900
picking out random records like this or this so that we can put the French word

170
11:39.750 --> 11:43.620
into right here and change the title to say French.

171
11:44.310 --> 11:48.600
For all of that and more, head over to the next lesson and see the instructions.