How to Program a GUI Application (with Python Tkinter)!

what's up guys and welcome back to another vlog I'm just kidding just another programming tutorial today in this video we are going to learn how to build a GUI application so a graphical user interface and to do that we will be using Python tkinter library so by the end of the video you'll have something that looks like this so we have this little widget on the screen and I can resize this widget which is kind of nice something that I don't see with a lot of tkinter apps but what this app does is if I type in a city so I live in Boston and I click get weather well it gives me Boston's current weather conditions and I can do this for any city so I could type in like Miami I could also type in foreign cities like Madrid espana and you have to use this country code when you do that and I also can which is kind of nice I can do zip codes so for Boston and one of those if codes is 0 2 2 1 5 and this defaults so I think Spain 0 2 2 1 5 so if I do 0 2 2 5 1 5 us I get Boston as well so that is what we're gonna be building so basically how this video is going to work is we will start out with kind of the basics of tkinter and then kind of build up into having the basis of what you see on the screen right now and then once we have the basis we'll connect it to a weather API and then kind of put all the pieces together and then actually the last thing we'll do is we'll actually make it an executable so you can run this wherever before we begin if you enjoy my videos it would mean a lot to me if you throw this channel a subscribe also if you could this would be super super awsome I want to like start kind of doing programming competitions and like giveaways so if you also shoot my Instagram and Twitter they follow that'd be awesome because I'm going to now install that type of stuff in those places ok to begin open up a new Python file it doesn't matter what you call it I'm gonna call mine I think weather app dot Pui and you also want to install some libraries we're now can I need them immediately but it wouldn't hurt just to be prepared to install a couple of libraries and those are so you want to type in you want to open up terminal window and type in pip install requests this is how we're going to deal with the API and I already have it and then we'll also want to install pip install pillow pillow is a maintained work of this pill library pill stands for Python imaging library and we'll be using this to kind of just handle some image stuff while we build our GUI and you're also probably to see that I have this okay so do that to just get prepared the tkinter library comes to fault and so does I think one other library URL Lib that you'll see in this video that comes to fall and just to let you guys know I'll be programming in Python three and using sublime text 3 as my editor will start building our app with the following lines so we first need to import the tkinter library and we'll do that import tkinter it has TK and then every app we build with tkinter needs to have a route like a route window kind of to place everything into so to make that route window you do root equals TK dot t-- k and then to run your application so this is just a single window nothing in it yet we do route dot mean loop so everything that we're gonna want to place in our application is going to be in between these two lines and if i run this you see we have our first little GUI application super fun nothing big nothing much here but we start placing stuff into this this screen so now that we have this little window up let's let's actually start placing like real widgets into our GUI app and i think the best place for documentation i was looking at the official like tkinter docs and i didn't that great so I'm gonna share this tutorials point link and I'll put this in the description but if Elton this was a helpful spot to go to like figure out what you could do with tkinter so if we go down here it lists out all the widgets that you can use I think this is all of them so let's start out with a pretty simple widget let's add a button to our screen so we're gonna just kind of go through the basics and then we'll actually start building up to that app that I showed you at the start of the video so we'll just call this button equals and if we click on this button over here in the docks and go down a bit it kind of shows us how to use it so W equals button and actually I think gives an example down here so it shows a little bit more an example down here and one thing to note with this is if you can see us maybe make this a little bit bigger over here but they don't use TK dot button and that's because they imported it differently but I'm gonna just keep it as we imported it and so when we call this will do TK dot button and we want to place our button in the root so it's kind of a nested structure so the root is contains everything and then when we want to start putting things in specific containers we start from the root and we just can keep like placing things in from there and that will make more sense in a sec so TK button root is where we're gonna pass it in and we'll set the text to be test button and that will be fine for now so let's build that now where's our button so we have our button to find what we need actually like place it so the first way we can do that is we can do button dot pack and that will put it on a screen you see that little button right here on the screen the pack made things a little weird but we do have a button one thing I should mention regarding this button is you notice how I put the text I passed it in as a keyword argument like this if you look at the documentation here these option and descriptions are all the different values you can pass in as keyword arguments like this so I could also do and this is true for all the widgets we'll work with so I could do background equals that say gray I think this should work you could use gray or you can use a hexadecimal color if you're familiar with that so now you see the button on the screen it's small but we can see it's gray I could also do for grand our let's say yeah I could do foreground equals red to change up the I'll make this little as small as you can see foreground equals red now we have this button so all these keyword arguments are right here and that look at the documentation to see what you can really kind of do there okay now that we have quickly gone through the keyword arguments one thing that's really bothering me right now better which is how small it is like I'm literally trying to move this on the screen and I can't even find a spot where I can move it because this is so small I guess now I can move it okay so let's make a container that will place this button then so there's a couple different ways to do this I would say I like to start out with a canvas so if I go back in the docs and I might just push the docs to the side of the screen for now because I want to make my code a little bit bigger but yeah you see this canvas widget so we're gonna use one of these to set our initial size I'm gonna hide this for a bit okay so we call this canvas equals TK canvas it's gonna be defined just as we defined our button it's gonna go into the root just like are buttoned it and now we can this has two parameters let's see if I can bring this back in for a second height here and I think there's a width somewhere in here yeah with so we can pass those in and then what's nice about this canvas is we at the top to fine I'm going to call this height equals 700 pixels and width equals 1,000 or let's make a little smaller 800 pixels now I can pass in those values and you could pass them in directly but I like to write out my variables so I don't pop in magic numbers all over the place I know what these values are and I can easily change them with equals width and I'll do a canvas pack and this should now give us a bigger window which is definitely nice now you stop wiggling around this the kind of screen because every time I wiggle this around that's the wrong one I wiggle it around it closes my other window I tend to use this canvas kind of as like placeholder to like kind of get my initial screen size something that I like but to actually start like really organizing the widgets I put on the screen I'll use a frame so I'm going to define frame equals T ke dot frame I'm gonna make the root the parent of it and so instead of packing I'm gonna go through the differences between packing placing and then there's also this thing called grid in a second but I'm gonna do frame dot place Knox I'll make a color for this just so you can see exactly what it is so we have red we have white make this blue so we can see it pretty easily framed up place and the nice thing about this place function is I can do relative width goes one relative height equals one and that will just kind of fill whatever the parent is so now you see that we have this frame that fills the entire screen and if I wanted to make that a little not the entire screen I could do something like relative with let's say equals 0.8 relative height equals 0.8 and now we can run that now it's like that and then we could Center this if we wanted to by doing relative x equals zero point one because I would give point one on one side and point one on the other side and I guess relative y equals zero point one as well and that's kind of like the percentage of the screen so if you think of point one as 10% in now I run this you see you have this frame that's right in the center of everything and the nice thing about this is it adjusts with the screen as I change it so the relative width and relative height of the place function is really nice because of this for this purpose and just because this blue is kind of tough on my eyes it's like a very sharp blue what I'm going to show you is we can use these hexadecimal colors so I want like a kind of a light shade of blue something that's pretty easy on my eyes so I'm going to do something like this this hex value is a DC 1 FF and I can actually just pass this into the background and it will pick that color instead oh I have to do hexadecimal hashtag 80 so now we have this a little bit easier on our eyes color and I could do something similar with the button so maybe with the button I wanted to keep the text default and not make it that I could also with the button now I'm gonna pass it into my frame instead of the root so the background actually we can just leave it gray let's see how this looks now we have our little button here inside of our frame okay let's add a couple more widgets so we can how to organize them in different ways so we'll add to begin with a label widget TK dot label will also put this in the frame and I'll just make the text like this this is a label and just because it'll help probably while we're organizing to like really see what is what I'll make this yellow and I will pack that in and let's also make a entry bar and that's TK entry also put this in the frame you don't need to put anything here but we'll make a background here of green entry pack okay so what does this look like without making any modifications fair there so we got the three widgets all on the screen which is good and you can see that they're color coded this one you can type in hello over there but they're just they don't look good they're stacked on top of each other and definitely not what we're probably shooting for in the long term so let's first talk about how we can use this pack to organize them a bit so the first thing I'll pull in the docs real quick for Peck so with this pack there's a couple different options we have so we have expand fill and side we can pass in as keyword arguments so let's start with side so I'm going to say side equals left here for the button and what's happening to our app when we do that you see the test button now is on the left side while these are still over here I can continue to do that for each of these other ones I can do side equals how about what are our options could do right here and so now the label is gonna be on the right and the button is gonna be on the left and this is still up here by default it's also interesting to note that you could do both of them on the left and then what happens is because we put the button down first it fills always the left and then the label doesn't override the button but it just kind of sits right next to it we can also do that with our entry as well and now they're all aligned which is good to see I would say and let's see what else can we do so we can use expand and fill so we'll start out with showing what Phil does Phil equals TK dot both or I can go straight both here I think so as you can see Phil you can set whether you want to fill the X the Y or both I did both so it fills the given space inside whatever its parent is and its parent is the frame so that's why it's feeling completely the PIP that parent what I also could do is expand equals true and if I expand it basically it will give like a greater amount of the frame give it it will give a greater amount of the space the frame has to this button widget so this will now be like a big fat button yeah as you can see so I can also fill equals both for these so I don't know it's not like terrible it it's easy enough to organize things pretty quickly and like make them fill the screen and because we did this fill it's also responsive which is nice to see obviously our frames a little big so I could drop the frames height a bit so that's a relative height is 0.5 now you can see these fill whatever the frame is so they'll expand and fill up to that no I'm just to see the difference between filling both and filling just the X I'll type in X here instead of both and I'm looking down over here at the documentation to figure out how I'm doing this if I do just X now it still fills that space that it's allotted but we fills it in the x-direction and you can really play around with this it works decently but I just my one issue with PAC and why I kind of prefer place over it is I think place gives you like the ultimate flexibility alright so we have done PAC now let's also look at grid so I'm gonna delete this I think I'm gonna do a button grid row equals 0 this is another way to organize things so just bear with me real quick while I finish writing this label dot grid row equals 0 and we'll make this next to it so column equals 1 and then finally and I'll close this out for a second I'll open up the grid documentation right after I finish writing this example entry grid row equals 0 column equals 2 so let's see what that does so that aligns all these things like that which is pretty nice and easy alright let's pull in the documentation for grid so it's another way to organize and as you can kind of see with this window what I'm circling to the mouse allows you to as the name says stack things and organize things in a grid formation so basically by providing the row and column you can kind of specify where in your grid you want to place certain things so if I switch this up to like Row 1 column 1 and row 2 column 2 now we're gonna get like a diagonal stack of these things as you can see so grid is nice I like grid but one thing I have issues with and just you know I'm sure there's probably some people that might be might prefer grid over other methods I find it a little bit harder to like really make these the sizes I want when I'm making it a grid think there's a little bit more you have to configure to really like make it fill your space and also like if I resize this it's it's not as easy to be responsive when you put it in a grid formation so for the sake of probably the rest of this we don't probably not gonna use grid but it is something that's worthwhile looking into if you do have a lot of things that you need a stack and organize in a grid formation so finally let's talk about police and I like place the best honestly I think it gives you the most control of what you're doing with your GUI I guess as a result of that though because you have more control sometimes you have to know what you're doing a little bit more but I don't think it's too too difficult to get the hang of so let's bring in the documentation for place as well so basically we've already seen me play something here you can use rel x:real y:real with real height and that makes it really easy to put exactly where we want something within one of the parents so let's see these are all the different keyword arguments we have anchor is also important because that's kind of saying when we're talking about this relative X and this relative Y or I guess we could also use absolute X absolute Y anchor is telling us what point is going to be at that position so if we anchor in the northwest that would be the top left is gonna be at for this case like point zero zero point one zero point one and I think Northwest is default so that's why our frame as we have it now is anchored right there but if I set the frame with this place and I said anchor what did I just do that I said anchor equals let's say North that's gonna completely change our frame is oh doesn't like it I can just do a lowercase n so yeah now it's putting the middle at that point zero one zero point one spot and that's why it's like making our frame all weird now so anchors good to know about but let's play around with actually placing our widgets that we have on this frame so what I'm going to do is fill them across the screen with a height that I like within the frame so button dot place relex will do start it right at zero will start wire right at zero will say that the width should fill up i think our button should be about a quarter of the screen so I can do rail width equals 0.25 and I think it should fill up about also maybe a quarter let's maybe half let's say half of our frame there are no set quarter okay so that's what does that do and I screwed something up real why real hype this should be struggling and I'll move this over for a bit so we can see everything okay sorry that that got a little bit messy but this is what we have here and I'm going to just comment these out for a sec as you can see it does exactly what I wanted it to do I want to write at the top left I wanted to go down a quarter I wanted it to fill the quarter so it's kind of nice with that all right that's now we'll move our label so one thing I'm going to do here with the label is instead of putting it right at 0.25 so because this is zero and then we did a width of 2.5 if I start this relex here for the label at 0.25 it will be exactly touching the test button so I want to do 0.3 so I'm going to create a little bit of a gap between the label and the button and rel with I'm going to say equals we can say that this label will take up half the screen but because we have this a little bit of a gap that we have the point zero five gap we're going to say that this is zero point four five and then the height should be exactly the same as the button should be nice and flush with that see that look at that we got our button we our label and then finally we can finish it off with placing our entry so I'll have this fill up the rest of the screen so we have zero point three here plus 0.45 so that's going to give us seven five so if we wanted to gap this a little bit too we could start at 0.8 so and then to fill the rest of the screen we do 0.2 and real high it would be the same so as you can see I'm doing a little bit more here like I'm I'm having to type in a bit more but I have this like complete control of where how this looks and this was supposed to be point 2 5 so that looks I mean it doesn't look anything special right now but you can kind of you should be getting the feel that like okay I can move these things easily if I want it to okay now that we have this and actually one thing I want to say real quick is note that with place to it's nice and responsive so that's something I enjoy about the place as well it makes it easier to make an app that is exactly how big you want it to be but now that we know the basics of moving stuff around and like changing the color and whatnot let's actually go back to that app I showed at the beginning of the video so this app right here and let's build this put this together and then what we're going to do once we put this together is learn how to like actually use the buttons and actually use this entry spot and actually click the text from that entry and make it do something using this as a reference here okay so we have a frame up here at the top which has the entry and has the button and then down here we have another frame which just has a big weird label here and then in the background we have a image so we'll save this image for the last but we'll start with these two frames or we'll start with this top frame so we can adjust our frame that we have right here so I'm going to say so how I define the top frame was the relative X I put right in the middle live at 0.5 relative y I did point 1 just like we had it made the relative width took it take up a quarter three-quarters of the screen and the height relative height of this smaller top frame I had that take up 0.1 of the screen and the one thing I did just to make this relative X right at the center is I did anchor equals north so just right at the top you place that 0.5 so let's see what that does okay so that's the start of our frame now we can go ahead and delete the label from that because we didn't use that in our app or at least in that frame spot so I'll I'll keep the label I'm going to comment it out temporarily because we'll use the label down at the bottom and I'm going to just move it below okay and then the entry was on the left side of this doesn't really matter that I write it out at the above button but just makes it easier for me to read from left to right so the entry came first and we're not gonna have a background color anymore it's still going to be inside the frame but now we're going to change up the positioning so with our entry we're gonna put that just ignore this real quick what I did for the entry box I just did relative with equals 0.65 and relative height fill the entire thing so one and one nice little thing I did as well is when you're defining your entry you can actually set the font so I set the font to be a bit bigger so I set to be 40 so let's see what that does so now we have this text box right there our button is in the way right now so let's move our button to be in the right spot we'll also I'm going to get rid of this gray I'm going to make the font 40 for the button as well and where I place the button when I was showing you that app was at relative X 0.7 so that's going to create a little bit of space between the entry and the button because this is 0.65 and I think it defaults to zero zero XY coordinates and I'll put the relative height equal one and the relative width here we want it to finish up and fill the rest of the screen so that's gonna be zero point three look at that so now we have that the one thing we don't have one thing that's a little bit annoying potentially is it doesn't leave any border space and there's a nice little keyword argument we can pass in to the frame up here to specify that so I'm going to say BD which is border equals five here now we got exactly kind of what we were looking for with the top of our app so let me just share this so as you can see it's pretty identical the colors a little bit different so now let's do the lower frame so down here we'll define a lower frame that's going to be defined the same way as our upper frame was TK dot frame and make the route the parent will take the same exact background color we used up here if I use the same exact border as well so I'll just copy that in and let's see I guess actually I made the border down here at ten it doesn't really matter lower frame dot place and the positioning of this I'm just reading off what I did in the past just so it's the same 0.5 real y equals 0.25 so it takes up a quarter or it's so it starts a quarter of the way down relative width is going to be 0.75 just like we had with our upper frame right here and then the relative height this is going to be a bit bigger so that's gonna be zero point six and once again just to get this relative X to make it right in the center I'm gonna make the anchor equal north look at that we're almost there so next we want to put our label inside of that so I'm going to uncomment this again so now instead of going into our frame this label is gonna go into our lower frame and we're going to play around with the settings a little bit here actually you know we don't because place is really nice so if I go ahead and start this at the same exact spot that we started the lower frame so 0.75 or sorry or I don't even have to specify anything okay so our label I just want it to fill the entire thing but we're gonna have the border on the frame so it will leave a little bit of space so I can just do relative width equals one and relative height equals one and watch this there we go that's exactly what we basically had before I'm going to delete the text so it's just white to start and I make the background get rid of that and we have if we open up our side-by-side basically the same thing I guess to get it to be the exact same size I made my height 500 and my width 600 here so now we have that I might have stretched this a little bit before okay so we basically have the same thing the last touch to make this identical before we actually play around with the button is to get that background image to add the background image you first want to have a background image so I'm going to be using this landscape dot PNG image I'll include that with it the source code for this you know everything we do in this video on my github page and he'll be in the description so you can find this image if you want it there but really you can use any image you want for your background but just make sure to include it in the same directory that you have your code so as you can see the weather apps right here this is in the same directory so what we're going to do to do this is will define a label array I guess we'll start out with just defining the background image so the background image to get a image and tkinter you can do TK dot photo image and then you're gonna have to do file equals and then you pass the path to the file so if you include it in the same directory you just need to dot slash and then actually if I can just go ahead and do the name of the file so landscape PNG but you can also path it pass in paths here so you could like if it was in some other directory you could do that just fine so then we'll define background label and that will be just a normal label that uses our route as the background and we're going to set image equal to background image and then we'll use this our favorite function dot police to make it fill the entire I guess back drop so that would be I'm gonna just have it start at x equals 0 y equals 0 I think that this was helpful when I was doing it but really the important part is real width equals 1 and rail height equals 1 I might be able to get rid of this let me just check well delete it to start and see how it looks yeah it looks pretty good so I don't even think you needed that x equals 0 and y equals 0 but yeah this is exactly what I kind of had as the background when I was initially showing you guys this app so that looks pretty good alright now let's go ahead and actually implement some functionality and I just realized as I'm looking at this let's change this to get weather because that's what we're always trying to do but we're trying to make the button actually button click actually do some things how do we do that well we go into our button and when we define it we want to pass in the keyword argument command and then we can define whatever function we want and have that button press trigger that function so let's just do test function right now and we'll just have that printout button clicked and I'll save that so now I go down here to command and I do button sorry test function and I can just pass it in like this I don't need to put the parentheses like you normally would and I can go ahead and let's see what happens if we look down here in the bottom left you should see button clicked yep cool however this gets into the tricky part where let's say we wanted to pass in some sort of variable so in our case what we're going to want to pass in when we get the weather is going to be what's in the entry here so there's a little bit of an issue when you try to like say entry and then I do this is the entry okay so a couple things here we can do we can get the entry text within this entry by doing the following we can do there's a get function on the entry so what I would pass into this is entry dot get and run that so if I type in Boston we would want it to say this is the entry and then Boston when I click it however it's the problem is is this code right here execute ahead of time so when we write it like this it runs once but then it like will update our entry so what we need to do is define what is called a lambda function lambda is an inline function it's used sometimes if you wanted like you need to do something on a single line I don't know I'm sorry it's used like this is a perfect example of why it might be used it's defined like at run at the time that it's like run so it's temporarily kind of stored in memory and then it can be kind of gotten rid of so when we type this button click its redefined every time we click it so we can do get weather text box get here and now because we define it as a lambda whenever we click it it will re define it and actually get the current state of the textbox using this lambda function let's see what happens now so Boston we want it to say the entry is Boston oh no oh why did I call it get way there sorry I called it get way there before so this was test function and look at the bottom left and you should see the right result also instead of calling an entry I called it text box because I'm reading my other code Boston the entry is Boston awesome okay now that we've connected our button to our entry and kind of seeing how that works let's switch gears a little bit and connect to our weather API and if you're unfamiliar API stands for application programming interface and basically what that means is api's on any sort of site or server is our way as a programmer to communicate with that server and get information back and our slow push information to the server so when I say weather API or basically have a way to query this weather server and get back results in a programmatic fashion so that's what the API does so what I want you to do is to go to open weather map org and I'll put this in the description probably to go ahead and sign up because it doesn't cost anything for the free tier but however doesn't cause anything for the free tier but sorry I'm like doing two things at one time but you do need they they restrict how much you can use in the free tier and they give you a key once you sign up so it's just good to do that okay and once you have a password you can type in I am 16 years older I agree with privacy policy whatnot and I am NOT a robot oh my gosh I think apparently if you hold this button down you don't have to do this thing oh my god create account YouTube so once you're signed in you can go to API or actually API keys and you'll want to copy this key down and I'm gonna delete this key after this video so you can't use my key but you can make your own key it's pretty straightforward and I'm just gonna paste it as a comment for now so a little bit about this weather API what we're gonna be querying if I look at this API here at the free tier you get this five-day 3 hour forecast I believe it's see ya 5 day 3 our forecast and current weather API you get more stuff if you actually pay but for the sake of this I'm not paying for anything ok and basically we're gonna be querying this endpoint right here and this is going to give us as it says the five-day 3 hour forecast data so we'll be getting back a JSON object from these requests and you'll see that on a sec I'm going to copy down this URL and I'll paste that as a comment too right now and to see an example this is what's gonna kind of look like probably they probably have an example down here somewhere yeah this is basically like what it's gonna look like what we get back and this is JSON but also if you just are familiar with like Python dictionaries it's kind of how you interact with it and if you're not familiar with Python dictionaries or API is and dealing with it in general I'll link to some videos not of my own probably do my own ass end point but that you can use as reference for these things alright so let's write a function called get weather which will take in the city which is actually going to just be our entry that we got from the textbook are they and yeah there can be our entry text and that will define our weather key equals that was this right here and also now that we're making an API request we're gonna have to import the requests library that we installed at the start of the video so that's our weather key I'm gonna define the URL equal to the first half part of this up to the forecast actually I want to use I don't know if it will really change much yeah well I'll play around with in a sec that would be the URL and I'm gonna have to use HTTP I know this matters or not so URL then we're gonna find our params so this is what we're like sending when we try to request something from the server so the first thing we'll have to pass in is our app ID and that's the weather key so I can do a PI D equals weather key this is a dictionary we're defining if you look at this it needs a Q value that's what we actually do to actually get the correct city back so I'm going to do Q and that is going to be equal to the city that we pass in then finally this is just I think a good I think by default at Celsius so if you're on the Celsius scale yeah you don't have to do this but we're actually might be Kelvin by default so units I'm gonna do an imperial because I am a silly American let me see Celsius okay yeah you're here your units Kelvin metric or imperial yeah so you yeah you would have to fill in metric if you wanted it in Celsius I won it an imperial for now that's our params response equals requests and now we're gonna send a get requests to see how we're going to hit the API the weather API we're going to pass it to that URL and pass in the params we just defined and I'm going to just print response dot JSON J this JSON will convert it into basically the Python dictionary that we can work with easily and we'll leave it at that for now let's see if this works so I'm going to change this to be get weather let's see what happens and we're gonna be printing it down here so open this up a bit Boston get weather oh nice yeah we got a lot of stuff here this is a lot to work with so instead of doing the forecast what I'm gonna do is the current weather and that was just to find at a different URL spot so you see how this says at the top of this it's for call five day three our forecast data if I instead just did current weather data that's what I was showing in my example so I can just instead a forecast here I do weather but you could see how you might want to take this application further maybe use a full five-day forecast weather and now let's see what we get when we pass it in Boston and look at that this is named Boston conditioned and it has all sorts of information so let's see if we can find the temperature is 41 point two three degrees Fahrenheit so we need to now take this response this was the response JSON and basically navigate and get things out of it that we want so that's what we'll do now I'm gonna rename response to chase I'm going to call it weather JSON or this was call it weather to make it easier for ourselves that's equal to response JSON and now if we look at this so and also let me just real quick show what we had before when we so this is the app that I built before this video started I did click Boston it gives me the city gives me the conditions and temperature so I'm gonna do those same three things how do we navigate that so first the city so if I go down here you see named Boston so I just need to if I want to get the name I can do weather and I'll just print this out to make it easy to see at first weather and then the key is name right here it's not nested at all so it should just do that then I want the conditions so to get the current conditions it's going to be the first entry of this weather list right here so to get that I can do weather and then I need a key in to the weather that's right here so weather and then I want to get the first entry as you can see that this is a list right here so I want to get the zeroth entry the first entry and then I want to get the description description like that so first entry and then as you can see once you're in that first entry we're at this dictionary object so we can just get the description key there and then finally I wanted to print the temperature - so that was same spot basically weather zero and then if you look a bit you'll see [Music] temperature somewhere here I believe maybe it's a different spot I guess we can go into beam and then temperature so so that will do mean and then we can get temp okay let's see what happens when we now click Boston click city is Boston or class clouds 41 point two three degrees Fahrenheit awesome and one thing that one reason that I included the name because I could also do zero to two one five us and that also gets me Boston so that's why I like to have the name in case you were doing a zip code just to make sure you're given the right area we can also just real quick check to make sure it will like except like a foreign city like Madrid as I said there are this to another let's do how about London UK I think would be it might be Great Britain yeah same thing yeah so yeah it works for these foreign places too cool alright so now we want to format these values that we just took right here so this is name and I'm actually gonna abstract this to a another function call it format response that will take in the weather JSON and so how we're going to do this is name equals whether it's going to copy basically exactly what we had description equals all this and then finally temp equals this and then basically what we want to do is we have this label down here and we want to populate the text property of that label and we can do that actually after the fact after we've already defined this even though we didn't define any text in this label originally so if I went ahead and just for to begin with and I did label text equals name plus description plus temperature and I ran this and actually I guess I have to instead of doing this I'll return and I'll add spaces in between okay now if I in get whether I do label text property of the label equals format response of the weather JSON watch what happens Boston oops okay and just surround these with string and I'm going to show you a better way to do this in one second but it's complaining about the temperature because temperature is a integer or not an integer go to float value so Boston look at that Boston over class clouds forty one point two three and then that means degrees Fahrenheit so we're almost there what we'll do though is we're going to use I guess its percent notation when we format this so how we're gonna do this is I'm going to say and I guess we can also do a try surround this with a try except because what if we pass in a name that's not valid we want it to still return something good so we're a try we'll call this final string except and if we fail and they try except and some of these things that I'm introducing this video might be new to you don't try to get like to way down and like seeing something new we just try to understand how it ends up kind of working out so basically it's gonna try to find whatever try to find all these properties of this weather JSON you passed in but if that's invalid then it'll just they kind of fall back will be there was a problem retrieving that information and instead of doing it this way what I'm going to do here is use this percent notation and use City and this might be a new notation for you too but if I do percent as I'm saying place holder for a string slash n means new line conditions we're going to do another string and then new line and then temperature and I'm gonna have to copy this character in because this is a weird character I don't know how to type it normally but I'm gonna do the degree symbol on Fahrenheit and that is going to be another string value and then finally to pass in the string values I want there I do name description and temperature and then watch this so now we're going to return the final string watch what happens Boston look at that looks kind of cool I actually kind of like it right here in the center it's a little small but overall I kind of like the look of that let's make it a little bit bigger though I just really as I was going through this that before when I was changing the font like this that wasn't actually really doing much so I apologize for that but we're gonna actually fix how did it work the font so if I run this do you like Boston right it's pretty small I think if I did font equals 40 here I think it makes a little bit bigger you can be the judge of this I think it's a little bit bigger but I don't I think it's just because it's like trying to find the font name of 40 and it can add just doing some sort of like weird fallback it's a little bit of a different size because if I'd make this like a thousand doesn't change so there I did find the solution though and so what we can do is if you go to the top of your screen and do you import or actually sorry from tkinter import the font you can actually see all the fonts that you have access to by doing print TK font but families so if I look at all of this down the bottom you have a lot of fonts you can use let's say I wanted to use modern sounds good what we want to do to set our font is go into the label and you do use the same font keyword argument but now instead of just doing the size you do the name of the font you want to use so we're gonna use modern I have actually no idea what this looks like so we'll find out and then the size and I think this is in pixels run and Boston yeah so now you can see it's much bigger I don't really love this I'm gonna go with think courier I'll do like 18 yeah so these are all over fonts down here I'm going to delete this though Boston okay that looks pretty good to me and if I wanted to I could also change up the other spots that I did this so I could do it right here and I could do it right here no got to make it a little smaller here yeah I like this get weather cool and if you wanted to do how I initially set it up and like justify it in the same way the commands you'd have to pass in our anchor equals northwest justify alright we'll just see what that looks like anchor Northwest Boston get way there so now it's on the left but I want it aligned to the left so I'm you justify equals left and I'll do a slight border so it leaves a little bit of space now for build Boston cool that looks pretty good the final thing I wanted to do before we made the executable was if you recall with the initial app I showed there's this icon over here in the top right well just due to time and this videos already like an hour long I'm not going to go through this piece by piece like everything about this but I'll get you started so you could do this too if you wanted to it all starts with if I print out this JSON you can see kinda want to talk about all starts with when I type in a city like Boston the open weather map gives an icon for each weather condition so you see over here and I'll pull this upside my head might be in the way it gives the icon 0 to D and so that's all those icons those like keys are all stored on the open weather map site so on my github page and also right here there's this get weather icon script that I wrote so if you run this script it will query the open weather map site for all these different images and then save them locally in this dot image directory and then from that you can use this icon value based on the current JSON and kind of select the proper icon and the final code with the icons will be called weather app with icons on that same github link that you can find they pull it in on my demo page GUI and this will be in the description as well weather up with icons and then that script to get the icons is right here okay finally to end this we're going to be using pi installer to make this app and executable so like you could send it for example to someone that doesn't have Python installed and they could still run and see your app and so to do that what we're going to need to do is first download PI installer so I mean go to pine-sol read the docs io such an stabl to find any information on pinus lawyer but it boils down to something that's as easy as doing pip install PI installer and I already have it and then what you're gonna want to do is go to whatever directory that you have your code saved in and you're gonna want to let run the line PI installer uh the executable file installer might be slightly different for Mac not positive one file - this icon so the icon I have is I think Sun icon I'm a double check this is also in that so Sun icon dot ICO and you can download that from the github right here or you can use your own image so Sun icon dot ICO and then main dot py instead of that we want to do weather app dot py so take a second or two so I'm sure let this run so it's successfully completed and if you go to that same folder if you go into distribution you now have the app and if you open it up let's see will it run so it didn't seem to run and one reason it might not have run is that any image or something that you included in your included when you were building it you need to put it into this distribution folder basically it's gonna be looking for paths and if it can't find those paths like the images in the correct path so if you put sup in your current directory it's not gonna be able to find your current directory because that's back here so you could I guess also move this into your original directory as well but it's usually easier to just all package everything else and everything you need into this distribution directory but now that I'm running this I can do Boston and let's see go and yeah you might get like some sort of if you have a firewall or something it it might be like Oh what is this doing but it's safe it's safe to use a PI installer built app so I'm going to hit OK and there it goes it works it's pretty cool all right that's all I'm gonna do for this video thank you guys very much for watching if you have any questions leave them down in the comment section and I'll try to get back to as many as I can if you enjoyed this video make sure to throw it a thumbs up and also subscribe so you don't miss any of my future videos things again you guys for watching and [Music]

Channel: Keith Galli

Views: 818,349

Keywords: KGMIT, Keith Galli, Python, Python 3, Tkinter, Python Tkinter, Programming, Python GUI, GUI, PyQT5, PyQT, 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, how to program, build, code, coding, App, Weather App, Python Project, Project, Skills, Tkinter Library, tk, API

Id: D8-snVfekto

Length: 65min 13sec (3913 seconds)

Published: Fri Feb 01 2019