Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,330 --> 00:00:03,620 The first thing I want you to do to get started is to head over 2 00:00:03,630 --> 00:00:08,340 to the course resources and download the starting files for the Pomodoro 3 00:00:08,340 --> 00:00:10,410 project. Once you've got that, 4 00:00:10,470 --> 00:00:15,470 then you should be able to unzip this file and get hold of the starting folder. 5 00:00:17,070 --> 00:00:20,640 Next, I want you to open up that folder using PyCharm. 6 00:00:21,240 --> 00:00:24,210 So in my case, my folder's inside my downloads, 7 00:00:24,480 --> 00:00:29,480 and then I'll just click open. And PyCharm should automatically configure the 8 00:00:29,880 --> 00:00:31,950 latest version of Python you've got installed. 9 00:00:32,580 --> 00:00:35,700 So if you take a look inside this folder, there's two files. 10 00:00:36,060 --> 00:00:40,680 There is a image of a tomato which we're going to use in our project, 11 00:00:41,070 --> 00:00:45,750 and there's also a main.py with a couple of sections already hashed out for 12 00:00:45,750 --> 00:00:49,320 you. And we've also included some constants, 13 00:00:49,380 --> 00:00:54,380 like some color hex codes or a font name or the number of minutes for working 14 00:00:55,170 --> 00:00:59,460 short breaks in a long breaks. So that's already in the starting file. 15 00:01:00,330 --> 00:01:03,840 The first thing we're going to do is to set up our UI. 16 00:01:03,870 --> 00:01:05,940 So under the section UI set up, 17 00:01:06,210 --> 00:01:09,720 we're going to create a new window using tkinter 18 00:01:10,110 --> 00:01:13,590 and we're going to get the window to run and give it a background color, 19 00:01:13,830 --> 00:01:14,663 pretty simple. 20 00:01:14,910 --> 00:01:19,290 So let's go to the top of our file and import our tkinter module. 21 00:01:19,740 --> 00:01:23,070 And then if we scroll down to our UI setup section, 22 00:01:23,310 --> 00:01:27,330 let's go ahead and create a new window from the tk class. 23 00:01:27,810 --> 00:01:32,250 Remember that our tk class is one of the classes from tkinter 24 00:01:32,610 --> 00:01:37,610 so you can either tap into the tkinter module and then get hold of the tk class 25 00:01:37,800 --> 00:01:40,560 like I have done here, or as in our case, 26 00:01:40,590 --> 00:01:43,920 if we're going to be using a lot of classes from tkinter 27 00:01:44,340 --> 00:01:49,340 then we can simply say from tkinter let's go ahead and import all of the 28 00:01:49,740 --> 00:01:54,450 classes. So that way we can straight away refer to this tk class. 29 00:01:55,170 --> 00:01:56,670 Now that we've created our window, 30 00:01:56,700 --> 00:02:01,050 the next thing we can do is to set the title of the window, 31 00:02:01,410 --> 00:02:05,040 which you can of course call it anything you want. But in my case, 32 00:02:05,040 --> 00:02:09,180 I'm going to set it to just Pomodoro, 33 00:02:09,720 --> 00:02:13,080 which just means tomato in Italian. 34 00:02:13,650 --> 00:02:15,990 So now that we've got our Pomodoro, 35 00:02:16,230 --> 00:02:21,230 then we're going to get our window to show up by using window.main loop as 36 00:02:22,290 --> 00:02:23,123 usual. 37 00:02:23,310 --> 00:02:28,310 And now if we run this, code our main, and you can see we've got a blank window, 38 00:02:28,980 --> 00:02:32,400 a title, and we're ready to go to the next step. 39 00:02:33,180 --> 00:02:38,180 The next step is to put an image into our program so that we can have this 40 00:02:39,630 --> 00:02:42,660 tomato as the background of our program, 41 00:02:43,020 --> 00:02:44,910 and then we can put some text on top 42 00:02:44,940 --> 00:02:49,710 which is going to signify our countdown timer. This is what we're aiming for, 43 00:02:49,920 --> 00:02:53,700 but to achieve this and to be able to put images onto the screen 44 00:02:54,000 --> 00:02:55,380 which look like this, 45 00:02:55,530 --> 00:03:00,040 we're going to have to learn about the tkinter canvas widget. A canvas 46 00:03:00,040 --> 00:03:03,550 widget is a little bit like a real life canvas, really. 47 00:03:03,820 --> 00:03:07,210 It allows you to layer things one on top of the others. 48 00:03:07,240 --> 00:03:10,630 So you could draw something and then you can draw something on top of that. 49 00:03:11,140 --> 00:03:16,140 And what it allows us to do in our case is to place an image onto our program 50 00:03:17,080 --> 00:03:19,870 and then to place some text straight on top of that. 51 00:03:21,400 --> 00:03:23,530 In between our window creation 52 00:03:23,590 --> 00:03:27,370 and the window main loop is where we're going to create our canvas. 53 00:03:27,790 --> 00:03:32,710 And our canvas is created using the canvas widget 54 00:03:32,740 --> 00:03:33,573 of course. 55 00:03:34,000 --> 00:03:39,000 One of the things that we can specify when we create our canvas is a width and 56 00:03:39,100 --> 00:03:43,420 a height, and that will be a value in terms of pixels. 57 00:03:44,020 --> 00:03:49,020 So we know that we want to display this tomato image inside that canvas. 58 00:03:50,020 --> 00:03:52,540 And we can see that this has a, 59 00:03:52,570 --> 00:03:56,470 roughly a width of 200 and a height of 223. 60 00:03:57,010 --> 00:04:01,330 So let's create a canvas that's roughly about the same size as the image. 61 00:04:01,810 --> 00:04:06,810 So we'll put a width of 200 and a height of 224 so that we work with some even 62 00:04:08,980 --> 00:04:12,250 numbers. Once I've created my canvas 63 00:04:12,310 --> 00:04:15,370 the next thing I want to do is to add my image to it. 64 00:04:16,000 --> 00:04:20,710 And we can use a method that the canvas has it which is called create_image. 65 00:04:21,130 --> 00:04:22,720 And as soon as I type create, 66 00:04:22,750 --> 00:04:26,440 you can see there's actually a whole bunch of other methods like create the text 67 00:04:26,440 --> 00:04:29,530 in the canvas, create a rectangle, create an oval. 68 00:04:29,770 --> 00:04:34,180 And all of these things could be overlapped on each other inside the same 69 00:04:34,240 --> 00:04:37,000 canvas. Now, when we create an image, 70 00:04:37,030 --> 00:04:42,030 there's a couple of things which are required. The first thing is the X and Y 71 00:04:42,880 --> 00:04:45,850 positions of this image in the canvas. 72 00:04:46,420 --> 00:04:50,950 Given that we have a width of 200 and a height of 224, 73 00:04:51,250 --> 00:04:56,250 I want my image to be bang in the center of the canvas. So I can provide the X 74 00:04:56,800 --> 00:05:01,660 value as half of the width and the Y value as half of the height. 75 00:05:02,560 --> 00:05:05,230 In addition to the X and Y values, 76 00:05:05,290 --> 00:05:08,080 we also have to specify a image. 77 00:05:08,530 --> 00:05:12,250 But I can't just simply just type the name of my image 78 00:05:12,520 --> 00:05:15,340 which is tomato.png, 79 00:05:15,760 --> 00:05:20,760 because that is not the type of data that this argument is expecting. 80 00:05:21,670 --> 00:05:25,660 What it wants instead is something called a photo image 81 00:05:26,050 --> 00:05:28,450 and this class comes from tkinter 82 00:05:28,750 --> 00:05:33,750 and it's basically a way to read through a file and to get hold of a particular 83 00:05:37,210 --> 00:05:41,380 image at a particular file location. In my case, 84 00:05:41,380 --> 00:05:44,980 the file location is in fact tomato.png. 85 00:05:45,610 --> 00:05:50,610 And if your image was stored in say another sub folder or a different place, 86 00:05:52,750 --> 00:05:57,750 then you should provide the relative or absolute file path to get there from 87 00:05:57,800 --> 00:06:01,100 where your code is, which is the main.py. But in our case 88 00:06:01,100 --> 00:06:03,170 it's very easy, they're both in the same folder, 89 00:06:03,650 --> 00:06:06,560 so we can simply specify our filename like 90 00:06:06,560 --> 00:06:11,560 so. The next thing we're going to do is we're going to save this photo image in a 91 00:06:11,900 --> 00:06:14,120 variable so we can refer to it later on. 92 00:06:14,600 --> 00:06:17,810 I'm going to call this our tomato_img. 93 00:06:17,990 --> 00:06:19,790 Feel free to call it anything you want. 94 00:06:20,450 --> 00:06:24,650 And that is the data that goes into this image argument. 95 00:06:25,430 --> 00:06:29,990 Now we've created our canvas, we've created our photo image, 96 00:06:30,320 --> 00:06:34,400 we've told our canvas to create an image at this position, 97 00:06:34,580 --> 00:06:36,740 and then we've put the image inside. 98 00:06:37,010 --> 00:06:42,010 The final thing we need to do is to pack our canvas or use some other sort of 99 00:06:42,350 --> 00:06:47,030 method to specify the layout of how the canvas is going to go on the screen. 100 00:06:47,480 --> 00:06:49,790 And now we can hit run, 101 00:06:50,180 --> 00:06:54,140 and we can see our image on the screen. 102 00:06:54,770 --> 00:06:59,270 So now notice how the image is basically taking up the entire space of the 103 00:06:59,270 --> 00:07:03,620 window. And in fact, the window is resizing itself to fit this image. 104 00:07:04,340 --> 00:07:08,150 Wouldn't it be better if this screen was actually a little bit bigger? 105 00:07:08,180 --> 00:07:10,850 So we don't just look at the image of a tomato. 106 00:07:11,690 --> 00:07:15,650 We can do that by getting our window to be configured. 107 00:07:15,980 --> 00:07:19,520 And the configuration that we want to change is the padding, 108 00:07:19,580 --> 00:07:24,580 so I'm going to change the padx and pady. On the X-axis on the horizontal 109 00:07:25,010 --> 00:07:29,090 I'm actually going to add a whole hundred pixels of padding on both sides. 110 00:07:29,390 --> 00:07:31,820 And then on the Yaxis, pady, 111 00:07:31,820 --> 00:07:36,820 I'm going to change that to 50 so that it's got 50 pixels of padding on the 112 00:07:36,860 --> 00:07:41,270 top. That's looking pretty good other than one small defect. 113 00:07:41,660 --> 00:07:46,190 You can see that our tomato image is a little bit cut off on the left 114 00:07:46,640 --> 00:07:51,640 and I suspect this is because the actual image is a little bit shifted over to 115 00:07:52,670 --> 00:07:53,390 the left. 116 00:07:53,390 --> 00:07:58,390 So we can actually adjust this X position to be a little bit more to the right, 117 00:07:59,270 --> 00:08:00,770 and that way our tomato 118 00:08:00,770 --> 00:08:04,310 can be centered on screen without being cut off on either side. 119 00:08:05,660 --> 00:08:10,340 So now that we've tweaked our image and we've displayed it on the screen, 120 00:08:10,820 --> 00:08:14,210 the next thing to do is to display some text. 121 00:08:14,840 --> 00:08:18,770 As you noticed before, in addition to canvas.create_image, 122 00:08:19,100 --> 00:08:23,330 they will a whole bunch of other things we could create, including some texts. 123 00:08:24,410 --> 00:08:29,240 This create_text method works very similarly to the create_image method. 124 00:08:29,720 --> 00:08:34,720 Notice how the first thing that's getting highlighted is the *args. 125 00:08:35,900 --> 00:08:39,290 And then we've got our **kw. 126 00:08:39,710 --> 00:08:42,620 So remember from the lessons yesterday, 127 00:08:42,950 --> 00:08:47,950 these arguments are the unlimited positional arguments and these arguments are 128 00:08:49,610 --> 00:08:54,140 the unlimited keyword arguments. So the keyword arguments here 129 00:08:54,140 --> 00:08:55,010 are for example the 130 00:08:55,260 --> 00:08:59,280 image or the background color or anything else, 131 00:08:59,610 --> 00:09:02,550 but these are the X and Y values. 132 00:09:03,090 --> 00:09:04,980 So creating the text, 133 00:09:05,010 --> 00:09:08,220 we also have to provide a X and Y value. 134 00:09:08,640 --> 00:09:13,410 So I'm just going to try the same values as the image to see how that looks. 135 00:09:14,280 --> 00:09:18,330 And now we can add some keyword arguments, for example, the text. 136 00:09:18,690 --> 00:09:22,020 So I just want it to say 00:00, 137 00:09:22,410 --> 00:09:26,040 which looks pretty much like the clock. Now, 138 00:09:26,070 --> 00:09:30,570 if we run our code, you can see we've got a little bit of text showing up. 139 00:09:31,140 --> 00:09:33,990 Now, notice how it's a little bit high up on the tomato, 140 00:09:34,020 --> 00:09:38,610 because remember the tomato starts at the top here and ends here. 141 00:09:38,910 --> 00:09:41,550 So that is the center of the tomato image, 142 00:09:41,820 --> 00:09:46,110 but we can move it down a little bit so that it's actually centered in this red 143 00:09:46,110 --> 00:09:50,700 part, the circular part. With a little bit of experimentation, 144 00:09:50,730 --> 00:09:55,110 I think this, 103, 130, actually works quite well 145 00:09:55,110 --> 00:09:57,870 and it's pretty much bang in the center of the tomato. 146 00:09:58,650 --> 00:10:03,650 Let's modify this text in some other ways. We can change the fill 147 00:10:04,620 --> 00:10:09,420 which is basically the color of the text and I'm going to change that to white, 148 00:10:09,510 --> 00:10:13,590 that you can see here. And then I'm going to change the font as well. 149 00:10:14,100 --> 00:10:16,140 And this is going to expect a tuple. 150 00:10:16,290 --> 00:10:20,760 So it's going to be the font name and then the size, and then whether, 151 00:10:20,760 --> 00:10:25,380 if it's bold or italic or whatever else you want to do. Now in the constants 152 00:10:25,380 --> 00:10:27,450 here, I've already got the font name defined, 153 00:10:27,480 --> 00:10:31,530 which is gonna be Courier that we're gonna be using. So that we can straight up 154 00:10:31,560 --> 00:10:36,360 add our font name and then we'll add a font size as 35, 155 00:10:36,720 --> 00:10:41,070 and it will say, yeah, make it bold. So there you have it. 156 00:10:41,100 --> 00:10:45,840 We've got our tomato, we've got our text showing up as the countdown timer. 157 00:10:46,380 --> 00:10:46,890 Now, 158 00:10:46,890 --> 00:10:51,780 the final thing I want to do is just to change the background color to a slightly 159 00:10:51,780 --> 00:10:54,120 nicer looking color. Now, 160 00:10:54,120 --> 00:10:57,600 one of my favorite websites is this one called colorhunt.io, 161 00:10:57,660 --> 00:11:01,140 which shows you a whole bunch of different color palettes that professional 162 00:11:01,140 --> 00:11:03,210 designers have a created 163 00:11:03,300 --> 00:11:07,680 and it makes it really easy for us to just snap up some of these hex codes and 164 00:11:07,680 --> 00:11:10,710 use them straight away in our program. Now, 165 00:11:10,740 --> 00:11:13,290 the one that really caught my eye is this one, 166 00:11:13,620 --> 00:11:16,320 cause it has a bit of the tomato color palette. 167 00:11:16,710 --> 00:11:21,710 So I've transferred all of these hex codes to the constants in the starting 168 00:11:22,230 --> 00:11:25,560 file. So you can see I've got the pink, the red, the green, the yellow, 169 00:11:25,950 --> 00:11:30,450 and we're going to be using that across our program to give it that consistent 170 00:11:30,450 --> 00:11:34,020 color theme and make it look like it's been professionally designed. 171 00:11:34,800 --> 00:11:39,210 So what I want to do is I want to change the window's background color, 172 00:11:39,540 --> 00:11:43,770 and I can do that through the keyword argument called at bg for background, 173 00:11:44,280 --> 00:11:47,010 and I can set it to a hex code. 174 00:11:47,160 --> 00:11:52,160 So a hex code starts out with the pound sign and then it's some numbers and some 175 00:11:52,350 --> 00:11:55,930 letters. Now I've already got all of that for you 176 00:11:56,440 --> 00:12:00,820 and all you have to do is just to put down the name of the constant. 177 00:12:01,690 --> 00:12:06,610 So this should not be in quotation marks because it's not the word. It is 178 00:12:06,610 --> 00:12:06,970 in fact, 179 00:12:06,970 --> 00:12:11,110 referring to that particular variable and the string that's held inside. 180 00:12:11,710 --> 00:12:13,510 So now if we check our screen, 181 00:12:13,540 --> 00:12:18,130 you can see the background has been changed to that nice yellow color, sort of 182 00:12:18,130 --> 00:12:21,700 rice or hay color, but the tomato, 183 00:12:21,820 --> 00:12:25,300 namely the canvas, still has that white background. 184 00:12:26,230 --> 00:12:30,100 So let's change the background color of the canvas as well. And again, 185 00:12:30,100 --> 00:12:31,600 it's using the bg. 186 00:12:31,630 --> 00:12:36,630 So some of these, you'll notice, are standard attributes that we can change like 187 00:12:36,640 --> 00:12:38,890 the width and the height and the background color, 188 00:12:38,920 --> 00:12:43,660 which is standard across all of the widgets. And some other things like file 189 00:12:43,660 --> 00:12:47,020 here are some of the more specific keyword arguments. 190 00:12:47,680 --> 00:12:51,760 So let's apply this yellow to the background of the canvas, 191 00:12:52,180 --> 00:12:55,570 and you can see that the canvas is now yellow as well. 192 00:12:55,990 --> 00:12:58,270 But it's still got this little white border 193 00:12:58,300 --> 00:13:02,590 which denotes the edges of our canvas. To get rid of that 194 00:13:02,620 --> 00:13:07,000 I found a specific keyword argument that would actually help 195 00:13:07,390 --> 00:13:10,840 and it took quite a bit of digging around, quite a bit of Stack Overflow 196 00:13:10,840 --> 00:13:13,540 searching and googling in order to find this. 197 00:13:13,540 --> 00:13:17,800 It wasn't very straightforward because tkinter is not well-documented 198 00:13:17,800 --> 00:13:20,680 unfortunately. But thankfully for you, 199 00:13:20,740 --> 00:13:25,740 all you have to do is find your canvas and on the line where you've created it, 200 00:13:26,320 --> 00:13:29,260 go ahead and add this keyword argument. 201 00:13:29,410 --> 00:13:33,820 It's called a highlightthickness, 202 00:13:34,300 --> 00:13:37,240 and be sure that you spell it right, because it's really long. 203 00:13:37,300 --> 00:13:41,860 And remember that there's two Ts cause it's highlight and thickness and there's 204 00:13:41,860 --> 00:13:44,770 nothing in between, no underscore, no nothing to separate it. 205 00:13:45,190 --> 00:13:47,920 I think that the tkinter team could have really done a little bit better here, 206 00:13:48,010 --> 00:13:48,843 but hey. 207 00:13:49,030 --> 00:13:53,590 If we set the highlightthickness to zero and we rerun our code, 208 00:13:53,650 --> 00:13:57,280 then you should see that it now looks pretty good. 209 00:13:57,430 --> 00:14:02,430 And our canvas is now completely the same color as the background of the window. 210 00:14:04,090 --> 00:14:08,110 And you can't tell it where the window begins and the canvas ends. Now, 211 00:14:08,110 --> 00:14:13,110 the only problem is once we've removed that border around the canvas, 212 00:14:13,750 --> 00:14:16,780 our tomato is once again, shifted a little bit. 213 00:14:17,140 --> 00:14:22,140 So we can actually adjust this and we can change this back to 100 and I'm going 214 00:14:23,800 --> 00:14:25,930 to change it both for the text and the image. 215 00:14:26,590 --> 00:14:30,160 And we can make that tomato image perfectly round 216 00:14:30,220 --> 00:14:34,900 once more. With tkinter I've found that you have to do quite a bit of tweaking 217 00:14:34,900 --> 00:14:37,060 around especially with these positions. 218 00:14:37,570 --> 00:14:39,490 And you'll spend some time judging it by eye 219 00:14:39,790 --> 00:14:43,420 in terms of the size and the width and where to place it. 220 00:14:43,900 --> 00:14:48,900 But we have now successfully managed to place an image onto the screen, 221 00:14:49,720 --> 00:14:50,950 changed the background of the window, 222 00:14:51,830 --> 00:14:56,560 keep it consistent and add a little bit of text onto our tomato. 223 00:14:57,160 --> 00:15:01,720 So now we're ready for the next step. In the next lesson, 224 00:15:02,020 --> 00:15:05,230 we're going to create the rest of the user interface. 225 00:15:05,440 --> 00:15:08,920 And that is mostly going to be up to you. So for all of that and more, 226 00:15:09,010 --> 00:15:10,090 I'll see you in the next lesson. 22451