 Hi, my name is Jesper and I'm part of the ST TouchGFX team. In this video I will give you an introduction to the Gauge widget, which has been added to the TouchGFX version 4.16. I have a new TouchGFX application in the designer. I'll add a box just as a background like this. And 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 TouchGFX documentation page describing this particular widget. Here you'll find all the key properties in the description of those. You will also find a link in the button to the API reference for that particular widget. Okay, 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, well 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 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, like this. 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 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. 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, which 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. So we go back and forth here. Okay, so 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. 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 now. 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. Yes, 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, 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 bind 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. And it should be just to run the simulator and you'll see that it now has an arc as well. So this is just the color, so not an image like this one over here. So just one plain, simple 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, then we'll see a bigger change like this. 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 will 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 readout of the current value of the gauge and then you update and 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.