WEBVTT
0
00:00.090 --> 00:00.780
All right guys,
1
00:00.780 --> 00:04.980
it's finally time to put everything you've learned so far today into practice
2
00:05.280 --> 00:08.370
and build our miles to kilometer converter.
3
00:09.390 --> 00:12.120
This is what the end outcome will look like.
4
00:12.150 --> 00:16.170
This is our GUI program where we've got a text entry,
5
00:16.200 --> 00:19.530
we've got some labels and we've got a button.
6
00:19.950 --> 00:23.430
So I should be able to type in some certain number of miles
7
00:23.760 --> 00:25.350
and then when I hit calculate,
8
00:25.440 --> 00:30.030
it should give me the equivalent number of kilometers. Now,
9
00:30.210 --> 00:32.550
here, I've rounded it to the nearest whole number,
10
00:32.550 --> 00:36.660
but feel free to decide however many decimal places you want.
11
00:37.020 --> 00:40.170
But the important thing is for it to work, firstly,
12
00:40.500 --> 00:45.500
but also for you to be able to use and put in all of these components and to
13
00:45.990 --> 00:49.770
follow this layout. Just to break the layout down,
14
00:49.800 --> 00:52.950
you can see I've got a entry widget
15
00:53.040 --> 00:56.190
and then these are all label widgets. And finally,
16
00:56.190 --> 01:01.110
I've got a button widget and they're divided along a grid that looks more or
17
01:01.110 --> 01:02.160
less like this.
18
01:02.850 --> 01:07.470
Have a think about how you might create the layout and the design first
19
01:07.860 --> 01:12.240
and then go ahead and add the implementation and see if you can complete this
20
01:12.240 --> 01:15.090
project. So pause the video now and give it a go.
21
01:18.810 --> 01:20.760
Feel free to either create it inside
22
01:20.760 --> 01:25.230
your main.py by commenting everything else out or as in my case,
23
01:25.260 --> 01:27.150
I'm actually just going to create a new file,
24
01:27.540 --> 01:32.540
which I'll call the mile_to_kilo_converter.py. Inside this new file is where
25
01:36.690 --> 01:39.690
I'm going to create my project. And first of all,
26
01:39.990 --> 01:44.910
I'm going to go ahead and import everything from the tkinter module.
27
01:46.410 --> 01:50.490
So import *, and now I've got all of my classes.
28
01:51.240 --> 01:55.200
The next thing I'm going to do is to, of course, create our window.
29
01:55.590 --> 02:00.590
So that's going to be created from the tk class and my window is going to have a
30
02:02.280 --> 02:03.113
title,
31
02:03.120 --> 02:08.120
which I will call it miles to kilometer converter.
32
02:10.350 --> 02:11.400
And finally,
33
02:11.430 --> 02:16.430
we're going to get our window to be displayed and started off in the main loop.
34
02:17.550 --> 02:21.690
Right now if I run this file miles to kilo converter,
35
02:21.990 --> 02:26.990
you can see I've just got a blank window with the title miles to kilometer
36
02:27.300 --> 02:29.670
converter. Afterwards,
37
02:29.670 --> 02:34.530
the next thing to do is to create all of our widgets and lay it out on screen.
38
02:35.010 --> 02:36.300
If we look at this break down,
39
02:36.300 --> 02:41.300
you can see we've got one entry widget here and then four different label
40
02:41.520 --> 02:44.880
widgets at each of these positions and then finally
41
02:44.880 --> 02:47.220
I've got a calculate button down here.
42
02:48.090 --> 02:51.840
So I'm going to create each of these widgets and then I'm going to lay them out
43
02:51.840 --> 02:54.420
on screen. Firstly,
44
02:54.420 --> 02:57.000
I've got a miles_inputs widget
45
02:57.060 --> 03:00.550
which is going to be created from the entry class.
46
03:01.930 --> 03:06.930
And then I've got a label which is the miles label,
47
03:08.530 --> 03:11.260
and that's going to be created from a label class.
48
03:11.890 --> 03:15.370
And the label is going to contain some text.
49
03:15.720 --> 03:20.720
The text is just going to say Miles with a capital M, like this.
50
03:22.000 --> 03:25.930
Now the next one we're going to create is our is equal to label.
51
03:25.960 --> 03:29.410
So I'll just call it is_equal_label.
52
03:30.940 --> 03:34.270
And this one is going to have, again, just some texts.
53
03:34.270 --> 03:36.520
It's not really going to have much functionality.
54
03:39.010 --> 03:41.290
And then we've got our label
55
03:41.290 --> 03:44.200
which is actually going to be the kilometer value.
56
03:44.530 --> 03:49.530
So I'm going to create that as the kilometer_result_label.
57
03:50.880 --> 03:51.713
All right.
58
03:54.330 --> 03:59.160
And that's going to start off just with a big fat zero. And then finally,
59
03:59.160 --> 04:01.320
I've got the kilometer label.
60
04:01.380 --> 04:02.213
okay,
61
04:05.580 --> 04:09.510
ad , this is just going to say, uh, KM,
62
04:09.960 --> 04:10.793
right?
63
04:12.120 --> 04:16.200
And the final thing that I need to create is that calculate button
64
04:16.260 --> 04:19.350
and then we will be done with our widgets
65
04:19.380 --> 04:20.213
right?
66
04:23.880 --> 04:27.390
And this is just going to have the text of calculate.
67
04:28.290 --> 04:30.570
So now I've got all my widgets created.
68
04:30.750 --> 04:34.740
If I go and try to run this code, as it is, you'll see
69
04:34.740 --> 04:39.060
none of them get displayed because none of them have been laid out on the screen.
70
04:39.840 --> 04:40.500
At this point
71
04:40.500 --> 04:45.500
it's also good to mention that if you accidentally left out one of these keyword
72
04:45.540 --> 04:46.560
argument names,
73
04:46.590 --> 04:51.590
then you will actually get a error and the error will read something like this.
74
04:51.870 --> 04:56.520
String object has no attribute tk, which seems a little bit confusing.
75
04:56.820 --> 05:00.780
But basically if you see that, then just have a look,
76
05:00.780 --> 05:05.780
make sure that you've actually got that text = in there rather than just the
77
05:05.850 --> 05:09.690
actual string. That's a really common mistake that students make.
78
05:10.710 --> 05:13.860
So the next thing I want to do is to use my grid layout method
79
05:13.890 --> 05:18.090
to lay out all of these components in the correct positions.
80
05:18.360 --> 05:22.020
So I'm basically going to have a grid with three columns and three rows.
81
05:22.080 --> 05:24.630
So this will be column zero, one, two,
82
05:24.960 --> 05:27.360
and then this will be row zero, one two.
83
05:28.470 --> 05:30.540
So that should be relatively simple.
84
05:30.570 --> 05:34.350
And let's start with our miles_input.grid,
85
05:35.100 --> 05:40.100
and we're going to write a column number and a row number.
86
05:41.760 --> 05:45.090
Now I'm just going to copy this because I'm going to need to use it quite a few
87
05:45.090 --> 05:45.923
times.
88
05:46.080 --> 05:50.820
And then I'm going to refer to the end result and you can see our entry is here.
89
05:50.820 --> 05:54.090
So it's going to be on column one, row zero,
90
05:55.590 --> 05:56.423
right?
91
05:58.250 --> 06:01.910
And then let's define the miles label on the grid.
92
06:03.320 --> 06:07.880
And this one I think is going to be column two, row zero.
93
06:10.580 --> 06:14.900
And then I'm just going to go through all of these widgets and define them on
94
06:14.900 --> 06:15.733
the grid,
95
06:20.770 --> 06:21.603
right?
96
06:21.850 --> 06:22.990
So they're you have it.
97
06:23.170 --> 06:27.940
We've got all of the columns and rows that correspond to the positions of each
98
06:27.940 --> 06:32.680
of these widgets in our final layout. Now, if I run my code
99
06:32.680 --> 06:36.010
as it is, you should see this version show up.
100
06:37.210 --> 06:39.910
Now we've got to do some refinements.
101
06:40.210 --> 06:45.210
And the first thing you notice is that this entry is way too large.
102
06:45.820 --> 06:48.490
So let's go ahead and change it's width,
103
06:48.910 --> 06:53.530
and I'm going to change it to just five or seven,
104
06:54.010 --> 06:58.420
basically not a very wide. That way it will be a lot smaller like this.
105
07:00.280 --> 07:03.790
And then we're going to use the method that we learned previously to give our
106
07:03.790 --> 07:07.570
window a little bit of padding by changing its config
107
07:07.750 --> 07:10.900
to add a padx and a pady,
108
07:10.960 --> 07:14.560
and you can pad it however much you like. But in my case,
109
07:14.590 --> 07:19.180
I think 20 pixels should make it a little bit larger and a little bit easier
110
07:19.180 --> 07:22.720
to see. So now that we're pretty much done with the layout,
111
07:23.080 --> 07:25.630
let's go ahead and actually add the functionality.
112
07:27.070 --> 07:29.080
We're going to need some sort of function
113
07:29.140 --> 07:33.940
which converts miles to kilometers.
114
07:34.660 --> 07:39.040
The miles is going to be inputted in the miles input.
115
07:39.520 --> 07:42.880
We can get the miles by calling miles
116
07:42.910 --> 07:45.160
_input.get,
117
07:46.120 --> 07:51.070
and then we can convert that into km by using some sort of formula.
118
07:51.820 --> 07:54.010
If we search in Google for miles to km,
119
07:54.040 --> 07:59.040
you can see that the formula is pretty much multiplying the mile value by 1.609.
120
08:02.050 --> 08:03.250
That's simple enough,
121
08:03.280 --> 08:07.930
we'll say miles multiply by 1.609,
122
08:08.620 --> 08:13.390
and we get the value in kilometers. Then we have the set
123
08:13.480 --> 08:17.920
our kilometer_result_label to show this updated result.
124
08:18.580 --> 08:21.190
So we're going to get hold of the kilometer_result_label
125
08:21.580 --> 08:26.580
and I'm going to call config on it to change its text property
126
08:27.070 --> 08:28.720
to this new value
127
08:28.870 --> 08:32.140
which is going to be our value in kilometers.
128
08:32.770 --> 08:35.350
Now we have to be careful with the data types here,
129
08:35.830 --> 08:39.340
because when we get hold of the input from that miles input,
130
08:39.370 --> 08:43.750
this is still going to be a string. But we want to multiply it by a number
131
08:44.020 --> 08:49.020
so we have to change it to an actual number. Because people could type decimal
132
08:49.180 --> 08:53.560
place numbers, I'm going to change it to a floating-point number like this.
133
08:54.160 --> 08:57.960
Now I've got a floating-point number multiplied by a floating-point number
134
08:58.290 --> 09:01.410
so that's perfectly valid. Now next,
135
09:01.440 --> 09:06.360
when I actually want to put that number into a label I need it as a string.
136
09:06.900 --> 09:09.570
Instead of simply just adding this kilometer in,
137
09:09.600 --> 09:14.600
I'm actually going to use an f-string so that I wrap this kilometer variable
138
09:15.690 --> 09:17.700
inside my f-string
139
09:17.760 --> 09:21.960
and then I convert it into a string to put into this label.
140
09:23.280 --> 09:23.700
Now,
141
09:23.700 --> 09:28.700
all we have to do is to trigger this function miles_to_km when the user
142
09:29.700 --> 09:31.440
presses the calculate button.
143
09:32.010 --> 09:36.780
And if you remember, the way we do that is by tying it as a command.
144
09:37.200 --> 09:39.810
So command = miles_to_km
145
09:40.050 --> 09:42.930
but without the final parentheses
146
09:43.290 --> 09:46.860
because we only want it to be called when it actually gets clicked.
147
09:47.610 --> 09:50.070
Let's check our code and see if it actually works.
148
09:50.130 --> 09:54.510
Let's check what 20 miles is in kilometers. So if I click calculate,
149
09:54.570 --> 09:58.110
you can see it gets calculated and that label there,
150
09:58.230 --> 10:02.400
that kilometer result label, gets changed. If you wanna leave it as this,
151
10:02.400 --> 10:04.560
that's perfectly fine. If you want to,
152
10:04.560 --> 10:08.400
you can also round this up so that it becomes a whole number
153
10:09.600 --> 10:12.660
and you end up with something that looks a little bit more sleek
154
10:12.690 --> 10:14.610
but maybe a little bit more imprecise.
155
10:15.270 --> 10:19.470
That's how you complete this project. Now, of course,
156
10:19.470 --> 10:21.570
the world really is your oyster.
157
10:21.870 --> 10:24.960
You've learned about way more widgets than we've used here.
158
10:24.990 --> 10:27.870
So you could incorporate anything else that you've seen,
159
10:28.170 --> 10:30.870
like maybe add a radio button or checkbox,
160
10:30.930 --> 10:35.220
and you can modify this to maybe not just do miles to kilos,
161
10:35.520 --> 10:40.500
and you can try playing around with the code and creating your own version of
162
10:40.500 --> 10:42.840
the program. If you create something fun,
163
10:42.870 --> 10:47.400
be sure to share it with us in the Q/A below the lesson so that we can all
164
10:47.400 --> 10:50.730
admire and congratulate you on your hard work.
165
10:51.180 --> 10:56.180
So I hope you've had fun building your first GUI programs using tkinter. In
166
10:57.120 --> 11:01.010
tomorrow's lesson, we're going to be diving deeper into tkinter and
167
11:01.010 --> 11:03.930
we're going to be looking at how to create some more complex,
168
11:04.140 --> 11:08.340
but more interesting programs as well. So for all of that and more,
169
11:08.490 --> 11:09.090
I'll see you there.