 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. 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. 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. Similarly, if I write 100, it will go like this. We can try and run the simulator and see that we get this behavior that we see on the canvas in the designer. We have the needle positioned a bit out here. We can 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. 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. The needle itself is drawn by a texture maver widget which is the same texture maver 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. 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 am now opening the project here. I am opening it with the 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. So to update it during execution normally you would have some sort of readout of some meter that would enter into the model class you would propagate it to the presenter and onto the view but here I am just going to simulate it by implementing the handle tick event so that is called each tick in touch to the effects. So 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 will just do an instant update which is entering the value 0 compiling and running so we will see it animate to the maximum and then just stay there because I am 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 will change the direction so modifier multiplied by minus 1 so we go back and forth here but we put in the value range here and the designers are from 0 to 100 maybe it is 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 will demonstrate that by adding another gauge to my application I will 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 it is 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 the circle widget itself so here we can either choose an image or a column in this case it is an image so we can go and have a look at the image so we have this background with the grey 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 is 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 and 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 animate it 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 one for the gauge 2 as well so let's compile here run you see the 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 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 symbol color whereas this has a variant in the thickness but also in the color I believe but 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 the code once again we'll need to have an interior tick counter here so we can 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 13 is the 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 like this 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 so like this it will move in a nice behavior we can change the 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 of 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 sewing dots second one you have you do a readout of the current 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 ok that's all from me hope you enjoyed this video and want to have a look at the gauge widgets that has been added