All right guys,
it's finally time to put everything you've learned so far today into practice
and build our miles to kilometer converter.
This is what the end outcome will look like.
This is our GUI program where we've got a text entry,
we've got some labels and we've got a button.
So I should be able to type in some certain number of miles
and then when I hit calculate,
it should give me the equivalent number of kilometers. Now,
here, I've rounded it to the nearest whole number,
but feel free to decide however many decimal places you want.
But the important thing is for it to work, firstly,
but also for you to be able to use and put in all of these components and to
follow this layout. Just to break the layout down,
you can see I've got a entry widget
and then these are all label widgets. And finally,
I've got a button widget and they're divided along a grid that looks more or
less like this.
Have a think about how you might create the layout and the design first
and then go ahead and add the implementation and see if you can complete this
project. So pause the video now and give it a go.
Feel free to either create it inside
your main.py by commenting everything else out or as in my case,
I'm actually just going to create a new file,
which I'll call the mile_to_kilo_converter.py. Inside this new file is where
I'm going to create my project. And first of all,
I'm going to go ahead and import everything from the tkinter module.
So import *, and now I've got all of my classes.
The next thing I'm going to do is to, of course, create our window.
So that's going to be created from the tk class and my window is going to have a
title,
which I will call it miles to kilometer converter.
And finally,
we're going to get our window to be displayed and started off in the main loop.
Right now if I run this file miles to kilo converter,
you can see I've just got a blank window with the title miles to kilometer
converter. Afterwards,
the next thing to do is to create all of our widgets and lay it out on screen.
If we look at this break down,
you can see we've got one entry widget here and then four different label
widgets at each of these positions and then finally
I've got a calculate button down here.
So I'm going to create each of these widgets and then I'm going to lay them out
on screen. Firstly,
I've got a miles_inputs widget
which is going to be created from the entry class.
And then I've got a label which is the miles label,
and that's going to be created from a label class.
And the label is going to contain some text.
The text is just going to say Miles with a capital M, like this.
Now the next one we're going to create is our is equal to label.
So I'll just call it is_equal_label.
And this one is going to have, again, just some texts.
It's not really going to have much functionality.
And then we've got our label
which is actually going to be the kilometer value.
So I'm going to create that as the kilometer_result_label.
1: All right.
0: And that's going to start off just with a big fat zero. And then finally,
I've got the kilometer label.
1: okay,
0: ad , this is just going to say, uh, KM,
1: right?
0: And the final thing that I need to create is that calculate button
and then we will be done with our widgets
1: right?
0: And this is just going to have the text of calculate.
So now I've got all my widgets created.
If I go and try to run this code, as it is, you'll see
none of them get displayed because none of them have been laid out on the screen.
At this point
it's also good to mention that if you accidentally left out one of these keyword
argument names,
then you will actually get a error and the error will read something like this.
String object has no attribute tk, which seems a little bit confusing.
But basically if you see that, then just have a look,
make sure that you've actually got that text = in there rather than just the
actual string. That's a really common mistake that students make.
So the next thing I want to do is to use my grid layout method
to lay out all of these components in the correct positions.
So I'm basically going to have a grid with three columns and three rows.
So this will be column zero, one, two,
and then this will be row zero, one two.
So that should be relatively simple.
And let's start with our miles_input.grid,
and we're going to write a column number and a row number.
Now I'm just going to copy this because I'm going to need to use it quite a few
times.
And then I'm going to refer to the end result and you can see our entry is here.
So it's going to be on column one, row zero,
1: right?
0: And then let's define the miles label on the grid.
And this one I think is going to be column two, row zero.
And then I'm just going to go through all of these widgets and define them on
the grid,
1: right?
0: So they're you have it.
We've got all of the columns and rows that correspond to the positions of each
of these widgets in our final layout. Now, if I run my code
as it is, you should see this version show up.
Now we've got to do some refinements.
And the first thing you notice is that this entry is way too large.
So let's go ahead and change it's width,
and I'm going to change it to just five or seven,
basically not a very wide. That way it will be a lot smaller like this.
And then we're going to use the method that we learned previously to give our
window a little bit of padding by changing its config
to add a padx and a pady,
and you can pad it however much you like. But in my case,
I think 20 pixels should make it a little bit larger and a little bit easier
to see. So now that we're pretty much done with the layout,
let's go ahead and actually add the functionality.
We're going to need some sort of function
which converts miles to kilometers.
The miles is going to be inputted in the miles input.
We can get the miles by calling miles
_input.get,
and then we can convert that into km by using some sort of formula.
If we search in Google for miles to km,
you can see that the formula is pretty much multiplying the mile value by 1.609.
That's simple enough,
we'll say miles multiply by 1.609,
and we get the value in kilometers. Then we have the set
our kilometer_result_label to show this updated result.
So we're going to get hold of the kilometer_result_label
and I'm going to call config on it to change its text property
to this new value
which is going to be our value in kilometers.
Now we have to be careful with the data types here,
because when we get hold of the input from that miles input,
this is still going to be a string. But we want to multiply it by a number
so we have to change it to an actual number. Because people could type decimal
place numbers, I'm going to change it to a floating-point number like this.
Now I've got a floating-point number multiplied by a floating-point number
so that's perfectly valid. Now next,
when I actually want to put that number into a label I need it as a string.
Instead of simply just adding this kilometer in,
I'm actually going to use an f-string so that I wrap this kilometer variable
inside my f-string
and then I convert it into a string to put into this label.
Now,
all we have to do is to trigger this function miles_to_km when the user
presses the calculate button.
And if you remember, the way we do that is by tying it as a command.
So command = miles_to_km
but without the final parentheses
because we only want it to be called when it actually gets clicked.
Let's check our code and see if it actually works.
Let's check what 20 miles is in kilometers. So if I click calculate,
you can see it gets calculated and that label there,
that kilometer result label, gets changed. If you wanna leave it as this,
that's perfectly fine. If you want to,
you can also round this up so that it becomes a whole number
and you end up with something that looks a little bit more sleek
but maybe a little bit more imprecise.
That's how you complete this project. Now, of course,
the world really is your oyster.
You've learned about way more widgets than we've used here.
So you could incorporate anything else that you've seen,
like maybe add a radio button or checkbox,
and you can modify this to maybe not just do miles to kilos,
and you can try playing around with the code and creating your own version of
the program. If you create something fun,
be sure to share it with us in the Q/A below the lesson so that we can all
admire and congratulate you on your hard work.
So I hope you've had fun building your first GUI programs using tkinter. In
tomorrow's lesson, we're going to be diving deeper into tkinter and
we're going to be looking at how to create some more complex,
but more interesting programs as well. So for all of that and more,
I'll see you there.