 Hey everybody, this is Brian. Welcome to the 81st Qt tutorial with C++ and GUI programming. We're going to make something a little different today. We're going to work with the graphics view. So let's just call this view one, put it in the usual location, and of course we're going to make a Q dialog. Next, next, finish, finish. Once that's done, we're just going to bring up our dialog here. It's been a while since we've actually worked with the dialog, and we're just going to drag and drop a graphics view onto our dialog here. Very simple layout. We just put the graphics view right in the center of the dialog. Just be sure to save all. All right, now let's just add some includes here. If you don't know what a graphics view is, let's actually compile and run this really, really quickly here. You remember from some of our previous tutorials, if you watch them, Qt has a model view architecture, meaning you have data, which is the model, and then you have a view, which displays it. Well, they've done something similar with graphics here. Here we have a graphics view, which is just a viewport, and inside this view we'll display a scene. So we have to create a scene, add items to it, and the view displays the scene for us. I know that sounds like really vague concepts at this point, but we're going to go over this really quickly. All right, so first thing we need, of course, is a Q Graphics scene. Let's see if we can find it in the list here. There we go. Q Graphics scene, and we're just going to call it scene. And then we're going to make what's called a Q Graphics ellipse item and a Q Graphics rect item. And if you're wondering where I got those names from, I didn't just pull them out of thin air. They're actually part of the Qt documentation. So go out to the help system and actually look up Q Graphics scene while I'm typing this out here to show you what this looks like. So this Q Graphics scene is a class that provides surface for managing a large number of 2D graphical objects. And just kind of while I'm typing this out, go through that really, really quick. We're going to add a Q Graphics rectangle item. We're just going to call this rectangle. Now what we're going to do here is very simple. We're going to create a scene, which is going to be displayable by our view. And in that scene, we're going to put an ellipse and a rectangle. Now you may be asking yourself, why don't you just draw it? I mean, that's what we've been doing. This tutorial is just simply draw a rectangle, draw an ellipse. Well, I'm going to show you some very powerful features, very simple features that you can use just starting off. Okay, let's go into our dialog here. And first thing we need to do is actually create the scene. So we'll say scene equal new. And we want Q Graphics scene right in there. Give it a parent that way, you know. And then we're going to say UI, Graphics View, set scene. And then we're going to give it our scene object. Now at this point, if we run this, it's going to display absolutely nothing because the scene is just a blank canvas. There's nothing on there. So let's actually make a few brushes and pens here. So it's a Q brush. And we're just going to call this red brush. Whoops, hit the wrong key combination there. Of course, now that I'm on the spot, I'm actually doing the tutorial I completely and totally spaced out of what the key combination was to copy that line. It's just been one of those weeks where no matter what I try, I cannot remember just basic things. We'll call this black pen. Whoops. Now the reason why we're creating brushes and pens is we're going to tell the scene we want to create these objects. And to do that, it's going to say, okay, what pen and what brush do you want to use? And let's actually do that right now. We're just going to say ellipse equal, I'm going to say scene, add ellipse. Now you notice how there's a bunch of them in here. Add ellipse, add item, add line, etc, etc. Well, Q has made these classes to help you like ellipses, lines, paths, polygons, pick maps, recs, rectangles, simple text. You can also add item. So you can actually make a Q graphics item. I think it's called or it's a Q graphic scene item and overwrite it yourself, which is what we're going to do in the next tutorial. But for this one, we're just going to keep things simple. All right now, it's probably gone off my screen here, but we've got to add some coordinates in here. So we're just going to say it 1010. And it's going to be 100 wide by 100 tall. We want the black pen. And we want the red brush. And what that does is it actually creates an object creates a Q graphics ellipse item and hands back the pointer to us. That's why we've got this right here. So let's go ahead and run this real quick. So you can see what we're talking about here. Maybe if this ever builds. There we go. So there in all our glory is our circle. We did absolutely no code to draw this. We just said add ellipse. Now you notice how it moves around because the view point is always centered to 00, which is probably about right there. Actually, because this is the only object that's actually on there, but you notice how we get these scroll bars free of charge. That's the view showing the scene. The scene is bigger than the views. So the view is going to show those scroll bars. And we're going to add another object here just to just to make this a little more understandable. We're going to get our rectangle object. We're going to say scene. We're going to add our rect. And this time we're going to say negative 100 negative 100. And we're just going to get 50 by 50. Give it the black pen. Sounds like a punishment. Almost give it the black pen. And give it the blue brush. Make it really sad here. Compile and run. And once this pops up, you'll have two objects. You'll have your rectangle and your circle. You notice how the circle is no longer the center because what it does is it takes the entire scene and says find the center and then center it within the viewport. And now you can really see those scroll bars popping in there. So that's the bare basics how to work with this. Now because these are objects, they have special properties. For example, you can say set flags or set flag in this case. And we want cue. Graphics item. And we're going to say item is movable. And if you have any guesses of what that's going to do to our rectangle, well, if you guessed, we can now move the rectangle. You are absolutely right. Now you notice how the canvas, or should say the scene, will move with it. Very simple. Very easy to do. So that in a nutshell is how to move an object. We can get a little more complex with this. Let's actually, let's get a little funky here. All right, let's find some push buttons. Let's say here, here, and let's do this. There. Now we got two push buttons on here. And we're going to say negative one and positive one. And we're just going to create a slot here and click. And we're going to say scene. Sorry, not scene UI. Graphics view. Rotate. We're going to rotate the scene. And we're going to give it a real number. And what you do is you rotate it based on the number you're giving it. So we're saying negative one. So we're going to rotate it counterclockwise. Let's jump back here. Positive one. And then let's give it positive one here. A pile and run. And tick tock, tick tock. This always seems to take forever whenever I'm recording for some reason. And you notice how now we can rotate that scene. I'm clicking a lot. And let's actually bump those numbers up a bit. Let's do like, let's do 10. Nice big number. That will be much more noticeable. There you go. Now we can rotate that. And we can still grab this and move it around. Now you notice how when it rotates, it rotates at zero zero on the scene. So we're not rotating individual objects. Even though we can do that, we're rotating the entire scene itself. So this is Brian. I hope you found this tutorial educational and entertaining. And thank you for watching.