Build an Image Viewer App With Python and TKinter - Python Tkinter GUI Tutorial #9

what's going on guys my name is John elder from Cody me calm and in this video we're gonna create an image viewing app with kinter and Python all right in the last video we showed you how to use images in Kenter how to put images on the screen we did a very basic app where we just put one image on the screen had an exit button in this video we're gonna create this cool image viewer and it's just it's a pretty simple image viewer but you can see we got buttons we can scroll around through different pictures we can go forwards we can go back the button disables when we get towards the end and it's pretty cool but before we get started if you like this video I want to see more like it be sure to smash the like button below subscribe to the channel and be sure to check out coding me.com where i have dozens of courses with hundreds of videos that teach you to code use coupon code youtube to get $20 off membership that's all my courses videos and books for a one-time fee of just $27 which is insanely cheap ok so I've created a new file and this is basically just the code that we worked on in the last video that shows one image up on the screen the big change I made was I created this images directory inside of our GUI directory and the reason why I did that is because we're gonna have a lot of images in this program so when you have more than one image it's always a good idea to create a separate folder for those images and if we pull this up what you see here it is just the images and I've put a bunch of images just random pictures in there it looks like I've got five of them and we'll take a look at that in just a bit so I come up here and let's save this new file as what viewer dot pie sounds good and let's run Python viewer dot pi and see what we have we just have it looks like just that image looks like I forgot even to put the exit button on there so let's go ahead and do that real quick well we'll do that in just a minute so in the last video we just had one image right so it's pretty simple to work with one image and that's just this image right here now we want a whole bunch of images so I'm just gonna copy this and let's go two three four five and I'm going to name them image 1 2 3 4 5 just to make it easier and so the images are Aspen in Aspen 102 and then me1 me2 and me3 if I can type 3 all right so there's lots of different ways to sort of scroll through things but in Python a really easy way is just to use a list so that's what I thought we would do here and I'm just going to call this an image list and then set this equal to and this is just gonna be a basic Python list and let's go to my underscore image 1 and I'm just gonna copy this and paste it 2 3 4 5 times ok so then we need to change this to 2 3 4 and 5 and you're probably familiar with Python lists if we want to access an item in the list from now on we can just call image underscore list and then the number of the thing and remember lists start at 0 so this is the zeroeth item this is the first item second third fourth so if we want say for instance this one that would be 0 1 2 we would call image list 2 right so very easy way to sort of scroll through any sort of list of things that's why it's called a list and this will make it a lot easier for us to cycle through those as we click the buttons we'll just we'll just access the next item in the list that'll be pretty easy so ok so we've got this my label and it's my image to start out with my image one since we changed the name of this and instead of PAC we don't want to pack anymore since we're doing more than one thing let's create a grid and let's go row equals zero column equals zero so we want this to be the very first thing and we want this to go column span equals three and the reason why we're going to do that is because below the image we're gonna have three buttons a back button a quit button and a forward button and each of those buttons will be on its own column and we want the image to span all of those columns so okay that's pretty good now let's create our buttons as well we want to create our buttons right here now let's do the buttons down here see why in just a minute here so what do we need we need a back button and a forward button in an exit button so let's go a button underscore back and set that equal to a button we want it in root and we want the text to equal what two back arrows I think now we're going to have a command for this but we're gonna put that in just a minute and so let's go this and this so this let's call this middle one button exit and let's call exit program and for here we want the command to be what root dot quit we learn how to do this in a previous video and then for the last one we want buttons change the name of this to forward and we want this to have arrows going forward and like I said these are gonna have commands but we'll mess with those in a minute now let's put these on the screen let's go button back dot grid and then what row equals one column equals 0 because our images row 0 so below that is row 1 and so button underscore exit dot grid that will be Row 1 column equals 1 and then finally button underscore forward dot red we want this to be row equals 1 and column equals to look right let's save this and give it a quick run make sure we didn't mess anything up which we probably did cuz it's Friday here in Vegas okay so we got exit program I don't really like that capitalized will change that but right now nothing happens the exit button works so that's cool so let's change this real quick to exit oops hey maybe spell right exit program lowercase so okay we've got the framework here now we need to start kind of building in the functionality of the buttons so what we're going to do is we're going to create a couple of functions to handle the buttons of forward function and a back function and actually let's just come up here or do you think we want these right under the label grid let's say so we want these to go right at the top so let's go define forward if I could type and let's just return something and define back yeah and call this return something okay so we've got these things now let's head over to our button and let's add these commands mand equals now we're gonna need to pass something through these buttons because every time we click the button we need it to know that it's the next one so we're gonna start out with you know a specific one then every time we click the button we need to add one and then pass that through so let's go we need to do a lambda LEM BDA we've learned in the past anytime you want to pass something through a button command you have to do a lambda and this is the back button so let's call this back and we're gonna pass something or other we don't know what yet and for the forward button let's go command equals lam lambda and then we're gonna call forward and then something okay so what do we want to pass through these things well actually the first time we don't need to pass anything in the back so let's take out the lambda and let's just call back why is that because when we fire up the program for the first time it'll already be on the first image and we don't want to be able to click back so we don't need to pass anything in that first time so we can just leave that like this but the forward one we want to pass to and we'll see why too and not why one in just a minute but think it through like the first one the first image is image 1 right so we wanted the back button or we want the forward button to to go to the second image so we're just going to pass to right so up here in our function for forward let's start to build this out so what do we want to call this image image number doesn't really matter what we call it now we need to do things in this function that work outside of the function and we've done this in the past using global variables so we're gonna do that again this time so let's call it global all of our three things we basically have three things my label global button forward and global button back and we're gonna do the same thing in our back function so I'm just gonna copy these in right away right so you'll see exactly why we do this in just a second so I want to explain it now the first thing we want to do and this thing gets called is we want to take the image that's already there and get rid of it right so when we click forward the next image will show up but right now the last image is still there so they'll overlap and we don't want that we want the first image to disappear and to get rid of that we use this grid underscore forget it's just an internal function that the grid system can use to sort of get rid of something so our image is in my label so we're just gonna sort of delete that from the screen so let's save this and just see if that worked real quick so let's pull this up so here's the first image if we click the button boom it disappears so so far so good that seems to work now we need to tell the program what the new image should be so that's my underscore label and it's going to be we're just gonna define the whole thing all over again right so it's image equals now what image do we want well we need to reference something from our list of images or our image list list so that's this but now which one do we want well when we first click the button we're passing in the number 2 so this image number is number 2 but we don't want the next number to be the same we want it to be the next number so that's plus there go plus one so the image we want to show is the current image plus one which in this case is going to be it's gonna be minus one right yeah okay so we passed into you would think we want the second image but don't forget that lists start at zero so the second item in the list this thing is actually called the first item so since we passed two in here we need to subtract 1 to get the 1 1 if item which is the second is very confusing but think it through a new he'll it'll make sense right okay so that works now we need to strictly speaking that should put the next image on the screen so let's see if it does let's call this we click the button boom did not work why not oh because we defined the label we didn't actually put it up on the screen yet right so we can just come over here and copy this it's gonna it's gonna always be the same right so okay so let's save that that should work let's run it and see so I like to run things as we're coding so you catch these little things boom all right that works okay so far so good now you'll notice when I click the next button again it didn't go forward why not because we now need to update it it's got the old one on there the two right so we need to update that so let's do that right here let's call some space here button underscore forward and that that equals what a button just redefine the whole thing all over again root and we want the text to equal to two forward arrows and we want the command to equal lamb type lamb duh there we go lambda we want to call the forward function and we want it to be whatever this number was plus one why because it's the forward button and every time we click it we want the next button to the next image to be sort of ready to go and when you click it boom the next image will be ready to go in the button itself so okay that seems to work now we also need to do button underscore back because we need to update the back button as well so that's route the text is going to be two back arrows and the command is gonna be lambda MVA for some reason I can never remember how to spell lambda back and then here it's gonna be again the image number but we want the previous one right so instead of plus one its minus one okay um that should work now we need to actually put those guys on the screen so I'm gonna come down to see button back button forward just copy these cuz their position never changes right button back and button forward okay so let's save this and run see if that worked Oh boom boom boom boom up last one it disappeared so one thing we need to also do is we need to do something to see hey is that the last button is it the last image if so disable it right so you can't click to the sixth image because there isn't a six damage so we're gonna need to do that let's just put this right in here don't really matter let's go if and then image underscore number equals five image number is this image number that we're passing in the image number right if that's the case then we need our button underscore or forward to equal let's just define this as root and the text equals two forward things and the state equals two Seybold all right so let's save this and run it to see if that worked boom over so first image second image third image fourth image fifth image and sure enough it's been disabled and we can't click forward so that works so now we need to work on this button we haven't done anything for it yet but it looks like our forward button is completely done so let's come over here and I'm just gonna grab this grid forget cuz the same thing with the back button we're gonna want to delete whatever image is there before we put in the new one and I think we can just grab all the stuff from up here and paste we just need to make a few changes so my label that will stay the same right yes the button forward you stay the same and the button back will stay the same and that is because let's see let's look at our to find forward what we're doing here with the back button we're taking whatever image number and subtracting one so when this starts it's already subtracted one now if we click it again we need to just subtract another one so all that stays the same I think Yeah right so then we need to just put those things up on the screen like we've done before so I can copy this exact same stuff okay let's save this and run it see if that worked we went through that fast but bad this is not disabled we need to disable that off the bat so we'll do that in a second so forward back hope that doesn't work forward back okay so what has gone wrong here you never know on back take zero positional arguments but one was given hmm oh we forgot to put our image number in there okay past that that variable so let's run this again so forward back forward forward back forward forward back back back okay seems to work but up when we do that it starts at the end so we need to right off the bat figure out how to disable that so let's come down here to the very beginning when we very first created that back button let's just go state equals disabled save this run it again so now right off the bat it's disabled so it it won't go any further you and now this one's disabled now if we come back here you're back back back oh if we scroll and go back it's still enabled so what we need to do is the same thing we did up here we just need to do it down here so let's pull it right in here and go if image underscore number equals and remember double equal to sign is what you use for a conditional statement and so if that number is one which is the first one then our button back equals just to find this thing again route the text equals two back things and the state equals disabled okay so save this give it one more run this should do it we hope so it's disabled here if we go all where'd you go come back we go all the way to the and that one's disabled if we go back that was now disabled forward back okay that seems to be working and that's it so we went through that very very quickly you might have to go back and watch the video again pause it a bunch of times but the the main things to sort of keep in mind is we created all of our images into a Python list and if you're familiar with lists it's just a normal Python list there's nothing tkinter about this and every time we click a button we're just going to reference we're gonna create a little counter and just reference the next item in that list show it up on the screen forget the one that was there previous we haven't looked at this before this is new everything else we've done in this video is pretty much stuff we've already learned except for that little thing right there and then every time we click that button we just need to update the buttons which is why we created these Global's so that these updated buttons will work outside of the function and that's it pretty simple pretty straightforward and granted this is a pretty cheesy little app but I think it it's a nice little exercise and yeah pretty fun so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel and check out Kodi me comm or you can use coupon code youtube to get $22 off membership so you pay just $27 to access all my courses hundreds of videos and all the PDF versions of my Amazon number one best-selling coding books join over 50,000 students learning to code just like you my name is John elder from Kota me calm and we'll see in the next video

Channel: Codemy.com

Views: 76,003

Keywords: python, tkinter, gui, python tkinter, tkinter python, python gui, tkinter gui, gui python, graphical user interfaces python, tkinter grid system, grid system tkinter, python grid system, build graphical user interfaces with python, how to build graphical user interfaces with python, how to python tkinter, tkinter images, image tkinter, image viewer app, image viewer app python

Id: zg4c92pNFeo

Length: 22min 58sec (1378 seconds)

Published: Fri Feb 01 2019