All right.
So hopefully you've headed over to the course resources and downloaded the
starting zip file for today's project. So go ahead and unzip it.
And then let's open up this folder using PyCharm.
Okay.
Here you've already got two folders, data and images.
We're going to be using all of these images inside the images folder to create
our project. So this is the front of the flashcard,
the back of the flashcard, the right button and the wrong button.
And we're going to be writing our code inside main.py. So notice here
we've already got the background color hex code defined.
So we'll be able to use it in our coding as well. This is what we're aiming for.
This is the user interface for this program.
It's going to have a window with a title and inside this window,
we're going to have the card front image here showing up.
And on that card, we're going to have two pieces of text,
a word that says title and a piece of text that just says word.
And these are going to be formatted according to the instructions,
so in terms of font and size, et cetera. Finally, at the bottom,
we've got two buttons, a cross, and a checkmark.
And they're basically buttons that have the images right and wrong inside them.
Let's get started. Inside main.py,
the first thing I'm going to do is to go ahead and import tkinter.
So I'm going to import all the classes from tkinter
and then I'll be able to use it to create my window.
All right.
I'm going to set a title for my window and I'm going to give it the name of our
app
which is going to be called Flashy or whatever it is you want to call it. Next,
I'm going to give this window, um,
a configuration and I'm going to set the padding of the window to 50 pixels in
the X and 50 pixels in the Y.
Now this window is also going to have a background color
which is going to be set to this BACKGROUND_COLOR
constant that we have up here.
So now that I'm done configuring my window,
I can go ahead and get my window to start off in the main loop.
And now I should be able to run this code and just check that it works.
Here's our window with the background color
and there's already some padding in it and making this window a little bit
bigger. Now,
the next thing to do is to somehow put this card front image onto our window.
I'm going to be using a canvas object.
And if you remember, canvas object allows us to layer lots of things on top
of each other. So here is an image and then on top of that,
we've got some text being created.
And as long as we specify the position for each of these items,
it can all be overlapped on top of each other.
So we're creating our canvas from the canvas class
and then I'm going to give my canvas a width and height.
So I'm going to set the width and height to be the same as the width and height
of my card.
So the width is 800 and the height is 526.
You should've seen these numbers in the instructions as well. Next,
we're going to create our image from the photo image class.
So let's call it card_front_img
and this is going to be created from the photo image class
where we have to specify a file name. Now, previously,
all we've done is we've just said the actual name of the file,
which in this case is card_front.png. But in our case,
this particular file is actually inside our images folder.
So we have to specify the full file path for this to work; images/card_
front.png.
And then we can get ahold of our canvas and create our image inside.
So the image is going to be set to our card_front_img
and then we have to specify the X and Y values of that image. Because it needs
to go into the center of the canvas,
we're just going to half the width for the X and half the height for the Y.
So this goes in as a tuple
so half of 526 is 263
and then I'm just going to put our canvas onto the grid and I'm going to set the
row to zero and the column to zero as well.
Now, just be careful when you're writing strings like this,
because it's pretty easy to make a typo like I have here. Instead,
I prefer using PyCharm's autofill.
So when you have a file path,
you can type in the name of the folder forwardslash and then the name of the
file. And we can just hit enter for it to insert it for us automatically.
Now, if I go ahead and hit run,
then I'll see that I've got a background which has the background color,
and then 50 pixels of padding on all four sides, in the middle
I've got my canvas displaying
this card_front.png. The only thing about this card is that it's still got
that white background. How do we get rid of that? Well,
we can change the background into the same color as everything else,
so this background color. Let's go ahead and get our canvas
and then let's config it to have a background color
that's set equal to our constant like this.
Now the background color is the same,
but we now have a line that is all around our canvas.
If you remember from previous lessons,
I told you that you can simply get rid of the highlight thickness and set it to
zero. And that basically just gets rid of that border.
So now we have a window with our flashcard showing up and the image has the
shadows which I created in illustrator
so that you'll be able to see it as a 3D card. Now,
inside the card, not only do we have an image,
but we also want to have some text.
So let's go ahead and create some text. And we can set the text to say Title.
So this is the first piece of text. In addition,
I'm going to set the font to a tuple
which is going to use the Arial font, and then it's going to be 40 size
and finally I'm going to make it italic. Now,
before we can hit run,
we also have to specify a X and Y position for our text.
So our image was created at 400 X, 263
Y, our text is going to be created at 400 X and 150 Y.
Now remember that these positions are relative to the canvas.
So 400 makes it halfway along the width
and then this 150 is going to make it a little bit towards the top
so that's a good position for the title. Next,
we're going to create another piece of text
and this piece of text is going to be the actual word, so that the French word or
the English word.
So we're going to set it at the center of our canvass
so exactly centered on the image,
and then we're going to say that the text is going to be equal to the word for
now anyways. Later on we'll probably change it.
And then the font is again also Arial.
And this time it's going to be a bit bigger and it's also going to be bold. So
there we have it. We've got our flashcard pretty much all laid out.
Now we just have to add our two buttons. Below our canvas
I'm going to create two buttons. First, there's going to be the unknown button.
This is going to be the X which the user presses
because they don't know what's on the back of the flashcard.
And this button is going to have a special attribute though,
the image attribute and that image is going to be a photo image.
So let's put this as the cross_image,
and it's going to be a photo image
which is going to be created from the images folder
and it is the wrong.png.
And that image is what's going to go inside our unknown button.
Let's go ahead and layout our unknown button on the grid so that it'll actually
show up. Row is going to be 1,
so below the canvas, and then column is going to be 0.
So now you can see our X button show up here.
Next, I'm going to create the check_image. This is going to be the checkmark.
And in this case, its again,
a photo image created from a file
which is in our images/right.png.
And of course, you can always just double click on each of these images and view
them and just make sure that they are the ones that you want to use.
So once we've got our image, we can create our known_button.
And this is going to now have a image attribute set to this check image.
And then we can place our known_button onto the grid as well.
So row = 1 and column is going to be equal to 1 as well.
So its on the same row as the unknown button,
but it's just shifted a little bit to the right. Now at this point
if I run the code,
you can see that our check button is all the way on the right while our canvas
and our cross button are in the left most column.
So you know what you need to do. You have to change
this canvas grid to have a column span of 2.
So it starts at column 0 but ends at column 1.
Now when you run it,
you can see it's nicely placed onto the screen in the way that we want it to
look. Now, if you want to get rid of the border around the buttons,
then the easiest way is to again,
change the highlight thickness to 0.
So lets add that here and here.
But both on Mac and Windows,
you'll see this fine line around the button and it's not easy to get rid of it
because it's their so that you can click on the button and you can see this
visible depression.
That way it lets the user know that the button press was actually successful.
But that's fine.
And we're now pretty much done with our user interface. In the next step
we're going to get rid of these placeholders, title and word, and we're going to
start picking out the words from this french_words.csv,
picking out random records like this or this so that we can put the French word
into right here and change the title to say French.
For all of that and more, head over to the next lesson and see the instructions.