Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We need to trigger actions when we click the start and stop buttons.
The official docs for Tkinter aren't the best in the world but they'll get you started. The documentation from effbot hasn't been updated in about a decade but it's actually still mostly accurate. These are my two main resources for learning Tkinter and preparing this workshop.
More information about colors and fonts.
Terms and things
Tk() - A Tkinter application. This is what is responsible for the window or application you see on your screen. You'll end up binding most things to this.
mainloop() - The loop that keeps your Tkinter app running. This loop runs forever.
Frame - An invisible box that you can put things in.
Label - A piece of text on the screen.
Button - A button (whodathunk?!)
StringVar - A variable that holds onto a string.
IntVar - A variable that holds onto an int.
trace() - A way to follow the changes and access of a variable.
columnconfigure() and rowconfigure() - Methods to configure the number and weight of columns and rows.
pack() - Method to insert a widget in the available space.
Okay so we made our buttons, and
I said we can give them commands.
0:00
Right now they don't have any commands.
0:04
So, let's give them a command to run
whenever they're clicked, all right?
0:05
So, we need a new method that's gonna
run when the start button is clicked,
0:11
we need one when the stop
button is clicked.
0:15
So let's go down here, and
down here at the bottom.
0:18
I mean, we're done building stuff for
right now.
0:24
We got a banner, we got a timer.
0:26
Yeah, we don't need to
build anything else.
0:28
All right, this is gonna be
run when we start the timer.
0:29
So let's call it start timer, all right.
0:32
I mean,
why be creative if we don't have to be.
0:35
Okay, so, the first the we
wanna do is we wanna make sure
0:37
every time we start the timer,
the timer is set back to the full length.
0:40
So we're gonna repeat the line
at center init method,
0:45
which means really we don't have to
do the line and the init method.
0:48
You could leave that out if you wanted to,
and
0:52
this also means that we don't have
a pause function on our timer.
0:56
It's always gonna be 25 minutes when
you hit start on it, and that's fine.
0:59
We don't have to have a pause button
we can just always be like all right,
1:03
we started at the beginning and we stop,
1:05
if we have to go do
something other than work.
1:08
If you want to add your own pause button,
or your own pause functionality to this,
1:10
where it just holds onto the time,
1:14
if the time's not zero then it starts
back wherever it's at, go for it.
1:16
That is a wonderful
addition to add to this.
1:19
Before we get too far into this,
I want there to be a variable
1:21
that's tracking whether or
not the timer is running, right?
1:24
So we know how much time is left,
1:27
but we don't know if we should actually
be decrementing from that time or not.
1:28
So back up here in init,
we just jump all around don't we.
1:32
Let's add a new thing here
that's self.running, and
1:37
that's gonna be equal to false to begin
with, well how do I set it to true?
1:40
False, because when our app
starts the timer is not running.
1:44
All right, but
back down here in start timer.
1:47
Here we go, we want running to
now be equal to true right,
1:53
where we started the timer.
1:57
So, running is now true.
1:59
Okay, so go right back up here, and
2:00
in our start button, command is gonna
2:05
be equal to self.start timer.
2:10
And we don't need
the parentheses on there,
2:14
because it will call the function
when the button gets clicked.
2:16
Okay, that's all we have to do for
the start button for right now.
2:20
We've got a couple more things to do in
a minute, but that's it for right now.
2:23
Let's do the stop button.
2:27
Guess what, it works the same way.
2:28
Let's go ahead and add this in,
command=self.stop_timer_.
2:29
All right, and then down here stop_timer,
and what do we want this to do?
2:35
So what we want stop_timer
to do is we want it to set
2:42
self.running equal to false and that's it.
2:47
We just want it to stop,
it's no longer running.
2:52
We're not running anymore.
2:54
All right, so that's all we gotta do.
2:55
Let's run this real quick.
2:59
Ctrl+R, bring this over here.
3:01
I hit start, I hit stop.
3:04
Anybody know what's going on?
3:07
I mean the commands are running, I'm sure.
3:08
Let's add this in, let's do,
come up here we'll say print started,
3:11
and then here we'll do print, stopped.
3:17
Run it again, and we hit start,
see now it's started,
3:21
we hit stop and there it stopped.
3:26
All right, so the commands are working,
but we don't know if the commands worked,
3:29
there's nothing showing us
that the commands worked.
3:33
So buttons have a fun little
thing called button state.
3:37
I think it'd be better if our UI told
us whether button could be clicked or
3:41
not right, because you don't want to click
the stop button when it's already stopped,
3:45
and you don't wanna click the start
button when it's already running.
3:49
So, let's make it to where
the buttons can't be done that way.
3:53
So, let's go back up here
to our build buttons.
3:57
There's where we put our
buttons into our grid, and
4:01
let's make sure that the stop
button is disabled by default,
4:04
because at the beginning,
all you can do is hit start, right?
4:09
So self.stop_button.config,
4:11
see, and
the state is gonna be tkinter.DISABLED.
4:16
All caps for disabled there.
4:23
Okay, so, at the beginning the buttons
disabled, let's look at that.
4:26
Here we go you can see I can't
click the stop button at all.
4:32
I can click the start button now,
but I can't click stop.
4:35
Okay, so great, and
the nice thing is down here in this,
4:38
since we have our buttons registered
to self, we can get to them.
4:44
So when someone clicks start,
we want to do
4:47
self.stopbutton.config(state=tkinter.DEFA-
ULT),
4:51
which is just the raised
up you can click it thing.
4:58
And
self.startbutton.config(state=tkinter.DIS-
5:04
ABLED), because the stop button should
be disabled at that point, okay.
5:09
And then, take these two lines
bring them right down here, and
5:15
we want to basically swap these.
5:19
We want the start button, stop button,
sorry, to be disabled, and
5:20
we want the start button
to be back to default.
5:25
I'm sorry, it's not default, it's normal.
5:29
I thought default sounded weird.
5:36
All right, so it's normal.
5:38
So, we click start, stop.
5:40
They trade back and forth.
5:43
All right, cool.
5:46
Nothing else is happening though,
because nothing else is happening.
5:48
I mean, the running variable changes,
but that's about it.
5:52
So, we need to do some polling.
5:55
You need to sign up for Treehouse in order to download course files.
Sign up