1
00:00:00,672 --> 00:00:03,300
All right, so I'm here in my new
script which I've called pymodoro,

2
00:00:03,300 --> 00:00:06,600
cuz I'm super creative at naming stuff.

3
00:00:06,600 --> 00:00:11,740
And again we just need to import tkinter,
and

4
00:00:11,740 --> 00:00:19,550
we of course need to make our thing there,
and we need to call mainloop.

5
00:00:19,550 --> 00:00:22,090
And so mainloop just makes it run forever.

6
00:00:22,090 --> 00:00:27,630
We wanna be safe, so what we
probably wanna do is put this inside

7
00:00:27,630 --> 00:00:32,802
of an if __name__ ==

8
00:00:32,802 --> 00:00:37,378
'__main__', then we'll call that.

9
00:00:37,378 --> 00:00:41,110
Actually ,let's put both of
these things down in here.

10
00:00:42,690 --> 00:00:43,880
There we go.

11
00:00:43,880 --> 00:00:49,780
So that way it only gets created if it's
legitimately like being run as a script.

12
00:00:49,780 --> 00:00:53,870
So, one of the nice things with
tkinter is that you can create a class

13
00:00:53,870 --> 00:00:58,380
that controls like your window, or
even just part of your window and

14
00:00:58,380 --> 00:01:00,870
other classes that control
other parts of your window.

15
00:01:00,870 --> 00:01:04,540
So we're gonna make a class that
controls our entire application.

16
00:01:04,540 --> 00:01:06,980
And so we're going to do that.

17
00:01:08,020 --> 00:01:10,870
And then we're going to
register our root app,

18
00:01:10,870 --> 00:01:14,680
because we've gotta kick it root down,
with that class.

19
00:01:14,680 --> 00:01:16,740
So it's a little bit weird.

20
00:01:16,740 --> 00:01:17,790
Let's walk through how to do this.

21
00:01:17,790 --> 00:01:19,570
So we're going to call
this class Pymodoro.

22
00:01:21,960 --> 00:01:25,709
Inside the def __init__ we're going

23
00:01:25,709 --> 00:01:30,540
to take an argument that
we're gonna call master.

24
00:01:30,540 --> 00:01:35,540
So this is like the master window, the
master application, the master process,

25
00:01:35,540 --> 00:01:38,292
kind of however you wanna
think about that and

26
00:01:38,292 --> 00:01:42,110
then we're gonna say self.master = master.

27
00:01:42,110 --> 00:01:44,440
And that's all we have to do for
that bit, and

28
00:01:44,440 --> 00:01:48,950
then down here we do Pymodoro and
we pass in root.

29
00:01:48,950 --> 00:01:51,040
And then we still call root.mainloop.

30
00:01:51,040 --> 00:01:52,380
That doesn't change.

31
00:01:52,380 --> 00:01:56,890
All right, so if we run it right now, all
we do is get a window like we did before.

32
00:01:56,890 --> 00:02:00,230
Just a little white square,
not really all that interesting.

33
00:02:00,230 --> 00:02:06,130
So, how do we start putting stuff
into this in a more logical way?

34
00:02:06,130 --> 00:02:12,630
Well, what we can do is we can use a grid,
which I think we should do,

35
00:02:12,630 --> 00:02:17,340
and normally when we're using a grid,
we want to use a frame, and

36
00:02:17,340 --> 00:02:21,520
a frame is just an invisible box
that we can put things into.

37
00:02:21,520 --> 00:02:23,920
And so what we're gonna do is
we're gonna make a frame, and

38
00:02:23,920 --> 00:02:25,840
then we're gonna put our
grid into that frame.

39
00:02:25,840 --> 00:02:27,280
All right.

40
00:02:27,280 --> 00:02:33,470
So here inside our __init__, we're gonna
do self.mainframe, cuz it's our mainframe.

41
00:02:33,470 --> 00:02:34,488
It's the outside part there.

42
00:02:34,488 --> 00:02:40,160
It's a tkinter.Frame, and
it belongs to self.master.

43
00:02:40,160 --> 00:02:44,120
And just in case, we're gonna set
the background equal to white.

44
00:02:44,120 --> 00:02:48,860
And then we want to
pack this mainframe in.

45
00:02:48,860 --> 00:02:51,594
This is like one of the very few
times we're gonna use pack here, and

46
00:02:51,594 --> 00:02:55,800
we wanna make sure that the frame
takes up the entire window.

47
00:02:55,800 --> 00:03:02,620
So the fill is gonna be tkinter.BOTH,
and expand is gonna be True.

48
00:03:02,620 --> 00:03:05,330
Expand can be 1, it can be a string,

49
00:03:05,330 --> 00:03:07,765
it can be whatever,
it just has to be truthy or falsy.

50
00:03:08,830 --> 00:03:09,770
If we run this,

51
00:03:09,770 --> 00:03:12,720
we're not gonna see anything new,
because we haven't made our grid.

52
00:03:12,720 --> 00:03:15,720
Even once we've made the grid
we won't see anything, but

53
00:03:15,720 --> 00:03:17,630
the grid's our first step,
so let's start with this.

54
00:03:17,630 --> 00:03:23,880
So I'm actually gonna make
a new method called build_grid,

55
00:03:23,880 --> 00:03:29,180
and this is just going to control
the building of the grid, okay?

56
00:03:29,180 --> 00:03:32,110
So I'm gonna do self.mainframe.

57
00:03:32,110 --> 00:03:34,700
And I'm gonna use this thing
called columnconfigure.

58
00:03:35,910 --> 00:03:39,370
And I'm setting the column and
then the weight.

59
00:03:40,950 --> 00:03:44,370
Now let me do the rest of these and
then I'll explain what they are.

60
00:03:44,370 --> 00:03:46,235
So we're gonna do rowconfigure.

61
00:03:50,916 --> 00:03:53,936
And then row 1.

62
00:03:53,936 --> 00:04:00,296
And then, Row 2.

63
00:04:00,296 --> 00:04:01,240
Okay.

64
00:04:01,240 --> 00:04:02,330
So what does this do?

65
00:04:02,330 --> 00:04:03,840
So we have a grid, right?

66
00:04:03,840 --> 00:04:06,948
It has an x and y,
it has columns and rows.

67
00:04:06,948 --> 00:04:10,120
So, what we said is that we're gonna
have one column, which is column 0,

68
00:04:10,120 --> 00:04:11,760
and it has a weight of 1.

69
00:04:11,760 --> 00:04:13,730
Now, this weight 1 means for

70
00:04:13,730 --> 00:04:17,650
it to be resized proportionately
to everything else.

71
00:04:17,650 --> 00:04:20,025
And then here we have three rows.

72
00:04:20,025 --> 00:04:25,720
Row 0 and row 2, so the top row and the
bottom row, they both have a weight of 0,

73
00:04:25,720 --> 00:04:29,598
so they're not going to resize,
they're gonna stay their own size.

74
00:04:29,598 --> 00:04:33,320
But row 1, which is our middle one,
is going to

75
00:04:33,320 --> 00:04:38,950
take up as much room as it needs to while
the other two rows maintain their size.

76
00:04:38,950 --> 00:04:42,740
Okay, we don't want them to grow, but
we do want that middle one to grow.

77
00:04:42,740 --> 00:04:46,700
Okay, so now we're gonna call in here,

78
00:04:46,700 --> 00:04:51,250
self.build_grid, so the grid gets built.

79
00:04:52,280 --> 00:04:57,700
Okay, so now that we have something,
let's add our banner,

80
00:04:57,700 --> 00:05:01,230
our logo, to the top of the window,
all right?

81
00:05:01,230 --> 00:05:03,850
So again,
I like to do this as its own method.

82
00:05:05,230 --> 00:05:11,050
So let's say build_banner, and
it doesn't take any arguments.

83
00:05:11,050 --> 00:05:13,545
Most of our methods here are not
gonna take arguments, so

84
00:05:13,545 --> 00:05:18,500
we're gonna build_banner,
and banner is going to be

85
00:05:18,500 --> 00:05:24,110
a tkinter.label, of course, and
it's gonna belong to the mainframe.

86
00:05:25,610 --> 00:05:30,920
And let's set the background to be black,
and

87
00:05:30,920 --> 00:05:35,030
again, we could do that as bg
instead of background if we wanted.

88
00:05:35,030 --> 00:05:39,530
The text,
I want it to say it's just Pymodoro, and

89
00:05:39,530 --> 00:05:43,090
I want the foreground to be white.

90
00:05:43,090 --> 00:05:47,910
We're gonna set the font, and to set
the font we have to pass in a tuple, or

91
00:05:47,910 --> 00:05:51,365
a tuple, and
we specify the font that we want.

92
00:05:51,365 --> 00:05:58,270
So in this case, I want Helvetica, and
then the font size that we want, so 24.

93
00:05:58,270 --> 00:06:01,520
I'll link in the teachers
notes to documentation for

94
00:06:01,520 --> 00:06:03,820
how to do a lot more stuff with type.

95
00:06:03,820 --> 00:06:05,810
You can do all things are type, but

96
00:06:05,810 --> 00:06:07,440
we're not going to worry about
it too much for right now.

97
00:06:07,440 --> 00:06:13,290
You know what, let's do red and,
yeah, let's do white.

98
00:06:13,290 --> 00:06:16,105
Makes more since right, pomodoro,
it's a tomato, if you didn't know,

99
00:06:16,105 --> 00:06:18,940
pomodoro is apparently Italian for tomato.

100
00:06:18,940 --> 00:06:24,649
Okay, so then we have add this to our
grid, so we're going to call banner.grid.

101
00:06:26,000 --> 00:06:29,250
And so since we have it,
our mainframe's a grid,

102
00:06:29,250 --> 00:06:31,820
we can specify where this
thing goes in the grid.

103
00:06:31,820 --> 00:06:37,880
So we want this to be in row 0,
because we want this to be on the top, and

104
00:06:37,880 --> 00:06:43,690
we want it to be in column 0 because it
needs to be, we want it right here, right?

105
00:06:43,690 --> 00:06:45,060
0, 0.

106
00:06:45,060 --> 00:06:46,730
Okay.

107
00:06:46,730 --> 00:06:54,636
And then, we're going to pass
in the stickiness, okay?

108
00:06:54,636 --> 00:06:59,108
So stickiness, or sticky rather,
we specify an iterable, a string,

109
00:06:59,108 --> 00:07:01,430
a list of strings, stuff like that.

110
00:07:01,430 --> 00:07:04,800
And we specify the directions
that we want something to be.

111
00:07:04,800 --> 00:07:08,000
So if you think about a square,
the top would be north,

112
00:07:09,050 --> 00:07:11,820
the sides would be east and west,
and the bottom would be south.

113
00:07:11,820 --> 00:07:14,960
So we're specify where we
want this to stick to.

114
00:07:14,960 --> 00:07:18,410
Well, our column, or our row rather,
is not going to resize vertically,

115
00:07:18,410 --> 00:07:21,730
it's never gonna get taller, so we only
have to worry about sticking to the sides.

116
00:07:21,730 --> 00:07:24,080
So we're gonna tell it to
stick to east and west, or

117
00:07:24,080 --> 00:07:26,830
you could say west and
east if you want to type we instead of ew.

118
00:07:28,500 --> 00:07:32,480
Then, I wanna give it a little
bit of padding on the sides, and

119
00:07:32,480 --> 00:07:33,440
on the top and bottom.

120
00:07:33,440 --> 00:07:37,520
So to pad the sides, I'll do padx=10,
and then to pad the top and

121
00:07:37,520 --> 00:07:40,330
bottom, I'll say pady=10.

122
00:07:40,330 --> 00:07:43,070
Cuz x is our horizontal,
and y is our vertical.

123
00:07:44,230 --> 00:07:45,050
These specify padding.

124
00:07:45,050 --> 00:07:47,290
Padding is blank space between
the content and the edge.

125
00:07:48,290 --> 00:07:50,970
So we're gonna specify this on the x and
y-axis.

126
00:07:50,970 --> 00:07:51,580
Give it 10 to each.

127
00:07:52,930 --> 00:07:53,590
Okay.

128
00:07:53,590 --> 00:07:56,130
So, we've got some stuff.

129
00:07:56,130 --> 00:07:56,750
Oh, sorry.

130
00:07:56,750 --> 00:08:00,110
We need to come back up here
after we build this grid.

131
00:08:00,110 --> 00:08:03,430
And we need to do self.build_banner.

132
00:08:03,430 --> 00:08:04,230
There we go.

133
00:08:04,230 --> 00:08:06,396
Okay.
So now, let's try running it.

134
00:08:10,316 --> 00:08:11,710
And see what we get.

135
00:08:15,980 --> 00:08:19,460
All right, and here is what we've got.

136
00:08:21,010 --> 00:08:24,150
So we just have a banner that
just resizes with the window.

137
00:08:25,160 --> 00:08:27,170
Nothing amazing, but we've got something.