WEBVTT 0 00:00.390 --> 00:01.470 In the last lesson, 1 00:01.500 --> 00:06.500 we started setting up our user interface and we created this canvas, 2 00:06.870 --> 00:11.250 placed our image onto it, and also on top of that, put some text. 3 00:11.700 --> 00:13.200 This is how far we've gotten, 4 00:13.530 --> 00:17.070 and we want to now complete setting up the user interface, 5 00:17.400 --> 00:19.410 so adding in some more components. 6 00:19.860 --> 00:24.860 And we wanted to end up looking a bit like this with a label at the top, a big 7 00:25.470 --> 00:28.380 bit of text, some buttons at the bottom, 8 00:28.680 --> 00:32.430 and also a label that keeps track of how many Pomodoros we've done. 9 00:32.760 --> 00:36.330 So each 25 minute work session gets us a 10 00:36.410 --> 00:38.370 check mark. So you are 11 00:38.660 --> 00:43.370 going to be using a lot of the stuff that you learned in yesterday's lessons in terms of 12 00:43.400 --> 00:48.400 which tkinter widgets to use and how to set them up in order to create this. 13 00:49.160 --> 00:52.910 So it's going to be a challenge for you, but before we get started, 14 00:52.910 --> 00:55.850 there's just a couple of things I want to point out. So, 15 00:55.850 --> 00:58.850 one thing to note is that we've got this bg 16 00:58.880 --> 01:01.130 which stands for background color, 17 01:01.610 --> 01:06.350 and we've used our constants up here to set those background colors. 18 01:06.920 --> 01:08.390 Now you can see that here 19 01:08.390 --> 01:13.280 I've got the label and also the check mark in a green color. 20 01:13.520 --> 01:17.300 And that color comes from our constant right here. 21 01:17.840 --> 01:21.140 So you'll be able to color a piece of text in a label, 22 01:21.350 --> 01:24.800 not by using bg, but by using fg 23 01:24.800 --> 01:29.800 which stands for a foreground. And that you can basically set to equal the green 24 01:30.890 --> 01:35.600 color that we've got. And as long as that's added to the label, 25 01:35.750 --> 01:38.420 then you should be able to see that show up. Now, 26 01:38.450 --> 01:41.810 the other thing I want to show you is if you don't know how to get hold of a 27 01:41.840 --> 01:42.673 check mark, 28 01:42.950 --> 01:47.930 the easiest way is just to go onto Wikipedia and find the particular checkmark 29 01:47.930 --> 01:48.763 that you like. 30 01:48.980 --> 01:53.980 And then just copy it and paste it into here as the text. 31 01:54.290 --> 01:58.370 So for example, if we had a label which had a text argument, 32 01:58.550 --> 02:02.120 and I copy that a checkmark and I paste it here, 33 02:02.450 --> 02:06.410 then that checkmark is what's going to show up on screen. Now, 34 02:06.410 --> 02:10.100 the final thing I want to mention before I let you get on with the challenge is 35 02:10.100 --> 02:12.860 that we've packed our canvas onto the screen. 36 02:13.490 --> 02:17.240 But as we've got quite a few things that we need to lay out on the screen, 37 02:17.540 --> 02:20.480 it's much easier to do this using the grid. 38 02:21.230 --> 02:25.070 So I want you to change the canvas to using the grid system. 39 02:25.490 --> 02:30.200 And here I've created a more or less sort of breakdown of how that grid might 40 02:30.200 --> 02:34.640 look like. So you probably will end up with one, two, three, 41 02:34.640 --> 02:37.640 four rows and three columns, 42 02:37.700 --> 02:41.900 and have a think about how you might lay out the labels and the buttons and the 43 02:41.900 --> 02:45.170 check marks relative to those rows and columns. 44 02:45.770 --> 02:47.510 Keeping this page on screen, 45 02:47.570 --> 02:51.230 I want you to pause the video and give this challenge it go. 46 02:51.590 --> 02:55.130 And if you don't know the sizes for things or the fonts, don't worry, 47 02:55.130 --> 02:56.990 just guess them. It doesn't really matter. 48 02:57.020 --> 02:59.860 As long as you've got the rough layout and the correct widgets, 49 03:00.100 --> 03:03.760 then that would be considered a win. Pause the video now and give it a go. 50 03:06.760 --> 03:07.090 All right. 51 03:07.090 --> 03:11.680 So I'm going to get started by creating this top label here and that I'm going 52 03:11.680 --> 03:16.390 to call the title_label and that's going to be created from the label class. 53 03:16.990 --> 03:20.980 Now, the text in this is just going to read timer for now, 54 03:21.580 --> 03:26.580 and I want to change its color by using the foreground keyword argument. 55 03:28.090 --> 03:31.900 And I'm going to change it to that green color that we've got up here. 56 03:32.920 --> 03:36.400 Now, I want to be able to show that label on screen, 57 03:36.400 --> 03:40.000 so I have to give it some form of layout. And as we mentioned, 58 03:40.030 --> 03:44.290 we're going to use the grid system. So I'm going to change the grid. 59 03:45.490 --> 03:49.540 And if we refer to this image, you can see there's going to be three columns. 60 03:49.810 --> 03:52.360 This is going to be in the middle column, 61 03:52.720 --> 03:54.880 and then it's going to be on the first row. 62 03:55.120 --> 03:56.800 So that we're going to start from zero. 63 03:56.800 --> 04:01.800 So I'm going to say column = 1 and row = 0. 64 04:03.190 --> 04:08.190 Now I have to change this canvas pack because otherwise it's going to give me an 65 04:08.560 --> 04:11.650 error. And in terms of where the canvas is, 66 04:11.680 --> 04:15.310 it's going to be again in the same column as that label, 67 04:15.520 --> 04:17.170 but it's going to be on the next row. 68 04:20.740 --> 04:25.210 So column 1, row 1. And now when I run it, 69 04:25.210 --> 04:30.160 you can see our label shows up and then our canvas shows up and it's all 70 04:30.160 --> 04:31.390 correctly positioned. 71 04:32.050 --> 04:37.030 Now I want to change this label so that it looks a little bit more like the demo 72 04:37.030 --> 04:39.460 that I showed you, like this. 73 04:39.490 --> 04:43.180 So I have to change the font and the text to make it a lot bigger. 74 04:44.230 --> 04:48.520 As we've seen before, we can simply add the font when we create the label. 75 04:49.240 --> 04:52.090 So we can set that to a tuple. 76 04:52.210 --> 04:56.260 And first I'm going to use my font name that I've got as a constant 77 04:56.590 --> 05:00.040 which I've used when I created the text, it's just going to be Courier. 78 05:00.730 --> 05:03.040 And then in terms of the size, 79 05:04.450 --> 05:07.870 you can simply just make a guess. It's going to be something pretty large. 80 05:07.900 --> 05:12.250 So I'm going to go with 50 and I'm not going to have it bold or italic or 81 05:12.250 --> 05:16.750 anything, so that's the end of that font. And now when I run it again, 82 05:16.780 --> 05:21.370 you can see its a lot bigger and it looks a lot more like the example that we 83 05:21.370 --> 05:22.203 had here. 84 05:22.390 --> 05:27.280 But the only difference is that it actually still has a white background. Instead 85 05:27.280 --> 05:28.750 of just changing the foreground, 86 05:28.750 --> 05:32.650 I'm also going to change the background and I'm going to make it the same yellow 87 05:32.650 --> 05:35.170 color that I have in the background of the window. 88 05:35.860 --> 05:40.860 So now it looks like it's all blended in and it's all a part of the same 89 05:41.170 --> 05:45.310 application. Let's move on to the next row, 90 05:45.340 --> 05:46.930 which is going to be our buttons. 91 05:47.290 --> 05:51.910 So I'm going to have a start button and I'm also going to have a reset button 92 05:52.150 --> 05:54.730 and they're both going to be created from the button class. 93 05:55.300 --> 06:00.300 The start button is just going to have the text start and the reset button is going 94 06:02.420 --> 06:07.370 to have the word reset. The start 95 06:07.370 --> 06:12.370 button is also going to be laid out on our grid and it's going to be column 0 96 06:14.060 --> 06:16.280 row 2. 97 06:18.230 --> 06:22.940 And the reset button is going to be column 2, row 2. 98 06:24.350 --> 06:29.350 So now you can see the start and the reset buttons are now on the next row after 99 06:29.930 --> 06:34.190 the canvas and it's either side of it. Now notice how there's a little 100 06:34.190 --> 06:38.720 bit of a white background around each of the buttons. If that bothers you, 101 06:38.780 --> 06:43.010 then you can actually fix that by doing the same thing that we did with the 102 06:43.010 --> 06:43.843 canvas 103 06:43.880 --> 06:48.880 which got rid of the border by changing that highlightthickness to zero. 104 06:50.150 --> 06:52.250 And because that's really prone to typos, 105 06:52.280 --> 06:54.020 I'm actually just going to paste it in. 106 06:56.120 --> 06:59.870 So now you can see that whiteboard has pretty much all but disappeared. 107 07:01.190 --> 07:04.550 Now we're onto our very final thing that we showed, 108 07:05.480 --> 07:08.150 which is the checkmark right here. 109 07:09.530 --> 07:13.670 So I'm going to call it check_marks because eventually there'll probably be 110 07:13.670 --> 07:14.570 quite a few of them 111 07:15.320 --> 07:20.320 hopefully if we do lots of good work, and our label is going to have to text 112 07:20.810 --> 07:24.200 which is going to have the checkmark. Now, if you are on a Mac, 113 07:24.230 --> 07:29.230 you can actually go into edit and go to emojis and symbols and pick a checkmark 114 07:31.340 --> 07:32.330 from here. 115 07:32.870 --> 07:37.100 But on Windows you can simply just use the trick that I showed you. 116 07:37.340 --> 07:42.320 Go ahead and copy and paste it from a piece of text, say like Wikipedia. 117 07:43.520 --> 07:47.570 Once we've got our texts, I'm going to change the foreground color of 118 07:47.570 --> 07:50.120 that text again, and I'm going to change it to green. 119 07:50.900 --> 07:55.520 And it's also going to require a background color of yellow 120 07:55.910 --> 07:58.850 just so that we get rid of the white. And finally, 121 07:58.850 --> 08:01.700 I'm going to add this on using the grid, 122 08:03.170 --> 08:07.970 setting the column to 1 and the row to 123 08:08.030 --> 08:11.870 3. So this is basically going to be in the last row. 124 08:12.350 --> 08:14.600 So you can see after all of that work, 125 08:14.630 --> 08:19.630 we finally managed to complete the user interface and we've now achieved the 126 08:20.330 --> 08:21.290 final look. 127 08:21.530 --> 08:26.530 And all we need to do now is to actually add the timer functionality, 128 08:27.020 --> 08:29.780 which we'll do in the next lesson. Now, 129 08:29.810 --> 08:33.800 if you found any of the tkinter widgets difficult to use 130 08:33.800 --> 08:38.150 or you got stuck or you couldn't figure out certain things about it, 131 08:38.270 --> 08:41.420 then be sure to have a review of yesterday's lessons 132 08:41.750 --> 08:44.030 where we talked about the widgets in more detail.