How to Program a GUI Application with Python Tkinter

hey guys in this video you are going to learn how to design a complete weather app in this video we are going to have a background image and lot of different options designed within the GUI of python you will also learn by clicking on a button how you can submit the enter data into an API and fetch the data back to your python GUI overall this is going to be an interesting content so let's get started [Music] all right the very first step is to look at the expected graphical user interface in Python that we are going to design this is the GUI of the application now to design this layout first of all we have to import a specific Library so let's get started by importing the library whose name is t kinta now what is this taking term in this TK stands for toolkit and the inter stands for interface like graphical user interface okay using this toolkit interface we are going to design our entire application now let's get started now the very first thing if you look at the picture the outer frame of the application to design the outer frame all you have to do is simply write root root is nothing but it's a simple variable which is going to hold this outer layer information okay it's just a variable now for this simply use this Library called taking top toolkit interface dot I have to use a very specific class from this peek into so what is this class this class is going to help me to build a outer window toolkit TK stands for toolkit remember this so toolkit means it will have multiple different things inside that that means you can have a text box you can have a drop down box you can have a label you can have a header created so all of this can be designed using this toolkit class so it's a kind of a package which contains everything okay all right now let's write something called to root dot main Loop so what is this root dot main Loop will do let me show you when I run it you will get get an understanding so what happened just by writing this three lines of code a window got created a window got created now this main Loop what it does it will keep the application open until unless you close it manually for example if I don't write this here in this line number three that the application window is getting created but again it is ending the the process is getting ended and you are not able to see the application that's why what we have done is we have written this root dot main Loop so that it puts everything in a loop and the application will remain on as long as you don't close it from here getting it all right now if you look at our application has a bigger window so let's set the geometry of the application to this specific size to set that all you have to do take the variable so what is the variable which holding this application window root variable right root variable is holding the application window so I am going to say root Dot then I have to write a very specific function called geometry called geometry in this I can mention my dimension in pixels for example the width I would like to keep us 500 pixels small X okay here you have to type the keyboard for on your keyboard there is X symbol right so type that and type 600. now just by doing it if I'm going to rerun this particular window you will see I have got a similar window what I wanted the expected kind of a window you got it okay so this is the window we have got it I am fine so step by step we are going so now let me ask you this question do you have any doubt in this lines the very first thing we have imported the library next thing we are creating a window blank window and we are putting in inside a loop and now in the fourth line we have described the geometry of the app how the moment you open it how it should open so you saw the output okay now the next thing we would like to have a title do you see the application has a title called my weather app so let's have a title so how do you create a title again it's simple I will use the root dot title title function and inside this I'm going to write in double quotes so I will say my whoever clear now let's rerun this so you can see the window with the title has appeared getting it the window with the title has appeared now the next important thing how do I get the background image okay so till now everything is fine it is green color I would like to have a background image for this so to get the background image first of all let me locate the picture that I would like to place in my background in case you do not have to download any picture which you can apply to your app inside my project file I have kept this app underscore image this is the image which I've downloaded and I've kept it inside my project file you can keep it anywhere you like but it's good practice to keep it inside the project folder now I am going to hold the shift key right click on this particular image and I am going to get something called copy as path so let's copy this go to pycharm and start implementing the image now to implement the image it's quite simple first of all let me create a variable called image path equals to and this is my path where my image is there clear so this is the path where the image is there now if you see the moment I hit on enter it gives a error what is the error anytime I am using a backward slash that means when I have to write if I say print a new line you write backwards n alphabet that's for a new line similar way here if you see it has got a backward slash now to avoid this kind of a problem I have to Simply write something called r r stands for regular R stands for regular now that helps to let python know in even though there are backwards losses do not consider it as Escape characters the technical term is escape character like slash n you write write while printing you write do you remember slash n this is a skip character so do not consider anything in this line as Escape character consider it as a regular string that is why we write r so we got this now this is just a string variable which is holding the path image path is a string variable what I want here is I would like to create a app variable like this is the application we are creating right so for that we have to import another library from taking the so I have to say from Peak into import photo image the class name is photo image so from take into import photo image now this photo image will help us to set a background image for our app remember this photo image is going to help us to set a background image now I have imported now how do I really use it so let me say background I will say BG underscore I'm going to say image BG underscore image equals to I'll use this photo image class inside that I am simply going to write file where my file is so the file I have kept in this image path variable so in this line what exactly we are saying we are saying create a background image variable which supposed to hold the entire path now this is a string variable okay for example if you print this you will understand why why am I really doing this for example if I say print and I'm going to say image path what kind of a variable I would like to know for that you will simply say type foreign I'll put another parenthesis now what is the type you will get the image path is a string type of variable wherein if I'm going to use the same print command and say type and I'm going to type the background dot image you see the difference so if I run this now so what is happening the background window anyways got created but again if you see the print here the first one is a string kind of a variable which is holding the string and the second one is a peak inter photo image class this is a peak enter photo image kind of a variable getting it now for a app what is our aim our aim is to have this background image created inside our app right so for that we need to have a variable which can hold that photo image for the app so this is the variable we have created using the photo image class okay so let's omit this print lines just to understand okay why am I creating two two lines of code okay so this much understanding we have got we have created a variable which is now capable of holding a image capable of not holding a string capable of holding a image a file image file okay all right let's write the next code now we would like to Target what our root application right so this is our root application which is currently blank this is what we would like to Target and this entire application window is carried by the variable called root so I would like to Target there so for that let's write a variable I am saying background image set we I would like to set the background image so I'm saying or you can you can write proper variables so it becomes easy to understand so I'm saying set background image equals to I'll use the tick interclass dot label now why I'm writing label this image we can place it as a label in the entire application window the image we can place it as a label in the entire background window so how to do that let me write the code and I will explain so where I would like to keep it inside the root I would like to keep it inside the root and then I would like to send this image which is currently available I'll use this image parameter available under the background image variable so what is happening now look at the line I am creating a variable which is going to create a label where inside the root and it is going to use the image which is kept inside the variable called background image now once I set this variable so what is the variable which contains that label set underscore background image I am going to say place it okay where I want to place it I would like to place it inside my app I would like to place it inside my app now to place it there are two different parameters that you have to remember how would you like to place it your relative height should be hundred percent for 100 here we write 1. for 50 0.5 if you want only half of the picture 0.5 percent I will show you this let me write one relative height of the picture should be 1 comma the relative width of the picture should also be 100 one means hundred percent okay so now let me run it you will understand what is going to happen if I am going to run it let me stop this run it again okay now what you saw do you see the entire image now has been placed as a label in the background okay so this is the code this is the two line of code we have written to set the image in the background four lines of code so let's recap again we saw the final output how it has appeared final output appearing like this so what we have done the first thing we have got the image path where our image file is available next thing what we have done using the photo image class we are creating a variable which can hold a image like a variable which can hold a variable similar way we have created a variable which can hold the image simply by writing photo image file equals to image path we created a variable which can hold image now what we have done we created another variable stating which can create a label inside the root that means within the app it can create by passing this image variable to the image parameter now once you have written the code this code is not enough you have to place now this variable is holding you are not placing it inside the root just that you are saying the variable will have this value which can place inside the root now to place it we have to write a very specific function called dot place dot place with a relative height of 1 relative value width of one now let me explain this if I am going to write 0.5 okay just the height I am saying 0.5 now look at the app now it has got full image right if I'm re-running this specific one so what happened because I mentioned 0.5 the height of the image has come only taken only 50 percent do you see it has only taken 50 percent similar way if I am going to make it 0.5 the width so what would happen if I'm going to run it see the the width also taken only 50 size of the window if you maximize this you can see it has taken 50 of the height fifty percent of it similar way you can if you need an image like that in a corner or something let's say I want to have the relative height as 0.3 and the relative width of 0.5 now what would happen now the background image is set to a no set to a corner do you see it has been set to a corner let me read on it okay the width is 50 but the height of the app is just what happened only 0.30 getting it so here this 0.3 means 30 percent if I'm writing one means hundred percent okay so keep it to 100 we'll keep it 200 so now what we have achieved is we have achieved setting up the background image next we would like to design the header of the application which is my weather app with a rectangular white box right there are a lot of features that you need to look at and also the text is in blue in color so how to achieve that let's see it for that every time you are creating a new element you have to create a variable so what is the variable name we should keep we'll keep up head down equals to I am going to use the take into module so remember every time we are using the stick inter module okay tick into Dot I am going to create a label right so I'll say label now label has been used for a image here we are going to use the image for the proper label for a text so here I am going to say root every time so remember this most of this syntaxes will be repeated multiple times so if you remember one seat tax you will be able to remember rest of it because most of them are similar now here because it is a label I am going to pass it to a text parameter what is the text I want to show in the app my weather app this is what I would like to show now once you have written this once you have created this variable next what we have to do with the variable use the variable and say pack getting it use the variable for a for image you set place now for a title like that you have to say pack now let me run it and show you how it appears so if you see my weather app has appeared but again it is quite small and it is green color the text is in blue in color wherein what we are expecting we expect something like this but what we have got we have got something like this so now in this line number 13 and 14 we have to make certain modifications so that we reach to the expected output this is the expected output okay one by one so let's do it now the very first thing I would like to set a font of that what would like to say I would like to set a font the font should be of let's say I'm using Georgia you can use single code double quote anything is fine Georgia and I would like to keep the uh font size to 24 that is one thing the next thing I would like to keep a background color for background color I have to Simply say BG background color parameter and I'm going to say I would like to keep the background color white now the text has to be in the foreground color so I am saying foreground like background foreground foreground color should be blue okay simple now let's run it so every step you are doing just step by step run so did we get it the expected output so let me open the image so this is the image so the expected output if you see the label is still touching the white window the title if you see there is a gap here and here there is no Gap so how do I create a gap to create a gap remember this is our x axis y-axis the height is the y axis the width is the x axis now I would like to give some padding padding means what anytime you hear the word padding means a space the outer space so I have to give some padding space in the y axis y means what height X means what x means what x means width so in the y axis I have to give some Gap or padding so for that here in the line number 14 I'm going to Simply say pad y equals to and I'm going to give some Gap let's say Let me give a 20 20 means what 20 pixels 20 minutes what 20 pixels okay so I've got some Gap into my app so let me run it now now if you see did we achieve what we need look at this so we got some Gap here so yes we have achieved now the next thing we have to do is create a label for select a city the select city is nothing but a label that we have to create because it is a label we can reutilize the code that we have already created for the header we'll simply copy this and paste it here only thing we have to change the variable names so here this is a label right select City underscore label got it and then I also need to change this to packet right the same variable we have to pack it so all done now let's run it and see how it is appearing now it is more or the less appears like the same reason being we did not change the input of the text which has to be select City and then we also need to decrease the size let's say I would like to keep it to 50 okay and I don't want this background color white and blue I want it black in color so let me remove rest of it okay the same code just I have removed this background white and foreground blue I have removed it and change the value of this and this all same now let me run this now what happened the select city has appeared as per our expected one do you see it has appeared the next thing in our coding is creating a drop down box so how to create a drop down box to create this drop down box we have to use another class from the take inter Library so the class is very simple I am going to say from foreign use okay Peak into toolkit so ttk so in this ttk this kind of a drop down uh you know extra graphical items are present so we are using that so here I am going to create select underscore City underscore drop down so this is a drop down box okay equals to I'm going to use the ttk class dot drop downs are known as combo box and this has to be created again inside the root so you can see pretty well the similar kind of syntaxes are repeating okay but here what happens I have to give show some drop down some values let's say Mumbai Pune different different cities I would like to show before that I'll create a cities variable equals to I'm going to create some list and grid and inside that I'm going to say let's say Bengaluru first one then let's say Mumbai second one like that how many number of different cities you would like to keep let's keep it Pune let's skip it Goa let's keep it Delhi so here I have just created a list variable okay list variable containing all different cities now this combo box also will allow you to type your own City it will not just restrict you to use only these cities but you can also type it I'm going to show you here I'll use something called values parameter and in the values parameter I am going to pass the cities okay simple now the select City drop down I would like to pack it so select City drop down DOT pack you can pretty much you know pretty much copy paste the above items okay above item so that it appears fine and then I would like the font should be in this size a little smaller size and let's make it to maybe 10 10 should be fine yeah okay so let's see how the output is appearing let me stop this okay so this is how it is appearing now if you see the cities have come so now what we have done we have created the drop down and also it will allow you to type your own I said you know it will also allow you to type and also select the relevant city names that you have provided here or else people can also type it so this we have achieved the next thing in our list is to create this get weather button so right now we have created a drop down we understood how to create a label how to create a header now we will create a button to create a button it's again simple all I have to do um so the button name will be get weather right so I'm saying get the button equals to tick into dot button class inside that again the same kind of formatting we'll use root it should be inside the root and the button should have a text saying get weather this text is nothing but this one okay get whether this inner text so text is equal to get weather and if you like to have a font size or something you can just copy paste so let me copy paste the 15th one comma paste it okay so I got everything done next I have to pack it so get weather dot button dot pack and same pad y equals to will give little little less space pad Y is equal to 10. so all our coding has been done let me run this here and see if it is appearing or not so you can see it has given me the options like this and it also gave me a bottom get weather now the next thing comes to our mind okay we got the front-end design file but it is still not capable to get the data from an API so how do you link the API how do you call the moment somebody clicks on something clicks on this button it's supposed to capture the data from an API so we are getting introduced to a new topic I am going to teach you the next thing how will you make this button capable so let's see that now for this we have to add another line of code in the line number 24 another syntax we have to add that is called command now what this command will do using this command we can call a function which will do the job so what is the function here we would like to call the API which can fetch the data for us so here we are calling a function what we are doing using this command we are actually calling a function so let me create a function called get underscore well what is the function name get underscore whether now just to differentiate you simply write f u and C function get underscore whether so we are calling this particular function over here using command now it should be encapsulated by the parenthesis all done now let's see how do you really uh you know how do you really call this function underscore get weather have you created a function for it no we haven't created a function you go to the top complete top after the import and here we will Define the function so the function is efficiency function underscore get underscore weather ensure this function name is exactly matching with what you have typed okay if not the better option is to copy this go here so that you don't make any spelling mistake just to avoid the spelling mistakes okay so I copy pasted it properly now let's go to the top and start writing the function now the moment somebody hits on the button the moment anyone hits on this button it should come to the line number five and do the rest of the job so before we call the API and all of that let's simply think if it is really coming here or not let's see that first so here I am saying print came to the function it should print if it is coming to the function then you should print came to the function so let's run it now foreign okay so it has come now let's say I'm going to say select a city called Mumbai and click on get weather now the moment I hit on get whether the output should print came to the function okay let's see so you can see the moment I'm hitting on the button it is coming to the line number five and then six and printing this came to the function getting it so you have understood how to enable your button so that it can do some job using the command parameter and calling in the specific function let's go up to the top and start defining this function here our main purpose is to call what I need to get what the user has typed in this or what the user has selected in the drop down that is our main job right if you select the Mumbai then Mumbai should come if you're selecting any other City then that specific name should come so for that I'll create a variable called City underscore or simplistic City equals to where the city is there inside the drop down dot get function so that means it is going to get whatever values there in the drop down it is going to get and keep it in the variable called City so let's print this city and see if the whatever value we are selecting is it coming or not let's print it okay for example I'm going to select Delhi okay Delhi and get weather is it printing Delhi yes so that means this function is working perfectly fine so what are you really trying to achieve here the moment user selects a city name and hits on get weather we actually wanted to show the current temperature of the city the current temperature of the city let's say I'm going to select any of the city for that City the moment I hit on get weather it should show me the current temperature of the city inside the app now for that we have to use a site called open weather map or this is the open weather map org is a site using which I can do API calls simply type open weather there should be a home page now this site contains what the different City temperature so in this site if you see I can also type for example London I'm saying and hitting on search this sites tracks some real-time data and tells you what is the current temperature of a given City let me select Great Britain and you can see it is actually pulling the data now what is an API using API I want to get this data into my application using the API the this is the graphical user interface now I don't need a graphical user interface rather I just need this data to appear on my application somewhere here okay so that is why we'll be using an API now once you are here on the home page simply follow the instructions you will be able to do it simply what you do click on this API once you click on the API scroll down and there is something called current weather data similar way there are other things also available hourly forecast daily forecast so we don't need all that for this example we will just focus on current weather data and there is something called API dock here simply click on this okay so once you are here on this page on the right hand side because we would like to fetch the data using city names so there's a link here called city name click on the specific link the moment you click something is going to appear on your left hand side window here I am going to use this specific link to access my data okay now what is this link let me copy this link to a notepad let me paste it here so this is how the link appears do you see this is how the link up link appears so this is a API what is the API API is nothing but it's a URL to fetch backend data this is just an URL to fetch backend data now if you closely look at this URL it tells you hey you have to provide the city name as an input what is the city you would like to get it for and you also provide me the key your user key is nothing but password remember anywhere you find this API key is nothing but kind of a password kind of a authentication it do so who is accessing the data so for that your password you should provide now how do I get this API key let's go back first of all you must sign in for example if you see I have signed in my name is there here you see Rakesh so first you need to sign in once you sign in couple of default API API key you can generate on your own or by default on this page once you click on API key you will see the key let me click on this API keys so here you can see I have a API key so I'll copy this API key let's go to the notepad slowly we will do it okay so that we get an understanding so API key is nothing but this one so it is saying you have to provide me two inputs one is the city name what if I'm going to manually write it let me write something called let's say London and let's say in the API key I'm going to copy paste that value so now here is my entire URL so let me copy this URL go to the browser if I'm going to enter this this is the API URL right with a specific input London and the my key my password I am going to delete this password post use but again you will have your own just by going to open whether it is free so just use the free one you can to learn and exercise so if I hit enter will it get the data for me let me see if I hit on enter did I get a data yes I got a data now remember the data that comes out of an API are generally the server data what is this data this is a server data server data getting it so this is how the server data has come now the server data contains multiple things for example if you see the temperature is here but why did it say 290.74 it should come in degree celsius right that means there is something we have to do with the URL it is pulling in a Fahrenheit I wanted degree Celsius now for that simply go back and click on the current weather you remember right how we came here then we clicked on city name now in this one if you slightly scroll down there is something called units and there is something called lawnmower just click on this now here this documentation says for temperature in celsius use units equals to metric for temperature and Fahrenheit use units equals to Imperial so here we need in degree celsius so I'll copy this go back to my notepad and here simply use a amp person it's more like connecting the same URL but you are connecting it so if I copy this go back to my browser last time we got 290 right now if you see because this is a extended URL with certain things been added to it if I hit on enter if you see this has given a different data and the temperature is coming in 17.84 getting it 17.84 so here there are two things we have captured in our notepad one is the URL this is known as API underscore URL and the next thing we have got the API key let's go to the pycharm and start drafting it let me remove this print and here the first is API underscore key equals to what is the key here is the key so let me copy this and you have to put it in double code because it's just a string okay all right next thing I need the API URL so this is my API URL so all this we are doing for learning purpose okay for learning purpose we are doing so API underscore URL equals to now remember when you are putting such a long this one it has to be kept always in a double quote okay double quote here what we have done we have modified this London do you see we have modified this London so I will keep it like this and then API ID this is the API right so I'll delete it and I'm going to keep it like this and here I'll use something called format string so why we are using a format string because here the city name has to come from a variable I cannot I don't want to punch in a default City so every time as per the user selection the city should automatically come here so that's why I am putting in curly braces and writing the variable in city and that's why we are using the format string called f the moment you write F inside your string you can Define your variables that is why we are writing this format string or F now here I will pass the API key variable done so finally our API URL looks something like this which contains the city variable and API key variable okay instead of hard coding it you are putting a variable so done now the next thing comes Rakesh in your Google Chrome you had this Google Chrome so you have copy pasted this link and hit on enter and you got the data but here in Python we don't have a browser as such at the moment right and I want to get it in a code format so I want to get everything in the code format so how do I get this in the code format is the question that comes to our mind so let's go to the end hit on enter for this we will use another see so many libraries we are using another one is called import request there's a library called import request and also we have to deal with Json data Json means what JavaScript object notation so can you give me an example of a Json data the one you saw so this is a Json data coming from the server Json data means it will always have a curly braces start with the curly braces ends with the curly braces so this is a Json data which has a key and value key and values this is a key this is a value okay this is a entire Json data so let's go back and here what we are doing we have to use two different libraries called request and Json so make a note of these two libraries that we are getting introduced to okay request and Json now let's go to the end hit on enter and I would like to get the data so this is nothing but my server data what I'm getting I'm getting the server underscore data equals to I'll use this request Library Dot request Library dot and I want to get the data from the server from which server from this API URL right from this API so I am passing this API URL so now remember this line number 11 what it does the line number 11 is nothing but it is requesting data from the server the server is nothing but API URL it is going to API open Weather map.org server and pulling the data as per our inputs so we are passing the data to get some data so here the data will be there in server data variable now I would like to print I would like to print this server data so how will you print so printing is done in a different way how it is done you have to get it in Json format first so what I will do to print this data I will say server underscore data underscore Json Json means what this this is Json okay starting with the calibrary so so while the data is coming in Python it comes in a very different form in a very complex format we have to first convert into this Json format so the browser is automatically doing the job for you in the behind the scene it is automatically converting the server data to Json format but here in Python we have to write another line of code pretty simple so equals to I will say Json so I would like to convert it right so I will say server data dot Json so it will convert that server data into Json format now if you print this print server data Json so do it okay only when you do it you will get an understanding so let the app start let me select some City Pune get weather so what is happening it has started printing the entire data do you see till here right if you copy paste the data okay apart from the you know this is how the data is coming the format is the same same format it is coming okay so this this is the Json data we have got by writing dot Json but what happens it is not easy to read Are you able to read the data it is not very perfect very human friendly it is not human friendly now let's say I would like to make it human friendly to read the data so how do I make it human friendly it is pretty simple so I am going to create a variable called human friendly server the same thing I'm just writing a word called human friendly to make it human friendly I have to Simply write a code called Json dot dumps so what this dumps will do it will convert it to a human friendly data so where the data is contained currently server data.json variable contains our data right comma I'll put some indent some space so that it looks looks pretty pretty so if I'm going to print now print human server data Json human readable format if I'm going to rerun it okay the app has appeared now look at it how the data is going to appear now let me select delete and it won't get weather so you can see how the data is nicely formatted now this becomes quite easy to read isn't it let's copy this output to a notepad Okay so I'm going to copy this output to a notepad now if you see is it not very easy for example if I ask you to find the temperature you can easily find it okay here is the temperature okay here is the temperature 34.05 so can you tell me what is the pressure so it becomes quite easy rather than reading this kind of a data it becomes quite easy to read by converting into human readable format okay so I got the human readable format just for understanding purpose otherwise there is no need of these two lines okay I don't need this data I just need the Json data which is there in this variable now the question comes how do I print the question comes how do I print the data into my app here somewhere here I would like to print the data first of all let's capture the data into a variable so how to capture the data let me create a variable here called temperature I'm creating a variable called temperature here this is to capture the data okay the server data underscore Json contains what remember this if I ask you what it contains you will say okay this contains this entire data this kind of a data it contains everything now out of this I need only the temperature that means you have to write a code to find where the temperature is residing for example if you see the temperature is residing here so how do I Target that one we are going to learn here now next thing I am going to write the code for that I'm going to say temperature so until here it is just pulling the data entire data here we are filtering out our data so I'm going to create a variable called temp equals to what is that contains entire Json data server data rotation this variable contains everything right this variable contains everything inside that inside this data there is something called weather ah sorry there is something called main okay there is something called main so simply I'll copy this within the square bracket I'm saying Main now inside this there is something called temperature so I am going to copy this temperature so that's why I printed in it in human readable format so it becomes easy for us to understand how the branching is done so in the main data there is something called in the Json entire data there is something called Main and inside that main there is another component inside the main is called temperature so for that to get into that point you have to Simply say like this you have to print something like this within the square bracket this gives you the data let's print it and see if the data is coming or not first of all so I'm going to say temperature and let's rerun it okay now let me select some of the city let's say Bengaluru get weather so now it is saying 30.61 so the temperature is coming or not yes it is coming we got what we need now the next thing comes to our mind Rakesh how do I print it within the app that is the next thing that comes to our mind how do I print it within the app okay now to print this so we don't have to print it here so let me delete this now to print it let's scroll down below this weather button I would like to print it so I'll create a label here so I'm saying output I'm creating a label called output underscore label equals to again the same thing goes on thick enter dot label here it has to be there inside the root and the text has to be blank because the text has to come from where the text has to actually come from the top the text needs to come from this function it should return the data to this text isn't it it has to return the data to this text so I'll leave it here I'll just set the font and size and all that so I'll say font equals to 15 this should be fine right so I'll select the font of the result however that should appear okay and then um okay so this much we have written will go to the top will not pack it here because if you pack it the moment you launch the application it's going to appear that blank box will appear we don't want the blank box to appear so I'll not pack it here generally when you pack it it shows you in the application right I don't want to show it only when the result comes that's where it should show not while launching it let me show you the difference for example if I'm going to say output label dot pack and I'm going to give it a pad y equals to 10 if I do this and run the code now if you see in this one the moment I even though before selecting the sum blank box is coming here do you see small blank box is coming so I don't want to be packed initially so what I will develop cut this entirely I'll go to the top and I want to pack it somewhere here okay here I would like to pack it now before packing I have to send the data the data is there in the temperature variable right so how do I send the data to to what output output level so here I will say output label dot config there is something called config function and here what I would like to do I would like to send the data so which data I would like to send temperature and then once it goes it should pack now look at it look at the output how it is coming if I'm running this see the label did not come now let me select let's say Bengaluru get weather um line 10 Rakesh user there's something wrong okay I got it what is wrong so here what I will do I have to pass to the text parameter right we are passing it to the text parameter because text parameter we have left it blank here right so that's why we have to pass it to the text parameter and say temperature now let's run it let me stop this and run it so the app has appeared and I'm going to select let's say Bengaluru get weather so you can see the output has come 30.61 getting it 30.61 the output has finally appeared now I would like to add a few sentences let's say I would like to say temperature colon 30.61 right temperature colon so how do I do that here is pretty simple here I'll use the F string and I'm going to say temperature let me minimize this and I'm going to say temperate temperature colon and then curly braces I'll use that variable pemp variable so let me show you the final format so what we are doing we are simply saying output level config text equals to uh format temperature okay I have to use this okay so now it is fine now if I run this let's see how the output is coming so you can see the app has appeared I'm going to select some City hit on get weather now it looks pretty good right temperature 22.99 now let me ask you what if I would like to have some four important data for example temperature then we would like to have a temperature let's say I would like to have feels like I would like to show pressure humidity these are couple of four four to five different points I would like to have okay all of this I would like to have so how to write it so let's go back to our code instead of one data I would like to show multiple data so what is the next thing the next thing so that's why this pretty format of the Json is important so that it you know becomes easy so I would like to see feels like okay let's create a variable called Fields like or simply say Fields equals to the same thing it will you know I can copy paste copy paste and here it should be feels like copy this so most of the work will be copy paste once you know how things are working feels like so it has come perfectly fine okay go next next thing what I want I want temperature minimum so let me create a variable called Dem Min equals to again copy paste the above code and here it should say temp Min right so I'll remove this and going to copy this okay now the same thing let's do it for uh temp Max okay I want temp Max so let me copy this temp Max equals to again copy this and I think we can simply say Max here got it now what is the next thing I want pressure so I'll say pressure create a variable called pressure equals to copy paste this entire thing and here I'm going to say pressure pretty simple hit on enter what else we need we need humility so let's copy this humidity equals to and the same thing will copy paste and just change it to humidity so that way it finds the required values so all the variables are there now inside this config right inside this config we have to write now let's copy this one several times into our code so paste I'm going to paste copy this paste again go here hit on enter same thing you need to repeat okay this this one I have to repeat it for rest of the things so now I have copied it multiple times now let's do one thing let's change the values to the variables that that is holding for example temperature is hold by temperature variable Fields is hold by Fields variable so I'm going to change it to Fields variable and the same thing it should be temp underscore Min variable now this should be temperature underscore Max variable and this should be pressure and this should be humidity okay same way you change the text you like to so it feels like it feels like feels like and then this should be temperature underscore Min and then you can say temperature hyphen Max however you want okay so here I'll say pressure and here I'll say humidity getting it so the code is ready let's run it there's any problem we'll debug it okay so the app has appeared let me select Bengaluru get weather now you can see your final output has come temperature feels like temp Min temp MAX Pressure humidity rest of the things have appeared perfectly fine so finally we got what we need you can still do lot of modifications lot of Designing you can do but again this is the conceptual or the fundamental things behind the scene how your code will work and show you the data that you need okay for example I would like to have here the temperature should say degree celsius so how do you add it simply here before this I'm going to say I don't know degree Celsius or you can say no C symbol or something like that okay so percentage right humidity should be let's say percentage So based on that you can make multiple modifications and uh show the data Bengaluru get weather so you can see how this percentage degree celsius so like that you can hard a lot of modifications can be done for example I would like to create a frame with a border now I would like to create some border here okay so how do I create a border let's see it around our output and another thing we are seeing some kind of a space here let's remove that so this is coming because of this last lesson let's remove it I would like to create a frame so this label I would like to keep I mean this this is coming in the label right this output is coming in the label I would like to keep a border around this okay I would like to give some kind of a border or would like to rather keep it inside a frame so for that let me create a variable called output underscore frame equals to tick into dot frame there is something called take into dot frame okay so using this function I can create a frame so how that frame so the frame should be kept inside the root okay and the frame has got couple of uh important parameters for example highlight background color I would like to creep let's say light green okay light uh I don't know if this will work it's light gray and then comma uh I would like to also keep the Highlight thickness parameter equals to let's keep it fine okay fine thickness so this is the frame we have created now I want this label to be kept inside the frame so instead of writing root here I would like to keep it inside the output frame okay getting it swiped simply removed it and said output frame now on top of that we have written packing we were doing on the top right in the functions I'll remove I'll remove that and I'm going to paste it here because this padding will not happen because it is not in the root it is always in the frame what we will do will pack the frame on the top okay so here I will say output underscore frame dot pack that simple okay so let's run it and see how this one is working okay so this has come let me select the city let's say Mumbai get weather now you can see there's a light green color border is coming do you see okay so you can change your color so finally we have got the Border this Frame is not up here until unless we are getting the results from the API after that only the light frame is appearing getting it and inside this Frame this label is there now the question comes for the header that we have on the top what if I would like to have a border for the header do I need to every time use a frame and do like this is there a simple way available yes so let's see that what is the simple way so for this let's scroll down now let's come to the header part now in this header part it is only giving simple box like that we have seen I would like to add a border so let's for that we can try some of the other parameters called there is something called BD for the Border parameter and let's say I would like to keep it as two okay and let's run it okay one by one we will see border equals to 2 if I see if I say this so do you see any kind of a border appearing not yet right no okay for this we will align with another parameter comma uh uh sorry let me minimize this here yeah here I will put another comma and then I would combine with another parameter called relief equals to solid so it will give some solid appearance like a 3D appearance it will give so let me run this now and let's see okay so the Border has appeared right the Border has appeared in black in color what if I want red in color I want this to be sorry in blue in color let's say I want this to be blue in color or red in color or some pink color something like that so what if I want in that color how do I do it so let's see now let's use some other parameters let's say there is something called highlight background okay highlight background and I want to give let's say red comma I'll also use something called highlight thickness is equals to let's say five okay we'll just try a few combinations let's see if it is appearing or not okay so let's run this okay so it has come right it has come with a red color and then it has some black border also along with that okay so to remove it let's do one thing let's completely remove this and then let's try instead of red let's say pink some light pink color okay let's run and see so all these parameters you can utilize to create various different looks okay you can see there's a pink border has come slightly light in color but I think that should be fine okay so dark pink let me try it and run this there is nothing called dark pink or simply say blue I think blue will look good so I'm saying blue and run it okay so now yeah now it is looking better so this is also another way of you creating a border around certain element so you can see I've created a board around this or else the other way is to use a frame so multiple different ways that you can create okay so now you have learned now you can design lot many things you know you can add lot many elements inside this and you can think of a very complex App instead of showing the data for example here when I am selecting Goa so it is showing the data in a single text box what if you want to create a tabular format where in the table there are borders available and then inside that you want to show temperature feels like and on the right hand side you would like to show or you would like to create a specific element here in this window with some images in the background and then show the values you know you can think of lot many things there is no limit to this and with all of those things you would like to create an app which can show in a very different which can give a different appearance right so we can do it only the only thing I would um emphasize on this video is to remember what are the important key points in the video okay so what are the key points that you have learned in this video how to write a function how to enable the buttons right the how how to use take into dot frame what is that for take Internet label what is that for when you say dot pack what happens when it comes to image you have to say dot place you have to use relative height and relative width what is that so once you remember all these important points in practice couple of times it will it should come in your fingertips that means when you put your you know hand on your keyboard This command should automatically come so those many times so practice you have to do so that things will automatically come you don't have to really remember but keep practicing once you practice it'll anyways automatically will come while your type so this code is entirely a huge code we have written now for a beginner when you show this you know they would be astonished as to how did you write down such a big code using python but again as a python developer you know it is quite easy a couple of things once you know how the libraries do work how the what are the different functions are available to use then you know it becomes quite easy to draft such an application and show an output to anybody who would like to see it all right so this is a basic app again you know it can be customized in many different ways and we can learn many things in the upcoming videos so guys please stay tuned and do comment once you have watched this entire video try to comment something so that I feel great to read those comments that you have typed so that I understand the entire amount of time that you have spent was it valuable or not so please do leave a comment from your end I would love to read them and do subscribe to the channel in case you have not subscribed we are going to come up with more such interesting contents which are going to add lot of knowledge uh in your Learning Journey so please do subscribe and give it a like to this video thank you let's meet once again in the next content till then take care bye so thank you guys for watching your support is very much required please do subscribe to the channel and leave a comment on every video that you are watching simply sit down give it a like and do share with your friends who would like to learn from our Channel thank you again you have a great day [Music]

Channel: Automate with Rakesh

Views: 1,167

Keywords: automate with rakesh, Python, Python 3, Tkinter, Python Tkinter, Programming, Python GUI, GUI, Python Application, UI, User interface, API in Python, GUI Python, Graphical User Interface, Python UI, PyInstaller, Python 3 Programming, Simple, Best, UI Design, UI Python, Good Tkinter Application, How to program a tkinter application, build, code, coding, App, Weather App, Python Project, Project, Skills, Tkinter Library, tk, API

Id: r3D5sXQyuk4

Length: 64min 27sec (3867 seconds)

Published: Wed Aug 23 2023