# Create a dot moving on 360 degrees circle

How do I create a color big DOT moving on the top of a circle line?
I wanna use it like a progress bar how it moves when the battery is charging and discharging.
So I want that dot to move in circle on the top of a progress bar 360 degrees when the battery is charging and discharging.
Thank you.

There are 2 methods.

1. use a small circle shape then tag it with the tag [BATT] and using correct sin formula which @Peter can guide u

2. first a circular progress bar (set value to 100%). Then place a circle shape on top of the bar.
adjust pivot so that is the same as progress bar pivot or roughly the middle of selector square of the progress bar. Then use ([BATT] x 3.6) on angle tag

1 Like

If you mean something like this

It can be made using two progress bars stacked above each other on same placement.
One is thin and the value (fill ratio) is set like 0+[BAT_PER]
The other is thick and its value is fixed to 0.1 and its background has 0% opacity, so it actually forms a thick dot. Its rotation is set like 0+[BAT_PER]*3.6

2 Likes

@Peter Wow easier then i explain what a â€śhackâ€ť

So you mean the dot is actually a circle with no background with a tick dot. And u are rotating the whole progress bar?

1 Like

Remove the .zip from the file name and open it in WFS to see.
ProgressDot.wfs.zip (164.6 KB)

2 Likes

thanks Peter, YES SIMILAR, BUT ONLY THE DOT MOVES ON THE TOP OF THE BAR.
and the bar stays as is.
Especially if I have 90 degrees bar RANGE.
Means the bar stays as is without shortening it.

the design creation is been done perfect of ur idea. Thank you.

I want the DOT to move on the top of the progress bar, when discharging and charging the battery if the progress bar is 90 degrees RANGE.

I just want the top picture like that.
NOT the bottomâ€¦ The dot is going out of range.

And can I be able to replace The DOT with a PICTURE of my design Dot instead of progress bar Dot?

Thank you

For bar to stay as is itâ€¦do not have any tag on the non
Movable bar. Add set value to fixed 100.

If you want to replace dot with your own picture then follow my first reply. Make a dot then adjust pivot to center of first progress bar, then tag the angle to the same formula.

Or easier make a exact same progress bar circle image with photoshop then add your dot at the 0 degree point.

Then import that image to wfs. Then rotate with angle tag

E.g abait ugly but will show you what i mean

Rotate this according to batt per

1 Like

Thank you Knightwing.
but the dot for any picture of ur idea(worked) or the top 2nd picture at the top, the DOT is out the progress bar.
when we do a battery charging more than 25% it goes off the progress bar.
how do we fix that please?
Thank you

Design your pic and adjust pivot according. The pivot not accurate

Position.

Which want u using a pre draw circle with dotâ€¦or just a dot then make it rotate around the progress bar.

Its simpler to predraw with photoshopâ€¦as the whole bar will rotate and nothing will go out because the dot is stuck to the â€śbarâ€ť

1 Like

Hi, think as a hand but looks like just a dot. Or a index but with a circle and your dot instead of numbers

My â€śdotsâ€ť use as clock handsâ€¦ the blue, red cyan â€śtrianaglesâ€ť

2 Likes

Just look at the second picture from the top i uploaded.
I draw my own dot already as a picture. Aal pivots are centered like the progress bar . Same #.
But keeps coming off at the end when its more than 25%. Charging battery.
Thank you

@lebanoncedars i now understand your question u want only 90degree range? Not 360 as ur question.

So i delete my two orignal reply and give you the solution accordingly

The tag for the â€śdotâ€ť should be

( [BATT_PER]*0.9))for 90 degree range

not (BATT_PER]*3.6) this if for 360

You dot should be place at the top (zero degrees of bar) with pivot same as bar

2 Likes

See what you wrote in your topic header? â€śa dot moving on 360 degrees circleâ€ť
I gave you example for the dot, the â€śfirstâ€ť bar in my example was just for illustration, make your own as you like (thin, thick, empty or what). To shorten the rotation of the dot to 90Â° just add /4 to my formula and ad multiple +90 depending which quadrant you want it to rotate in.

3 Likes

Thank you Knightwing, it worked perfect.
Thank you so much.

Thank you Peter so much. it worked perfectlyâ€¦
Sorry for troubling you.
Thanks again, I really appreciated it.
AK

I like your Watch face design. Maybe I will create one like yours.
But I think I missing something!

How did you mange to color FRI (Days of the week)as yellow, and the rest of the week as WHITE COLOR?
Thank you

I use a rec as a maskâ€¦and adjust pivot of the mask to center ,Then the mask rotates base on day

1 Like

Aw okâ€¦ thatâ€™s niceâ€¦
I wish I can have a zip file for that.
Or more details.
Thank you Knightwing so much.