1 00:00:00,390 --> 00:00:01,470 In the last lesson, 2 00:00:01,500 --> 00:00:06,500 we started setting up our user interface and we created this canvas, 3 00:00:06,870 --> 00:00:11,250 placed our image onto it, and also on top of that, put some text. 4 00:00:11,700 --> 00:00:13,200 This is how far we've gotten, 5 00:00:13,530 --> 00:00:17,070 and we want to now complete setting up the user interface, 6 00:00:17,400 --> 00:00:19,410 so adding in some more components. 7 00:00:19,860 --> 00:00:24,860 And we wanted to end up looking a bit like this with a label at the top, a big 8 00:00:25,470 --> 00:00:28,380 bit of text, some buttons at the bottom, 9 00:00:28,680 --> 00:00:32,430 and also a label that keeps track of how many Pomodoros we've done. 10 00:00:32,759 --> 00:00:36,330 So each 25 minute work session gets us a 11 00:00:36,410 --> 00:00:38,370 check mark. So you are 12 00:00:38,660 --> 00:00:43,370 going to be using a lot of the stuff that you learned in yesterday's lessons in terms of 13 00:00:43,400 --> 00:00:48,400 which tkinter widgets to use and how to set them up in order to create this. 14 00:00:49,160 --> 00:00:52,910 So it's going to be a challenge for you, but before we get started, 15 00:00:52,910 --> 00:00:55,850 there's just a couple of things I want to point out. So, 16 00:00:55,850 --> 00:00:58,850 one thing to note is that we've got this bg 17 00:00:58,880 --> 00:01:01,130 which stands for background color, 18 00:01:01,610 --> 00:01:06,350 and we've used our constants up here to set those background colors. 19 00:01:06,920 --> 00:01:08,390 Now you can see that here 20 00:01:08,390 --> 00:01:13,280 I've got the label and also the check mark in a green color. 21 00:01:13,520 --> 00:01:17,300 And that color comes from our constant right here. 22 00:01:17,840 --> 00:01:21,140 So you'll be able to color a piece of text in a label, 23 00:01:21,350 --> 00:01:24,800 not by using bg, but by using fg 24 00:01:24,800 --> 00:01:29,800 which stands for a foreground. And that you can basically set to equal the green 25 00:01:30,890 --> 00:01:35,600 color that we've got. And as long as that's added to the label, 26 00:01:35,750 --> 00:01:38,420 then you should be able to see that show up. Now, 27 00:01:38,450 --> 00:01:41,810 the other thing I want to show you is if you don't know how to get hold of a 28 00:01:41,840 --> 00:01:42,673 check mark, 29 00:01:42,950 --> 00:01:47,930 the easiest way is just to go onto Wikipedia and find the particular checkmark 30 00:01:47,930 --> 00:01:48,763 that you like. 31 00:01:48,980 --> 00:01:53,980 And then just copy it and paste it into here as the text. 32 00:01:54,290 --> 00:01:58,370 So for example, if we had a label which had a text argument, 33 00:01:58,550 --> 00:02:02,120 and I copy that a checkmark and I paste it here, 34 00:02:02,450 --> 00:02:06,410 then that checkmark is what's going to show up on screen. Now, 35 00:02:06,410 --> 00:02:10,100 the final thing I want to mention before I let you get on with the challenge is 36 00:02:10,100 --> 00:02:12,860 that we've packed our canvas onto the screen. 37 00:02:13,490 --> 00:02:17,240 But as we've got quite a few things that we need to lay out on the screen, 38 00:02:17,540 --> 00:02:20,480 it's much easier to do this using the grid. 39 00:02:21,230 --> 00:02:25,070 So I want you to change the canvas to using the grid system. 40 00:02:25,490 --> 00:02:30,200 And here I've created a more or less sort of breakdown of how that grid might 41 00:02:30,200 --> 00:02:34,640 look like. So you probably will end up with one, two, three, 42 00:02:34,640 --> 00:02:37,640 four rows and three columns, 43 00:02:37,700 --> 00:02:41,900 and have a think about how you might lay out the labels and the buttons and the 44 00:02:41,900 --> 00:02:45,170 check marks relative to those rows and columns. 45 00:02:45,770 --> 00:02:47,510 Keeping this page on screen, 46 00:02:47,570 --> 00:02:51,230 I want you to pause the video and give this challenge it go. 47 00:02:51,590 --> 00:02:55,130 And if you don't know the sizes for things or the fonts, don't worry, 48 00:02:55,130 --> 00:02:56,990 just guess them. It doesn't really matter. 49 00:02:57,020 --> 00:02:59,860 As long as you've got the rough layout and the correct widgets, 50 00:03:00,100 --> 00:03:03,760 then that would be considered a win. Pause the video now and give it a go. 51 00:03:06,760 --> 00:03:07,090 All right. 52 00:03:07,090 --> 00:03:11,680 So I'm going to get started by creating this top label here and that I'm going 53 00:03:11,680 --> 00:03:16,390 to call the title_label and that's going to be created from the label class. 54 00:03:16,990 --> 00:03:20,980 Now, the text in this is just going to read timer for now, 55 00:03:21,580 --> 00:03:26,580 and I want to change its color by using the foreground keyword argument. 56 00:03:28,090 --> 00:03:31,900 And I'm going to change it to that green color that we've got up here. 57 00:03:32,920 --> 00:03:36,400 Now, I want to be able to show that label on screen, 58 00:03:36,400 --> 00:03:40,000 so I have to give it some form of layout. And as we mentioned, 59 00:03:40,030 --> 00:03:44,290 we're going to use the grid system. So I'm going to change the grid. 60 00:03:45,490 --> 00:03:49,540 And if we refer to this image, you can see there's going to be three columns. 61 00:03:49,810 --> 00:03:52,360 This is going to be in the middle column, 62 00:03:52,720 --> 00:03:54,880 and then it's going to be on the first row. 63 00:03:55,120 --> 00:03:56,800 So that we're going to start from zero. 64 00:03:56,800 --> 00:04:01,800 So I'm going to say column = 1 and row = 0. 65 00:04:03,190 --> 00:04:08,190 Now I have to change this canvas pack because otherwise it's going to give me an 66 00:04:08,560 --> 00:04:11,650 error. And in terms of where the canvas is, 67 00:04:11,680 --> 00:04:15,310 it's going to be again in the same column as that label, 68 00:04:15,520 --> 00:04:17,170 but it's going to be on the next row. 69 00:04:20,740 --> 00:04:25,210 So column 1, row 1. And now when I run it, 70 00:04:25,210 --> 00:04:30,160 you can see our label shows up and then our canvas shows up and it's all 71 00:04:30,160 --> 00:04:31,390 correctly positioned. 72 00:04:32,050 --> 00:04:37,030 Now I want to change this label so that it looks a little bit more like the demo 73 00:04:37,030 --> 00:04:39,460 that I showed you, like this. 74 00:04:39,490 --> 00:04:43,180 So I have to change the font and the text to make it a lot bigger. 75 00:04:44,230 --> 00:04:48,520 As we've seen before, we can simply add the font when we create the label. 76 00:04:49,240 --> 00:04:52,090 So we can set that to a tuple. 77 00:04:52,210 --> 00:04:56,260 And first I'm going to use my font name that I've got as a constant 78 00:04:56,590 --> 00:05:00,040 which I've used when I created the text, it's just going to be Courier. 79 00:05:00,730 --> 00:05:03,040 And then in terms of the size, 80 00:05:04,450 --> 00:05:07,870 you can simply just make a guess. It's going to be something pretty large. 81 00:05:07,900 --> 00:05:12,250 So I'm going to go with 50 and I'm not going to have it bold or italic or 82 00:05:12,250 --> 00:05:16,750 anything, so that's the end of that font. And now when I run it again, 83 00:05:16,780 --> 00:05:21,370 you can see its a lot bigger and it looks a lot more like the example that we 84 00:05:21,370 --> 00:05:22,203 had here. 85 00:05:22,390 --> 00:05:27,280 But the only difference is that it actually still has a white background. Instead 86 00:05:27,280 --> 00:05:28,750 of just changing the foreground, 87 00:05:28,750 --> 00:05:32,650 I'm also going to change the background and I'm going to make it the same yellow 88 00:05:32,650 --> 00:05:35,170 color that I have in the background of the window. 89 00:05:35,860 --> 00:05:40,860 So now it looks like it's all blended in and it's all a part of the same 90 00:05:41,170 --> 00:05:45,310 application. Let's move on to the next row, 91 00:05:45,340 --> 00:05:46,930 which is going to be our buttons. 92 00:05:47,290 --> 00:05:51,910 So I'm going to have a start button and I'm also going to have a reset button 93 00:05:52,150 --> 00:05:54,730 and they're both going to be created from the button class. 94 00:05:55,300 --> 00:06:00,300 The start button is just going to have the text start and the reset button is going 95 00:06:02,420 --> 00:06:07,370 to have the word reset. The start 96 00:06:07,370 --> 00:06:12,370 button is also going to be laid out on our grid and it's going to be column 0 97 00:06:14,060 --> 00:06:16,280 row 2. 98 00:06:18,230 --> 00:06:22,940 And the reset button is going to be column 2, row 2. 99 00:06:24,350 --> 00:06:29,350 So now you can see the start and the reset buttons are now on the next row after 100 00:06:29,930 --> 00:06:34,190 the canvas and it's either side of it. Now notice how there's a little 101 00:06:34,190 --> 00:06:38,720 bit of a white background around each of the buttons. If that bothers you, 102 00:06:38,780 --> 00:06:43,010 then you can actually fix that by doing the same thing that we did with the 103 00:06:43,010 --> 00:06:43,843 canvas 104 00:06:43,880 --> 00:06:48,880 which got rid of the border by changing that highlightthickness to zero. 105 00:06:50,150 --> 00:06:52,250 And because that's really prone to typos, 106 00:06:52,280 --> 00:06:54,020 I'm actually just going to paste it in. 107 00:06:56,120 --> 00:06:59,870 So now you can see that whiteboard has pretty much all but disappeared. 108 00:07:01,190 --> 00:07:04,550 Now we're onto our very final thing that we showed, 109 00:07:05,480 --> 00:07:08,150 which is the checkmark right here. 110 00:07:09,530 --> 00:07:13,670 So I'm going to call it check_marks because eventually there'll probably be 111 00:07:13,670 --> 00:07:14,570 quite a few of them 112 00:07:15,320 --> 00:07:20,320 hopefully if we do lots of good work, and our label is going to have to text 113 00:07:20,810 --> 00:07:24,200 which is going to have the checkmark. Now, if you are on a Mac, 114 00:07:24,230 --> 00:07:29,230 you can actually go into edit and go to emojis and symbols and pick a checkmark 115 00:07:31,340 --> 00:07:32,330 from here. 116 00:07:32,870 --> 00:07:37,100 But on Windows you can simply just use the trick that I showed you. 117 00:07:37,340 --> 00:07:42,320 Go ahead and copy and paste it from a piece of text, say like Wikipedia. 118 00:07:43,520 --> 00:07:47,570 Once we've got our texts, I'm going to change the foreground color of 119 00:07:47,570 --> 00:07:50,120 that text again, and I'm going to change it to green. 120 00:07:50,900 --> 00:07:55,520 And it's also going to require a background color of yellow 121 00:07:55,910 --> 00:07:58,850 just so that we get rid of the white. And finally, 122 00:07:58,850 --> 00:08:01,700 I'm going to add this on using the grid, 123 00:08:03,170 --> 00:08:07,970 setting the column to 1 and the row to 124 00:08:08,030 --> 00:08:11,870 3. So this is basically going to be in the last row. 125 00:08:12,350 --> 00:08:14,600 So you can see after all of that work, 126 00:08:14,630 --> 00:08:19,630 we finally managed to complete the user interface and we've now achieved the 127 00:08:20,330 --> 00:08:21,290 final look. 128 00:08:21,530 --> 00:08:26,530 And all we need to do now is to actually add the timer functionality, 129 00:08:27,020 --> 00:08:29,780 which we'll do in the next lesson. Now, 130 00:08:29,810 --> 00:08:33,799 if you found any of the tkinter widgets difficult to use 131 00:08:33,799 --> 00:08:38,150 or you got stuck or you couldn't figure out certain things about it, 132 00:08:38,270 --> 00:08:41,419 then be sure to have a review of yesterday's lessons 133 00:08:41,750 --> 00:08:44,030 where we talked about the widgets in more detail.