Video Displaying Progress Indicators | Alpha Software

Transcript

in this video we'll show how you can put

circular

progress indicators uh on a ux component

so you can see here we have

two different progress indicators with

slightly different styles so this first

one

basically is using a blue color

for the completed percentage and a

light blue color for the an uncompleted

part

it's showing the percentage complete in

the center

and you can see that the zero point

is set to minus 90 degrees so that's the

zero point that's the

zero degrees that's minus 90 degrees so

it goes from

minus 90 to

uh to this point over here whereas this

uh

control over here starts at uh

minus 180 and

has a label over there and this is

it's both of them are using the same

javascript they just have different

settings objects so if we go

to the first slider over here and we go

to the slide event

we can see that we have a settings

object

and then we have we're calling into this

uh function which generates the progress

chart

it's basically passing in the settings

object

and then passing in the value of the

slider

and then setting the inner html of a div

called dev1

to that html so in order to basically

generate this

settings object there's a genie that

will help you do that

so in order to generate the settings

object you can go to

the interactive window and run this

function

which will open up the builder over here

and the builder lets you set

and test different values so you can see

here we've set the width

of the bar to 40 pixels i'm going to go

here

and change that to say 8 pixels

and then i'm going to just auto advance

the uh

the preview so you can see the preview

is just automatically advancing from

from one color from one setting to the

next setting what you can also do

is make the color of the bar conditional

based on the percentage

so let's stop that and then go to the

color complete

and then insert a sample so we'll go

here and we'll insert the sample so this

says that if the value

is less than 30 then use this color

if it's less than 60 but greater than 30

then use this color otherwise use that

color so let's go ahead now

and run it so we can see now that the

color is changing automatically based on

the value so it's going to go from

green to purple and then

over to red and then we can go ahead

here and turn on the label

which is going to show this label over

there so

we can then go here and press the show

javascript button

and this is going to get us all of the

javascript necessary

to render the um to render the control

what we can also do though is use action

javascript so

i also have an example over here

so let's go over here to this button and

if we look at this button we can see

that it's got

the circular progress indicator and if

we press the edit button

we open up the genie over here where we

can go ahead and set

all of the values then just click okay

so let's go ahead and change our

thickness to 30 pixels

click ok save this and then go to

working preview now and click

set the slider over there and then hit

the button you can see so

actually on the slider i already have an

on change event

that is clicking this button over there

so what we've shown in this video is how

you can create very attractive looking

um progress circular progress indicators

which can be used to display

progress of some event but can also be

used

in dashboards to show the different

values

of certain parameters thanks very much

for watching