Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,540 --> 00:00:01,560 In the last lesson, 2 00:00:01,590 --> 00:00:05,880 we completed the user interface for our Pomodoro timer, 3 00:00:06,450 --> 00:00:11,130 and we've managed to get all the components that we need onto our graphical user 4 00:00:11,130 --> 00:00:16,050 interface. Now, the next step is to actually give it some functionality. 5 00:00:16,770 --> 00:00:21,480 I want to be able to create some sort of countdown mechanism that just does 6 00:00:21,480 --> 00:00:24,000 something really simple. For example, 7 00:00:24,000 --> 00:00:28,830 if it was just able to count down from five, four, three, two, 8 00:00:29,220 --> 00:00:33,600 one going down by one each time, that would be great. 9 00:00:34,110 --> 00:00:36,420 That's what we're going to be working on in this lesson. 10 00:00:36,480 --> 00:00:40,530 And we're going to go and see the countdown mechanism section to do that. 11 00:00:41,490 --> 00:00:46,470 One of the ways that you might think about approaching this is to use our time 12 00:00:46,470 --> 00:00:47,303 module 13 00:00:47,340 --> 00:00:52,020 cause we've seen before that we can say time.sleep and we can tell it to 14 00:00:52,020 --> 00:00:53,550 sleep for a second. 15 00:00:54,000 --> 00:00:58,980 So then we could maybe set up a while loop and while something or other is true, 16 00:00:59,280 --> 00:01:04,260 go ahead and sleep for one second. And then afterwards just, 17 00:01:04,320 --> 00:01:04,590 you know, 18 00:01:04,590 --> 00:01:09,240 subtract one from some sort of counter. So that we could start count at five 19 00:01:09,240 --> 00:01:14,240 and then each time we subtract by one and then each time we just simply update 20 00:01:15,360 --> 00:01:16,890 our label here, 21 00:01:17,250 --> 00:01:21,750 which we created in the canvas to whatever value count might be. 22 00:01:22,560 --> 00:01:24,990 Now, that sounds great in principle. 23 00:01:25,200 --> 00:01:30,200 The only problem is that we're working within a graphical user interface 24 00:01:30,690 --> 00:01:31,523 program. 25 00:01:32,310 --> 00:01:36,750 The reason why that's relevant is because if we think about a command line 26 00:01:36,750 --> 00:01:38,640 program, say for example, 27 00:01:38,640 --> 00:01:43,020 if we were to get our console to do something, print 28 00:01:43,080 --> 00:01:43,980 hello, well, 29 00:01:43,980 --> 00:01:48,980 it's only going to do something when you actually give it an instruction and you 30 00:01:49,380 --> 00:01:50,213 hit enter. 31 00:01:50,760 --> 00:01:55,530 It doesn't really need to keep an eye out for what you might do in between. 32 00:01:56,130 --> 00:01:59,190 But a graphical user interface is a little bit different. 33 00:01:59,520 --> 00:02:03,690 It needs to keep watching the screen to see whether 34 00:02:03,690 --> 00:02:06,870 if a user clicks on a button, for example. 35 00:02:07,350 --> 00:02:12,350 So it's basically going to refresh and keep listening for events. 36 00:02:13,110 --> 00:02:14,880 So every fraction of a second, 37 00:02:14,880 --> 00:02:16,890 it's going to keep checking, did something happene, did 38 00:02:16,920 --> 00:02:20,760 something happen, did something happen. And the moment when it does, 39 00:02:20,850 --> 00:02:24,510 then it's got to react. It's got to react to that event. 40 00:02:25,050 --> 00:02:30,030 In this case, we tend to call these types of GUI programs event-driven. 41 00:02:30,690 --> 00:02:35,040 And the way that it's driven is through our main loop. 42 00:02:35,490 --> 00:02:39,450 So when we set up our window and we start off the main loop, 43 00:02:39,780 --> 00:02:44,780 it's basically looping through and every millisecond it's checking to see did 44 00:02:44,940 --> 00:02:47,730 something happen, did something happen, did something happen? 45 00:02:48,210 --> 00:02:51,090 So that means if we have another loop in our program, 46 00:02:51,120 --> 00:02:55,200 it actually won't be able to reach the main loop. And in this case, 47 00:02:55,230 --> 00:02:57,780 when you actually try to run it, nothing happens. 48 00:02:57,840 --> 00:02:59,830 Our program doesn't even launch. 49 00:03:00,340 --> 00:03:05,260 So we have to rethink this and we have to do it a little bit differently. In 50 00:03:05,260 --> 00:03:08,950 order to create interactive and interesting programs, 51 00:03:09,370 --> 00:03:12,640 you kind of need something to happen on screen, right? 52 00:03:12,640 --> 00:03:16,750 Every so often. You need this timing mechanism. Luckily, 53 00:03:16,780 --> 00:03:18,820 tkinter already thought of this. 54 00:03:19,150 --> 00:03:23,800 And we can in fact use one of the builtin methods to every widget. 55 00:03:24,220 --> 00:03:26,140 So if we tap into our window widget, 56 00:03:26,290 --> 00:03:31,290 we can get hold of a method called after and after is quite simple. 57 00:03:32,230 --> 00:03:36,760 It's a method that takes an amount of time that it should wait 58 00:03:37,270 --> 00:03:39,190 and then after that amount of time, 59 00:03:39,460 --> 00:03:44,460 it simply calls a particular function that you tell it to call passing in any 60 00:03:44,650 --> 00:03:48,760 arguments that you want to give it. Here's how it works. 61 00:03:48,820 --> 00:03:53,820 We call window.after, we first provide the amount of time to wait in 62 00:03:54,460 --> 00:03:58,720 milliseconds. So if we want one second, then that's 1000 milliseconds. 63 00:03:59,320 --> 00:04:02,200 Next we pass in a function to call. 64 00:04:02,530 --> 00:04:07,390 So let's create a function up here. Let's just call it, say something, 65 00:04:07,990 --> 00:04:10,330 and then we'll pass in the thing, 66 00:04:12,610 --> 00:04:16,420 like this. And then all we do is we just print that thing. 67 00:04:16,960 --> 00:04:18,760 So super simple function. 68 00:04:18,790 --> 00:04:23,790 And then we give the name of this function as the function to call after 1000 69 00:04:24,310 --> 00:04:25,143 milliseconds. 70 00:04:25,600 --> 00:04:29,590 Now the final thing in this list of arguments, 71 00:04:29,920 --> 00:04:34,090 if I just go ahead and cut that and show you again, when it gives me the prompt, 72 00:04:34,510 --> 00:04:39,010 the last thing is actually a *args. 73 00:04:39,490 --> 00:04:44,230 This, if you remember, allows us to put in an unlimited number 74 00:04:44,290 --> 00:04:46,090 of positional arguments. 75 00:04:46,600 --> 00:04:50,890 What that means is we can give as many arguments as we want 76 00:04:51,220 --> 00:04:56,220 and those arguments, in this case, is simply going to be passed to the function 77 00:04:56,350 --> 00:04:59,920 that we want to call. So in this case, it's going to be that thing. 78 00:05:00,190 --> 00:05:03,580 So if I put hello here then I run my code, 79 00:05:03,940 --> 00:05:07,990 you can see that after 1000 milliseconds, basically one second, 80 00:05:08,440 --> 00:05:10,750 it calls this function, 81 00:05:10,810 --> 00:05:15,400 say_something, and it passes this hello as the input 82 00:05:15,580 --> 00:05:18,370 to that function. As I said, 83 00:05:18,400 --> 00:05:22,000 you can have an infinite amount of positional arguments. 84 00:05:22,330 --> 00:05:26,530 So let's put in some other arguments which we'll call a, 85 00:05:26,530 --> 00:05:27,363 b, and c, 86 00:05:27,610 --> 00:05:32,320 and then we'll print a, print b, and print c. 87 00:05:33,970 --> 00:05:36,640 And now instead of passing in hello, 88 00:05:36,670 --> 00:05:41,650 we're going to pass in lots of positional parameters. So we'll say 3, 5, 89 00:05:41,680 --> 00:05:44,500 and 8. Now, when I hit run, 90 00:05:44,560 --> 00:05:46,840 you will see it waits for one second 91 00:05:47,170 --> 00:05:51,850 and then it passes all three of these parameters to say something 92 00:05:52,270 --> 00:05:55,480 and it goes ahead and prints all of those out at once. 93 00:05:56,050 --> 00:06:01,010 So this is how the after method works. But what we wanted to do though, 94 00:06:01,370 --> 00:06:03,920 is we want it to repeat itself, 95 00:06:04,010 --> 00:06:09,010 to essentially loop. One way of getting that behavior is to simply put this 96 00:06:10,760 --> 00:06:11,240 method, 97 00:06:11,240 --> 00:06:16,240 call somewhere inside a function and then call itself. 98 00:06:16,370 --> 00:06:20,930 So here's what I mean. Let's create a function called a count_down, 99 00:06:21,740 --> 00:06:26,740 and this is going to take a input in the form of the number to count down by. 100 00:06:28,550 --> 00:06:32,270 And then inside this function, we call window.after. 101 00:06:32,720 --> 00:06:35,510 And we say that after 1000 milliseconds, 102 00:06:35,750 --> 00:06:40,750 call this function count_down and then pass in a count number. 103 00:06:44,570 --> 00:06:47,390 If that count number started out as 5, 104 00:06:47,630 --> 00:06:50,840 then we want to say count - 1. 105 00:06:51,320 --> 00:06:55,700 Now all we have to do is to call this countdown method. 106 00:06:56,030 --> 00:07:00,530 So let's call count_down and passing the starting count, 107 00:07:00,590 --> 00:07:04,430 let's say 5 seconds. So now when I run the code, 108 00:07:04,430 --> 00:07:07,760 it's going to call this method passing in 5 over here, 109 00:07:08,300 --> 00:07:11,720 and then it's going to wait for one second, 110 00:07:12,110 --> 00:07:17,060 and then it's going to call this function count_down passing in five minus one 111 00:07:17,240 --> 00:07:21,920 so it becomes four. And then afterward it repeats again, becomes three, 112 00:07:21,950 --> 00:07:26,180 two, one. So now if we catch that number 113 00:07:26,360 --> 00:07:30,500 which we can print, then we'll be able to see it count down 114 00:07:30,530 --> 00:07:34,190 when we run the code; five, four, three, 115 00:07:34,580 --> 00:07:38,390 two, one. One every second, 116 00:07:38,450 --> 00:07:42,770 and it basically keeps on going and it even continues to the negatives. 117 00:07:43,310 --> 00:07:46,310 So if we don't want it to go to negative time, 118 00:07:46,340 --> 00:07:49,220 then all we have to do is add an if statement. 119 00:07:49,640 --> 00:07:54,620 If count is greater than zero, then go ahead and execute this line of code. 120 00:07:55,880 --> 00:07:59,780 So now it'll go from five, four, three, two, 121 00:07:59,810 --> 00:08:02,570 one, zero, and then it will stop. 122 00:08:03,470 --> 00:08:08,450 This is the kind of behavior that we would need if we want to update our 123 00:08:08,450 --> 00:08:11,180 countdown in our Pomodoro timer. 124 00:08:11,900 --> 00:08:14,180 So how can we instead of printing 125 00:08:14,180 --> 00:08:19,180 the count actually change this text on our canvas? We'll, 126 00:08:19,820 --> 00:08:24,820 the way that we do that is by assigning this text a variable. 127 00:08:25,430 --> 00:08:28,460 So I'm going to call it timer_text 128 00:08:29,870 --> 00:08:34,870 and now that we've got timer_text being a set as the text that was created in 129 00:08:35,360 --> 00:08:38,870 the canvas, then we can access it right here. 130 00:08:39,620 --> 00:08:44,120 And the way that we'd change a piece of text or anything for that matter in a 131 00:08:44,120 --> 00:08:48,110 canvas is slightly different from how we would do for a label. 132 00:08:48,530 --> 00:08:52,070 If it was just the title label that we wanted to change, we would say title_ 133 00:08:52,070 --> 00:08:56,310 label.config, and then let's change the text to something new. 134 00:08:56,940 --> 00:08:58,920 But to change a canvas element, 135 00:08:58,950 --> 00:09:02,640 you actually have to tap into the particular canvas you want to change and 136 00:09:03,240 --> 00:09:08,220 Then you call a method called itemconfig. And then in this method, 137 00:09:08,280 --> 00:09:12,240 you pass in the particular item that you actually want to configure, 138 00:09:12,540 --> 00:09:14,910 so in our case it's the timer_text, 139 00:09:15,570 --> 00:09:20,570 and then you pass in the thing about it that you actually want to change in 140 00:09:20,970 --> 00:09:24,300 terms of a kwarg, so this is a keyword argument. 141 00:09:24,870 --> 00:09:28,380 We're going to change the text to the current count. 142 00:09:28,650 --> 00:09:31,620 Now notice how this is not the string count, 143 00:09:31,830 --> 00:09:34,290 because then it would just show that word, 144 00:09:34,620 --> 00:09:39,270 but its actually the live countdown time. At this point in time 145 00:09:39,300 --> 00:09:40,500 if I run the code, 146 00:09:40,500 --> 00:09:45,500 I actually get a error and it tells us that the name canvas is not defined 147 00:09:46,320 --> 00:09:50,940 and that's because I'm calling this method countdown before I actually created 148 00:09:50,940 --> 00:09:51,690 the canvas. 149 00:09:51,690 --> 00:09:56,250 So if I move that to below this line and I run it again, 150 00:09:56,280 --> 00:09:58,020 then you'll see it actually work. 151 00:09:58,320 --> 00:10:02,370 And you see it starts out from five and it counts down to zero. 152 00:10:03,180 --> 00:10:08,180 Now how can we tie that behavior to the start button so that I can press the 153 00:10:08,250 --> 00:10:13,140 start button and then and only then does it start counting down from five, 154 00:10:13,140 --> 00:10:17,700 four, three, two, one? Well, let's go ahead and add 155 00:10:17,760 --> 00:10:22,500 another function and I'm gonna add it in the timer mechanism section and I'm 156 00:10:22,500 --> 00:10:24,120 going to call it start_timer. 157 00:10:24,900 --> 00:10:27,750 Now this function is super simple. 158 00:10:27,930 --> 00:10:32,930 All it's going to do is it's going to be responsible for calling that function 159 00:10:33,030 --> 00:10:36,660 countdown and it's going to count down from five seconds. 160 00:10:36,810 --> 00:10:39,840 So I'll move that inside the start_timer. 161 00:10:40,500 --> 00:10:45,500 And now the start timer is going to be the function that needs to be triggered 162 00:10:47,070 --> 00:10:49,560 when the start button gets pressed. 163 00:10:49,920 --> 00:10:53,280 Do you remember how to tie a function to a button in 164 00:10:53,280 --> 00:10:58,260 tkinter? Pause the video and see if you can solve this challenge so that you'll 165 00:10:58,260 --> 00:11:03,260 be able to run the code, hit start and the timer to start counting down. 166 00:11:06,630 --> 00:11:11,630 So the keyword argument is command and all we have to do is to tie it to the 167 00:11:12,210 --> 00:11:15,990 start_timer function, but without the parentheses. 168 00:11:16,500 --> 00:11:19,920 So now when I hit run and I click start, 169 00:11:20,340 --> 00:11:24,840 it starts the timer setting that text from five, four, three, 170 00:11:24,930 --> 00:11:25,763 two, one. 171 00:11:26,220 --> 00:11:31,220 So the main loop is listening and when the user interacts with the start button 172 00:11:31,890 --> 00:11:36,660 it actually calls the start_timer function which calls the count_down function 173 00:11:36,960 --> 00:11:39,900 and get it to count down from five seconds. 174 00:11:40,560 --> 00:11:43,980 Now we don't actually want to count down from five seconds. 175 00:11:44,010 --> 00:11:48,750 We want to count down in minutes because we're probably not going to be working 176 00:11:48,750 --> 00:11:50,130 for five seconds at a time. 177 00:11:50,160 --> 00:11:54,040 We're going to be working for 25 minutes or having a minute break. 178 00:11:54,580 --> 00:11:59,580 So how can I change this countdown to interpret this instead of as five seconds 179 00:12:01,390 --> 00:12:04,990 to five minutes? Well, let's have a think about that. 180 00:12:05,680 --> 00:12:09,850 If we wanted to count down, let's say one minute, 181 00:12:10,240 --> 00:12:14,230 then that in terms of seconds would be 60 seconds. 182 00:12:14,860 --> 00:12:18,670 All we have to do is to take the number of minutes that we want to count down 183 00:12:18,670 --> 00:12:22,540 by and multiply it by 60. In this case, 184 00:12:22,540 --> 00:12:27,040 if we wanted to count down it by five minutes instead of five seconds, 185 00:12:27,400 --> 00:12:30,160 all we have to do is multiply by 60. 186 00:12:30,670 --> 00:12:33,880 So then when we call this function count_down, 187 00:12:34,150 --> 00:12:36,790 instead of getting five seconds to count down, 188 00:12:36,820 --> 00:12:39,190 we get 300 seconds to count from. 189 00:12:39,880 --> 00:12:44,470 But now if we run our code, you can see it's going to start from 300. 190 00:12:44,740 --> 00:12:49,240 It's going to go down all the way down to zero. Now in terms of time, 191 00:12:49,390 --> 00:12:54,040 that is five minutes, but this is not a very good way to visualize it. 192 00:12:54,370 --> 00:12:58,570 Nobody thinks in terms of 288 seconds remaining, right? 193 00:12:59,140 --> 00:13:04,140 So we have to format this count so that we can display it in the format of 194 00:13:04,720 --> 00:13:09,010 00:00 like the usual kind of time, where for example, 195 00:13:09,010 --> 00:13:14,010 you have one minute and 35 seconds remaining or something like that. 196 00:13:15,520 --> 00:13:20,520 So how can we create something like this? If we have the count in terms of 197 00:13:20,680 --> 00:13:21,220 seconds, 198 00:13:21,220 --> 00:13:26,220 so let's say we have 300, and we wanted to know how many minutes where in that 199 00:13:26,800 --> 00:13:31,800 then all we have to do is take 300 and then divide it by 60 and we would get 200 00:13:32,680 --> 00:13:37,150 5, so that's 5 minutes. But what if the countdown has already been going 201 00:13:37,210 --> 00:13:42,210 and instead we had 245 seconds remaining? 202 00:13:42,790 --> 00:13:43,000 Well, 203 00:13:43,000 --> 00:13:48,000 we can actually get hold of how many minutes and seconds that is equivalent to. 204 00:13:50,020 --> 00:13:54,430 And the way we would do that is by taking that number, say 245, 205 00:13:54,760 --> 00:13:56,920 dividing it by 60 seconds 206 00:13:57,280 --> 00:14:02,280 and we would get a number 245 / 60 is 4.08, 207 00:14:05,440 --> 00:14:06,820 3 recurring. 208 00:14:07,570 --> 00:14:12,570 If we rounded that number down to get rid of all of the decimal places, 209 00:14:13,240 --> 00:14:16,060 then that would be equal to 4 minutes. 210 00:14:16,810 --> 00:14:21,810 And then if we want to get hold of how many seconds there are after we've gotten 211 00:14:22,420 --> 00:14:23,620 hold of the four minutes, 212 00:14:24,010 --> 00:14:29,010 then the way we do that is to use the modular because remember the modular 213 00:14:29,650 --> 00:14:34,450 divides a number by another number, so 245 divided by 60, 214 00:14:34,870 --> 00:14:37,240 and then it will give us the remainder. 215 00:14:37,420 --> 00:14:42,280 How much is left after it's cleanly divided. And in this case, 216 00:14:42,340 --> 00:14:47,340 this would actually be the number of seconds remaining after the four minutes 217 00:14:48,100 --> 00:14:51,650 has been taken away. So let's write this code out. 218 00:14:52,550 --> 00:14:57,550 The count minutes would be the count divided by 60, 219 00:14:59,780 --> 00:15:04,330 but then we have to round it down so that we get rid of all of the remainder. 220 00:15:04,330 --> 00:15:09,110 Now we don't want to round it so that if it was something like 3.6 221 00:15:09,170 --> 00:15:10,640 it becomes 4. 222 00:15:10,910 --> 00:15:15,770 We actually just want to get rid of everything after the decimal place. To do 223 00:15:15,770 --> 00:15:16,310 that, 224 00:15:16,310 --> 00:15:21,310 the easiest way is to import the math module and then use a function called math 225 00:15:23,870 --> 00:15:27,800 .floor and this math.floor, 226 00:15:27,830 --> 00:15:32,830 if I hover over it, is going to return the largest whole number that is less than 227 00:15:36,020 --> 00:15:37,310 or equal to x. 228 00:15:37,790 --> 00:15:42,790 If this was a 4.8, then the largest hole number less than 4.8 is 4. 229 00:15:46,250 --> 00:15:47,960 So that's basically what this is going to do. 230 00:15:48,170 --> 00:15:51,020 And this is going to give us the number of minutes. Now, 231 00:15:51,020 --> 00:15:53,000 the next thing we want to do is to know, well, 232 00:15:53,000 --> 00:15:58,000 how many seconds is left after we've taken away the minutes. To do this, 233 00:15:58,700 --> 00:15:59,660 we're going to do counts 234 00:15:59,720 --> 00:16:03,200 and then we're going to use the modulo to divide it by 60. 235 00:16:03,770 --> 00:16:08,770 So the modulo is going to give us the remainder number of seconds after we've 236 00:16:09,440 --> 00:16:12,650 cleanly divided it by 600. For example, 237 00:16:12,650 --> 00:16:16,250 if we had 100 seconds and we divide that by 60, well, 238 00:16:16,250 --> 00:16:17,870 that's going to be equal to one. 239 00:16:18,290 --> 00:16:23,290 So we can minus 60 from 100 and we get 40 as the remainder. 240 00:16:25,010 --> 00:16:27,830 That is what we will get after doing the modulo. 241 00:16:28,430 --> 00:16:31,220 So that's basically the number of seconds that remains. 242 00:16:32,240 --> 00:16:36,260 So now that we've got the minute and the second, we can actually change this 243 00:16:36,260 --> 00:16:41,260 count to use an f-string and we can format it so that we add the count minute 244 00:16:42,170 --> 00:16:43,003 first, 245 00:16:43,130 --> 00:16:48,130 and then we add a colon and then we add our count in seconds. 246 00:16:49,430 --> 00:16:53,900 Now look at what happens. We're going to try and count down five minutes. 247 00:16:54,260 --> 00:16:58,490 So we get hold of the number of seconds, we pass it over to this function, 248 00:16:58,880 --> 00:17:03,080 we work out what the count is equivalent to in minutes and seconds 249 00:17:03,470 --> 00:17:06,920 and then afterwards we subtract one second each time. 250 00:17:07,520 --> 00:17:10,310 So now when I run the code and I hit start, 251 00:17:10,640 --> 00:17:14,270 notice how it starts from 5 minutes, goes down to 4 minutes, 252 00:17:14,270 --> 00:17:15,980 50, 59, 253 00:17:16,070 --> 00:17:19,310 and then it keeps ongoing like a real timer. 254 00:17:20,180 --> 00:17:21,440 That's pretty cool. 255 00:17:21,650 --> 00:17:26,650 The only thing left to figure out is how can we get it to not display 5:0? 256 00:17:27,350 --> 00:17:32,060 How can we get it to display 5:00 257 00:17:32,840 --> 00:17:36,260 like you would see on a clock? To find out how to do that 258 00:17:36,290 --> 00:17:39,170 we have to learn about Python dynamic typing. 259 00:17:39,440 --> 00:17:43,370 We have to understand how that works and that is what we're going to be talking 260 00:17:43,370 --> 00:17:46,340 about in the next lesson. So I'll see you there. 25105