To begin, as always, head over
to the course resources and download the starting project as a zip file.
Now, once you've unzipped it, open it using PyCharm
and go ahead and take a look inside the starting files.
I've included a logo image
which is going to be used in our project.
And I've got also a very, very blank looking at main.py.
Now here comes a challenge already. To start out,
we're going to create a window using tkinter that has a title of Password
Manager.
And the only thing that it's going to have is just a canvas widget displaying
that logo image.
So the canvas is going to have a width and height of 200 pixels,
and the canvas is going to be padded from the edge of the window by 20 pixels on
all four sides
so that way it could look quite centered like this. And this image finally is
going to be bang in the center of the canvas.
So I want you to think back to what you learned yesterday about the canvas
widget and in the course resources,
I've linked to this page on the canvas documentation
including that all important create_image method.
Have a look through this for what the expected inputs are
and you can also scroll up to see more of the references on other things that
you can do with the canvas.
Or just have a quick look through yesterday's code if you need to.
But I want you to be able to create a tkinter program using all the things
that you've learned and when you run it,
it should look pretty much the same as this. Pause
the video and complete this challenge,
Okay.
So to begin, we're going to go to the very top of our file,
and I'm going to import all of the classes inside tkinter
and I'm going to use that to do my UI setup. As always,
I start out creating a window
and then give it a title.
And then I'm going to get my window to start out with my main loop.
Now in between, I'm going to create my canvas.
And this is from the canvas widget. Now this canvas widget, as I mentioned,
is going to have a height of 200 and a width of 200.
And in addition,
it's going to display this logo.png inside as the image.
So I'm going to create our logo image from the photo image class,
and then I have to provide the filename.
So the filename is just simply logo.png in this case
because they're both inside the same folder. So once I've created my image,
I can tell my canvas to create a image inside the canvas
and then I can specify the image name
and that is of course going to be my logo image. Now,
the other thing that I have to do before I can actually run my code,
because at the moment it's actually going to give me an error and the error
says tuple index out of range.
It's basically expecting some sort of a tuple to work on
and that tuple is the define what the X and Y position is of this image on
the canvas. So we do that by simply just adding the raw numbers.
So the X position of the center of the image is going to be 100,
because remember that the width is 200 so half of that is 100.
And similarly for the Y position, it's also going to be 100.
So this way we've got the X and Y position to find,
and we've created the canvas size. Now,
all we need to do is to get our canvas to have some sort of layout dimension.
I'm just going to start out by packing my canvas onto the screen because later
on, once we have more components, then we can think about using more fancy things
like the grid. Now, if I run this as it is,
then you can see that I've created my password manager window and I've created
my 200 by 200 canvas.
The only requirement I haven't yet satisfied is adding some padding between the
window and that canvas.
So let's do that using our window.config,
and I'm going to set the padding using the padx and pady.
And as we mentioned,
I'm going to set that to 20 on the X and 20 on the Y.
So now we get pretty much exactly the image that you saw in the demonstration,
and this is the end result we were looking for.
Did you manage to complete this challenge?
If not, be sure to review some of the lessons that we learned yesterday
where we went through the canvas widget in great detail.
But if you're happy with all of this code, then in the next lesson,
we're going to be learning more about the grid system and how to lay out a
complex user interface like this one. So for all of that and more,
I'll see you there.