In the last lesson,
we started setting up our user interface and we created this canvas,
placed our image onto it, and also on top of that, put some text.
This is how far we've gotten,
and we want to now complete setting up the user interface,
so adding in some more components.
And we wanted to end up looking a bit like this with a label at the top, a big
bit of text, some buttons at the bottom,
and also a label that keeps track of how many Pomodoros we've done.
So each 25 minute work session gets us a
check mark. So you are
going to be using a lot of the stuff that you learned in yesterday's lessons in terms of
which tkinter widgets to use and how to set them up in order to create this.
So it's going to be a challenge for you, but before we get started,
there's just a couple of things I want to point out. So,
one thing to note is that we've got this bg
which stands for background color,
and we've used our constants up here to set those background colors.
Now you can see that here
I've got the label and also the check mark in a green color.
And that color comes from our constant right here.
So you'll be able to color a piece of text in a label,
not by using bg, but by using fg
which stands for a foreground. And that you can basically set to equal the green
color that we've got. And as long as that's added to the label,
then you should be able to see that show up. Now,
the other thing I want to show you is if you don't know how to get hold of a
check mark,
the easiest way is just to go onto Wikipedia and find the particular checkmark
that you like.
And then just copy it and paste it into here as the text.
So for example, if we had a label which had a text argument,
and I copy that a checkmark and I paste it here,
then that checkmark is what's going to show up on screen. Now,
the final thing I want to mention before I let you get on with the challenge is
that we've packed our canvas onto the screen.
But as we've got quite a few things that we need to lay out on the screen,
it's much easier to do this using the grid.
So I want you to change the canvas to using the grid system.
And here I've created a more or less sort of breakdown of how that grid might
look like. So you probably will end up with one, two, three,
four rows and three columns,
and have a think about how you might lay out the labels and the buttons and the
check marks relative to those rows and columns.
Keeping this page on screen,
I want you to pause the video and give this challenge it go.
And if you don't know the sizes for things or the fonts, don't worry,
just guess them. It doesn't really matter.
As long as you've got the rough layout and the correct widgets,
then that would be considered a win. Pause the video now and give it a go.
All right.
So I'm going to get started by creating this top label here and that I'm going
to call the title_label and that's going to be created from the label class.
Now, the text in this is just going to read timer for now,
and I want to change its color by using the foreground keyword argument.
And I'm going to change it to that green color that we've got up here.
Now, I want to be able to show that label on screen,
so I have to give it some form of layout. And as we mentioned,
we're going to use the grid system. So I'm going to change the grid.
And if we refer to this image, you can see there's going to be three columns.
This is going to be in the middle column,
and then it's going to be on the first row.
So that we're going to start from zero.
So I'm going to say column = 1 and row = 0.
Now I have to change this canvas pack because otherwise it's going to give me an
error. And in terms of where the canvas is,
it's going to be again in the same column as that label,
but it's going to be on the next row.
So column 1, row 1. And now when I run it,
you can see our label shows up and then our canvas shows up and it's all
correctly positioned.
Now I want to change this label so that it looks a little bit more like the demo
that I showed you, like this.
So I have to change the font and the text to make it a lot bigger.
As we've seen before, we can simply add the font when we create the label.
So we can set that to a tuple.
And first I'm going to use my font name that I've got as a constant
which I've used when I created the text, it's just going to be Courier.
And then in terms of the size,
you can simply just make a guess. It's going to be something pretty large.
So I'm going to go with 50 and I'm not going to have it bold or italic or
anything, so that's the end of that font. And now when I run it again,
you can see its a lot bigger and it looks a lot more like the example that we
had here.
But the only difference is that it actually still has a white background. Instead
of just changing the foreground,
I'm also going to change the background and I'm going to make it the same yellow
color that I have in the background of the window.
So now it looks like it's all blended in and it's all a part of the same
application. Let's move on to the next row,
which is going to be our buttons.
So I'm going to have a start button and I'm also going to have a reset button
and they're both going to be created from the button class.
The start button is just going to have the text start and the reset button is going
to have the word reset. The start
button is also going to be laid out on our grid and it's going to be column 0
row 2.
And the reset button is going to be column 2, row 2.
So now you can see the start and the reset buttons are now on the next row after
the canvas and it's either side of it. Now notice how there's a little
bit of a white background around each of the buttons. If that bothers you,
then you can actually fix that by doing the same thing that we did with the
canvas
which got rid of the border by changing that highlightthickness to zero.
And because that's really prone to typos,
I'm actually just going to paste it in.
So now you can see that whiteboard has pretty much all but disappeared.
Now we're onto our very final thing that we showed,
which is the checkmark right here.
So I'm going to call it check_marks because eventually there'll probably be
quite a few of them
hopefully if we do lots of good work, and our label is going to have to text
which is going to have the checkmark. Now, if you are on a Mac,
you can actually go into edit and go to emojis and symbols and pick a checkmark
from here.
But on Windows you can simply just use the trick that I showed you.
Go ahead and copy and paste it from a piece of text, say like Wikipedia.
Once we've got our texts, I'm going to change the foreground color of
that text again, and I'm going to change it to green.
And it's also going to require a background color of yellow
just so that we get rid of the white. And finally,
I'm going to add this on using the grid,
setting the column to 1 and the row to
3. So this is basically going to be in the last row.
So you can see after all of that work,
we finally managed to complete the user interface and we've now achieved the
final look.
And all we need to do now is to actually add the timer functionality,
which we'll do in the next lesson. Now,
if you found any of the tkinter widgets difficult to use
or you got stuck or you couldn't figure out certain things about it,
then be sure to have a review of yesterday's lessons
where we talked about the widgets in more detail.