 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. So 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 persistent. So you can see I can change it here. 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. 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. 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 map widget, which is the same texture map as you can add here. So it is 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 1 view. So you can see if I open the screen 1 view base, this is where I have my box 1 and my gauge 1. 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 1. 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 0. Compiling and running. So we'll see it animate to the maximum and then just stay there because I'm just adding 1, 2, whatever value it has. As you might remember, we put in the value range 0 to 100. So if I go back to my code here and let's say add a modifier value here. So now I add 1 to it. But let's say so if the current value is either the maximum or the minimum. So equal 0 or if it is equal to 100, then I'll change the direction. So modifier multiplied by minus 1. We go back and forth here. Okay, but we put in the value range here in the designers from 0 to 100. Maybe it's not the best design to just have a magic number here, 0 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 1, 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. 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 2, it will show exactly that. 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 a 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 need it 1 for the gauge 2 as well. So let's compile here. Run. Yeah, we 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 it says 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. Whereas this has a variant in the thickness but also in the color I believe. Okay 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... Okay 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. And we'll see a bigger change. Okay 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 you 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 read out 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. 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.