1 00:00:00,090 --> 00:00:00,780 All right guys, 2 00:00:00,780 --> 00:00:04,980 it's finally time to put everything you've learned so far today into practice 3 00:00:05,280 --> 00:00:08,370 and build our miles to kilometer converter. 4 00:00:09,390 --> 00:00:12,120 This is what the end outcome will look like. 5 00:00:12,150 --> 00:00:16,170 This is our GUI program where we've got a text entry, 6 00:00:16,200 --> 00:00:19,530 we've got some labels and we've got a button. 7 00:00:19,950 --> 00:00:23,430 So I should be able to type in some certain number of miles 8 00:00:23,760 --> 00:00:25,350 and then when I hit calculate, 9 00:00:25,440 --> 00:00:30,030 it should give me the equivalent number of kilometers. Now, 10 00:00:30,210 --> 00:00:32,549 here, I've rounded it to the nearest whole number, 11 00:00:32,549 --> 00:00:36,660 but feel free to decide however many decimal places you want. 12 00:00:37,020 --> 00:00:40,170 But the important thing is for it to work, firstly, 13 00:00:40,500 --> 00:00:45,500 but also for you to be able to use and put in all of these components and to 14 00:00:45,990 --> 00:00:49,770 follow this layout. Just to break the layout down, 15 00:00:49,800 --> 00:00:52,950 you can see I've got a entry widget 16 00:00:53,040 --> 00:00:56,190 and then these are all label widgets. And finally, 17 00:00:56,190 --> 00:01:01,110 I've got a button widget and they're divided along a grid that looks more or 18 00:01:01,110 --> 00:01:02,160 less like this. 19 00:01:02,850 --> 00:01:07,470 Have a think about how you might create the layout and the design first 20 00:01:07,860 --> 00:01:12,240 and then go ahead and add the implementation and see if you can complete this 21 00:01:12,240 --> 00:01:15,090 project. So pause the video now and give it a go. 22 00:01:18,810 --> 00:01:20,760 Feel free to either create it inside 23 00:01:20,760 --> 00:01:25,230 your main.py by commenting everything else out or as in my case, 24 00:01:25,260 --> 00:01:27,150 I'm actually just going to create a new file, 25 00:01:27,540 --> 00:01:32,540 which I'll call the mile_to_kilo_converter.py. Inside this new file is where 26 00:01:36,690 --> 00:01:39,690 I'm going to create my project. And first of all, 27 00:01:39,990 --> 00:01:44,910 I'm going to go ahead and import everything from the tkinter module. 28 00:01:46,410 --> 00:01:50,490 So import *, and now I've got all of my classes. 29 00:01:51,240 --> 00:01:55,200 The next thing I'm going to do is to, of course, create our window. 30 00:01:55,590 --> 00:02:00,590 So that's going to be created from the tk class and my window is going to have a 31 00:02:02,280 --> 00:02:03,113 title, 32 00:02:03,120 --> 00:02:08,120 which I will call it miles to kilometer converter. 33 00:02:10,350 --> 00:02:11,400 And finally, 34 00:02:11,430 --> 00:02:16,430 we're going to get our window to be displayed and started off in the main loop. 35 00:02:17,550 --> 00:02:21,690 Right now if I run this file miles to kilo converter, 36 00:02:21,990 --> 00:02:26,990 you can see I've just got a blank window with the title miles to kilometer 37 00:02:27,300 --> 00:02:29,670 converter. Afterwards, 38 00:02:29,670 --> 00:02:34,530 the next thing to do is to create all of our widgets and lay it out on screen. 39 00:02:35,010 --> 00:02:36,300 If we look at this break down, 40 00:02:36,300 --> 00:02:41,300 you can see we've got one entry widget here and then four different label 41 00:02:41,520 --> 00:02:44,880 widgets at each of these positions and then finally 42 00:02:44,880 --> 00:02:47,220 I've got a calculate button down here. 43 00:02:48,090 --> 00:02:51,840 So I'm going to create each of these widgets and then I'm going to lay them out 44 00:02:51,840 --> 00:02:54,420 on screen. Firstly, 45 00:02:54,420 --> 00:02:57,000 I've got a miles_inputs widget 46 00:02:57,060 --> 00:03:00,550 which is going to be created from the entry class. 47 00:03:01,930 --> 00:03:06,930 And then I've got a label which is the miles label, 48 00:03:08,530 --> 00:03:11,260 and that's going to be created from a label class. 49 00:03:11,890 --> 00:03:15,370 And the label is going to contain some text. 50 00:03:15,720 --> 00:03:20,720 The text is just going to say Miles with a capital M, like this. 51 00:03:22,000 --> 00:03:25,930 Now the next one we're going to create is our is equal to label. 52 00:03:25,960 --> 00:03:29,410 So I'll just call it is_equal_label. 53 00:03:30,940 --> 00:03:34,270 And this one is going to have, again, just some texts. 54 00:03:34,270 --> 00:03:36,520 It's not really going to have much functionality. 55 00:03:39,010 --> 00:03:41,290 And then we've got our label 56 00:03:41,290 --> 00:03:44,200 which is actually going to be the kilometer value. 57 00:03:44,530 --> 00:03:49,530 So I'm going to create that as the kilometer_result_label. 58 00:03:50,880 --> 00:03:51,713 All right. 59 00:03:54,330 --> 00:03:59,160 And that's going to start off just with a big fat zero. And then finally, 60 00:03:59,160 --> 00:04:01,320 I've got the kilometer label. 61 00:04:01,380 --> 00:04:02,213 okay, 62 00:04:05,580 --> 00:04:09,510 ad , this is just going to say, uh, KM, 63 00:04:09,960 --> 00:04:10,793 right? 64 00:04:12,120 --> 00:04:16,200 And the final thing that I need to create is that calculate button 65 00:04:16,260 --> 00:04:19,350 and then we will be done with our widgets 66 00:04:19,380 --> 00:04:20,213 right? 67 00:04:23,880 --> 00:04:27,390 And this is just going to have the text of calculate. 68 00:04:28,290 --> 00:04:30,570 So now I've got all my widgets created. 69 00:04:30,750 --> 00:04:34,740 If I go and try to run this code, as it is, you'll see 70 00:04:34,740 --> 00:04:39,060 none of them get displayed because none of them have been laid out on the screen. 71 00:04:39,840 --> 00:04:40,500 At this point 72 00:04:40,500 --> 00:04:45,500 it's also good to mention that if you accidentally left out one of these keyword 73 00:04:45,540 --> 00:04:46,560 argument names, 74 00:04:46,590 --> 00:04:51,590 then you will actually get a error and the error will read something like this. 75 00:04:51,870 --> 00:04:56,520 String object has no attribute tk, which seems a little bit confusing. 76 00:04:56,820 --> 00:05:00,780 But basically if you see that, then just have a look, 77 00:05:00,780 --> 00:05:05,780 make sure that you've actually got that text = in there rather than just the 78 00:05:05,850 --> 00:05:09,690 actual string. That's a really common mistake that students make. 79 00:05:10,710 --> 00:05:13,860 So the next thing I want to do is to use my grid layout method 80 00:05:13,890 --> 00:05:18,090 to lay out all of these components in the correct positions. 81 00:05:18,360 --> 00:05:22,020 So I'm basically going to have a grid with three columns and three rows. 82 00:05:22,080 --> 00:05:24,630 So this will be column zero, one, two, 83 00:05:24,960 --> 00:05:27,360 and then this will be row zero, one two. 84 00:05:28,470 --> 00:05:30,540 So that should be relatively simple. 85 00:05:30,570 --> 00:05:34,350 And let's start with our miles_input.grid, 86 00:05:35,100 --> 00:05:40,100 and we're going to write a column number and a row number. 87 00:05:41,760 --> 00:05:45,090 Now I'm just going to copy this because I'm going to need to use it quite a few 88 00:05:45,090 --> 00:05:45,923 times. 89 00:05:46,080 --> 00:05:50,820 And then I'm going to refer to the end result and you can see our entry is here. 90 00:05:50,820 --> 00:05:54,090 So it's going to be on column one, row zero, 91 00:05:55,590 --> 00:05:56,423 right? 92 00:05:58,250 --> 00:06:01,910 And then let's define the miles label on the grid. 93 00:06:03,320 --> 00:06:07,880 And this one I think is going to be column two, row zero. 94 00:06:10,580 --> 00:06:14,900 And then I'm just going to go through all of these widgets and define them on 95 00:06:14,900 --> 00:06:15,733 the grid, 96 00:06:20,770 --> 00:06:21,603 right? 97 00:06:21,850 --> 00:06:22,990 So they're you have it. 98 00:06:23,170 --> 00:06:27,940 We've got all of the columns and rows that correspond to the positions of each 99 00:06:27,940 --> 00:06:32,680 of these widgets in our final layout. Now, if I run my code 100 00:06:32,680 --> 00:06:36,010 as it is, you should see this version show up. 101 00:06:37,210 --> 00:06:39,910 Now we've got to do some refinements. 102 00:06:40,210 --> 00:06:45,210 And the first thing you notice is that this entry is way too large. 103 00:06:45,820 --> 00:06:48,490 So let's go ahead and change it's width, 104 00:06:48,910 --> 00:06:53,530 and I'm going to change it to just five or seven, 105 00:06:54,010 --> 00:06:58,420 basically not a very wide. That way it will be a lot smaller like this. 106 00:07:00,280 --> 00:07:03,790 And then we're going to use the method that we learned previously to give our 107 00:07:03,790 --> 00:07:07,570 window a little bit of padding by changing its config 108 00:07:07,750 --> 00:07:10,900 to add a padx and a pady, 109 00:07:10,960 --> 00:07:14,560 and you can pad it however much you like. But in my case, 110 00:07:14,590 --> 00:07:19,180 I think 20 pixels should make it a little bit larger and a little bit easier 111 00:07:19,180 --> 00:07:22,720 to see. So now that we're pretty much done with the layout, 112 00:07:23,080 --> 00:07:25,630 let's go ahead and actually add the functionality. 113 00:07:27,070 --> 00:07:29,080 We're going to need some sort of function 114 00:07:29,140 --> 00:07:33,940 which converts miles to kilometers. 115 00:07:34,660 --> 00:07:39,040 The miles is going to be inputted in the miles input. 116 00:07:39,520 --> 00:07:42,880 We can get the miles by calling miles 117 00:07:42,910 --> 00:07:45,160 _input.get, 118 00:07:46,120 --> 00:07:51,070 and then we can convert that into km by using some sort of formula. 119 00:07:51,820 --> 00:07:54,010 If we search in Google for miles to km, 120 00:07:54,040 --> 00:07:59,040 you can see that the formula is pretty much multiplying the mile value by 1.609. 121 00:08:02,050 --> 00:08:03,250 That's simple enough, 122 00:08:03,280 --> 00:08:07,930 we'll say miles multiply by 1.609, 123 00:08:08,620 --> 00:08:13,390 and we get the value in kilometers. Then we have the set 124 00:08:13,480 --> 00:08:17,920 our kilometer_result_label to show this updated result. 125 00:08:18,580 --> 00:08:21,190 So we're going to get hold of the kilometer_result_label 126 00:08:21,580 --> 00:08:26,580 and I'm going to call config on it to change its text property 127 00:08:27,070 --> 00:08:28,720 to this new value 128 00:08:28,870 --> 00:08:32,140 which is going to be our value in kilometers. 129 00:08:32,770 --> 00:08:35,350 Now we have to be careful with the data types here, 130 00:08:35,830 --> 00:08:39,340 because when we get hold of the input from that miles input, 131 00:08:39,370 --> 00:08:43,750 this is still going to be a string. But we want to multiply it by a number 132 00:08:44,020 --> 00:08:49,020 so we have to change it to an actual number. Because people could type decimal 133 00:08:49,180 --> 00:08:53,560 place numbers, I'm going to change it to a floating-point number like this. 134 00:08:54,160 --> 00:08:57,960 Now I've got a floating-point number multiplied by a floating-point number 135 00:08:58,290 --> 00:09:01,410 so that's perfectly valid. Now next, 136 00:09:01,440 --> 00:09:06,360 when I actually want to put that number into a label I need it as a string. 137 00:09:06,900 --> 00:09:09,570 Instead of simply just adding this kilometer in, 138 00:09:09,600 --> 00:09:14,600 I'm actually going to use an f-string so that I wrap this kilometer variable 139 00:09:15,690 --> 00:09:17,700 inside my f-string 140 00:09:17,760 --> 00:09:21,960 and then I convert it into a string to put into this label. 141 00:09:23,280 --> 00:09:23,700 Now, 142 00:09:23,700 --> 00:09:28,700 all we have to do is to trigger this function miles_to_km when the user 143 00:09:29,700 --> 00:09:31,440 presses the calculate button. 144 00:09:32,010 --> 00:09:36,780 And if you remember, the way we do that is by tying it as a command. 145 00:09:37,200 --> 00:09:39,810 So command = miles_to_km 146 00:09:40,050 --> 00:09:42,930 but without the final parentheses 147 00:09:43,290 --> 00:09:46,860 because we only want it to be called when it actually gets clicked. 148 00:09:47,610 --> 00:09:50,070 Let's check our code and see if it actually works. 149 00:09:50,130 --> 00:09:54,510 Let's check what 20 miles is in kilometers. So if I click calculate, 150 00:09:54,570 --> 00:09:58,110 you can see it gets calculated and that label there, 151 00:09:58,230 --> 00:10:02,400 that kilometer result label, gets changed. If you wanna leave it as this, 152 00:10:02,400 --> 00:10:04,560 that's perfectly fine. If you want to, 153 00:10:04,560 --> 00:10:08,400 you can also round this up so that it becomes a whole number 154 00:10:09,600 --> 00:10:12,660 and you end up with something that looks a little bit more sleek 155 00:10:12,690 --> 00:10:14,610 but maybe a little bit more imprecise. 156 00:10:15,270 --> 00:10:19,470 That's how you complete this project. Now, of course, 157 00:10:19,470 --> 00:10:21,570 the world really is your oyster. 158 00:10:21,870 --> 00:10:24,960 You've learned about way more widgets than we've used here. 159 00:10:24,990 --> 00:10:27,870 So you could incorporate anything else that you've seen, 160 00:10:28,170 --> 00:10:30,870 like maybe add a radio button or checkbox, 161 00:10:30,930 --> 00:10:35,220 and you can modify this to maybe not just do miles to kilos, 162 00:10:35,520 --> 00:10:40,500 and you can try playing around with the code and creating your own version of 163 00:10:40,500 --> 00:10:42,840 the program. If you create something fun, 164 00:10:42,870 --> 00:10:47,400 be sure to share it with us in the Q/A below the lesson so that we can all 165 00:10:47,400 --> 00:10:50,730 admire and congratulate you on your hard work. 166 00:10:51,180 --> 00:10:56,180 So I hope you've had fun building your first GUI programs using tkinter. In 167 00:10:57,120 --> 00:11:01,010 tomorrow's lesson, we're going to be diving deeper into tkinter and 168 00:11:01,010 --> 00:11:03,930 we're going to be looking at how to create some more complex, 169 00:11:04,140 --> 00:11:08,340 but more interesting programs as well. So for all of that and more, 170 00:11:08,490 --> 00:11:09,090 I'll see you there.