1 00:00:00,390 --> 00:00:00,780 All right. 2 00:00:00,780 --> 00:00:04,770 So hopefully you've headed over to the course resources and downloaded the 3 00:00:04,770 --> 00:00:09,480 starting zip file for today's project. So go ahead and unzip it. 4 00:00:09,660 --> 00:00:12,780 And then let's open up this folder using PyCharm. 5 00:00:16,700 --> 00:00:16,910 Okay. 6 00:00:16,910 --> 00:00:20,900 Here you've already got two folders, data and images. 7 00:00:21,260 --> 00:00:26,030 We're going to be using all of these images inside the images folder to create 8 00:00:26,090 --> 00:00:29,630 our project. So this is the front of the flashcard, 9 00:00:29,960 --> 00:00:33,860 the back of the flashcard, the right button and the wrong button. 10 00:00:35,210 --> 00:00:40,100 And we're going to be writing our code inside main.py. So notice here 11 00:00:40,100 --> 00:00:43,280 we've already got the background color hex code defined. 12 00:00:43,310 --> 00:00:47,870 So we'll be able to use it in our coding as well. This is what we're aiming for. 13 00:00:47,900 --> 00:00:50,570 This is the user interface for this program. 14 00:00:51,110 --> 00:00:56,110 It's going to have a window with a title and inside this window, 15 00:00:56,390 --> 00:01:00,980 we're going to have the card front image here showing up. 16 00:01:01,220 --> 00:01:04,489 And on that card, we're going to have two pieces of text, 17 00:01:04,970 --> 00:01:09,140 a word that says title and a piece of text that just says word. 18 00:01:09,680 --> 00:01:13,340 And these are going to be formatted according to the instructions, 19 00:01:13,370 --> 00:01:17,450 so in terms of font and size, et cetera. Finally, at the bottom, 20 00:01:17,450 --> 00:01:21,140 we've got two buttons, a cross, and a checkmark. 21 00:01:21,560 --> 00:01:26,560 And they're basically buttons that have the images right and wrong inside them. 22 00:01:27,410 --> 00:01:30,260 Let's get started. Inside main.py, 23 00:01:30,290 --> 00:01:34,640 the first thing I'm going to do is to go ahead and import tkinter. 24 00:01:35,390 --> 00:01:38,360 So I'm going to import all the classes from tkinter 25 00:01:38,810 --> 00:01:41,540 and then I'll be able to use it to create my window. 26 00:01:45,200 --> 00:01:45,590 All right. 27 00:01:45,590 --> 00:01:50,590 I'm going to set a title for my window and I'm going to give it the name of our 28 00:01:50,870 --> 00:01:51,260 app 29 00:01:51,260 --> 00:01:56,260 which is going to be called Flashy or whatever it is you want to call it. Next, 30 00:01:56,630 --> 00:01:58,370 I'm going to give this window, um, 31 00:01:58,400 --> 00:02:03,400 a configuration and I'm going to set the padding of the window to 50 pixels in 32 00:02:04,310 --> 00:02:07,310 the X and 50 pixels in the Y. 33 00:02:08,960 --> 00:02:12,290 Now this window is also going to have a background color 34 00:02:12,320 --> 00:02:15,680 which is going to be set to this BACKGROUND_COLOR 35 00:02:15,680 --> 00:02:17,450 constant that we have up here. 36 00:02:18,650 --> 00:02:21,230 So now that I'm done configuring my window, 37 00:02:21,260 --> 00:02:26,260 I can go ahead and get my window to start off in the main loop. 38 00:02:26,720 --> 00:02:31,010 And now I should be able to run this code and just check that it works. 39 00:02:31,580 --> 00:02:34,550 Here's our window with the background color 40 00:02:34,820 --> 00:02:38,030 and there's already some padding in it and making this window a little bit 41 00:02:38,030 --> 00:02:39,710 bigger. Now, 42 00:02:39,740 --> 00:02:44,740 the next thing to do is to somehow put this card front image onto our window. 43 00:02:46,490 --> 00:02:48,860 I'm going to be using a canvas object. 44 00:02:49,400 --> 00:02:54,400 And if you remember, canvas object allows us to layer lots of things on top 45 00:02:54,740 --> 00:02:57,890 of each other. So here is an image and then on top of that, 46 00:02:57,890 --> 00:02:59,770 we've got some text being created. 47 00:03:00,190 --> 00:03:03,730 And as long as we specify the position for each of these items, 48 00:03:04,000 --> 00:03:06,610 it can all be overlapped on top of each other. 49 00:03:07,420 --> 00:03:11,020 So we're creating our canvas from the canvas class 50 00:03:11,440 --> 00:03:14,680 and then I'm going to give my canvas a width and height. 51 00:03:15,190 --> 00:03:19,240 So I'm going to set the width and height to be the same as the width and height 52 00:03:19,270 --> 00:03:20,380 of my card. 53 00:03:20,740 --> 00:03:24,400 So the width is 800 and the height is 526. 54 00:03:25,600 --> 00:03:30,070 You should've seen these numbers in the instructions as well. Next, 55 00:03:30,100 --> 00:03:34,030 we're going to create our image from the photo image class. 56 00:03:34,360 --> 00:03:38,080 So let's call it card_front_img 57 00:03:38,560 --> 00:03:41,980 and this is going to be created from the photo image class 58 00:03:42,220 --> 00:03:45,910 where we have to specify a file name. Now, previously, 59 00:03:45,940 --> 00:03:49,600 all we've done is we've just said the actual name of the file, 60 00:03:49,630 --> 00:03:54,610 which in this case is card_front.png. But in our case, 61 00:03:54,880 --> 00:03:59,530 this particular file is actually inside our images folder. 62 00:03:59,950 --> 00:04:04,950 So we have to specify the full file path for this to work; images/card_ 63 00:04:05,560 --> 00:04:06,550 front.png. 64 00:04:07,210 --> 00:04:11,620 And then we can get ahold of our canvas and create our image inside. 65 00:04:12,160 --> 00:04:16,420 So the image is going to be set to our card_front_img 66 00:04:16,990 --> 00:04:21,990 and then we have to specify the X and Y values of that image. Because it needs 67 00:04:22,120 --> 00:04:24,040 to go into the center of the canvas, 68 00:04:24,250 --> 00:04:28,270 we're just going to half the width for the X and half the height for the Y. 69 00:04:28,750 --> 00:04:30,760 So this goes in as a tuple 70 00:04:31,030 --> 00:04:34,630 so half of 526 is 263 71 00:04:35,470 --> 00:04:40,470 and then I'm just going to put our canvas onto the grid and I'm going to set the 72 00:04:41,110 --> 00:04:45,550 row to zero and the column to zero as well. 73 00:04:46,240 --> 00:04:50,080 Now, just be careful when you're writing strings like this, 74 00:04:50,110 --> 00:04:55,110 because it's pretty easy to make a typo like I have here. Instead, 75 00:04:56,980 --> 00:04:59,440 I prefer using PyCharm's autofill. 76 00:04:59,470 --> 00:05:02,140 So when you have a file path, 77 00:05:02,170 --> 00:05:07,030 you can type in the name of the folder forwardslash and then the name of the 78 00:05:07,060 --> 00:05:11,770 file. And we can just hit enter for it to insert it for us automatically. 79 00:05:12,880 --> 00:05:15,100 Now, if I go ahead and hit run, 80 00:05:16,630 --> 00:05:21,430 then I'll see that I've got a background which has the background color, 81 00:05:21,910 --> 00:05:26,910 and then 50 pixels of padding on all four sides, in the middle 82 00:05:27,310 --> 00:05:29,650 I've got my canvas displaying 83 00:05:29,650 --> 00:05:34,650 this card_front.png. The only thing about this card is that it's still got 84 00:05:35,380 --> 00:05:39,220 that white background. How do we get rid of that? Well, 85 00:05:39,250 --> 00:05:44,140 we can change the background into the same color as everything else, 86 00:05:44,170 --> 00:05:48,070 so this background color. Let's go ahead and get our canvas 87 00:05:48,100 --> 00:05:51,850 and then let's config it to have a background color 88 00:05:52,150 --> 00:05:56,110 that's set equal to our constant like this. 89 00:05:56,870 --> 00:05:59,270 Now the background color is the same, 90 00:05:59,780 --> 00:06:04,780 but we now have a line that is all around our canvas. 91 00:06:05,930 --> 00:06:08,510 If you remember from previous lessons, 92 00:06:08,870 --> 00:06:13,870 I told you that you can simply get rid of the highlight thickness and set it to 93 00:06:14,810 --> 00:06:18,920 zero. And that basically just gets rid of that border. 94 00:06:19,430 --> 00:06:24,430 So now we have a window with our flashcard showing up and the image has the 95 00:06:25,580 --> 00:06:29,000 shadows which I created in illustrator 96 00:06:29,270 --> 00:06:33,530 so that you'll be able to see it as a 3D card. Now, 97 00:06:33,560 --> 00:06:36,800 inside the card, not only do we have an image, 98 00:06:37,100 --> 00:06:39,440 but we also want to have some text. 99 00:06:39,770 --> 00:06:44,770 So let's go ahead and create some text. And we can set the text to say Title. 100 00:06:46,820 --> 00:06:50,150 So this is the first piece of text. In addition, 101 00:06:50,180 --> 00:06:54,020 I'm going to set the font to a tuple 102 00:06:54,050 --> 00:06:58,850 which is going to use the Arial font, and then it's going to be 40 size 103 00:06:59,060 --> 00:07:03,350 and finally I'm going to make it italic. Now, 104 00:07:03,380 --> 00:07:04,520 before we can hit run, 105 00:07:04,550 --> 00:07:09,140 we also have to specify a X and Y position for our text. 106 00:07:09,440 --> 00:07:13,190 So our image was created at 400 X, 263 107 00:07:13,190 --> 00:07:18,190 Y, our text is going to be created at 400 X and 150 Y. 108 00:07:19,700 --> 00:07:23,720 Now remember that these positions are relative to the canvas. 109 00:07:24,020 --> 00:07:27,920 So 400 makes it halfway along the width 110 00:07:28,400 --> 00:07:32,510 and then this 150 is going to make it a little bit towards the top 111 00:07:32,810 --> 00:07:36,470 so that's a good position for the title. Next, 112 00:07:36,500 --> 00:07:38,900 we're going to create another piece of text 113 00:07:39,020 --> 00:07:44,020 and this piece of text is going to be the actual word, so that the French word or 114 00:07:44,210 --> 00:07:45,043 the English word. 115 00:07:45,530 --> 00:07:49,580 So we're going to set it at the center of our canvass 116 00:07:49,910 --> 00:07:52,100 so exactly centered on the image, 117 00:07:52,520 --> 00:07:57,520 and then we're going to say that the text is going to be equal to the word for 118 00:07:59,270 --> 00:08:01,820 now anyways. Later on we'll probably change it. 119 00:08:02,240 --> 00:08:05,420 And then the font is again also Arial. 120 00:08:06,680 --> 00:08:11,680 And this time it's going to be a bit bigger and it's also going to be bold. So 121 00:08:12,110 --> 00:08:16,130 there we have it. We've got our flashcard pretty much all laid out. 122 00:08:16,790 --> 00:08:21,080 Now we just have to add our two buttons. Below our canvas 123 00:08:21,110 --> 00:08:25,520 I'm going to create two buttons. First, there's going to be the unknown button. 124 00:08:26,780 --> 00:08:29,750 This is going to be the X which the user presses 125 00:08:29,780 --> 00:08:32,360 because they don't know what's on the back of the flashcard. 126 00:08:33,020 --> 00:08:37,250 And this button is going to have a special attribute though, 127 00:08:37,610 --> 00:08:42,230 the image attribute and that image is going to be a photo image. 128 00:08:42,559 --> 00:08:45,290 So let's put this as the cross_image, 129 00:08:45,890 --> 00:08:47,870 and it's going to be a photo image 130 00:08:48,080 --> 00:08:50,960 which is going to be created from the images folder 131 00:08:51,440 --> 00:08:54,650 and it is the wrong.png. 132 00:08:55,830 --> 00:09:00,090 And that image is what's going to go inside our unknown button. 133 00:09:00,840 --> 00:09:05,010 Let's go ahead and layout our unknown button on the grid so that it'll actually 134 00:09:05,010 --> 00:09:07,350 show up. Row is going to be 1, 135 00:09:07,350 --> 00:09:11,190 so below the canvas, and then column is going to be 0. 136 00:09:12,960 --> 00:09:16,500 So now you can see our X button show up here. 137 00:09:17,340 --> 00:09:22,050 Next, I'm going to create the check_image. This is going to be the checkmark. 138 00:09:22,650 --> 00:09:24,480 And in this case, its again, 139 00:09:24,510 --> 00:09:29,010 a photo image created from a file 140 00:09:29,010 --> 00:09:33,450 which is in our images/right.png. 141 00:09:34,110 --> 00:09:38,100 And of course, you can always just double click on each of these images and view 142 00:09:38,100 --> 00:09:41,190 them and just make sure that they are the ones that you want to use. 143 00:09:42,480 --> 00:09:46,020 So once we've got our image, we can create our known_button. 144 00:09:46,800 --> 00:09:51,800 And this is going to now have a image attribute set to this check image. 145 00:09:56,550 --> 00:10:01,380 And then we can place our known_button onto the grid as well. 146 00:10:01,620 --> 00:10:06,000 So row = 1 and column is going to be equal to 1 as well. 147 00:10:06,300 --> 00:10:08,550 So its on the same row as the unknown button, 148 00:10:08,850 --> 00:10:12,630 but it's just shifted a little bit to the right. Now at this point 149 00:10:12,630 --> 00:10:13,710 if I run the code, 150 00:10:13,740 --> 00:10:18,740 you can see that our check button is all the way on the right while our canvas 151 00:10:19,350 --> 00:10:22,650 and our cross button are in the left most column. 152 00:10:23,130 --> 00:10:25,980 So you know what you need to do. You have to change 153 00:10:26,250 --> 00:10:31,200 this canvas grid to have a column span of 2. 154 00:10:31,590 --> 00:10:35,160 So it starts at column 0 but ends at column 1. 155 00:10:36,450 --> 00:10:37,620 Now when you run it, 156 00:10:37,620 --> 00:10:42,390 you can see it's nicely placed onto the screen in the way that we want it to 157 00:10:42,390 --> 00:10:46,680 look. Now, if you want to get rid of the border around the buttons, 158 00:10:47,040 --> 00:10:49,560 then the easiest way is to again, 159 00:10:49,590 --> 00:10:52,440 change the highlight thickness to 0. 160 00:10:52,920 --> 00:10:56,520 So lets add that here and here. 161 00:10:57,900 --> 00:10:59,640 But both on Mac and Windows, 162 00:10:59,690 --> 00:11:04,690 you'll see this fine line around the button and it's not easy to get rid of it 163 00:11:04,920 --> 00:11:09,720 because it's their so that you can click on the button and you can see this 164 00:11:09,750 --> 00:11:11,190 visible depression. 165 00:11:11,580 --> 00:11:16,080 That way it lets the user know that the button press was actually successful. 166 00:11:17,280 --> 00:11:18,300 But that's fine. 167 00:11:18,720 --> 00:11:23,720 And we're now pretty much done with our user interface. In the next step 168 00:11:24,360 --> 00:11:28,830 we're going to get rid of these placeholders, title and word, and we're going to 169 00:11:28,830 --> 00:11:33,600 start picking out the words from this french_words.csv, 170 00:11:33,900 --> 00:11:38,900 picking out random records like this or this so that we can put the French word 171 00:11:39,750 --> 00:11:43,620 into right here and change the title to say French. 172 00:11:44,310 --> 00:11:48,600 For all of that and more, head over to the next lesson and see the instructions.