 Everybody is Brian welcome to the 149th cute tutorial with QML and C++ program We're going to cover there how to integrate the two a little bit today Special note. I did actually put a video about cute creator freezing This is part of the reason why I haven't really done a tutorial in a while So I have to open and close the program like a special way And if I don't all of cute creator locks up so you may hear like some harsh language here shortly if I screw up But we'll see if we can get through it All right, so we're just gonna go new project We'll say cute quick application here And we'll call this mouse monitor Why not? And make sure I got the right kids selected works been calling me all morning, too So I may have to pause this video deal with work stuff. I Don't know why work won't just leave you alone on the weekend. You know what I mean? Just seems like you know, I just want to be left alone. Just want to write code and play video games so We're gonna get rid of that main form here and my throat's like a little scratchy I don't know if it actually comes out in the video, but my my allergies are like really fired up So we're just gonna do a standard width and height. I'm gonna call this ID Root all right and We're gonna make a couple properties here and the premise of this program. Let me run this is That we're gonna have a drawable area where we can kind of paint and don't get excited This isn't gonna be like the next Photoshop or anything But we're gonna be able to paint we're gonna have a couple buttons on the top so we can like Clear the drawing and then save the drawing and when I say save I Should premise We're looking at this from the perspective of you're in like a programming shop And you're doing the front-end code and somebody else is going to do the back-end code But you have to give them the binding so that whatever you do in QML on this window They can actually pick up on the C++ side Now I should know if I click this little orange button here Qt creator itself is gonna lock up and then I'll have to close Qt creator and reopen it So I have to hit this little but red button down here Royal pain in the butt drives me crazy. Like I said, you may hear some harsh language if I accidentally do it So we're just going to make a property This is going to be a real number. We're gonna call this last X zero And you know, I don't even know if we really need these are now I'll have to look at my code a little better I don't think I do Hmm. Yeah, I'm gonna not do that Sorry, I was like lost in train of thought there. Well, I was gonna make it a global property in my example I'm looking at my nose going on and I don't think I used it as a global property. So we're not gonna do it So tools we're just gonna make a row here and in there. We're gonna make a huh need to add Import so between allergies and work. I'm like really scatterbrained. I apologize if it's kind of not coming through real good To quick controls 1.4 because I don't have to installed And we're gonna make a button call this ID clear And I'm in a bit of a rush because I want to take my daughter to lunch, too So I've got like allergies work is calling and I'm on a kind of a deadline here because You know, I want to hang out with my kid. We'll call this button save If I could spell save geez All right, so There's our row in all its glory. Let's run this make sure it looks the way it's supposed to so we've got clear and save Now we are going to introduce something new here. It's called a canvas Canvas is an area that lets you draw Hence it's called a canvas Call ID. Let's call this a canvas with a lowercase c that way doesn't get confused on me and we're gonna say anchors Dot top is that top? Yeah top equal tools dot Bottom so really all we're doing is we're saying the top of the canvas is gonna butt right underneath this row pretty much To how our code is structured, right? And then we're gonna just say the width and the height and now we want to Want to do an on paint and we're gonna Do cool stuff? Let me scroll up a little bit here And in here, we're gonna make a mouse area in the mouse area itself is where well you guessed it We're gonna track the mouse. We're gonna say ID Call this area. We don't really have to give it a name Hickers Phil parent so yeah, my daughter gets allergies like crazy bad and it's I Don't know usually I don't get them as bad, but today they just seem to really be messing with me but you know the windows open and Everybody's like mowing their yard because it's like the first real nice day. So Did I not do that? No, I didn't do that. All right. This is where I got confused in my notes here Let me back up here And that's the sound of my girlfriend slam in the front door. We're gonna say property It Last X Here at all this garbage And we want that to be a zero by default. We'll say last Y So what last X and last Y does is it tracks the position of the mouse cursor? So when we go in here and we go on pressed We want to actually set that position. So we're gonna say canvas Last X equal and then here. We're gonna say mouse X canvas Last Y equal mouse Y just bump the microphone there All right, so that's the mouse area and all the mouse here is really doing right there is just tracking it So and then we want to say on position changed Meaning when the mouse position actually changes over the canvas, whether the buttons pushed or not I don't really care at this point We're gonna say canvas request paint Now what request paint does this is a little confusing, but we want to explain it super quick Let's save and run this When we move the mouse over it's actually painting right now. It's calling that paint function Or I should say it's calling request paint So what request paint does is it determines if any of this canvas area is quote-unquote dirty meaning something's changed And if it is then it'll call this paint function. Whoops the paint function If nothing's changed we're doing this and it's saying is it dirty? No, is it dirty? No, is it dirty? No, because we haven't done anything, right? So once we actually do some stuff, we'll see it start painting. I Almost clicked that orange button that would have made me very angry. It would have been like X-Men, you know Hulk smash kind of stuff All right, so I Had to clear my throat for a second there Now what we want to do here is we want to say there CTX which is short for context name is not really important, but we're gonna do a get context and Here we're gonna say 2d. So what we're doing is we're getting the 2d canvas It's actually very important that you do that because without it you won't be able to do anything with this canvas So as you might have guessed I believe there's also a 3d canvas, but we're gonna mess with the 2d canvas So we're gonna say CTX and notice how IntelliSense is no longer our friend So you gotta kind of you know get creative a little bit and do a little guesswork and sometimes just read the notes So we're gonna say line width and we're gonna say CTX dot stroke style Which I kind of giggled when I saw that stroke style, I imagine you're having a stroke and you're trying to do it in style Maybe I just have like a dark sense of humor sometimes, but All right, so we're gonna make the line width to we're gonna make the color of the stroke think of this as a canvas So you're doing a brush stroke. Okay? It's gonna be color red You can do all sorts of colors you can do rainbows you can do patterns grating its fills whatever right and then we're gonna say CTX dot and then we're gonna begin path whoops and then We're gonna say CTX dot stroke and Then in between they begin path and the stroke the stroke is actually like imagine you have a paint brush And you walk up to a canvas and you actually commit to the stroke meaning you put the brush to the canvas and you roll the paint down So you're stroking it. That's the actual painting part, right? so What we want to do now is we want to CTX dot move to and We want to do last X help if I did this Last X Why did that little guy pop up? I'm having nothing but problems today Last why so what we're doing is we're saying move to the last known position Which we're setting in the mouse area here if you don't it's gonna start at the zero zero because it's not set And you're gonna have this weird line So you can play with that kind of after you get the code up and running and then we're gonna move to Whoops we did the move to I'm sorry We're gonna go line to Last X last Y. Let's save run this and see what happens And you see invalid property line to we screwed something up It's probably something very simple. Yeah run that again Alright And notice how it's not doing anything. What did we do wrong here? Let me look at my code here. So we got begin path line to arms. I've moved to oh Yeah, we didn't set the Stupid sometimes All right, so what we got to do like I said my allergies are kicking my butt We need to set the last X the last Y mouse X last Y area dot mouse Y Now let's run this see what happens here Now we have this beautiful little line and we can draw like I said This is amazingly not the next Photoshop now if we didn't put that little move to in there right here And we just start drawing here It would actually draw a line. It would go bam, and there just be a straight line between the two I wanted it so you could just kind of you know freestyle and do whatever here. I know it's like a masterpiece I should just print that out and sell it for like 30 million dollars All right, so what we're gonna do now is We are going to build a C++ class and we're going to incorporate it into this interface so that we can tell that When the mouse moves we can clear and save And there's a couple little gotchas we got to throw in there The first being how do you get how do you get how do you get QML to know the class even exists in the first place? The second being how do you communicate between QML in that class? So there's a couple of little gotchas and we're gonna go over them right now. What we're gonna do is we're gonna say My mouse is acting kind of crazy here. We're gonna make a new C++ class. I want this to inherit Q object And we're gonna call this mouse memory So this is just a normal Q class we've seen these a million times Now what we need to do a little bit differently here is We need to add some special code and We need to let QML know that it's actually available. So let's go in here We're gonna have to include a few things here. We're gonna Qo QML engine and Include QML context now what's going on in here? We haven't really talked a whole lot about this But this is the Q QML application engine and then the engine's loading and when it's a little string literal We're loading this QML file. That's how cute loads it Well, what we can do is we can actually grab this bad boy and say hey While you've got it loaded add some properties in here. So what we want to do here is Sorry, I gotta clear my throat. It's like getting kind of scratchy We want to do a Q scope pointer Q scoped pointer. Sorry I also got to include mouse memory. That would probably be helpful See the problem with allergies is like a double-edged sword because if you take the allergy medicine You're just like hit for the rest of the day. I mean you just you might as well just lay in bed But if you don't you feel like laying in bed the rest of the day So it's kind of a double-edged sword. So Q scope pointer in case you kind of slept through some of my tutorials about that What this does is it actually you can see how it's using the new keyword. So we're making a pointer in memory I should say we're making an object out on the heap and what this does is it wraps that pointer inside of a class So when this class goes out of scope It's actually gonna delete that pointer. So in the deconstructor, it's literally saying, you know pointer delete or actually delete pointer So we have got this new variable called mouse and what we're going to do is you're gonna say engine and we're going to Root context and this is probably not the most elegant way of doing this But it works. I tried a couple different ways and they've actually changed things around quite a bit Whoops, I don't want context object. I want context property They've changed things around a bit. So some of the examples you find out on the internet just don't work So at the time of this recording, this is what works for me so What we're doing now is we have a scope pointer We have our engine which was part of the default program and then we're saying engine root context set context property Meaning we're setting a property and pointing that property to a specific object We're gonna call that object mouse and it's going to point to the mouse data now because this is a scope pointer mouse data points to the actual mouse memory Seems confusing and you can actually get away with not using the scope pointer You could just say you know mouse equal new mouse memory and then just do mouse instead of mouse data But you're gonna have that dangling pointer out there in memory Not really a big deal because when you close the application it's gonna wipe out most or if not all the memory for you at least it should depending on the operating system but We don't know what operating system this is gonna run on So we want to do things securely and we want to use the Q scope pointer so that when the When the variable goes out of scope and it will when the application exec returns meaning a program stops It'll delete that memory. Oh Man, what a pain memory such a such a pain in the butt. All right, so let's run this make sure we don't have any little boo-boos All right, so our program runs We didn't get any error messages down here and Nothing's actually working yet. So what we need to do is we need to go in here and work in our class And we're gonna say Q object. Let's do Include Q debug and we're gonna include Q point. All right now What we want to do is just do a simple test Meaning we want to call a C++ function from QML. We just want to get that very basic thing working just to see how it works So we're gonna do a Q invocable Void test and if you're wondering what Q invocable is Q invocable is a macro and inside that macro it adds all the code so that when we call Void test It knows what to do and how to communicate. It's very similar to like a signal and slot under the hood At least from a conceptual idea Technically, it's very very different, but just think of it as like a signal slot And then in here we're gonna go Q debug and we're gonna say Hello from C++ Now in our actual QML file here Let me flip to my notes My notes. There we go We want to actually do something just so that we know this is working, right? So let's kind of isolate our code here, so we know what's doing what and we're going to just say mouse.test We're gonna call that function. Now, how did I get mouse? You're looking at this going, okay I see mouse x mouse y. How did I get mouse? Well, we got that from this engine root context set context property mouse. So our mouse memory class is Actually going to be called mouse because you know, we're pointing to the data in the Q scope pointer I know that seems a little confusing Just remember the Q scope pointer wraps around this object to access that object you have to call data So literally in the set context property, we're making a new variable called mouse and mouse is going to point to the variable mouse memory Not entirely accurate, but you get the concept here. All right now in our class. We're just gonna say test Hello from C++. So We have our variable called mouse We're gonna call the function test and it should say hello from C++. So let's save and run this Okay, you see how it already said hello from C++ because we already painted now if I just do this You're gonna see a whole bunch of them. So let's let's make this actually do something Let's go in here and let's say Q Invocable whoops, I got to really watch the clock here. I'm running out of time Clear and let's just make a few functions here My daughter gets like really antsy if I don't like tell her when I'm coming We're gonna say double X and double Double Y And we're gonna make another one here and this one's going to be Q point F for a floating point So notice how we have got two functions that are the same, but they have different signatures So we're gonna do a function overloading here. Man, I am just not with it. Maybe I should take some allergy medicine I'm like trying to talk type and not sneeze at the same time because I'm sure you guys would love to hear me sneeze Alright, so Q to bug It's been kind of a crappy weekend. I've had kind of a crappy week It's just it's just one of those where you just want to like sit around the house and do nothing all weekend But you got stuff to do Save the data and then Adding and we're gonna say Let's let's do this a little different here. Let's say Q point Because our developers want a point, right? So I'm just gonna add that in there adding float Whoops float. It probably won't actually be a float. I'm going to get cast as an integer But I just want to show that we can call this differently So really we have a our test which we know is working clear save add and then add and the two ads are different One's gonna add an xy one's gonna add a point So we'll show how to convert the xy in QML to a point Not really gonna do a lot of the back end code. Actually, we're not gonna do any of the back end code This is as much of the C plus plus as we're gonna do. I'm just literally just showing you how to interface between the two I don't want to get into saving and loading and things of that nature because To do it I would have to show you how to use models Which is gonna really go well beyond the scope of this video, but you can you know Actually use Q less and just write rock, you know binary right out to the file and stuff all right, so let's Look at this here So now we've got our our little mouse here and we are going to mouse dot add Last x last y and we're going to Yeah, this is gonna require a little bit of finagling clearings actually kind of a pain I don't know why they made it so hard So we're gonna get the 2d context We're gonna say CTX Reset. Let's not save. I Think we actually have to do request paint because we can reset it, but then we got to actually request paint All right, so let's save and run this what we've really done is we've added in our clear function So in the button click we're gonna just say you know do this Um Which you know what let's just not do it this way. Let's go into the canvas and make an actual function in here Because we've never really covered this so let's do a function in here So we're gonna make like a custom object really just because I like keeping things encapsulated and actually we can just Canvas clear so that's gonna call this clear down here And let's get rid of that for a minute. I don't remember if I need to call it or not That's why I'm getting a little confused here. So In our button, we're gonna call canvas clear which is our custom function canvas clear Which calls the get 2d context resets the context and it calls mouse clear So we're interfacing with our c++ in the back and I think we actually have to request painting when we clear it We'll find out In the save button, we're just doing mouse save which interfaces with our c++ And we're calling mouse add which adds the last x last y all of this is in our c++ class Save and run. Hopefully nothing blows up All right, and you can see how already it's done a adding Q point zero zero So if we do this you can see adding Q-point hello from C++ so every time we move this mouse we can see as long as the mouse is being held down That's doing that if we click save Saving the data. So that's where in C++. We would actually save if we clear. Yeah, see we got a We clear the data in the back end, but we didn't clear this canvas out. So let's actually I Think this should fix it if not we're going to pretend that it fixes it because I got to get going Let's just do a quick drawing and Yeah, see this so that does actually clear it so that clears the interface and the back end all right, so what's um That's how we did that now we want to actually convert last x last y into a point and call that other one So we're gonna say mouse dot add We're gonna say cute point. We want to do last x last y and that'll convert it So what we're gonna see here is that we're gonna add a Point and then we're gonna add a floating Q point Let's run this Yeah, so adding adding float so you can see how it's doing the two different ones here It's kind of like a dorky smiley face. I guess I don't know modern art Then we can clear it we can save it. We can do all sorts of stuff So that in a nutshell Um is how to interface with a C++ class on a very basic level. There's a lot more you can do and how to You know send data doubt to that class and call functions and how to actually put a function inside your QML And we introduced the canvas a little bit. I hope you found this educational entertaining Thank you for watching feel free to Go out to void realms calm. I have the source code for this and all the other tutorials out there and also If you have questions and concerns, don't try to email me. It'll just take forever and sit in my inbox Go out to my site Click this link and join the void realms Facebook group. There's I think we're pushing like 500 I don't know if we've already surpassed that but we've got a lot of people out in this group And it's not just cute and QML We got like Java.net pythony just tons of people out there all different walks of life They can definitely help you out on whatever project you got