 Hey everybody, this is Brian. Welcome to the 156 QML tutorial. People kind of jumped on me a little bit for saying C++, Qt, and Gui, blah blah blah. We're really doing QML, so this one's going to be going back to QML. I know that we kind of deviated a little bit. And for a good reason, I want to explain a little bit why my screen looks a little different. I switched from Ubuntu Linux to Linux Mint, and I've also changed my recording software from Record My Desktop to Kazam. Reason being, there's a lot of artifacting going on with Record My Desktop. Just weird black lines and crazy stuff, which we're probably still getting a little bit of it with Kazam. I think it has to do with my video driver, so I'm going to have to look into that. Anyways, without further ado, QML states. What is a state? Every object has a state. You can see, like, here's a rectangle. Whoops. And in that rectangle, we have multiple states. So a state just defines, well, a state. The best example I can give is your mom. You come home with good grades. Your mom's state is happy. You come home and you got into a car accident. Your mom's state is not happy. She's probably, at that point, let's call her critical. So you can define different states, and states have different properties that change. So for this example, in this rectangle, you can say normal is green. The color is green. And for critical, the name of the state is critical. The color is now red. And you can define other property changes. Like you can say the state of a different object is a different state, et cetera, et cetera. That's the base foundation here. You've seen rectangle before. Now we're going to play around with states. You notice the syntax is a little different. You've got these brackets. So this is actually an array. And note that comma right there. That will fudge you up. That's the quote of the day. Fudge you up. I hate that comma. It drives me crazy. Because I always forget it, and then I can't figure out why it doesn't compile. So we are going to jump right into Qt Creator. Once again, if it looks a little different, I'm running the... Let's see. What are we running here? Qt Creator 4.0.3 with Qt 5.7.0. Running the latest and greatest here. New Filer project. Didn't exactly do a project. Now did I? I'm having all sorts of issues this one. Okay, that's why. Application. It has been a long day, and I haven't done a tutorial in a while, so forgive me here. So bear with me while I clean up some of this crud, the auto-generated nonsense. Remove file. Delete because I don't like you. Delete because you've hurt my feelings. There we go. We're just going to get rid of this garbage here. And we're going to call this state's example. So we're going to make a stoplight. And we're going to add a couple files here, because we want to split this into what are called components. Simply because we don't want one massive file, right? So we're going to say light. And we're going to replace this with rectangle. And then we're going to say add new. We're going to add stoplight. Place that with rectangle. Alright, now this is officially a component. Now there's a lot more two components, and we'll cover that in a future tutorial. But just know that when you split something off into its own file, it is now officially a component. And QML will treat it as such. So what we're going to do now is we are going to say column. And we're just going to add some buttons here, after we do some magic. Spacing 15 anchors. I've also noticed that on Mint, the newest version of Qt Creator actually seems a lot more responsive. I don't know why that is. But just kind of throwing that out there as an observation. And don't get me wrong, I still love Ubuntu. It will always have a special place in my heart. But, you know, it did kind of let me down. So, you know, I'm broken hearted, and I'm going to write the Ubuntu fun, or sorry, Cannibal or whatever they're called, and kind of cry and complain. I'm totally not doing any of that. I'm just going to switch to Mint and mind my own business. So we're going to add two buttons, stop and go through the magic of copy and paste here. Because our stoplight obviously is going to have two lights, red and green. And this is where our custom component is going to come in. We're going to add the stoplight. And we're going to actually call this ID stoplight. To add it all lowercase, why not? And that's all we're going to do for now. We're going to jump into, actually let's run this, make sure it actually works. There we go. So our component is kind of invisible right now. And we've got two buttons. And for brevity's sake, let's go in here and flesh out a little bit of this just so that we can see it on the screen. Whoops, I hit the wrong button and it totally messed me up. Call that signage width. Let's make this 250. I'm just kind of coming up with stuff off top of my head here. And let's get a little creative, because I haven't done this in a while. Somebody wrote me a really heartfelt email and said, hey, your tutorials are awesome. I love you. And thank you very much. And why don't you do more? It seems like it's been taking you a while to do tutorials. Well, the truth of the matter is, I switched jobs nine months ago and I'm still within my probationary period. So work has been consuming a lot of my time. And we're going to just get creative. Let's do a gradient. Have we done gradients before? I don't think we have. All right. So gradient, well, you know what a gradient is. It just transitions from one color to another. To do that, you define gradient. And then you make a gradient item. And we're going to fill this with gradient stops. Gradient stop is a little bit misleading. I kind of wish they hadn't done that. But a gradient stop is you give it a position, like 0.0 color. Now we're going to tell it yellow. And we can just copy and paste this. Now, if you're wondering what that 0.0 is, because I personally hate magic numbers, I believe it's the angle. Is it the angle? I'm pretty sure it is. You can basically determine how it's gradient, whether it's at an angle or up and down or whatever. But for this example, we're just going to go, whoops, we're just going to leave it like this. B8, B8, 12. Had to read that for my notes. I don't have the HTML color codes memorized here. All right, so let's save and run. And this is going to be our stoplight right here. So we'll say stop, go. And we click these buttons. Things down here will magically happen. But this is like the frame of our stoplight. Now we're going to make the individual lights that go inside of it. So to do that, we're going to jump over into the light QML. We'll call this bulb, because it's a light bulb, with 90 heights, 90, why not? Color, because it's off, we'll say gray. Another reason why I really haven't been doing a whole lot of tutorials is because when I get done with work, I'm just pretty much spent for the day, and I don't want to do anything mentally challenging. So I say that, but then I've been reading a lot about Android programming and learning, and I'm not like chapter eight of my book. So I'm torn between doing Android tutorials or doing what's called Ximarin. Ximarin is like a cross platform between iOS and Android. All right, so we're back in our stoplight here. We have fleshed out our light, let's say column and spacing 50. I hope that works. I've actually tested that anchors, center and parent. Now we're going to say light. We're going to add our light component here, ID, we'll call this red light, ID, we'll call this one green light, save run. Now you notice how we have red light, green light, but they're both gray. That's where states are going to come into play. If we crack open the code here on light, you see the colors gray. What we want to do is we want to look at the stoplight and we are going to add the states in here. So be sure to choose states, not state. And if you choose the red, it'll actually build the template for you as opposed to the, is it blue or green? The not red, let's call it not red. So if you choose the red, it's going to fill in a lot of stuff for you here. So you have your beginning of the array, down to the end of the array, and you have your specific state. And we're going to call this stop. Now property changes, I like putting these all on one line. It's just easier and more readable, I guess you could say. I'm going to say target, I almost wrote Tarzan, wow. I'm going to say red light. Remember red light is our first top light bulb here. So the target is red light, semicolon color, oops, red. Now, because we have two lights, we need to change the property of the green light. We can't do another target here. What we have to do is an entire new property change. And then we have to target the green light. And because we are now stopped, we want that green light to be like a dark green. Makes sense, because the red light is lit, we want the green light to be dark. So now we are going to grab this. Do not ever, ever, ever forget your comma. Otherwise you will get an error that will make no sense and you'll be very pissed off and you'll write me and it'll take six months and then I will be the cause of all your problems. So, I'm going to tell you right now. Do not forget that comma. And we're going to switch this to lime. So, we have two states here. We have stop and go. This is the state of the stop light. This big component that we're building here has two lights in it. And if it's stop, we want red light to be red and then green light, this guy, to be dark green. And then we have another state called go. And it just switches. So, the red light goes dim, the green light turns to lime, or bright green basically. And there you go. So, let's flip back into our main here because we want to add a little what I call voodoo magic. On clicked, we are going to say stop light. Now, I named this a little wrong. I probably shouldn't have done this. Be sure you get the right one because if you use the, you notice the spelling, uppercase stop, uppercase light. If you do that, bottom one, you're going to actually call the object we haven't created yet. We want the actual ID of stop light. So, we should probably call this like my stop light. That way it's less confusing. My stop light dot state equal. And then we just give it a state name. And we know that it has a state of stop. Copy and paste, bam. Give that a state of go. So, when we click the stop button, it will take our stop light here and switch its state to stop, which will go in here and run the states and say hey, property changes need to happen and then it will make those property changes. And vice versa, when we hit the go button, it will go in here and say hey, go has been called and it will make these property changes here. So, let's actually run this and see if it works or if I'm just talking nonsense here. So, you see how it's in an inconsistent state? We'll just hit stop, then let go. Stop, go, stop, go. All right. So, what we can also do here is give it a beginning state. So, it's going to default stop. See? And then we can. Now, let's say, you know, we work in like a graphic design shop, if you will. And the boss is like, well, I don't like how it just automatically cuts over. I want this to transition a little bit, be a little more cooler or awesome or whatever. I'm not a marketing person, so bear with me here. So, what we're going to do here is we're going to add what's called a transition. And I'm going to add a bunch of spaces to kind of go up on the screen here. And you can see from to, from state to state. So, you can add transitions like from stop to go or from go to stop or whatever. We're going to put a star, which is just a wild card. So, from any state to any state, then we're going to make some property changes here. And we're going to do property animation. And we are going to do that. And say target. Say red light. And don't forget your semicolon. I was just thinking about something. Sorry. Properties and then color. So, what we're doing now is we're saying on any state change that involves the red light and it involves the color property of the red light. We want to, well, you guessed it, we want to do a duration of one second. Meaning it's going to take one second for that color to fully change. We're going to go green light, color, same thing. Save, run. Now, when we click go, it should take a full second to transition over. Pretty sweet, huh? So, that is QML states in a nutshell. Let me see how much time we got left here. I don't have much more time. I have an appointment, so I got to cut this a little bit short. We will be playing a little bit more with states and maybe even in animations, but I really wanted to cover the foundations of states and transitions. And as you can see, you can actually create some somewhat complex components here. All this under the hood, when we look at our main QML, really, that's all we're interacting with and then we just call states on top of it. So we don't have all this, you know, monster code that we have to really look at and stare at and figure out what it does. We just call a state. And then that state stays consistent based on the state of the application. Phew, that's a mouthful. Alright, so that's all for this tutorial. If you found this educational entertaining, be sure to visit my website. We have the source code for this and all the other tutorials for all the other subjects that I've done. Whoops, that's C-sharp out here. This is 100% funded by your donations. Somebody actually challenged me on that. They sent me an email and said, I call BS on that. Well, here's my actual YouTube dashboard. And I have made a whopping 4 cents in revenue ever since the inception of this whole site. And that's because I accidentally turned on what's that called, revenue, profit, whatever, on one video that had like maybe 100 hits because it was literally me testing the screen. So, yes, this is funded 100% by your donations. Also, if you haven't already, be sure to join the Voidrom's Facebook group. There's 750, almost 800 other programmers out there working on cute Android, PHP, Linux, Windows, Mac. I mean, you name it, they're out there working on it. So, that's it. Thanks for watching.