The first thing I want you to do to get started is to head over
to the course resources and download the starting files for the Pomodoro
project. Once you've got that,
then you should be able to unzip this file and get hold of the starting folder.
Next, I want you to open up that folder using PyCharm.
So in my case, my folder's inside my downloads,
and then I'll just click open. And PyCharm should automatically configure the
latest version of Python you've got installed.
So if you take a look inside this folder, there's two files.
There is a image of a tomato which we're going to use in our project,
and there's also a main.py with a couple of sections already hashed out for
you. And we've also included some constants,
like some color hex codes or a font name or the number of minutes for working
short breaks in a long breaks. So that's already in the starting file.
The first thing we're going to do is to set up our UI.
So under the section UI set up,
we're going to create a new window using tkinter
and we're going to get the window to run and give it a background color,
pretty simple.
So let's go to the top of our file and import our tkinter module.
And then if we scroll down to our UI setup section,
let's go ahead and create a new window from the tk class.
Remember that our tk class is one of the classes from tkinter
so you can either tap into the tkinter module and then get hold of the tk class
like I have done here, or as in our case,
if we're going to be using a lot of classes from tkinter
then we can simply say from tkinter let's go ahead and import all of the
classes. So that way we can straight away refer to this tk class.
Now that we've created our window,
the next thing we can do is to set the title of the window,
which you can of course call it anything you want. But in my case,
I'm going to set it to just Pomodoro,
which just means tomato in Italian.
So now that we've got our Pomodoro,
then we're going to get our window to show up by using window.main loop as
usual.
And now if we run this, code our main, and you can see we've got a blank window,
a title, and we're ready to go to the next step.
The next step is to put an image into our program so that we can have this
tomato as the background of our program,
and then we can put some text on top
which is going to signify our countdown timer. This is what we're aiming for,
but to achieve this and to be able to put images onto the screen
which look like this,
we're going to have to learn about the tkinter canvas widget. A canvas
widget is a little bit like a real life canvas, really.
It allows you to layer things one on top of the others.
So you could draw something and then you can draw something on top of that.
And what it allows us to do in our case is to place an image onto our program
and then to place some text straight on top of that.
In between our window creation
and the window main loop is where we're going to create our canvas.
And our canvas is created using the canvas widget
of course.
One of the things that we can specify when we create our canvas is a width and
a height, and that will be a value in terms of pixels.
So we know that we want to display this tomato image inside that canvas.
And we can see that this has a,
roughly a width of 200 and a height of 223.
So let's create a canvas that's roughly about the same size as the image.
So we'll put a width of 200 and a height of 224 so that we work with some even
numbers. Once I've created my canvas
the next thing I want to do is to add my image to it.
And we can use a method that the canvas has it which is called create_image.
And as soon as I type create,
you can see there's actually a whole bunch of other methods like create the text
in the canvas, create a rectangle, create an oval.
And all of these things could be overlapped on each other inside the same
canvas. Now, when we create an image,
there's a couple of things which are required. The first thing is the X and Y
positions of this image in the canvas.
Given that we have a width of 200 and a height of 224,
I want my image to be bang in the center of the canvas. So I can provide the X
value as half of the width and the Y value as half of the height.
In addition to the X and Y values,
we also have to specify a image.
But I can't just simply just type the name of my image
which is tomato.png,
because that is not the type of data that this argument is expecting.
What it wants instead is something called a photo image
and this class comes from tkinter
and it's basically a way to read through a file and to get hold of a particular
image at a particular file location. In my case,
the file location is in fact tomato.png.
And if your image was stored in say another sub folder or a different place,
then you should provide the relative or absolute file path to get there from
where your code is, which is the main.py. But in our case
it's very easy, they're both in the same folder,
so we can simply specify our filename like
so. The next thing we're going to do is we're going to save this photo image in a
variable so we can refer to it later on.
I'm going to call this our tomato_img.
Feel free to call it anything you want.
And that is the data that goes into this image argument.
Now we've created our canvas, we've created our photo image,
we've told our canvas to create an image at this position,
and then we've put the image inside.
The final thing we need to do is to pack our canvas or use some other sort of
method to specify the layout of how the canvas is going to go on the screen.
And now we can hit run,
and we can see our image on the screen.
So now notice how the image is basically taking up the entire space of the
window. And in fact, the window is resizing itself to fit this image.
Wouldn't it be better if this screen was actually a little bit bigger?
So we don't just look at the image of a tomato.
We can do that by getting our window to be configured.
And the configuration that we want to change is the padding,
so I'm going to change the padx and pady. On the X-axis on the horizontal
I'm actually going to add a whole hundred pixels of padding on both sides.
And then on the Yaxis, pady,
I'm going to change that to 50 so that it's got 50 pixels of padding on the
top. That's looking pretty good other than one small defect.
You can see that our tomato image is a little bit cut off on the left
and I suspect this is because the actual image is a little bit shifted over to
the left.
So we can actually adjust this X position to be a little bit more to the right,
and that way our tomato
can be centered on screen without being cut off on either side.
So now that we've tweaked our image and we've displayed it on the screen,
the next thing to do is to display some text.
As you noticed before, in addition to canvas.create_image,
they will a whole bunch of other things we could create, including some texts.
This create_text method works very similarly to the create_image method.
Notice how the first thing that's getting highlighted is the *args.
And then we've got our **kw.
So remember from the lessons yesterday,
these arguments are the unlimited positional arguments and these arguments are
the unlimited keyword arguments. So the keyword arguments here
are for example the
image or the background color or anything else,
but these are the X and Y values.
So creating the text,
we also have to provide a X and Y value.
So I'm just going to try the same values as the image to see how that looks.
And now we can add some keyword arguments, for example, the text.
So I just want it to say 00:00,
which looks pretty much like the clock. Now,
if we run our code, you can see we've got a little bit of text showing up.
Now, notice how it's a little bit high up on the tomato,
because remember the tomato starts at the top here and ends here.
So that is the center of the tomato image,
but we can move it down a little bit so that it's actually centered in this red
part, the circular part. With a little bit of experimentation,
I think this, 103, 130, actually works quite well
and it's pretty much bang in the center of the tomato.
Let's modify this text in some other ways. We can change the fill
which is basically the color of the text and I'm going to change that to white,
that you can see here. And then I'm going to change the font as well.
And this is going to expect a tuple.
So it's going to be the font name and then the size, and then whether,
if it's bold or italic or whatever else you want to do. Now in the constants
here, I've already got the font name defined,
which is gonna be Courier that we're gonna be using. So that we can straight up
add our font name and then we'll add a font size as 35,
and it will say, yeah, make it bold. So there you have it.
We've got our tomato, we've got our text showing up as the countdown timer.
Now,
the final thing I want to do is just to change the background color to a slightly
nicer looking color. Now,
one of my favorite websites is this one called colorhunt.io,
which shows you a whole bunch of different color palettes that professional
designers have a created
and it makes it really easy for us to just snap up some of these hex codes and
use them straight away in our program. Now,
the one that really caught my eye is this one,
cause it has a bit of the tomato color palette.
So I've transferred all of these hex codes to the constants in the starting
file. So you can see I've got the pink, the red, the green, the yellow,
and we're going to be using that across our program to give it that consistent
color theme and make it look like it's been professionally designed.
So what I want to do is I want to change the window's background color,
and I can do that through the keyword argument called at bg for background,
and I can set it to a hex code.
So a hex code starts out with the pound sign and then it's some numbers and some
letters. Now I've already got all of that for you
and all you have to do is just to put down the name of the constant.
So this should not be in quotation marks because it's not the word. It is
in fact,
referring to that particular variable and the string that's held inside.
So now if we check our screen,
you can see the background has been changed to that nice yellow color, sort of
rice or hay color, but the tomato,
namely the canvas, still has that white background.
So let's change the background color of the canvas as well. And again,
it's using the bg.
So some of these, you'll notice, are standard attributes that we can change like
the width and the height and the background color,
which is standard across all of the widgets. And some other things like file
here are some of the more specific keyword arguments.
So let's apply this yellow to the background of the canvas,
and you can see that the canvas is now yellow as well.
But it's still got this little white border
which denotes the edges of our canvas. To get rid of that
I found a specific keyword argument that would actually help
and it took quite a bit of digging around, quite a bit of Stack Overflow
searching and googling in order to find this.
It wasn't very straightforward because tkinter is not well-documented
unfortunately. But thankfully for you,
all you have to do is find your canvas and on the line where you've created it,
go ahead and add this keyword argument.
It's called a highlightthickness,
and be sure that you spell it right, because it's really long.
And remember that there's two Ts cause it's highlight and thickness and there's
nothing in between, no underscore, no nothing to separate it.
I think that the tkinter team could have really done a little bit better here,
but hey.
If we set the highlightthickness to zero and we rerun our code,
then you should see that it now looks pretty good.
And our canvas is now completely the same color as the background of the window.
And you can't tell it where the window begins and the canvas ends. Now,
the only problem is once we've removed that border around the canvas,
our tomato is once again, shifted a little bit.
So we can actually adjust this and we can change this back to 100 and I'm going
to change it both for the text and the image.
And we can make that tomato image perfectly round
once more. With tkinter I've found that you have to do quite a bit of tweaking
around especially with these positions.
And you'll spend some time judging it by eye
in terms of the size and the width and where to place it.
But we have now successfully managed to place an image onto the screen,
changed the background of the window,
keep it consistent and add a little bit of text onto our tomato.
So now we're ready for the next step. In the next lesson,
we're going to create the rest of the user interface.
And that is mostly going to be up to you. So for all of that and more,
I'll see you in the next lesson.