PyQt5 Tutorial - Images and QPixmap

Key Takeaways

hey guys and welcome back so in today's PI QT 5 tutorial what we're going to be doing is making an application that can change between images so you can click image 1 or image 2 and it will show a different image on the screen so this is gonna teach us how to work with images and is something called queue pics map I think and then obviously how you know you can change those images using the button so let's go ahead and get started so the first thing that we need to do here is actually build our UI so we're gonna do that from just the designer right here so I'm gonna double click that load up I'm gonna create a new main window like we've been doing all along and now I'm gonna show you how we can actually create a little area to set a photo so what I can do is actually drag a label in believe it or not I know it's kind of a weird thing to use but I'm gonna bring a label I'm gonna just drag this to whatever the size of the images are that I want it to be and then what I'm actually gonna do is scroll down here I'm actually I'll change the name first of all to just be phone Oakes's we're gonna store our photo and I'll scroll down to where it says pixmap now here is where I can actually select a photo that I want to show using this label I know it's kind of like a weird thing we're using a label to show a photo but you can use different widgets to actually show this pixel map okay so if I want to show a specific photo and I don't want to change it or maybe I want to start at something I can go ahead and click on this little down arrow and click Choose file so I gotta choose file I go to where would I have it in here so maybe cat and I click open you can see it shows this cat now notice however though that it doesn't show the entire cat like I move it around and kind of cutting stuff off and it's keeping it on the original scale of the image now that's fine in some cases but maybe we want it to actually scale to be the size of our window so to do that what I'm gonna do is actually just click scaled contents and when it does that it's gonna stretch it or shrink it or whatever it needs to do to make sure it fits in that kind of constraint box that we've created so I'm just gonna leave that like that for now and what I'm gonna do next is um we'll just add some buttons in that are going to allow us to you know change this image so let's go with two buttons so we need to push push buttons I need one there I need another here now we can make these bigger if we want to show up you know a little bit larger on the screen maybe we'll do that make it look a bit nicer and I'm actually gonna make this one say cat and I'll make this other one say dog so that this way we know which button is going to go to which image now obviously you know you could do more than one button but in our case we will just do two here let's try to get these pretty even and you know what that is good with me okay so now I'm just gonna change the name of these so that it makes sense so I'm gonna say this one is dog and this one is cat and that's about all we need to do and yeah okay so let's go ahead and save this I'm gonna save this as test UI I'm gonna do that in my PI qt5 folder so we'll save that there and now we're going to need to convert that to the Python file which we've already done a bunch of times but I will show you guys once more so we're gonna go we're gonna find where this UI file is it's important that wherever this is your images are here as well so whatever image you might want to show on the screen or is gonna be a part of the UI needs to be kind of beside where the Python file is so that it can actually access it and what we're gonna do now is just go into CMD go python and in this case we'll go are not Python sorry pi UIC 5 - X and then test dot UI - OH tutorial 5 like that okay so run that now we have this tutorial 5 file and I did tutorial 5 not tutorial 5 PI so let's run that again tutorial 5 dot pi and now let's open that up in subline text which is right here ok so awesome so we can see that this is showing up and this is actually where we are creating the photo so it says self now photo dot set pic smack pixmap and then it says QT GUI q pixmap cat jpg so we're actually gonna copy this line because that's what we're gonna use to change the photo when we click on those buttons so let's go ahead and set up those buttons now so we know that our buttons are called dog and are called cat so what I'm actually gonna do is just create some methods and I'll just say show underscore dog and this will be self I'll create another one this is defined show on this word cat if I could spell that correctly and self now inside here I'm just gonna copy what I had there for this photo and what you can actually do here is just literally put the name of the file that you want to show so in this case you can see I have cat dot jpg here and dog jpg here as well so as long as they're in the same folder then you can show them just by typing it in like this otherwise I think you have to define a path you guys can try this out but I think if I have them in a folder maybe you had a folder called IMG's so let's actually try this and we'll see if it works or I don't know if I can drag them in then what you would do is just do IMG's slash cat jpg and then it would figure out where that actual image is anyway so we're gonna have cat dog a pig and I guess it should be other way around so cats is down here and dog is here and then what we're gonna do is just link up our buttons so that they actually call those methods so to do that again this is what we already done a bunch of times we'll do self dot dog clicked itzhak connect show underscore dog need to make sure we have a self before that and then same thing for cat so self dot cat dot clicked dot connect self dot show underscore cat so let's go ahead and run this so right now you see we start with a cat and if I go ahead and click dog it actually changes over to the dog and I can click cat and swap back and forth now let's do one last test here because this video is actually quite short right now and let's drag these images into this IMG folder and see if we can get them to work by doing IMG's like this so let's go IMG's IMG's let's run that and let's go cats dog cats dog cat dog and there you go that shows you how to do that so a quick reminder make sure all your images are in the same main root folder as this otherwise you're gonna have to create the path so like this images slash and then whatever the name of the file is alright so that has been it for this tutorial I know it's a bit shorter but that's kind of all I need to show you guys on how to display an image if you enjoyed as always please hit that like button and subscribe to the channel for more pie qt5 tutorials