 Hi, my name is Jesper and I'm part of the SD TouchDFX team. In this video I will give you an introduction to the Gauge widget, which has been added to the TouchDFX version 4.16. I have a new TouchDFX application in the designer. I'll add a box, just as a background, like this. Then I'll add the Gauge. You can find it here. I'll put it in the center. You can see the Gauge already has a background image and a needle. It has a style called the Standard Gauge 1. Here we also have a Standard Gauge 2. So as all other widgets, when you have selected a style, it will preset some of the properties for that widget. So in this case the background image, the rotation center, the angles and so on. As for all other widgets, you can press the question mark on the top here and you'll see a link to the TouchDFX documentation page describing this particular widget. Here you'll find all the key properties and the description of those. You will also find a link in the bottom to the API reference for that particular widget. Let's have a look at the properties set for this Standard Gauge 1. The background image, where it is the background here, of course. The rotation center, that is where the rotation center of the gauge is, in this case where the image of the needle will be positioned. You can see I can change it here if I want to. The angle is the angle in which the minimum and the maximum values of the gauge will be represented at. So you can see we have a value range here. So the minimum is 0 and the maximum is 100. If I put this to 0, you can see we are hitting the minus 90 degree angle here and similarly if I write 100 it will go like this. So we can try and run the simulator and see that we get this behavior that we see on the canvas in the designer. So we have the needle positioned a bit out here. Type in 125 again and we see that it will be positioned in the center. For the needle itself we see we have these properties down here. So we have, of course, the image of the needle. We have the rotation center of the needle. So that is the point in the needle which will be put on top of the rotation center of the gauge itself. Then we have two properties here. So that is the rendering algorithm when the needle is moving and the rendering algorithm when the needle is steady, so not moving. The needle itself is drawn by a texture mapper widget which is the same texture mapper as you can add here. So it's the same way of drawing it. It has two options, so nearest neighbor which is pretty fast to render but not completely perfect in image quality and the binary linear interpolation is much better quality but it is a bit harder on the microcontroller to draw. Okay, so that was the basic setup of the properties for this gauge widget. So let us try to make it update the value of the gauge. I'm now opening the project here. I'm opening it with your studio but you can open it, of course, in whatever editor you would like to. So here I have the header file of the screen one view. So you can see if I open the screen one view base this is where I have my box one and my gauge one. Okay, so to update it during execution well normally you would have some sort of readout of some meter and that would enter into the model class. You would propagate it to the presenter and onto the view but here I'm just going to simulate it by implementing the handle tick event. So that is called each tick in TouchDFX. I implement it in the cpp file. So if I just do like this so I can use update value let me just get the current value of the gauge plus one and it takes an argument called duration. So that is the duration of the update. So how long would it take to reach this value? So in this case I'll just do an instant update which is entering the value zero. Compiling and running. So we'll see it animate to the maximum and then just stay there because I'm just adding one to whatever value it has. As you might remember we put in the value range zero to 100. So if I go back to my code here and let's say add a modifier value here so now I add one to it but let's say so if the current value is either the maximum or the minimum so equal zero or if it is equal to 100 then I'll change the direction. So modifier multiplied by minus one. So we go back and forth here. Okay so but we put in the value range here in the designers from zero to 100 maybe it's not the best design to just have a magic number here zero and 100. So if I would like to change that I could use the get range method in the gauge widget. So if I have a minimum value and a max value here so I could say gauge one, get range. So this one will get you the range and it takes as an argument a reference to an integer so I can add my minimum value and my maximum value here and I will get those and then I could put in minimum value and maximum value instead. So a little bit nicer. So this is just to show you that there is a range of methods here you can pick and choose from to get the values from the gauge widget itself and it still works. Okay let's look at another feature of the gauge widget which is the arc. So you are not limited to having a needle or a texture matter changing angle but you can also add an arc to your gauge. I'll demonstrate that by adding another gauge to my application. I'll put that one here. So if I select the style two it will show exactly that. So here if I change this you can see that it's not only the needle which is changing but also this arc here. The behavior and properties of the arc is very similar to that of the needle. So down here you see it now says use arc. It is basically a circle known as like the circle widget itself. So here we can either choose an image or a column. In this case it's an image so we can go and have a look at the image. So we have this background with the gray background for the arc and then we have this arc here which is a circle which kind of changes thickness. So we use that one. We have a set arc position which places the arc inside of the gauge. So in this case it's because the image of this arc is not the size of the gauge itself so we need to place it in the correct location. And then just as a circle we have a radius on our line width and a cap style also if you want that. You can position the arc on top of the needle, force it to be on top of the needle if you want to. And let's just make it animate just as gauge 1. We have the same value range and the same initial value so we should be able to just go here and copy this line here so the modifier will still work. If not we needed one for the gauge 2 as well. So let's compile here. Run. Yeah, you see it animate. So that is the basic settings for the arc. If you want to learn more about it, play around with it and see what will happen. So in this case we could try to add one in the gauge 1. So I have here so let's say radius 50 and line width. So 0 it will be a full arc. If I set it to 2 we'll do like this. We can make it a bit bigger like this. 6. The round ending. It should be just to run the simulator and you'll see that it now has an arc as well. So this is just a color so not an image like this one over here. So just one plain symbol color. Because this has varying in the thickness but also in the color I believe. But yeah, play around with it and see what you can make of it. The last thing I would like to show you is how to use this duration when updating. So if we jump to the code once again we'll need to have an integer tick counter here so we can hold the update for one of the gauges. So let's have here, so we have a tick counter now that is increasing each tick. So here for number 2 we will say if tick counter models like what should we say 30 is equal to 0 then we want to update so only each 13th time. So we can see how that looks with the duration of 0 here. So that will be an instant update once in a while. You can see it moves. If we change the, ok so maybe this modifier thing is a little bit boring we only see it move slightly. So if we say plus 30 times the modifier then we'll see a bigger change. Ok, if we change the duration so let's say we'll use 20 ticks for the update and then we'll have 10 ticks of pause and then run again. See like this it'll move in a nice behavior. We can change the movement here. So if we say activate this one and then the easing. We put an easing back so we could have like a cubic with the ease in out. Generate the code back here, compile again. And now the movement of the needle would be slightly different following that particular easing equation. So this feature is useful if you are not receiving new values for your gauge all the time. If you get that each tick well then of course you should just use instant updates or close to each tick. If you have like a second between your readings well then an animation to the new value will probably look better. The last thing I would like to show you is the example for gauge. So if you create a new project you will find gauge example. Try to have a look here at this. So here we have three examples of different gauges. So let me just compile it. You have three different screens with each gauge. So first of all we have this one. So here you see a needle and actually an arc but in this case just showing dots. Second one you do a readout of the current value of the gauge and then you update a text and actually also changes color on this icon. Changes the image of the icon. The last one is just one big arc underneath a big needle. Okay that's all from me. Hope you enjoyed this video and want to have a look at the gauge which has been added.