Dynamically Resize Background Images - Python Tkinter GUI Tutorial #148

what's going on guys john elder here from coding.com and in this video i'm going to show you how to automatically resize your background image with kinter and python right guys like i said in this video we're going to look at resizing the background image automatically but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where i have dozens of courses with hundreds of videos that teach code use coupon code youtube1 to get 30. membership that's all my courses videos and books for one-time fee just 49 which is insanely cheap all right it is thanksgiving here in america if you're celebrating you know happy thanksgiving if you're not happy thursday so in this video we're going to look at automatically resizing your background image now in the last video i showed you how to create a background image right but if you change the size of your app drag the corner around like this the image didn't resize automatically so that's what we're gonna look at in this video so i've got the same exact code from our last video if you didn't see that check the comment section below for a link to the playlist i've just renamed the file image underscore bg underscore resize it used to be image underscore bg and like i said it's the same starter code that we looked at in the last video now in the last video i showed you two methods for adding a background image the place method that we've commented out and the canvas method in this video we're just going to focus on the canvas method because honestly that's probably the more important method the place method that we looked at in the last video has some pretty big drawbacks uh specifically anything you put on top of it can't be transparent so if you put a label on top of it the the background color of the label is going to show up over the image and that's probably not what you want so you're almost always going to use your canvas so i'm just going to show you how to resize your image with canvas now right away we need to make some changes and before we do that let's just take a quick look at this so let's go python underscore image underscore bg underscore resize and when we do we get this thing here now if i grab this you can see the image just stays the way the image is right so obviously this is not a great solution if you want to have your app to be able to be resized so okay so right off the bat we need to make a few changes in the last video we used photo image just to pull in our png now that's fine if you're going to use png but a lot of people are going to use jpegs or other types of image formats and so you're almost always going to want to use pill a pillow the python image library and we've used pill pillow in in the past and a lot of videos in the playlist so you can check back for that we need to resize the image and to resize an image with kinter you have to use pillow so we're going to come up here and we're going to go from pil that's capital p capital i capital l we want to import image tk and image now this is a capital i and a capital t this is not a capital k a lot of times i see people accidentally put a capital k here and you'll get an error if you do that likewise this is a capital i so this does not come with python or kinter we have to actually install this so head back over here and go pip install pillow now it's capital p-i-l-l-o-w now i know we just imported pil why aren't we pip installing pil pillow is an update to the pil it's a it's a fork of pill and it's uh more current but this should be good now i should mention right off the bat i see all the time students have trouble using pillow i don't know why some computers just have trouble with it if you do if you get an error while using pillow you're just going to have to kind of google it there's nothing i can really do to help you with that i'd say like 10 or 15 percent of all the students that watch videos that i have on pillow contact me and they're like i'm getting an error with pillow what's going on it's just your computer maybe it's your graphic card in your computer i'm not really sure but a lot of times if you get an error if you get an error with pillow you can google the error and sort of uh figure out how to fix it so uh unfortunately that's all i can really say about that so now a few videos back we looked at how to resize things using a event binding so we went root dot bind and then we passed in configure and when we do this anytime you change the size of your app it'll it'll pass in the dimensions the height and width into whatever function you call so let's call the resize resizer function right so we obviously don't have a resizer function yet so we can come up here and create one and just underneath this where i've commented out all the other stuff let's go define resizer and this is a function now we're passing an event into this so we need to put an e here and now this will allow us to get e dot with and e dot height of our app at any given moment right so that's really cool since we can get the height and width of the current app all we need to do now is resize our image to whatever that height and width is and i have videos in the playlist on resizing images with pillow so if you need a refresher on that you can go watch that video but i'm going to walk you through it here anyway so you don't necessarily need to do that so right now let's let's open our image right so up here we did it like this and that's fine you can keep it like that but since we're using pillow anyway let's sort of switch from regular photo image to image tk dot photo image right and that's this thing we ins installed right here image tk.photo image will allow you to use different types of images so you can use jpegs you can use you know pngs you can use anything you want so we're going to go ahead and do that okay so we don't we don't necessarily have to do that but we can so let's come down here now let's open our image so i'm going to create a new variable instead of bg i'm going to call this bg1 right so now what do we want to do we want to open our image so let's go image dot open and what do we want to open we want to open whatever this thing was so i'm just going to copy this bring it down here and let's just open that okay so now that it's open we want to resize it right so i'm going to call this resized underscore bg and that's just going to be vg1 dot resize and we can pass in the width and the height that we want but it's not just width and height it's going to be e dot with and e dot height and we're getting that from right here which ultimately we're getting from this thing right we're passing the event of the app being resized and when we do it passes a height and a width as an e dot width and an e dot height we looked at this two three videos ago if you didn't see that check the playlist uh there's a link in the comment section below you can re you can learn all about this configure thing so okay we're getting the the width and the height here but we also need to to do one more thing we need to pass an image dot anti alias that's a n t i a l i a s and this just makes sure that uh there's no little fuzzly bumpy things along the image as it resizes right it stays crisp basically so okay that's good so now we've got this thing resized now we need to just do something with it so just like up here where we just like defined this thing we need to kind of do that again so let's define our image again and so i'm going to call this new bg to sort of keep it separate in my mind from bg up here right so our new bg is going to be image tk dot photo image and what image is it going to be it's going to be this image that we just resized right so instead of passing file equals and then a path to the file we can just pass in the actual image itself just like that and that of course is this resize thing that we just resized to be whatever height and width our current app is right okay so that's good now we need to add it back to the canvas because remember when we first started this thing we set the image right here when we set the image in the canvas we said my canvas dot create image and then we gave it an anchor and did all the things set it at zero zero we need to redo that again so let's come down here and we could just sort of paste that in here now you would think this would work and if we save this and run it it's not gonna so let's give this a try here it is and right off the bat you notice our welcome text is gone we'll talk about that in a second now if we grab this it doesn't actually do anything and we don't even get an error why is that well the funny thing about kinter and images and functions there's kincher has a garbage collection thing that sort of sweeps up images and functions and it thinks it's garbage and it just gets rid of it so to make sure that doesn't happen we need to set all of these things up as global variables so let's go global and this is bg1 resized bg and for good measure let's go new underscore bg one thing i missed this image right here should be new bg instead of just bg so okay let's go ahead and save this run this guy pull it on over and now here we go it works just fine now you'll notice that there's no text here right normally it should say welcome and if we come back up here and look you'll see when we first defined this thing we created a canvas we stuck the image on there then we put the text on top of it right well now we're putting a new image up but we just we need to re-add the text right so kind of goofy we don't have to do this for the buttons but we do have to do the text because they're a little a little bit different we can save this and run it and now it says welcome there and we can resize this now you'll notice that the buttons and the text aren't resizing in proportion we're not going to look at that in this video i've showed you how to resize widgets in other videos so hopefully you can figure this out if a lot of people just can't figure it out i'll do a video on that too just let me know in the comments section but for now we just want to focus in this video on this background image and that looks pretty good and uh yeah pretty simple so just remember we're passing our configure thing into our resizer function the configure will pass a height and width that we can access by this e so e dot width and e dot height and here we're just resizing an image in the same exact normal way we resize any image with kinter right like i said i've got a video on that in the playlist check it out if you haven't seen it and it's i don't know video 75 somewhere around there i seem to think but you can look through the playlist and find that and we're just opening the image resizing it putting it back up on the screen adding that to the canvas and uh that's really all there is to it so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codaby.com where you can use coupon code usually one to get thirty dollars on memberships they pay just forty nine dollars to access all my courses over forty seven courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from codingbe.com and i'll see you in the next video

Channel: Codemy.com

Views: 27,024

Keywords: tkinter background image resize, resize background image tkinter, tkinter resize, tkinter resize image, tkinter resize widget with window, python tkinter resize background image, tkinter how to resize background image, python tkinter resizing background image, tkinter resize app, tkinter resize image app, tkinter how to resize image background, john elder, john elder tkinter, codemy, codemy.com, codemy tkinter, tkinter john elder, tkinter window size

Id: xiGQD2J47nA

Length: 12min 24sec (744 seconds)

Published: Thu Nov 26 2020