In this lecture, I'm going to show you how to use the gauge to the gauge is a single note that actually
gives us access to three different styles or types of gauges.
So you have the normal gauge, the donut compass and level.
So we'll play with all four of those to drive the gauge or to create a value that is displayed in the
gauge.
I'm going to simply use and inject.
No, you'd like that and just inject a number.
Into the equation.
So let's put a number here, let's make that 10.
All right, let's have a look at the simplest possible version of a gauge before I show you the variations.
So double click on the game, show the edit tab or the property tab.
Going to give it a nice large size like that.
And I'm going to actually cancel out of that.
I'm going to create a new user interface group and actually I'm going to put it in the new tab as well.
So let's choose a new group and I'm going to put that into a new tab as well.
And it's called that tab, too, OK?
And then in inside here, I'm going to have to be gages.
Group and for its width, I'll make it make it quite large or make it 12.
All right.
At that.
And then inside this, we have tab two and then the gauges group.
And now that I have defined this size or the width of the group, I'm going to make my gauge larger
six by six.
So for Labor just going to call a case, I know exactly which type, I'm using the volume to pass the
value that is coming from the inject new value units here, you can put in whatever you like, for example.
It could be.
Kilometers per second or something like this, or it could be a percentage or degrees Celsius or whatever
it is that your gauge is displaying, then for the range you can define the minimum and maximum values
that you gauge displays.
And then these three colors will be applied to the gauge depending on the input that the gauge is displaying.
So, for example, if it's two words, the maximum, the 20, it's the gauge is going to be red if it's
towards the minimum zero.
In this case, the gauge is going to be green and then you think it will be will be yellow.
And for the name, I'm just going to say I'm just going to say a regular.
All right, now let's have a look at how that looks like, so we've deployed the dashboard and let's
switch to tab two.
Here's OK, I'm going to inject the number 10 done.
And you can see that this is, what, 10 looks like.
Let's make that into a 16 and redeploy.
And inject.
And that's what 16 looks like.
All right, looks good.
Now, let's make a copy of this.
And change it's type to a doughnut, so then change the label to doughnut.
So this is now a donor to gauge.
And leave everything else the same night, they inject note to the new gauge and deploy.
And press the inject button and this is what the doughnut looks like.
Let's switch it to something else, like, for example.
Making a six.
And it did not work and to inject it actually to press the button.
That's what six looks like.
All right.
How about create a copy of this?
And try out the compas type.
So there's now a composite sketch.
Connected.
And inject, actually to deploy and then inject, and this is what the compass looks like, change the
valley to 19.
Inject and that's what it looks like.
All right, and there's one more to try out again, I'm going to copy and create a copy of the Compass
Gauge, and this is going to be level level type.
There's this level gauge.
Inject.
And that's what the little gauge looks like, let's make it empty.
Or close to McCain, make it a full.
And there you are, the four different kinds of cages.
Another thing that I want to show you is the slider widget or the slide on node, which produces the
slider widget, which is right here, instead of creating a separate lecture for this, I'm going to
give you an example that uses a slider in this lecture so that we can control the gauge widgets using
this slider.
And therefore, we're not going to have to switch back and forth from the flow to the dashboard to change
the values.
So what I'll do is I'm going to insert a slider widget or slider.
No to produce the slider widget and I'm going to connect it to all gages.
Like this, then I'm going to place the widget to take the full width of the group and place that in
tab to Gauger's.
It's going to go right to the bottom of the stack of widgets can call this slider, and I'm going to
set it so that we've got a minimum of zero and maximum 20 insteps going to be one.
So you can see you've got a few options, you can either update its value or whatever follows continuously
while sliding or only on release.
So I'm going to go for the continuous update of the output.
All right.
So this is going to be an example, know.
Like these.
So let's deploy and have a look at what this looks like, so there's a slate up here.
I'm going to reallocate it to the bottom of the stack in a moment.
But let's see, I'm going to move it towards the right.
And you can see at all of the widgets update themselves.
It's a nice, interesting effect, so the images themselves are very responsive and they do have a nice
animation as they change the value.
So another thing that I want to show you here is what happens if you get an input to a widget that does
not match with the range of the widget.
So let's say, for example, that the input to the widget, which is now represented by the slider,
was from zero to a max of two hundred.
Of course, we now have a max out very quick.
You can see the donor doesn't care so much, although he can see displays of its value, but it's all
red, it's red and it doesn't really give us a proper graphical representation of what is happening,
because once we hit 20, then all we did just maximum.
Even though they show the correct numerical value, so to fix this issue, we need to insert a range
note.
So let's look for the Range A..
This is something that you've learned in the previous section, so here's a range note is the equivalent
of the map function in the Arduino language.
So with the range note, we can take input of one range that belongs to one range and convert it to
output that belongs in another target range.
Like that coin to rewire, my fellow.
And a input to the range note comes from the slider, then a slider will convert it to will convert
the input to the appropriate range and then pass it on to the cage, which it's OK, deploy.
And now let's have a look.
All right.
Much better.
Now the cases are able to show the appropriate range of the value that is coming from the Slater.
The only thing that doesn't look very good, of course, is the number itself, we can see that in some
cases we've got way too many decimals to make them fit.
So let's fix that back in the Range A. We can click on this button to round the results to the nearest
integer and to redeploy into now.
We've got a much better result.
One last thing, let's say that you wanted to put this lighter down the bottom of this stack, so instead
of having this lighter at the top of the group, we'll put it in the bottom of the group.
So to do that, we're going to type two and edit the layout.
And you can see that the slider is already down the bottom, maybe see if I can force it like this.
And see if that makes it any better.
This is what I said, that we need to actually sometimes experiment with locations of the various components
that make up a dashboard.
And by adding a gap between the bottom row of the widgets and the slider, the slider now appears down
the bottom.
Right now, let's move on to the next lecture.
We'll show you how to use the switch.