1
00:00:00,000 --> 00:00:04,500
[MUSIC]

2
00:00:04,500 --> 00:00:06,420
>> So, stay with me for a second.

3
00:00:06,420 --> 00:00:10,440
There's a language for making Graphical
User Interfaces, or GUI's, named TCL.

4
00:00:10,440 --> 00:00:13,330
Which is pronounced, Tickle.

5
00:00:13,330 --> 00:00:17,650
It's not a really difficult language to
use, but it's not as friendly as Python.

6
00:00:17,650 --> 00:00:20,120
TCL has a library for making widgets.

7
00:00:20,120 --> 00:00:23,330
Widgets are things like buttons and
inputs and icons.

8
00:00:23,330 --> 00:00:24,810
This library is known as Tk.

9
00:00:25,920 --> 00:00:29,270
In Python, we have a handy
built-in library named Tkinter for

10
00:00:29,270 --> 00:00:32,810
building Tcl GUIs with Tk's widgets.

11
00:00:32,810 --> 00:00:35,080
Tkinter turns Python code into Tcl code.

12
00:00:36,310 --> 00:00:40,380
If you want to build GUI applications in
Python, Tkinter is the place to start.

13
00:00:40,380 --> 00:00:43,660
TkInter applications run on pretty
much any desktop operating system,

14
00:00:43,660 --> 00:00:47,690
and thanks to Tk8.5 integration,
the apps will look native too.

15
00:00:48,760 --> 00:00:52,330
So let's see what all is involved in
creating GUI's with Tkinter and Python.

16
00:00:53,400 --> 00:00:55,450
All right.
So couple of things.

17
00:00:55,450 --> 00:00:59,260
I think this is the first workshop
where you've seen me use PyCharm.

18
00:00:59,260 --> 00:01:05,175
PyCharm is an IDE from Jet Brains that
works really well for Python stuff.

19
00:01:05,175 --> 00:01:09,695
I could have built what we're
going to do in Sublime text or

20
00:01:09,695 --> 00:01:14,635
anything else but I wanted to do it in
PyCharm just so you could see PyCharm.

21
00:01:14,635 --> 00:01:18,135
I may do a course over IDEs later so
we'll see.

22
00:01:18,135 --> 00:01:22,355
In this workshop, we're going to
build a pomodorro application.

23
00:01:22,355 --> 00:01:24,310
If you don't know what pomodorro is.

24
00:01:24,310 --> 00:01:29,180
It's kind of a work flow thing,
the idea is that you work for

25
00:01:29,180 --> 00:01:34,160
25 minutes on some thing that
you can do in 25 minutes and

26
00:01:34,160 --> 00:01:38,040
then when the 25 minutes runs out you
stop working, you take like a five minute

27
00:01:38,040 --> 00:01:42,100
break, you come back, you do this
twice and you've worked for an hour.

28
00:01:42,100 --> 00:01:44,120
Do it four times you work for two hours.

29
00:01:44,120 --> 00:01:47,650
Somewhere in there, like say after two
hours, you stop and take a longer break.

30
00:01:47,650 --> 00:01:50,340
Maybe a 15, 20 minute break.

31
00:01:50,340 --> 00:01:53,220
Our timer's gonna be pretty simple,
our app's gonna be pretty simple.

32
00:01:53,220 --> 00:01:54,660
We're gonna have like
a logo thing at the top,

33
00:01:54,660 --> 00:01:58,470
we're gonna have a countdown timer, and
then we're gonna have a couple of buttons

34
00:01:58,470 --> 00:02:02,170
one that starts our 25 minute timer and
one that stops it.

35
00:02:02,170 --> 00:02:05,520
We're not gonna record what
you did on the 25 minutes or

36
00:02:05,520 --> 00:02:10,130
anything like that,
just you can add all that yourself.

37
00:02:10,130 --> 00:02:14,180
That's a great thing for you to add at
the end of this workshop all by yourself.

38
00:02:14,180 --> 00:02:18,230
Sadly we can't play an alert sound at
the end when we're using just Tkinter.

39
00:02:18,230 --> 00:02:22,070
But we'll pop up a dialogue window and
that'll get our attention.

40
00:02:22,070 --> 00:02:24,640
Now before we jump all
the way into the app,

41
00:02:24,640 --> 00:02:28,320
I wanna just show you some of the ideas of
Tkinter because there's a lot to Tkinter.

42
00:02:28,320 --> 00:02:30,360
So I'm gonna make a new file.

43
00:02:31,760 --> 00:02:32,950
And I'm just gonna call this one,

44
00:02:32,950 --> 00:02:36,320
let's just call this intro.pi,
this is gonna be a basic thing.

45
00:02:36,320 --> 00:02:39,450
Now most people import everything
from the Tkinter library.

46
00:02:39,450 --> 00:02:42,700
They'll do from Tkinter import start.

47
00:02:42,700 --> 00:02:44,260
I really don't like that.

48
00:02:44,260 --> 00:02:45,480
I find that really messy.

49
00:02:45,480 --> 00:02:48,230
So I'm just going to import tkinter.

50
00:02:48,230 --> 00:02:52,440
So one of the basic things that
tkinter requires is that we have to

51
00:02:52,440 --> 00:02:55,730
Create a root window or a root app.

52
00:02:55,730 --> 00:03:02,120
So, to do that we
instantiate this TK class.

53
00:03:02,120 --> 00:03:08,070
The TK in Tkinter is for TK, which is
a widget library for the TCL language.

54
00:03:08,070 --> 00:03:14,340
And then to make this run forever
we actually do a root dot Mainloop.

55
00:03:14,340 --> 00:03:19,570
And if we run this, yup,

56
00:03:19,570 --> 00:03:24,710
just run that, then we get, let me pull
it over here, we get this little window.

57
00:03:24,710 --> 00:03:26,760
And there's nothing in it,
and it's just this window.

58
00:03:26,760 --> 00:03:28,230
There's nothing there.

59
00:03:28,230 --> 00:03:30,980
Not the most exciting thing ever.

60
00:03:30,980 --> 00:03:31,990
But it's okay.

61
00:03:31,990 --> 00:03:35,040
It's a little, it's a little thing, right?

62
00:03:35,040 --> 00:03:36,940
We probably wanna show something in here.

63
00:03:36,940 --> 00:03:41,120
So let's make some text with a label.

64
00:03:41,120 --> 00:03:47,334
Label is the class that let's
us make just text stuff.

65
00:03:47,334 --> 00:03:49,170
So we'll say, hi there.

66
00:03:50,550 --> 00:03:52,890
And it's a Tkinter.label.

67
00:03:52,890 --> 00:03:55,560
And labels have a few
different attributes.

68
00:03:55,560 --> 00:04:02,530
The first thing we have to do is we have
to say, what does this label belong to?

69
00:04:02,530 --> 00:04:04,790
And it's gonna belong to our root object.

70
00:04:06,690 --> 00:04:08,430
And then we can set some text on it.

71
00:04:08,430 --> 00:04:10,220
So let's just set the text Hi there.

72
00:04:11,360 --> 00:04:13,150
Yeah I think that's it,
that's good for now.

73
00:04:13,150 --> 00:04:16,650
So later on we're gonna use this
thing that's known as a grid, but

74
00:04:16,650 --> 00:04:19,070
for now we're gonna use
a method that's called pack.

75
00:04:20,280 --> 00:04:24,400
And pack just lets Tkinter figure
out where objects should go.

76
00:04:24,400 --> 00:04:30,550
So we'll do hi_there.pack and
we'll save and

77
00:04:30,550 --> 00:04:37,090
we'll run and then, oh,
let me see if I can bring this over.

78
00:04:37,090 --> 00:04:37,810
So small.

79
00:04:39,020 --> 00:04:39,900
There it is, look at that.

80
00:04:39,900 --> 00:04:41,230
It says, Hi there.

81
00:04:41,230 --> 00:04:42,390
I mean, it's not even big enough.

82
00:04:42,390 --> 00:04:44,090
There, that's a little better.

83
00:04:44,090 --> 00:04:45,970
It's not even big enough
to see all three buttons.

84
00:04:45,970 --> 00:04:49,610
So that's the absolute minimum
basics to get something on there.

85
00:04:49,610 --> 00:04:52,180
And that's kinda cool,
I mean, that's really simple.

86
00:04:52,180 --> 00:04:54,610
That's only been a few lines of code.

87
00:04:54,610 --> 00:04:56,940
So let's kill that.

88
00:04:56,940 --> 00:04:58,090
That's a little hard to see.

89
00:04:58,090 --> 00:05:02,180
Let's add some color and
some strechiness to it, all right?

90
00:05:02,180 --> 00:05:04,250
Let's make it a little
bit more interesting.

91
00:05:04,250 --> 00:05:05,610
So we can set two colors here.

92
00:05:05,610 --> 00:05:08,410
We can do bg or we can do background.

93
00:05:09,520 --> 00:05:11,990
But bg is less typing.

94
00:05:11,990 --> 00:05:14,430
And then we give it a string
of the color to use.

95
00:05:14,430 --> 00:05:17,000
I'll link to the docs,
there's a whole list of colors.

96
00:05:17,000 --> 00:05:21,890
And then let's say white for
the fg or foreground and

97
00:05:21,890 --> 00:05:25,650
then inside pack here we can
specify a couple of things.

98
00:05:25,650 --> 00:05:28,660
We can specify fill and so

99
00:05:28,660 --> 00:05:34,360
fill is what direction do you
want me to make this thing fit.

100
00:05:35,850 --> 00:05:40,640
And so we can use Tkinter.x and
it'll fit across horizontally.

101
00:05:40,640 --> 00:05:43,500
Or filter.y and it'll fit vertically.

102
00:05:43,500 --> 00:05:47,230
Or we can do both and
it'll do both of those.

103
00:05:47,230 --> 00:05:53,520
But since we need it to change size,
we also have to set expand equals True.

104
00:05:53,520 --> 00:05:56,430
We could say expand equals one, something
like that, but expand equals true.

105
00:05:57,440 --> 00:05:58,300
Let's run that one.

106
00:05:59,320 --> 00:06:03,430
Sorry these all appear offscreen and
I have to bring them over.

107
00:06:03,430 --> 00:06:06,100
So now, ooh stretchy.

108
00:06:07,950 --> 00:06:10,960
So again, not super exciting.

109
00:06:10,960 --> 00:06:13,510
But kinda cool, it works.

110
00:06:13,510 --> 00:06:17,130
Let's add another item to it,
let's add another widget.

111
00:06:17,130 --> 00:06:20,580
By the way, labels, all this stuff,
these are called widgets.

112
00:06:20,580 --> 00:06:22,810
So let's add another widget.

113
00:06:22,810 --> 00:06:28,340
We'll just say my_name, and
tkinter.label, it belongs to root.

114
00:06:28,340 --> 00:06:32,040
And the text, I'm gonna set,
My name is Kenneth.

115
00:06:32,040 --> 00:06:34,820
Feel free to put your own name in there.

116
00:06:34,820 --> 00:06:40,210
And then, of course, to put the label
into the object that it belongs to,

117
00:06:40,210 --> 00:06:42,448
in this case root, we have to pack it.

118
00:06:42,448 --> 00:06:47,489
So my_name.pack.

119
00:06:47,489 --> 00:06:49,130
And run it again.

120
00:06:50,520 --> 00:06:51,760
And here we go.

121
00:06:51,760 --> 00:06:54,380
They sit nicely on top of each other.

122
00:06:54,380 --> 00:06:58,310
Now, this is what's kind of cool,
because we have this fill and this expand,

123
00:06:58,310 --> 00:07:00,750
and then this one's packed in.

124
00:07:00,750 --> 00:07:02,490
It's packed on the bottom.

125
00:07:02,490 --> 00:07:07,150
So if we resize this window, woo,

126
00:07:07,150 --> 00:07:11,600
the name label stays the size
that it just is automatically.

127
00:07:11,600 --> 00:07:15,880
And the other one still takes
up as much room as it needs to.

128
00:07:15,880 --> 00:07:16,660
So that's kind of cool.

129
00:07:16,660 --> 00:07:19,150
That's kind of neat to be able to do that.

130
00:07:19,150 --> 00:07:22,630
I don't really like using pack.

131
00:07:22,630 --> 00:07:27,360
I find it a little bit harder to predict
exactly where things are gonna go.

132
00:07:27,360 --> 00:07:30,530
I mean you can pack it to a side, you
can say like, hey put this on the left,

133
00:07:30,530 --> 00:07:31,800
put this on the right, stuff like that.

134
00:07:31,800 --> 00:07:35,450
But it's a little bit
like using floats in CSS.

135
00:07:35,450 --> 00:07:41,530
So, to me it's just a little bit harder to
figure out exactly what's going to happen.

136
00:07:42,540 --> 00:07:47,450
So, let's start a new script and
we'll start on our actual application.