How To Use The Circular Gauge - XMPRO App Designer Toolbox

welcome to another training video from

ex and pro today we will be looking at

circular Gage and how to use it in app

designer so let's jump into it over here

you can see I have already created a

page in my app and to use the circular

gage all you need to do is basically

find it in the toolbox

it's called circular Gage under basic

and you just drag it into the box where

you want it to show so without making

any change we can see but what it looks

like and that's basically what it would

look like as default you can see it has

a range on the outside circle which is

going from 0 to 200 and then you is

pointing to a value currently sitting at

55 now let's say we want to change a few

things here

starting with let's say the title of the

gage so what I can do is that I can

click on my gage go to its properties

and in appearance I have a few options

starting with of course the title which

I can change and perhaps call it else go

next you will see I have options to

change the font both of the title and

the numbers on my range and that is done

over here similar you have options to

change the tick interval maybe I want it

to be just 1 that interval is basically

what you see over here from 0 to 10

there there the step 10 and from 10 to

20 there is another step of 10 so you

can define what size of these individual

steps should be on your range

and then if we go to behavior you will

see it has a range and and we can

specify where it should start and finish

so right now it is starting at zero and

finishing at hundred but we can change

that for example I can change it to be

from zero to ten and the last thing is

the value itself you can see it right

now has a static value of 55 and I can

change that for example to eight just to

demonstrate now if I save it and we just

refresh this bit in place you will see

that we now have a range of zero to ten

the step individual steps are of one and

my current value is at eight of course

the title has also changed now at the

second step let's say we want this gauge

to read a dynamic value from our data

source as you can see currently I

specified in a static value if you want

a dynamic value you have to put it

inside a control which allows a data

source for example a data repeater which

you'll find over here or a box or

similar other controls which have data

source options I have already created a

data repeater here and it has a data

source which is currently pointing to

furnace telemetry that I have configured

in the background now if I drag the

circular gauge into this box and I go to

its value option

and I say that I do not want the static

value but I want a dynamic one by

clicking there you'll see I have all the

columns that are being sent by my dad

and my dad source and I can pick the one

that I want for example health score now

if I save it and refresh it on this side

you will see that the second gauge has

appeared over here it has a range of 0

200 but this time it's reading its value

from the data source which was 80 one

last item to look at is how some values

work as you can see that we are

currently displaying one value on our

range but you can display more than one

values and to do that you click on your

gauge go to its value option and you'll

see there are sub value options I can

add more values for example 5 now when I

will save it you will see there is

another value appearing so that is my

sub value if you want to change the look

and feel of this sub value you can go

under appearance there there's a section

for set values where you can choose what

the sub value indicator should be should

it be a range bar should it be a needle

or a few other options you can also

choose the color it should have and

there's an advanced option of an

indicator offset which basically says

how far away should this be from the

actual range bar so that's how you use a

circular gauge thank you for joining me