[Tutorial] How To Display Battery % As A Circle

Watchface Design
1

For the life of me I cannot find out how to make the battery appear in a circle and the circle slowly dwindles down around the circumference as the battery drains.

2

Hey Butters hopefully I can offer you some ideas…

I used PNG images as the parts of the circle to do what I think you’re describing. My battery “circle” is the full circle with 100% at 6:00. The circle diminishes clockwise to zero battery back at the 6:00 mark. I suppose you can do this several ways but I did it at 100%, 50%, and 25% because I wanted different colors. My strong battery is blue from 100% to 50%. Then turns yellow at 49% to 25%. Then turns red at 24% to 0.

100% to 50%: For this I used left half-circle and right half-circle images. The right half-circle is fixed in place on the watch. The left half-circle rotates clockwise with the battery level like this: (360-(#PBN# * 3.6)). BOTH images lose their transparency and disappear when the battery drops below 50% like this: ($#PBN#<50?0:100$). Basically the left half circle hides behind the right half circle as it moves clockwise.

49% to 25%: For this I used bottom quarter-circle and top quarter-circle images on the right side of the whole circle. The bottom quarter-circle is fixed in place on the watch. The top quarter-circle rotates clockwise with the battery level like this with 180-degree offset: (180-(#PBN# * 3.6)). BOTH images only appear with 100% transparency when the battery is between 49% and 25% like this: ($#PBN#>24&&#PBN#<50?100:0$). Again, the top quarter circle hides behind the bottom quarter circle as the top moves.

Lastly, I’m also using quarter circles for the last 25% but one of them (the left one) is white and matches the background. The right one is simply the bottom right corner of the circle. As with the yellow, the bottom right quarter turns clockwise hiding itself behind a slice of the white background with this: (90-(#PBN# * 3.6)). Again, the two pieces don’t show until the battery is 25% or below: ($#PBN#<26?100:0$)

I built you a small example:

Click and hold down the Turbo button and watch the level drain all the way down to zero and you’ll see what I mean.

HTH,
John

3 Likes
3

Thank you so much John this was a huge help.

4

no problem, man. Hope it works out

5

Hi John, is it possible to release your watch for inspection?

Thank you very much

6

hi Alemao,
I’ll throw some digital time on the face and the dim and publish it with inspection on. It will take a few days to appear live. Next week do a facer search for “MbM” and all of my watches will come up. You should see the battery wheel in the line up once it is live.

Please hold… {music on hold]

1 Like
7

Thanks John,

It’s already okay :+1:

8

check out my face

1 Like
9

link doesn’t work

10

Hey @HellionTRD,
yeah that was almost a year ago. here’s the actual watch face with inspection mode on. The battery indicator in this topic is in the left dial.

Thanks,
John

1 Like