 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. 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 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, 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. 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 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 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 your studio but you can open it in whatever editor you would like to. Here I have the header file of the screen 1 view. You can see if I open the screen 1 view base this is where I have my box 1 and my gauge 1. To update it during execution 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 am 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 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 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 like 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 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 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 1 for the gauge 2 as well so let's compile here run 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 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 it will 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 will 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 very 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 the code once again we will need to have an integer 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 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 we will see a bigger change ok if we change the duration so let's say we will use 20 ticks for the update and then we will have 10 ticks of pause and then run again so like this it will move in a nice behavior we can change the movement here 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 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 3 examples of different gauges so let me just compile it you have 3 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 showing dots second one you have 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 ok that's all from me hope you enjoyed this video and want to have a look at the gauge which is that has been added