1 00:00:00,950 --> 00:00:03,860 Okay, so we've built a grid, and we've built a banner, but 2 00:00:03,860 --> 00:00:04,870 right now that's all we got. 3 00:00:04,870 --> 00:00:06,690 We've got this logo banner thing, 4 00:00:06,690 --> 00:00:10,430 and then we've got a grid, not the most exciting thing ever. 5 00:00:10,430 --> 00:00:14,840 So, we need buttons to start and stop our timer. 6 00:00:14,840 --> 00:00:18,580 So, let's create a couple of buttons and add them to the bottom of the window. 7 00:00:18,580 --> 00:00:20,000 I'm gonna do this a little bit backwards. 8 00:00:20,000 --> 00:00:23,438 I'm gonna say that I'm gonna call self.build_buttons. 9 00:00:23,438 --> 00:00:28,046 And then I'm gonna come down here and actually write self.build_buttons. 10 00:00:28,046 --> 00:00:32,990 All right, so, build_buttons. 11 00:00:32,990 --> 00:00:37,210 All right, so, the first thing I wanna do, because I had these two buttons and 12 00:00:37,210 --> 00:00:40,460 I wanna make sure that they do what I want them to do and 13 00:00:40,460 --> 00:00:42,180 appear where I want them to appear. 14 00:00:42,180 --> 00:00:45,552 I can do this with pack, but reasoning grids let's just keep using grid. 15 00:00:45,552 --> 00:00:49,579 I'm gonna make a new grid for them to fit into inside the old grid. 16 00:00:49,579 --> 00:00:50,859 So, I'll make a new frame. 17 00:00:50,859 --> 00:00:55,961 So, we're gonna say buttons_frame = tkinter.Frame and 18 00:00:55,961 --> 00:00:58,670 this belongs to the mainframe. 19 00:01:00,820 --> 00:01:01,950 All right? 20 00:01:01,950 --> 00:01:06,030 And then we're gonna say the buttons_frame.grid. 21 00:01:06,030 --> 00:01:12,097 It's in row 2 and it's in column 0. 22 00:01:12,097 --> 00:01:18,071 And it's sticky on, I mean, again, we really only need east and west. 23 00:01:18,071 --> 00:01:23,900 But we're gonna do north, south, east, and west, just to do it. 24 00:01:23,900 --> 00:01:25,680 And then I want this one to be padded as well. 25 00:01:27,290 --> 00:01:29,657 What's cool is that that actually fits all on one line. 26 00:01:29,657 --> 00:01:33,670 That's 77 characters, so that's cool. 27 00:01:33,670 --> 00:01:39,000 So now, let's configure the grid of our buttons frame. 28 00:01:39,000 --> 00:01:43,520 Now, we only have one row, and that row isn't going to resize. 29 00:01:43,520 --> 00:01:47,510 So, it's row 0 and weight of 0, so we don't even have to talk about it, but 30 00:01:47,510 --> 00:01:48,910 let's talk about our columns. 31 00:01:48,910 --> 00:01:55,758 So column 0 is gonna have a weight of 1, and let's just copy this. 32 00:01:55,758 --> 00:01:57,800 Column 1 is gonna have a weight of 1. 33 00:01:58,860 --> 00:02:00,870 Okay, so now, let's build the buttons. 34 00:02:02,090 --> 00:02:06,907 So we're gonna have a start_button, and we're gonna assign this to self so 35 00:02:06,907 --> 00:02:08,620 we can get back to it later. 36 00:02:08,620 --> 00:02:12,502 And it's gonna be tkinkter.Button, not butter. 37 00:02:12,502 --> 00:02:15,920 And it's gonna belong to the buttons_frame. 38 00:02:15,920 --> 00:02:21,300 And I want the text on this to be the word Start and that's it. 39 00:02:21,300 --> 00:02:22,610 Now, we're gonna get these commands later, but 40 00:02:22,610 --> 00:02:23,920 we don't have to worry about that right now. 41 00:02:23,920 --> 00:02:26,210 We don't have to assign any commands at the beginning. 42 00:02:27,480 --> 00:02:32,130 And then, let's make a stop_button. 43 00:02:32,130 --> 00:02:34,620 And I bet you can guess most of this. 44 00:02:34,620 --> 00:02:37,150 The text is gonna be Stop. 45 00:02:37,150 --> 00:02:39,120 Who'd have thunk, right? 46 00:02:39,120 --> 00:02:42,517 Okay, so now let's assign these things to their grid. 47 00:02:42,517 --> 00:02:44,329 You know what, I'm gonna. 48 00:02:44,329 --> 00:02:46,423 Can I make that smaller? 49 00:02:46,423 --> 00:02:48,188 I guess I can, okay. 50 00:02:48,188 --> 00:02:54,247 So start_button.grid, I want it to be in row 0 and column 0. 51 00:02:54,247 --> 00:02:58,427 And I want it to be sticky to both sides. 52 00:02:58,427 --> 00:03:04,960 And you know what, I want this exact same thing for stop_button. 53 00:03:04,960 --> 00:03:09,540 The only difference is I want it to be in column 1, not column 0. 54 00:03:09,540 --> 00:03:11,648 So let's see what this does. 55 00:03:11,648 --> 00:03:16,550 Let's run it, and bring the window over. 56 00:03:18,710 --> 00:03:22,530 And there's our two buttons, and the buttons grow with the window. 57 00:03:22,530 --> 00:03:25,680 That's what that sticky east west gives us. 58 00:03:25,680 --> 00:03:27,197 So, we can start. We can stop. 59 00:03:27,197 --> 00:03:30,597 They're not doing anything at this point, and that's fine, but 60 00:03:30,597 --> 00:03:31,820 that's what we can do. 61 00:03:33,320 --> 00:03:34,600 Okay, so that's cool. 62 00:03:34,600 --> 00:03:36,450 Let's start on our timer. 63 00:03:36,450 --> 00:03:37,370 All right. 64 00:03:37,370 --> 00:03:40,270 So, we need to build a timer. 65 00:03:41,950 --> 00:03:49,187 So let's go up here, and we're gonna call self.build_timer. 66 00:03:49,187 --> 00:03:50,467 Yeah, more or less. 67 00:03:50,467 --> 00:03:54,561 And then we're gonna come down here and make a new function. 68 00:03:54,561 --> 00:04:00,030 You know what? Let's do, yeah, we'll do that here. 69 00:04:00,030 --> 00:04:03,250 def build_timer, all right. 70 00:04:03,250 --> 00:04:06,720 And what I wanna do in here is I wanna build the label. 71 00:04:07,850 --> 00:04:10,753 So timer is gonna be tkinter.Label. 72 00:04:10,753 --> 00:04:15,267 It's gonna belong to the mainframe cuz we're gonna put it into that grid in 73 00:04:15,267 --> 00:04:16,064 the middle. 74 00:04:16,064 --> 00:04:22,280 text is gonna just =TIMER for now, and let's give it a nice big font. 75 00:04:22,280 --> 00:04:26,610 We'll say Helvetica, and we'll make it 36 pixels tall. 76 00:04:28,500 --> 00:04:31,952 And then, we want the timer to go into its grid. 77 00:04:31,952 --> 00:04:35,537 We want it to be in row 1, column 0. 78 00:04:35,537 --> 00:04:39,410 And we want it sticky to all four directions. 79 00:04:39,410 --> 00:04:40,400 There's a problem, though. 80 00:04:40,400 --> 00:04:44,670 Right now, okay, let's run this just so you can see what it looks like. 81 00:04:44,670 --> 00:04:47,480 So there's our timer, and we can resize it, and 82 00:04:47,480 --> 00:04:48,800 our time stays right in the middle. 83 00:04:48,800 --> 00:04:52,280 Okay, the problem is though we don't want it to actually say TIMER, right? 84 00:04:52,280 --> 00:04:55,390 We want there to be a clock. 85 00:04:55,390 --> 00:04:58,050 So, what we need to do is we need to make a variable that 86 00:04:59,300 --> 00:05:00,320 we're gonna be able to change. 87 00:05:01,660 --> 00:05:03,900 So, let's come back up here to the top, and 88 00:05:03,900 --> 00:05:07,750 we're gonna make a new item right here. 89 00:05:07,750 --> 00:05:13,260 Now, TkInter has these certain variable types, and they're a little weird for 90 00:05:13,260 --> 00:05:18,910 working within Python because you're used to being able to just change an attribute. 91 00:05:18,910 --> 00:05:20,340 Things in Tkinter are a little different. 92 00:05:20,340 --> 00:05:23,470 You can change attributes on some stuff, on some stuff you can't. 93 00:05:23,470 --> 00:05:25,360 You have to use this config method. 94 00:05:25,360 --> 00:05:27,805 Most of the time, you should use the config method. 95 00:05:27,805 --> 00:05:33,780 And then you pass in kwargs or a dictionary unpacked as kwargs or whatever. 96 00:05:33,780 --> 00:05:36,840 So anyway, Tkinter has some different variable types. 97 00:05:36,840 --> 00:05:37,850 There's a string var. 98 00:05:37,850 --> 00:05:38,430 There's an int var. 99 00:05:38,430 --> 00:05:42,920 We're gonna use string var for right now because we want it to hold onto a string. 100 00:05:42,920 --> 00:05:46,547 And this will let us watch the variable later on. 101 00:05:46,547 --> 00:05:50,920 And whenever the variable changes, we can trigger other stuff to happen, okay? 102 00:05:50,920 --> 00:05:58,188 So let's make this, we're gonna call it timer_text, and it's gonna be a StringVar. 103 00:05:58,188 --> 00:05:59,130 Okay, and that's it. 104 00:05:59,130 --> 00:05:59,920 That's all we gotta do. 105 00:06:01,090 --> 00:06:06,210 And then come down here and instead of saying TIMER, like this one does. 106 00:06:06,210 --> 00:06:12,012 We're gonna make it say self.timer_text.get. 107 00:06:12,012 --> 00:06:12,951 See, we have to use that method. 108 00:06:12,951 --> 00:06:16,830 We have to use .get instead of timer_text. 109 00:06:16,830 --> 00:06:18,620 So that's a little bit weird. 110 00:06:18,620 --> 00:06:21,910 To get to actually counting stuff, right? 111 00:06:21,910 --> 00:06:24,960 We need a variable that holds on to some time. 112 00:06:26,190 --> 00:06:31,410 So let's come back up here, and let's make another one, another variable. 113 00:06:31,410 --> 00:06:35,780 And we'll say self.time_left, and it's an IntVar 114 00:06:37,170 --> 00:06:41,050 cuz we always have a number of seconds left, and it's always a whole number. 115 00:06:41,050 --> 00:06:45,300 Believe it or not IntVars hold on to ints, okay? 116 00:06:45,300 --> 00:06:50,660 Now we could use date, time and be hey, find me a time 25 minutes ahead of now, 117 00:06:50,660 --> 00:06:53,800 and then count down the time to there. 118 00:06:53,800 --> 00:06:56,688 That's nowhere near as simple as this. 119 00:06:56,688 --> 00:07:01,003 I just wanna hold on to a number of seconds, right? 120 00:07:01,003 --> 00:07:01,850 And just be done with it. 121 00:07:01,850 --> 00:07:09,630 So, up here, outside of my class, I'm gonna define a constant, DEFAULT_GAP. 122 00:07:09,630 --> 00:07:13,677 And it's gonna be, let's see there are 60 seconds in a minute, and 123 00:07:13,677 --> 00:07:15,332 I want 25 minutes, okay? 124 00:07:15,332 --> 00:07:17,175 So 60 * 25. 125 00:07:17,175 --> 00:07:20,990 And then here, I've made this time_left and now I'm gonna set it. 126 00:07:23,220 --> 00:07:26,940 And I'm gonna set it to DEFAULT_GAP. 127 00:07:26,940 --> 00:07:32,250 Now, the default time for Pymodoro is 25 minutes, and I've just set this thing up. 128 00:07:32,250 --> 00:07:32,920 So that's cool. 129 00:07:32,920 --> 00:07:35,020 I don't have to do anything else with this. 130 00:07:35,020 --> 00:07:37,410 Before we get into the next stuff, let's take a little break.