Introduction to Qt / QML (Part 27) - States and Transitions

Hi I'm Jesper Pedersen from KDAB. You're watching programming with Qt / QML. We're almost done with the section on animation now we're going to see state and transitions and it doesn't entirely fit into animations but still i'll show you why i got a state machine here well it lacks the machine part of a state machine but i got a bunch of states and transitions between those states it's your typical stoplight here going from red red yellow over to green back to yellow and back to red and that's a full circle my application is set up like this I got three rectangles here the red the yellow and the green rectangle they each have a position and a width and height and a radius yeah you can go back and tell your mom circle is just a special case of a rectangle where the corners are really really ramped that's what we see here that's my rectangle set have turned into a bunch of circles now this is just setting off of these specially notice the lack of a line not the lag of a line fifteen and a half and the lag of a line 21 and a half each of them saying color : because we don't specify that in the default set all the colors are set up and over here you can see now the traffic line is actually running the colors are set up using number of states here's my stop state here's my waiting state and I'll bet you there are two other states for the go state and the slowdown state and each of those states we are specifying a property changes the target are red light yellow line and green light red yellow and green light and in this stop state I want my red light to be red my yellow and green light each of them to be great let's see the code in action again my rectangles that I set up here my outer rectangle that is black here are my four states now I got a state property down here that's I mean what is my current state and I got a timer that tells me that it should run for a thousand second in finically because repeat : true it's just start running right away and every time it goes off it should figure out what is the next index here it's just this a bit of JavaScript magic to figure out what it's gonna be my next state and I'm gonna update parent that state to that state yes I know I've been asking a lot of you first of all I've been asking you to not quit this area just because of my terrible jokes and now I'm gonna ask you for a leap of faith in here please do believe me that this state stuff is actually a better way of programming your Comal let me just rewrite this application here without the state stuff and you will see that I am totally full of pee pee pee bib yes it will not look better in this very simple example but hopefully when I rewrite it you'll see that okay there are our values to the more expressive states and transitions that we do here rewriting code like this first of all I need to throw away this this states here so like you actually you can see that it works then it goes up here see color off this rectangle here should be well that depends of course which state I'm in so it will go state equal to well each element has a state property it's something that comes from the ice well so that I go to or let be slightly more expressive just imagine that we one day wanted to extend this year so I need : route color route but state equal to and let me just scroll down here stop state if I'm in stop state then it should be read otherwise should be awesome I bring let's just copy that line because we're gonna have that three times stopped State wait state drive state and yellow green that's right red yellow green something red hmm oh yeah of course that was this slow state that when I go to slow State then it's my yellow that should move that State Road State there we are so red yellow green yellow red oh wait it should be yeah it should be red yellow in that state so it should read also when I'm in the wait state I hope at this point in the video you have found your button for speeding up because I am tracking time here just to make a point and my point is that you can see the code is getting uglier and uglier and further on it's getting well finally I got it right but just imagine that I want it I have a specification from my customer that said that that this one my my rectangle here should have a the radius of this particular one should be 25 when it was in the yellows when it was yellow otherwise it should be 50 yeah I don't know who would want a traffic light looking like this but you get the idea now I cut and pasted this code here and something else and something else and before you know it my code that set up what my user interface looks like has all of these if whatever could be either full-blown if statements or it could be these ternary question mark colon statement with question mark colons at sup sup sup sup sup sup question mark colons and it would be completely unreadable with a number of states instead I specify for each of my states I can sit there and say okay this state has these properties that I need to update in this particular state what you need each of them look like I want to add another property well I'll just go and add one line to each of my state's and then ponder for each of those and I would know hey I actually did remember them all so I hope the leap of faith that I asked you for isn't that enormous ly gigantic like walking on the moon leap of faith I hope that you will we'll give it a shot and try it in your own applications there is two things that contribute over when you start using States and transition states as we see here the first one is the state property if you do not specify anything it's a string you guess what the value is gonna be? yes of course it's gonna magically be go state no it's gonna be an empty string so do remember to specify the initial state and the same thing is that if you do not specify a property in one of your property changes then that particular property will restore to the value that it had when you set up the element with that property I'll show you both examples here in a in this little example here so the first one my state : I did not specify a state state : I did not specify one of these so it ended up looking exactly like this and when Mike UML kicks in he'll go state's awesome so it's one of those things with States in it let me see you say this empty strings that equal to stay no empty strings I'd equal to state B no empty strings are able to stay see no okay then it's not one of these states so I'm not gonna update XY and color they will be whatever they were when I specified it so if you look at my example again here like blue yes that's like blue why 100 yes it's that position y 100 fortunately when I wrote the mouse area that transitioned me through the states I thought of this into state cause you see a 2 B B to C C to a and then the empty thing also to a otherwise I might even have had a problem bootstrapping the whole thing but empty thing - a - B - C - a - B and now let's see let's see the see down here is they see I did not specify why I did so in all of the others the question is what value will I have will it be unchanged will it revert back to the state before I insert into state B no none of the above it will actually revert to the value that I specified whenever I set up my element so up here it says rectangle wide : 100 and that's a value so that two common problems are solved for you remember one to create an asset that value the property state to the initial state to update all of your properties in all of your in all of your states because if you do that then you will see this this block of eight property changes in each of my states and that makes it also easier for you to validate that you thought about each of the property and each of the states that you are transitioning through there are two ways you can work with States way number one is that you give each of your state a name the second way of doing it is that you specify of when so let's see this example here in this example I only have two states to jump between I have the state of that there is set text in here and the state when there's no text in there when there's no text in there my buttons should be grayed out when there's text in there it shouldn't be grayed out that's the only two states I got my two states down here and they do not have a name written to them I could have given them a name but they don't it's simply a when colon and then an expression that means that whenever this expression is true and then this States is the one that is the active State and of course they should be mutable you none only one of them should be evaluating to true at a given time that states you have a number of states in your application and now we come to the second part of a state machine well there's three parts to the state machine that's the machine part all you need to run that yourself we saw that with the mouse area that I clicked and I transition through the different states then there's the state pontem we've seen that set them up and for each of the state we specify our property changes for that particular state and the last part is the transition so have a number of states and you can go from one state to the next state and when you do so you can have an animation running hey that's why this is in the animation section yes I know I needed it in one place right can you forgive me thank you here is what it looks like and let's just jump right to the code and well let's look at what it does over here you see the difference right that's a huge difference from the previous one namely that it's every time I changed light it takes a hundred milliseconds to dim in or dim out I'll bet you if you asked you your mom and Lord or your grandma whoever granddad he or she would tell you yes the one that Tim's in or out looks much better than the other one simply because that's their expectation of nature that nothing happens instantly just however a short time still there is a they may none doubt them out I'll bet you I'll challenge you next time you're sitting in your car in front of his stoplight observe it let's see the code rectangle rectangle rectangle that's my three circles here are my four states as setup before my timer we've seen that before too and now here are my transitions from stop state to wait state I got a property animation happening the target is the red light and the yellow light the property that I want to animate this color and I want to do that for a hundred millisecond yeah I guess it should have been a color animation but let that be if I go from wait state to drive state blah blah blah if I go from drives to stop that's a slow blah blah blah if I go from slow to stop blah blah blah I'm just testing you to see how far you willing to go next I have a bridge for sale I'm telling you I am not kidding you I'm showing you the full power of the transitions here you can for each and single transition you can specify how things happen seldomly you need that much power and I'm glad to show you the next example here because the next example has what we call a wild card transition and this is now the complete code for the transition when you go from any state to any state then red light the yellow light and the green light should animate the color for 100-millisecond but in the previous one we had over here you have the full power if you don't need the full power then you can use the wild card up here and even the wild card here is if you do not spit from : and to : you can take line number three and throw that out and your transitions are down to two these seven lines of code sometimes you do have different transitions for a different part of your if your state hierarchy but for any for but but you can go forth and back between two states and when you do that you want the same transition and in that case we have this variable property that we have said on the transition so I explicitly want to go from the Wills text to the without text in this particular setup and it's both directions I should animate the opacity of my Clear button for a you second so see how it goes away yeah that's it that was it we saw States we saw the state machine that's you we saw the transitions where you can run the animation for you or for how you go from one state to the other this is where you'll say but wait yes burr I want a real state machine you know the one that like one of those commercial one with a state drawing editor and whatnot well that might be for another episode go and look at at the qml or it's a c++ sorry the c++ layer there we do have real state machines for running complex state diagrams we also have a Q declarative state machine where you set up your states in the qml level it's not as bad as doing business like you can kill Mel because most of what that qml state machine will do for you is and reach into C++ but that is possibly for another episode this concludes this whole module in the next module I'm gonna blow your mind right away we're gonna see the repeater element we're gonna see ListView we're gonna see how we can customize to this view we're gonna see the great view with the path view and lots of other interesting things it might not have come out at the time you watch this movie so please do subscribe to our channels and even if it comes out and you can run right and see it right away well please do subscribe nevertheless because we plan on putting out material on our k-dub channel here for years and years to come I hope until then have a great day

Channel: KDAB

Views: 5,592

Keywords: Qt, QML, KDAB, Animation, User Interface, UI

Id: lBHWQHW_FKM

Length: 18min 25sec (1105 seconds)

Published: Wed May 13 2020