WEBVTT 0 00:00.330 --> 00:03.620 The first thing I want you to do to get started is to head over 1 00:03.630 --> 00:08.340 to the course resources and download the starting files for the Pomodoro 2 00:08.340 --> 00:10.410 project. Once you've got that, 3 00:10.470 --> 00:15.470 then you should be able to unzip this file and get hold of the starting folder. 4 00:17.070 --> 00:20.640 Next, I want you to open up that folder using PyCharm. 5 00:21.240 --> 00:24.210 So in my case, my folder's inside my downloads, 6 00:24.480 --> 00:29.480 and then I'll just click open. And PyCharm should automatically configure the 7 00:29.880 --> 00:31.950 latest version of Python you've got installed. 8 00:32.580 --> 00:35.700 So if you take a look inside this folder, there's two files. 9 00:36.060 --> 00:40.680 There is a image of a tomato which we're going to use in our project, 10 00:41.070 --> 00:45.750 and there's also a main.py with a couple of sections already hashed out for 11 00:45.750 --> 00:49.320 you. And we've also included some constants, 12 00:49.380 --> 00:54.380 like some color hex codes or a font name or the number of minutes for working 13 00:55.170 --> 00:59.460 short breaks in a long breaks. So that's already in the starting file. 14 01:00.330 --> 01:03.840 The first thing we're going to do is to set up our UI. 15 01:03.870 --> 01:05.940 So under the section UI set up, 16 01:06.210 --> 01:09.720 we're going to create a new window using tkinter 17 01:10.110 --> 01:13.590 and we're going to get the window to run and give it a background color, 18 01:13.830 --> 01:14.663 pretty simple. 19 01:14.910 --> 01:19.290 So let's go to the top of our file and import our tkinter module. 20 01:19.740 --> 01:23.070 And then if we scroll down to our UI setup section, 21 01:23.310 --> 01:27.330 let's go ahead and create a new window from the tk class. 22 01:27.810 --> 01:32.250 Remember that our tk class is one of the classes from tkinter 23 01:32.610 --> 01:37.610 so you can either tap into the tkinter module and then get hold of the tk class 24 01:37.800 --> 01:40.560 like I have done here, or as in our case, 25 01:40.590 --> 01:43.920 if we're going to be using a lot of classes from tkinter 26 01:44.340 --> 01:49.340 then we can simply say from tkinter let's go ahead and import all of the 27 01:49.740 --> 01:54.450 classes. So that way we can straight away refer to this tk class. 28 01:55.170 --> 01:56.670 Now that we've created our window, 29 01:56.700 --> 02:01.050 the next thing we can do is to set the title of the window, 30 02:01.410 --> 02:05.040 which you can of course call it anything you want. But in my case, 31 02:05.040 --> 02:09.180 I'm going to set it to just Pomodoro, 32 02:09.720 --> 02:13.080 which just means tomato in Italian. 33 02:13.650 --> 02:15.990 So now that we've got our Pomodoro, 34 02:16.230 --> 02:21.230 then we're going to get our window to show up by using window.main loop as 35 02:22.290 --> 02:23.123 usual. 36 02:23.310 --> 02:28.310 And now if we run this, code our main, and you can see we've got a blank window, 37 02:28.980 --> 02:32.400 a title, and we're ready to go to the next step. 38 02:33.180 --> 02:38.180 The next step is to put an image into our program so that we can have this 39 02:39.630 --> 02:42.660 tomato as the background of our program, 40 02:43.020 --> 02:44.910 and then we can put some text on top 41 02:44.940 --> 02:49.710 which is going to signify our countdown timer. This is what we're aiming for, 42 02:49.920 --> 02:53.700 but to achieve this and to be able to put images onto the screen 43 02:54.000 --> 02:55.380 which look like this, 44 02:55.530 --> 03:00.040 we're going to have to learn about the tkinter canvas widget. A canvas 45 03:00.040 --> 03:03.550 widget is a little bit like a real life canvas, really. 46 03:03.820 --> 03:07.210 It allows you to layer things one on top of the others. 47 03:07.240 --> 03:10.630 So you could draw something and then you can draw something on top of that. 48 03:11.140 --> 03:16.140 And what it allows us to do in our case is to place an image onto our program 49 03:17.080 --> 03:19.870 and then to place some text straight on top of that. 50 03:21.400 --> 03:23.530 In between our window creation 51 03:23.590 --> 03:27.370 and the window main loop is where we're going to create our canvas. 52 03:27.790 --> 03:32.710 And our canvas is created using the canvas widget 53 03:32.740 --> 03:33.573 of course. 54 03:34.000 --> 03:39.000 One of the things that we can specify when we create our canvas is a width and 55 03:39.100 --> 03:43.420 a height, and that will be a value in terms of pixels. 56 03:44.020 --> 03:49.020 So we know that we want to display this tomato image inside that canvas. 57 03:50.020 --> 03:52.540 And we can see that this has a, 58 03:52.570 --> 03:56.470 roughly a width of 200 and a height of 223. 59 03:57.010 --> 04:01.330 So let's create a canvas that's roughly about the same size as the image. 60 04:01.810 --> 04:06.810 So we'll put a width of 200 and a height of 224 so that we work with some even 61 04:08.980 --> 04:12.250 numbers. Once I've created my canvas 62 04:12.310 --> 04:15.370 the next thing I want to do is to add my image to it. 63 04:16.000 --> 04:20.710 And we can use a method that the canvas has it which is called create_image. 64 04:21.130 --> 04:22.720 And as soon as I type create, 65 04:22.750 --> 04:26.440 you can see there's actually a whole bunch of other methods like create the text 66 04:26.440 --> 04:29.530 in the canvas, create a rectangle, create an oval. 67 04:29.770 --> 04:34.180 And all of these things could be overlapped on each other inside the same 68 04:34.240 --> 04:37.000 canvas. Now, when we create an image, 69 04:37.030 --> 04:42.030 there's a couple of things which are required. The first thing is the X and Y 70 04:42.880 --> 04:45.850 positions of this image in the canvas. 71 04:46.420 --> 04:50.950 Given that we have a width of 200 and a height of 224, 72 04:51.250 --> 04:56.250 I want my image to be bang in the center of the canvas. So I can provide the X 73 04:56.800 --> 05:01.660 value as half of the width and the Y value as half of the height. 74 05:02.560 --> 05:05.230 In addition to the X and Y values, 75 05:05.290 --> 05:08.080 we also have to specify a image. 76 05:08.530 --> 05:12.250 But I can't just simply just type the name of my image 77 05:12.520 --> 05:15.340 which is tomato.png, 78 05:15.760 --> 05:20.760 because that is not the type of data that this argument is expecting. 79 05:21.670 --> 05:25.660 What it wants instead is something called a photo image 80 05:26.050 --> 05:28.450 and this class comes from tkinter 81 05:28.750 --> 05:33.750 and it's basically a way to read through a file and to get hold of a particular 82 05:37.210 --> 05:41.380 image at a particular file location. In my case, 83 05:41.380 --> 05:44.980 the file location is in fact tomato.png. 84 05:45.610 --> 05:50.610 And if your image was stored in say another sub folder or a different place, 85 05:52.750 --> 05:57.750 then you should provide the relative or absolute file path to get there from 86 05:57.800 --> 06:01.100 where your code is, which is the main.py. But in our case 87 06:01.100 --> 06:03.170 it's very easy, they're both in the same folder, 88 06:03.650 --> 06:06.560 so we can simply specify our filename like 89 06:06.560 --> 06:11.560 so. The next thing we're going to do is we're going to save this photo image in a 90 06:11.900 --> 06:14.120 variable so we can refer to it later on. 91 06:14.600 --> 06:17.810 I'm going to call this our tomato_img. 92 06:17.990 --> 06:19.790 Feel free to call it anything you want. 93 06:20.450 --> 06:24.650 And that is the data that goes into this image argument. 94 06:25.430 --> 06:29.990 Now we've created our canvas, we've created our photo image, 95 06:30.320 --> 06:34.400 we've told our canvas to create an image at this position, 96 06:34.580 --> 06:36.740 and then we've put the image inside. 97 06:37.010 --> 06:42.010 The final thing we need to do is to pack our canvas or use some other sort of 98 06:42.350 --> 06:47.030 method to specify the layout of how the canvas is going to go on the screen. 99 06:47.480 --> 06:49.790 And now we can hit run, 100 06:50.180 --> 06:54.140 and we can see our image on the screen. 101 06:54.770 --> 06:59.270 So now notice how the image is basically taking up the entire space of the 102 06:59.270 --> 07:03.620 window. And in fact, the window is resizing itself to fit this image. 103 07:04.340 --> 07:08.150 Wouldn't it be better if this screen was actually a little bit bigger? 104 07:08.180 --> 07:10.850 So we don't just look at the image of a tomato. 105 07:11.690 --> 07:15.650 We can do that by getting our window to be configured. 106 07:15.980 --> 07:19.520 And the configuration that we want to change is the padding, 107 07:19.580 --> 07:24.580 so I'm going to change the padx and pady. On the X-axis on the horizontal 108 07:25.010 --> 07:29.090 I'm actually going to add a whole hundred pixels of padding on both sides. 109 07:29.390 --> 07:31.820 And then on the Yaxis, pady, 110 07:31.820 --> 07:36.820 I'm going to change that to 50 so that it's got 50 pixels of padding on the 111 07:36.860 --> 07:41.270 top. That's looking pretty good other than one small defect. 112 07:41.660 --> 07:46.190 You can see that our tomato image is a little bit cut off on the left 113 07:46.640 --> 07:51.640 and I suspect this is because the actual image is a little bit shifted over to 114 07:52.670 --> 07:53.390 the left. 115 07:53.390 --> 07:58.390 So we can actually adjust this X position to be a little bit more to the right, 116 07:59.270 --> 08:00.770 and that way our tomato 117 08:00.770 --> 08:04.310 can be centered on screen without being cut off on either side. 118 08:05.660 --> 08:10.340 So now that we've tweaked our image and we've displayed it on the screen, 119 08:10.820 --> 08:14.210 the next thing to do is to display some text. 120 08:14.840 --> 08:18.770 As you noticed before, in addition to canvas.create_image, 121 08:19.100 --> 08:23.330 they will a whole bunch of other things we could create, including some texts. 122 08:24.410 --> 08:29.240 This create_text method works very similarly to the create_image method. 123 08:29.720 --> 08:34.720 Notice how the first thing that's getting highlighted is the *args. 124 08:35.900 --> 08:39.290 And then we've got our **kw. 125 08:39.710 --> 08:42.620 So remember from the lessons yesterday, 126 08:42.950 --> 08:47.950 these arguments are the unlimited positional arguments and these arguments are 127 08:49.610 --> 08:54.140 the unlimited keyword arguments. So the keyword arguments here 128 08:54.140 --> 08:55.010 are for example the 129 08:55.260 --> 08:59.280 image or the background color or anything else, 130 08:59.610 --> 09:02.550 but these are the X and Y values. 131 09:03.090 --> 09:04.980 So creating the text, 132 09:05.010 --> 09:08.220 we also have to provide a X and Y value. 133 09:08.640 --> 09:13.410 So I'm just going to try the same values as the image to see how that looks. 134 09:14.280 --> 09:18.330 And now we can add some keyword arguments, for example, the text. 135 09:18.690 --> 09:22.020 So I just want it to say 00:00, 136 09:22.410 --> 09:26.040 which looks pretty much like the clock. Now, 137 09:26.070 --> 09:30.570 if we run our code, you can see we've got a little bit of text showing up. 138 09:31.140 --> 09:33.990 Now, notice how it's a little bit high up on the tomato, 139 09:34.020 --> 09:38.610 because remember the tomato starts at the top here and ends here. 140 09:38.910 --> 09:41.550 So that is the center of the tomato image, 141 09:41.820 --> 09:46.110 but we can move it down a little bit so that it's actually centered in this red 142 09:46.110 --> 09:50.700 part, the circular part. With a little bit of experimentation, 143 09:50.730 --> 09:55.110 I think this, 103, 130, actually works quite well 144 09:55.110 --> 09:57.870 and it's pretty much bang in the center of the tomato. 145 09:58.650 --> 10:03.650 Let's modify this text in some other ways. We can change the fill 146 10:04.620 --> 10:09.420 which is basically the color of the text and I'm going to change that to white, 147 10:09.510 --> 10:13.590 that you can see here. And then I'm going to change the font as well. 148 10:14.100 --> 10:16.140 And this is going to expect a tuple. 149 10:16.290 --> 10:20.760 So it's going to be the font name and then the size, and then whether, 150 10:20.760 --> 10:25.380 if it's bold or italic or whatever else you want to do. Now in the constants 151 10:25.380 --> 10:27.450 here, I've already got the font name defined, 152 10:27.480 --> 10:31.530 which is gonna be Courier that we're gonna be using. So that we can straight up 153 10:31.560 --> 10:36.360 add our font name and then we'll add a font size as 35, 154 10:36.720 --> 10:41.070 and it will say, yeah, make it bold. So there you have it. 155 10:41.100 --> 10:45.840 We've got our tomato, we've got our text showing up as the countdown timer. 156 10:46.380 --> 10:46.890 Now, 157 10:46.890 --> 10:51.780 the final thing I want to do is just to change the background color to a slightly 158 10:51.780 --> 10:54.120 nicer looking color. Now, 159 10:54.120 --> 10:57.600 one of my favorite websites is this one called colorhunt.io, 160 10:57.660 --> 11:01.140 which shows you a whole bunch of different color palettes that professional 161 11:01.140 --> 11:03.210 designers have a created 162 11:03.300 --> 11:07.680 and it makes it really easy for us to just snap up some of these hex codes and 163 11:07.680 --> 11:10.710 use them straight away in our program. Now, 164 11:10.740 --> 11:13.290 the one that really caught my eye is this one, 165 11:13.620 --> 11:16.320 cause it has a bit of the tomato color palette. 166 11:16.710 --> 11:21.710 So I've transferred all of these hex codes to the constants in the starting 167 11:22.230 --> 11:25.560 file. So you can see I've got the pink, the red, the green, the yellow, 168 11:25.950 --> 11:30.450 and we're going to be using that across our program to give it that consistent 169 11:30.450 --> 11:34.020 color theme and make it look like it's been professionally designed. 170 11:34.800 --> 11:39.210 So what I want to do is I want to change the window's background color, 171 11:39.540 --> 11:43.770 and I can do that through the keyword argument called at bg for background, 172 11:44.280 --> 11:47.010 and I can set it to a hex code. 173 11:47.160 --> 11:52.160 So a hex code starts out with the pound sign and then it's some numbers and some 174 11:52.350 --> 11:55.930 letters. Now I've already got all of that for you 175 11:56.440 --> 12:00.820 and all you have to do is just to put down the name of the constant. 176 12:01.690 --> 12:06.610 So this should not be in quotation marks because it's not the word. It is 177 12:06.610 --> 12:06.970 in fact, 178 12:06.970 --> 12:11.110 referring to that particular variable and the string that's held inside. 179 12:11.710 --> 12:13.510 So now if we check our screen, 180 12:13.540 --> 12:18.130 you can see the background has been changed to that nice yellow color, sort of 181 12:18.130 --> 12:21.700 rice or hay color, but the tomato, 182 12:21.820 --> 12:25.300 namely the canvas, still has that white background. 183 12:26.230 --> 12:30.100 So let's change the background color of the canvas as well. And again, 184 12:30.100 --> 12:31.600 it's using the bg. 185 12:31.630 --> 12:36.630 So some of these, you'll notice, are standard attributes that we can change like 186 12:36.640 --> 12:38.890 the width and the height and the background color, 187 12:38.920 --> 12:43.660 which is standard across all of the widgets. And some other things like file 188 12:43.660 --> 12:47.020 here are some of the more specific keyword arguments. 189 12:47.680 --> 12:51.760 So let's apply this yellow to the background of the canvas, 190 12:52.180 --> 12:55.570 and you can see that the canvas is now yellow as well. 191 12:55.990 --> 12:58.270 But it's still got this little white border 192 12:58.300 --> 13:02.590 which denotes the edges of our canvas. To get rid of that 193 13:02.620 --> 13:07.000 I found a specific keyword argument that would actually help 194 13:07.390 --> 13:10.840 and it took quite a bit of digging around, quite a bit of Stack Overflow 195 13:10.840 --> 13:13.540 searching and googling in order to find this. 196 13:13.540 --> 13:17.800 It wasn't very straightforward because tkinter is not well-documented 197 13:17.800 --> 13:20.680 unfortunately. But thankfully for you, 198 13:20.740 --> 13:25.740 all you have to do is find your canvas and on the line where you've created it, 199 13:26.320 --> 13:29.260 go ahead and add this keyword argument. 200 13:29.410 --> 13:33.820 It's called a highlightthickness, 201 13:34.300 --> 13:37.240 and be sure that you spell it right, because it's really long. 202 13:37.300 --> 13:41.860 And remember that there's two Ts cause it's highlight and thickness and there's 203 13:41.860 --> 13:44.770 nothing in between, no underscore, no nothing to separate it. 204 13:45.190 --> 13:47.920 I think that the tkinter team could have really done a little bit better here, 205 13:48.010 --> 13:48.843 but hey. 206 13:49.030 --> 13:53.590 If we set the highlightthickness to zero and we rerun our code, 207 13:53.650 --> 13:57.280 then you should see that it now looks pretty good. 208 13:57.430 --> 14:02.430 And our canvas is now completely the same color as the background of the window. 209 14:04.090 --> 14:08.110 And you can't tell it where the window begins and the canvas ends. Now, 210 14:08.110 --> 14:13.110 the only problem is once we've removed that border around the canvas, 211 14:13.750 --> 14:16.780 our tomato is once again, shifted a little bit. 212 14:17.140 --> 14:22.140 So we can actually adjust this and we can change this back to 100 and I'm going 213 14:23.800 --> 14:25.930 to change it both for the text and the image. 214 14:26.590 --> 14:30.160 And we can make that tomato image perfectly round 215 14:30.220 --> 14:34.900 once more. With tkinter I've found that you have to do quite a bit of tweaking 216 14:34.900 --> 14:37.060 around especially with these positions. 217 14:37.570 --> 14:39.490 And you'll spend some time judging it by eye 218 14:39.790 --> 14:43.420 in terms of the size and the width and where to place it. 219 14:43.900 --> 14:48.900 But we have now successfully managed to place an image onto the screen, 220 14:49.720 --> 14:50.950 changed the background of the window, 221 14:51.830 --> 14:56.560 keep it consistent and add a little bit of text onto our tomato. 222 14:57.160 --> 15:01.720 So now we're ready for the next step. In the next lesson, 223 15:02.020 --> 15:05.230 we're going to create the rest of the user interface. 224 15:05.440 --> 15:08.920 And that is mostly going to be up to you. So for all of that and more, 225 15:09.010 --> 15:10.090 I'll see you in the next lesson.