 Hey everybody, this is Brian. Welcome to the 144th Qt tutorial with C++ and GUI programming. We're going to wrap up our image tutorials. We're going to play around with the aspect ratio and the fill mode as it is. And we're going to introduce a few extra little things that we haven't seen before. So we're just going to go here. We're going to go to New Project, Qt Quick Application. Go away kitty. Gosh. I'm telling you as soon as I start writing code, this thing's just all over me. Daddy's busy. Go away. Alright, so we have our typical program here and we're going to grab our images. And we're just Qt Quick, our quick blah. New folder. Images. We're just going to import these. Close that. Resources. Damn you mouse. Why have you betrayed me? Add prefix files. Nothing new here. I mean we've done this before. Existing files. And we'll go to Qt Quick 6. And I know I said no more dancing banana, but you know what? It's just a really cool image and I like it. So we're going to deal with it. Alright, so now we're going to import some controls here. We're going to say import. I'm still pretty stuffy. The allergies are kind of kicking my butt, but I really wanted to do a tutorial. And we're just going to say ID root width. We'll say 600. Well, let's say 650. Why not? Height. Alright, so what we're going to do is we're going to introduce something new here called a column. Now what the column does is if you have specific things, it will arrange them in a column. For example, if we say image, we'll say ID. We'll say one. Source. And we're just going to say files. Images. And let's do Qt logo.png. We're going to throw just a couple images in here. Obviously we have to change the ID here. Let's save and run this. And you can see what a column does. If you have multiple items, it will automatically position them in a column. And in that, we're going to add a row. So we're actually going to wipe those out because we don't need them. But we're going to say row. And the row, you guessed it, just adds things in a row. And we'll call this tools. Now in here, we're going to add some buttons. So we're going to say button. We'll say text. And on clicked. We're just kind of fleshing out just a little bit here. Let's call this reset. Reset. There we go. Kind of space that out. Alright, so we're going to have basically a row of buttons. And outside of that row of buttons, let me actually run this so you can see what's going to do here. Save all. We're going to have buttons across the top here. And then underneath here, we're going to have a rectangle with an image in it. We're going to call it a viewport. So we've got our buttons. Here's our row. So we're in our column here. So we're going to say rectangle. And we're going to call this ID viewport with equal root.heith. There we go. And in this, we want to put animated image because why not? And ID. We're going to call this display. Let's say anchors center in parent. Let me actually get some space here so we can see what I'm typing. And of course, we're going to add the source. And we'll add our dancing banana. Eventually, I will have to retire the dancing banana. Let's run this, see what it looks like. And sure enough, so we'll have our dancing banana here. We're going to have some buttons across the top. And when we click each button, it's going to perform a various task on this image. All right, so let's go up here. And we're going to say, I did not want that. And the recent button is basically going to take it back to, well, you guessed it, exactly the way it should be. It's going to be a little bit of typing on my part here. Source size, that's the actual size of the file itself, meaning, or not the file itself, the image in the file. So without any modifications, it's the original. And we're going to say display. And we're just going to basically undo any sort of modifications that we've done here, which we haven't done yet. So it's going to look a little confusing for a second. Center in viewport. Clipping, if you've ever played a video game where like, you know, like a first person shooter where you're running through a hallway or something and you can see somebody, I almost typed sauce, gosh, I'm hungry. Anyways, somebody's running through a hallway and you see like their guns sticking through the door or their shoulder or something. That's called clipping. Clipping's a bad thing in video games, but we can actually work with it here. Lost track, I wouldn't see, I am hungry. All right, so when we click reset, nothing happens because it's way we want it to be, right? We're going to take this. Now we're going to make a couple new buttons here. So we're going to say grab this guy. Let's call this one stretch. And we're going to kind of just get rid of some of this stuff here because we won't need it. Say 25 by 200. Let me just grab this because the majority of these are just going to need this. Oh, kitty, I know. Oh, I hope you guys can hear just how pathetic that meow sounds. We're going to do a preserve aspect fit. I'm just going to, through the magic of copy and paste, because I'm not going to type all that out. Preserve aspect crop. I mean, this cat, I mean, the way he winds, you think that I haven't fed him in like 100,000 years? I mean, we're going to give it like some ridiculously small aspect there. So we have preserve aspect fit, preserve aspect crop. And because we're cropping this, we want to actually clip it. And this will be, if you have no idea what clipping is, like if you're not a gamer, then you'll, you'll have an aha moment as soon as you see this. Kitty. Kitty go away. Kitty's actually swatting my hand as I'm trying to type. He's not being very helpful. All right, so we've got our preserve aspect crop there. And we're going to just grab this button up here. And we'll call this one tile. And we're going to say viewport dot width. We're going to make this thing as big as our little viewport rectangle. Close that so we can get some more screen real estate while I'm typing here. And then we've got what is it tile vertically and tile horizontally. So we can do this here, do tile horizontally first. And now we'll do tile vertically. So fill mode really just determines how it fills. What happens in the background here when we run this, hopefully I don't have any errors. That was a lot of typing. Not going to lie, I'm getting sick of typing. All right, what happens is cute will actually draw a rectangle and then draw the image inside of it. So when we stretch this, you can see how we have just changed the aspect ratio of that. Now stretches kind of the default. Reset that. If we go to aspect, preserve aspect fit, you see how it doesn't do much. It's like a minute change. It'll be much more apparent if we switch the graphic or if we actually just change those. So let's preserve aspect crop. That's the one with the clipping. That's what clipping does. Cuts it off. Tile. Wow, wouldn't that be an awesome like background wallpaper for your desktop? Now you notice how when you resize this, it doesn't actually do it because we haven't made that a child of etc. etc. So you'd have to re-click tile. And you can tile horizontally and you can tile vertically. Reset that. And we're going to actually swap out this image here because I know some of you out there are probably sick of the dancing banana. And then some of these effects may be a little more apparent. We have our cute logo. We're going to just move that out here. Stretch that. You can see what it does. Stretch is actually the default. So if you load an image and you set the width and height and it looks kind of messed up like that, you need to actually do the preserve aspect fit. You see how I've changed the size and it's maintained the aspect ratio. Now you notice, I don't know if the video is picking up, this is choppiness around the edges. Whenever you're working with graphics, you never really want to scale up. I mean, you don't want to make them bigger. You want to make them smaller. A picture is basically just a bunch of bits and a bunch of bites, right? So when you make it bigger, the computer has to guess what's in there. And as you can see by this kind of choppiness, it doesn't always guess correctly and it looks kind of ragged. Now, there's some other tricks you can do like, you know, anti-lazing and things like that, which will make it look a little better. But rule of thumb, never go bigger, always go smaller. For example, if we go to reset, you see how it looks much, much better. Preserve aspect crop, you can see it's doing the clipping. Tile, tile horizontal, tile vertical. So, pretty neat, pretty fun to play with. We've kind of introduced you to the column, the row, the button class and the, what is it called? The fill mode of the image. And I think this is probably going to wrap up our image tutorials here. We may touch on them briefly again in the future, but I kind of want to move on to other, more interesting things. Well, that's it for this tutorial, a short, quick, easy one. You can download the source for this and all the other ones under tutorials and cute. And they will be way in the back. And before I forget, because my friend's always harping on me to advertise, if you're looking for other programmers, like if you have questions and things like that, join the Voidrealms Facebook group. There's like 450 plus of us out in there. And we just help each other out. All different languages down from assembly to Java and C++ and Qt and ASP and .NET and pretty much every language and admittedly some languages I've never even heard of. So, that's it. Thanks for watching.