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.
-
use a small circle shape then tag it with the tag [BATT] and using correct sin formula which @Peter can guide u
-
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.
Nothing is for free you know…heeee…
But try first got trouble i do up the zip file.
Currently busy
1 Like
I gave a try, but no luck. I guess i need help.
Thank you so much.