 Hey everybody, this is Brian, and welcome to the 141st Qt Tutorial with C++ and GUI programming. I'm a little bit stuffy, so bear with my voice. This is going to be a little bit of a longer tutorial compared to what we've been doing over the last couple, so bear with me. I'm going to be reading off notes because on these long tutorials I just don't feel like trying to figure it out on the fly. We're going to be going over a little bit of advanced anchoring, and we're going to cover a newer one called Mouse Area, which actually doesn't deal with anchoring, but you'll see what it does. If you've run the demo in Qt, you've actually seen it. So we're going to go New Project, Qt Application. Did I do that right? New Project, Qt Quick Application. There we go. DERP. Anyways, we'll call this Qt3. I've started running, like jogging kind of thing, and I've done it before. Let's just say I'm not a really good runner. I don't know why. So I did this thing called Couch to 5K. You can just kind of listen to me while I'm typing here. And I've done that before my feet really started hurting, so I had to stop. So I'm starting over again, and I'm going a little faster this time. It's going better, but they talk about this runner's high. I don't get a runner's high. I get what I call a runner's headache, where I just get this excruciating headache after I finish running. I don't know what the deal is, but it kind of bothers me, because I really like to get this runner's high because running sucks, right? So what we're doing is we're just making a rectangle. We're naming it Rec Center, and we're going to throw this, you guessed it, dead center. Whoops. Width equal, we're going to say parent. Width divided by 2. So yeah, if anybody out there has any real experience with running, like Facebook me or whatever, and tell me, because, man, I cannot get that runner's high. I just get the runner's migraine, and it wipes me out, because you can tell my voice is kind of raspy and everything. But yeah, I come home, I take Motrin, and then I'm pretty much spent for the day. I'm actually kind of surprised I'm even doing a tutorial. So center in, parent. So right, this is nothing new. We've done this before. Let's actually run this, make sure it actually compiles. We've seen this example three times now. What we're going to do, because I actually did get a question, is they want to know how to position specifically around this object. And then will it dynamically move around? So we're going to put boxes all the way around this sucker, and then we're going to see when we resize this what happens. So the first thing we're going to do is we're going to make a rectangle, maybe. My mouse wants to cooperate, there we go. Width 50, height 50, and color, we'll say lime green. In case you're wondering what lime green is, you can just mouse over and it should pop up and say, da-da, that's lime green. Now, we want to look at this a little objectively here. We're going to have a bunch of rectangles. And let's just make the first one just so we can see what it looks like here. And we're going to call this, or actually call it, we're going to anchors.right equal rectcenter.left. And then we're going to say anchors. Whoops, I have a tendency to hit that button. Bottom equal rectcenter.top. So what we're doing here is we're actually saying this rectangle, the right side of the rectangle is going to be the left side of the big rectangle, and the bottom is going to be the top. And when we run this, it's fairly obvious what happens here. Sure enough, there is the right side of our little one, is actually the left side. So we're going to just butt it up here and the bottom will be the top. We're just going to put these all the way around. Now, here's an issue, and it's not really an issue. It's more of like a design aesthetic, if you will. We're going to make a bunch of these. And as you can see, this takes up a fairly sizable chunk of our screen real estate here. So we want to kind of split this off into another file. And we're going to do that just by, in case that wasn't obvious, you right click, you go add new, you go to cute, QML file, quick to choose, and we're going to call this green box. And see how it has this item in here, and it imports the Q-quick too. So we're going to just overwrite that. And we want to pretty much just get rid of this anchors here, because we just want this as a template, and we're going to be able to move the sucker around, right? So we've got a width of height and the color. And you can put, you know, other properties like borders and margins and whatever. Now, we're going to cover this a little bit more in future tutorials. This one's really about anchoring, but you can actually make your own QML files and make as many as you want and put export properties and variables and all these other cool things, which we will cover. So just bear with me on that. Just for this tutorial, know that you can and we are moving it off to a separate file. So now, let's just take this through the magic of copy and paste here. We can say green box, paste that in there. And we want to give this some sort of property. I mean, we don't really need to, but just so we know what the heck is going on here. Let's call this ID and let's call this rec top left. See, nice, simple, easy. Let's run this. Does the exact same thing, but now we don't have all the colors and height and width and blah, blah, blah. We can focus on what's important for this tutorial, which is the ID and the anchoring positions that we want to put them in. So through the vast magic of copy and paste, we're just going to make another one here. Notice how this underscores in red because we have a duplicate item, so we've got to give it a new ID here. So this one's going to be called rec left. I know creative name, right? And we're going to say the right is, let's see here, reccenter.left. And then this is going to be a newer one for us. We want to vertically center this bad boy in reccenter, vertical center. And when we run that, you can see now it vertically centers it. We've got our left. Let me move over so you can see the code. You know, the right is the left, so they're budding up against each other and then we're vertically centering this thing. And then I'm just going to crank the rest of these out here. So we're going to call this one rec left bottom. And we're going to say the top. Yeah, you can tell that I'm not like really with it. Man, that headache is just brutal. Somebody said that I'm just doing it too much, too far. You can see there it is right there. I don't know. I've just always had this. I don't get it when I lift weights. That's the weird thing. So where did we go here? We did rec left bottom. Now we're going to do rec top center. Now this one, similar to how we did with the vertical, we're going to say horizontal center equal rec center, horizontal center. In case you're wondering, the horizontal and vertical center, if you do both of them, it's the same thing as saying center in because it's just going to move it dead center. So now we want the bottom here of our rectangle. Let's run this, make sure, sure enough, it's right there. And I try to fly through these without taking three hours. I've been criticized that my tutorials are too long, but I've also been criticized that my tutorials are too short. It's kind of weird, just I guess it's personal preference for people. Somebody said, see Bucky's examples. And you know, I like Bucky's tutorials. I've actually watched quite a few of them. His Android tutorials are amazing, but he does these very short tutorials, and I just, I don't have time to do that because I think he actually edits his videos and I just have zero patience for video editing. I like to just do it and get it over with, and then go play video games. Sorry, admission there on my part. I really don't care. I just want to go play video games. So our top right, let's make sure we position that correctly here. And another person said, see Samuel's tutorials, which Samuel, what did I watch his tutorial on? I think it was for assembly language. But I mean, they're like three hours long. I was like, good gosh, they're not really three hours, but still I'm just like, wow, how do you sit there for that long and record? I think the longest I did was like an hour and 15, and I was just like, never again, never ever again. All right, so vertical center, Rec center, vertical center, and we're just kind of building this and as we go, we're verifying the positions here. And you can see it's actually, it's pretty simple. Once you know your object, you can say you want your anchor, you're pretty much doing your X and Y coordinates, and we're just going to finish this up here. So where are we at? Rec right? We're going to do Rec bottom. So somebody once asked me, well, if running gives you a headache, why do you do it? Well, I do it because, well, I really like pizza and beer. That's just the dead truth. I mean, sorry. It's just true. I like pizza and beer. I like rum and coke. I like cookies. I like all the things that are like really bad for you. So I don't want to weigh 300 pounds. So I can't just lift weights. I got to do some cardio on top of it. And I'm also very competitive. So that doesn't help either. Because when you tell me I cannot do something, suddenly I have to learn how to do it. Let's see. There's that one on the bottom, which is actually how I ironically got into computers and hacking and coding and all that. And just somebody said, oh, you can't do that. And I said, watch me. We'll call this Rec bottom. Right? Oops. And I will get off my lazy behind and actually post these out on my Facebook, or Facebook. My website, voidromes.com, the thing that I have worked my rear end off on. All right. So, and then we're going to put this on bottom. That's good. So now you can see we've got these nice and positioned here, right? And let's actually make one more. Why not? Call this Rec middle. And we're just going to do the old-fashioned center in Rec center. Ta-da. So now the, now that we've gone through positioning, and it's actually, you know, you're probably going, oh my God, this is so boring, because positioning is actually kind of boring. It's pretty simple. It's pretty easy. But once you get the concept, sometimes you just need to see it to understand how to move things around. And you can do offsets and margins and things of that nature. So what we're going to test now is anchoring. Because positioning and anchoring are two different things. Set Y means it'll stay at X and Y. But an anchor means it's going to be anchored to something. Think of an anchor like a boat anchor. Okay, it's going to hold it in place. You're anchoring it to an object here. So we're going to play around with what's called a mouse area. We're going to just scroll right up to the top here. And we're going to say mouse area. And we're going to say anchors. That's why it's in this tutorial. See? Ha-ha. And we're going to fill the parent. And what that means is it's going to take the entire window. It doesn't matter where we go. And we're going to actually use an event on clicked. So when we click, we're going to do something. And we're going to say reccenter.with equal parent .with divided by 4. Paste that in there. Let's run this. Let's run this. This is why I use anchors instead of positioning. You see how we've got this nice thing. And when we click here, which I will do in a second, you'll see these will all shrink. And we're going to click in 3, 2. Ta-da. See how they all shrink. That's why you would anchor. Now, if we start positioning and rotating and all that things, these anchors will stay and they'll do what they need to do. But that is why you would use an anchor because they didn't just stay where they were. They actually follow the object. So that in a nutshell, ladies and gentlemen, is what I would consider mediocre to advanced anchoring. I think this is probably the last tutorial we're going to do on anchoring in case this wasn't quite clear. But we're just going to save and run this again just so you can see what it does. We have anchored to various positions around this object. And when we click, the on click will be called. And we're just going to resize that center wreck, the dark green one. Ta-da. Well, I hope you found this educational and entertaining. And as always, feel free to visit my website voidrums.com. I am going to actually upload these right now. I mean, as soon as I finish recording and they're going to be under the cute section way, way, way at the end here. And if you're looking for other people or if you have questions, be sure to join the Voidrums Facebook group. This group is just exploding. I think just the other day we had 400, now we have 450 programmers in there. And they talk about everything from cascading style sheets to x86 assembly language on a RM CPU. So I mean, it gets very technical, very in-depth. Pretty much any technical topic. I'm good with you guys chatting about. And sometimes we talk about gaming and life and stuff like that. Hope you found this educational and entertaining. And I will see you in the next one.