Python Unit Converter GUI Application With Tkinter Part 1 | Graphic User Interface And Style

in this video we're gonna build a python unit converter GUI application using TK inter this is part one and we're gonna create and style the graphic user interface by the way before you get started if you're here I'm sure you want to become a programmer and yes here on YouTube you can learn a lot but one of the best ways to actually improve especially if you want to turn this into Korea is to take some courses made by experts in the field usually these courses are structured in a way that makes it easier for you to learn properly and I've selected for you some of the best courses and learning platforms you'll find the links in the description down below and by using those links you're gonna help this channel as well so first of all we need to import a TK enter SDK then we need to import this and also from peel import image and image TK like that if you don't have pill installed you'll get an error so you need to install it using pip install pillow or pip 3 install pillow perfect so first of all let's create a class for our unit converter because I'm going to use a class as Destructor if you don't know how to use classes I'll leave the link to my six videos series on classes in the description so you can go and check that out so Plus unit converter I'm gonna inherit from TK the frame like that and I'm just going to pass okay I will add all the things later on then I need to get the operating system because I've noticed that the width and the height of the window might need to be different depending on the system you're on so operating system platform like that then I'm going to create the root window and then I'm going to create an instance of my uni converter and I'm going to give it a title unit converter like that perfect then if when in operating system I'm going to give the window this geometry so 450 pixels by 210 this is the width 450 and the height 210 then a leaf Linux in operating system then I'm just going to do something like that and it's going to be 230 like this I haven't really tried on Mac so I'm not sure about the dimensions if you're using Mac you need to check this yourself I'm just going to use the same width and the same height as Linux so if Darwin in operating system so it's going to copy this and place it in here like that then of course I don't want this to be resizable so root like this and false and also height false then of course I need to call the main Loop because otherwise we're not going to see anything so let's actually try to run this and see what we've got so far so in converter GUI so we've got something like that all right perfect so now in the class up here we're going to do something so let's delete pass like that so first of all I'm going to override the init method of the frame class with my own so Def we need like that itself root then I'm going to sign the colors that I'm going to use to some variables so we're going to use those variables instead of the colors the hard-coded colors so if you want to change them you can just change them here and you'll see different colors on the whole interface self color one so one then I'm just going to duplicate those and two and three so here like that and also like this perfect I'll just set three colors but you could have as many as you want to and name them in different ways so like background color foreground bottom background Etc the more the variables for the colors the more customizable the app because you can then change the color of just the button or the text of the button for example without changing everything then I'm going to have all the variables all the conversions available like that okay and it's going to be comes as miles then okay so here you can write as many as you want I just have those but you can have as many as you want a quick Interruption hey I just want to mention that I now have a patreon account where you can support me to keep creating content like this and also get exclusive perks if you want to check that out I'll leave the link in the description box down below and thank you so much for the support and then I'm going to call we need method of the base class which is the the frame and I'm just calling this after defining all the variables up here because otherwise I wouldn't be able to actually use this self color etc etc Okay so super in it then here root a little bit like that and then the background is going to be self color one like this so basically by calling the need method of the parent which is the frame it's like doing something like ticket or frame and then all the parameters so now self is the Mainframe so we could do something like self dot pack etc etc but this is not actually the readable I mean this is readable but it could be a little bit confusing because you don't know if this is an instance variables or whatever so in this case I always do something like this so I always sign the set to and is this variable like that okay so now I can use something like dot Mainframe dot pack and as you can see this is so much more readable because you know straight away that this is the Mainframe but if you were just to write something I say a top pack this could be I would be confusing so I I always do something like that this is not actually necessary it's something that I actually want to do because I think this is less confusing okay so now I can do something like I've actually already done this so I can use fill taking both and then expand true like that I'm just using pack because I just want to stretch the frame to cover the whole thing and then self Mainframe and then column configure like this zero weight one and then row configure so 2 which is the third row and then I'm going to call a method that we're going to create in a second so self create widgets okay so now let's define the method to create all the widgets this is how I decided to structure things but you could create as many methods as you want maybe one for one part of the interface the other for another part Etc this is quite a little program so I don't think that you need to create a lot of methods but if you have a really big interface maybe dividing things you know the toolbar on one method the other part and the other method Etc could be useful so let's go down down here okay so let's define now the create widgets like that itself like this perfect so the first thing that we're going to add is the title so TK dot label like that so self dot Mainframe which is the parent that the background color is going to be self color one foreground color self color two like that and then I'm going to write font and it's going to be Ariel 22. bold like that I'm just using Ariel but you could use whatever font and of course you might need to change a few values because a different font could throw the positioning Alpha to be and then of course the text is going to be a unit converter like this and then you know that we need to place it on the frame otherwise you're not going to see anything so we're going to use grid and the column is going to be the first one so zero zero sticky is going to be TK e w to stretch it horizontally and then the padding pad y I want it to be 10 and 20 pixels like this so let's actually try to run it and see what we've got oh we've got an error so line 54 Let's see we need root of course here we need to add root okay because in the init method here we have the root parameter so we need to actually provide it down here when we call when we create the instance of the unit converter okay so this is something that you need to do so let's actually run it so as you can see already you can see something going on here so pretty pretty cool let's close it okay so let's carry on now that we've got our title we need to create a string bar that we're going to use in the option menu by the way talking about option menus I've actually made a video where I show you how to style the option menu to make it even more modern looking with a custom icon etc etc I'll leave the link in the cards up above and in the description box down below if you want to check that out so first thing we need to have the the string bar this and then we need to set the value of this string so conversion set to the first value of our list of conversions so because of course you want to start with the first value and then the user can select a different value and then we can create the option menu which I'm going to call it select conversion okay dot option menu like this so the Mainframe is going to be the parent then self conversion okay and then I'm going to do something like self conversions available and by doing this we are actually sort of unpacking all the things here so all of these here like that and now we need to configure the option menu because when you create it you cannot do this so we need to do this afterwards so this is going to be self dot select conversion like this so the background color is going to be self color three the foreground color is going to be self color one then the active background it's going to be the color three and the active foreground is going to be itself color one as you can see they are the same so I don't want the background to change when you hover over the option menu I don't want it to change then the font is going to be as usual aerial 14 pixels this time the border is going to be zero I don't want the Border highlight thickness 0 which is sort of an highlight around the select box and I don't want it and then indicator 0 why because the default indicator is not that good in my opinion so I'm gonna hide it as I said in the video I mentioned earlier I explained all you need to know to style the option menu and also how to add your own icon as the indicator then let's actually place it on the screen and see what we've got and then we can move on and actually style the menu as well so column is going to be zero Row one sticky TK ew part X in this case 50 so the padding on the left and on the right then let's see what we've got so as you can see this is already working but this menu here is now looking great so now we're going to style this as well so let's close this and go up here so self no select conversion and I'm going to do something like menu config as you can see the auto completion doesn't work if I use menu like that so I'm just going to remove this for a second and then I'm going to add that back in So as you can see now the the autocompletion works so color three and then the foreground is going to be self self dot color one like that active background is going to be self color one and then active foreground yourself call it two the font is going to be the same so 14 like that and then active board with zero like that then the border is going to be one and then release is going to be flat like that let's see what we've got actually we need to change and add the menu back in like that so as you can see this already looks so much better okay if you remove the border around here you'll see that let's actually try to do that and you'll see what I mean so as you can see in my opinion it doesn't look great but if you like this this way just use it this way and add bottle zero I actually like border one I actually haven't mentioned that on Windows the option menu might look slightly different maybe you can tweak things here and there but it's mostly due to the operating system and it's something that you can't do much about so now we need to create the container for our conversion Okay so down here we're going to do something like cell container values as I said these are names that I gave to the things but you can use the names that you want background self color one like that and this container is going to contain the conversion so the value that you want to convert and the converted value so set container values column configure like that so one and then wait one and then I'm going to place it on the screen so container values great column is going to be 0 row 2. sticky is going to be TK Dot and s e w but X is going to be 50 and then part Y is going to be 40. I'm not going to run it because you don't see anything then now we've got a container like this and we can actually put things into it but before we do that if you're enjoying the video don't forget to leave a like every like actually means the world to me and also subscribe as well I'm gonna post a lot of videos like this one so you don't want to miss them so let's put things into our container so first of all I want to create an entry for the value to convert as you can see I'm using names that are really easy to understand so value to convert etc etc and this is the way to go because you want to be as clear as possible when you name variables so a person looking at this code can understand it straight away and even you in the future you'll see that when you write things like this instead of Maybe video I don't know something like that this is so much clearer okay so the entry is going to be inside of course the container so the container values is going to be the parent that the background is going to be equals three like this the foreground is going to be the color one then we select background it's going to be itself color one and then select foreground it's going to be self color two like this any font is going to be Ariel as usual 14 pixels like that and then it's going to be highlight thickness 0 to 1 the sort of both around then Bolder zero justify Center because you want the text to be in the center and then 11 and then of course we need to use the grid to place this inside the container grid so the column is going to be zero which is the first column the row is going to be zero first row sticky TK and because I want this to stick at the top and then iPod Y is going to be three I've actually used iPod Y3 to make it as tall as the option menu because here you don't have the height parameter to use so you need to use the padding to actually increase the height of the entry and if you run that let's see what we get as you can see this is already looking pretty good so let's now actually use a little arrow I've actually downloaded the SVG from font awesome and I then changed the color and scaled it down to 32 by 28 pixels in this case the height is really really important because otherwise the little icon would get cut off at the bottom so make sure you don't leave blank spaces at the top at the bottom of the image and also that the icon's height is 28 pixels maximum of course you need to test things yourself I'm just talking about my own version with those Dimensions with this geometry etc etc and I actually have the arrow here so as you can see this is the arrow here okay so let's close this perfect so to add the arrow we need to create the photo image object so self Arrow image msdk photo image like that and then I'm going to use image open and arrow dot PNG by the way sometimes images are not shown and if I were you I would really check out the video where I explain why and how to fix that here it's definitely going to work because I do things the right way but you might run into this issue in the future and it'll be nice to know how to fix it so I'll leave the link in the description box down below and in the cards up above if you want to check that out then itself Arrow is going to be a label because I'm going to use a label and then inside the label I'm going to place the image so self container values the parent the background is going to be self color one and the image is going to be self.ro image like that as you can see here I've used the background self color one and if you were to change the color set color 1 you would change the color of the label just by doing this once instead of having to change it here and to change that in the other place okay so this is why I've actually created this variable this color variable so you can change the color just once and that's it basically by the way the image has a little border by default in this case the border is not necessary because it has the same color as the background and you don't see it I'm gonna leave it there because I took that into account when I actually worked out the right height for the icon but if you need those few pixels then you can set it to zero as I always say you need to experiment with things until you get a good result then of course you need to use the grid to place it screen so row 0 like that and let's see what we've got so as you can see of course now you need we need to add another entry here so the arrow would be here basically okay so as I said we need to actually add another container for the converted value I'm going to copy the thing here because this is the same like that and I'm going to call it of course self converted value like that this is the same and as I'm actually going to disable it I'm going to use the disable background color three and then the foreground and this is going to be self color one okay so the colors are actually the same maybe I could just delete those but I'm just going to leave them there it doesn't hurt anyone and then of course I want State debate table and then also I'm going to change the cursor so cursor arrow and I'm going to show you why I'm going I'm actually doing this then let's it's great itself converted value grid is going to be a 2 so the third column row is still the same sticky n and this the same perfect so let's actually turn around this as you can see so much better and here as you can see here you can write and click on it here you cannot but if I were to remove the arrow you get this and it would be quite misleading so I've actually decided to add the arrow so it looks so much better as you can see it looks like a label here you could have used a label okay for the for the converted value but I've just decided to use an entry so I could just style exactly the same as the other one and also I've actually disabled it so this is sort of like a label and as I said this is the result that we've got but you can see now you can add whatever here okay and nothing works as expected in part two we will see how to add all the functionality validation included so how to actually let the user just enter numbers and not letters etc etc so stay tuned because the video is going to be released really really soon and if it's already been released you should see it on the screen don't forget to check out my patreon and also like the video and subscribe to the channel to be part of this little community of Learners and I'll see you in part two bye

Channel: Fabio Musanni - Programming Channel

Views: 802

Keywords: python, python3, programming, coding, learn python, python tutorial, python for beginners, python tkinter, python tkinter gui tutorial, python tkinter gui, python unit converter with tkinter, python gui app unit converter tkinter, create a python unit converter using tkinter, tkinter gui app with python, tkinter graphic user interface, unit conversion with python, unit conversion in python, style tkinter application, tkinter application unit converter

Id: lGICLOtVZrw

Length: 24min 42sec (1482 seconds)

Published: Wed Sep 20 2023