Battery Percentage using a Circle

Hello there!

My little question is, is it possible to create a circular progress bar for the battery in %.
I’ve looked around haven’t found something usefull.

Do I have to create images for all little steps or is there a easier way for that?

Would love to hear something :slight_smile:

Best regards,
Flo

Hi Flo

New user here, but I think if you import your graphic as a watch hand, then in the drop down menu (where you would normally select Minutes in hours etc, you can use Conditions, and select Battery% there

This works for me :slight_smile:

Thanks for the reply!

I’ve already tested this method.
However I’m not able to create a 360° circle with that :confused:

Max I could get working were a 180° one.

Best regards,
Flo

Ah ok, sorry, maybe I’ve not understood properly. Certainly the sample I tried

Recording|video rotates in the full 360degrees?

Thanks again for the reply!

Maby I’m not that clear what I’m looking for.
If the Battery is full, the circle should be completly full.
Once it loses some %, then it should empty the full circle just like the GIF.

18-08-_2020_13-05-19

Hope that’s more detailed :stuck_out_tongue:

Ah ok, yes understand now. I’ve been thinking about that myself for some time, though haven’t got round to testing.

Would you be able to use the timeline/battery% function and separate this into 2 segments, both for the 180 degrees?

So the first part covers full to 50%, then using a second graphic and masking out the first half? I know this makes sense in my head, whether it makes sense to anyone else however is a different matter.

As I say not tried it yet, but may work. I’m sure someone else will have an easier solution :slight_smile:

Haven’t figured out anything on that sadly…
Would be cool if such a feature would exist :stuck_out_tongue:

Thanks for your help tho :pray:

Ok, this was annoying me, so persevered, and now works.

Sample enclosed.

Quite basic, and please excuse my graphics, rushed job.

It’s all done in the Timeline Battery % tab. Hope this helps.

Video and GWD below so you can see how I did it

2 Likes

That’s what I’ve looked for!

Thank you so much… thanks for your effort :heart_eyes:

When I tried to load the .GWD file I received this error:

Could it be because I’m using v1.6.2? Is there any way that you can upload compatible .GWD file?

Thanks,
Ken

That is probably the problem 1.6.x is not compatible with newer GWD/GWS file formats. I may be wrong but I don’t remember 1.6.1 having a battery level timeline.

Ron
Samsung Developer Program

You do great job man, I know the theory but confuse to execute :sweat_smile:
thank you

1 Like

I made an example in my 1.6.2, just rename it to .gwdBat162.zip (71.9 KB)

1 Like

There is a way to get it to work.

The basic of it is that you’re gonna have four images, and a custom watch hand.

First off, make an image of a circle, using paint (or you can use the one included with GWS, though it is low quality, imo). This is gonna cover your whole thing. You can, alternatively, make an image with a circle, and a ring concentric to it, with a gap where the actual bar will be displayed. Don’t forget to add an alpha channel and transparency to the part which is not gonna be the background color: the outside of the ring, and the space between the ring and the cover Circle.

Now, you’re gonna need four images, one of a quarter circle, two of a half circle and one of a three-quarter circle (ALL THE SAME SIZE, PREFFERABLY FROM THE SAME SOURCE CIRCLE) {I do these On MSpaint, firstly I make a circle, and a square with the radius of the circle and hide a quarter of it, then save it as an image1; then I make another square and hide another quarter, and save as image2, then another square and hide another quarter, and save as image3, then import them to Gimp, and add transparency to all of them, before importing to GWS}

Now, make a hand from the image3, the quarter circle, {or make one with a third of a circle, to have less problems with clipping}.

After all of that, you need to put them all in the same center. Just select all of them, and Ctrl+E. Move them to the desired location. Now, the order, from top to bottom should be: cover, hand, image3, image2, image1. Then, sync the hand with the [ba] variable. Now, go to image3’s properties, and on Opacity, add the following expression: 100*([ba]>=30); on image2’s opacity, add 100*([ba]>=60)"and on image1’s opacity, add 100*([ba])>=90. This will make them completely transparent until the hand has passed them completely. Now, for the last half circle image, color it black, and align it with the left side of the indicator, and put it between the top cover and the watch hand.
Add the following expression to the opacity field: 100*([ba]<=40) this should make it transparent when the battery is higher than 40%, just about when the watch hand should completely be out of the cover’s “shadow”. This is supposed to hide the trail of the indicator hand, so that there is only a portion of the hand is visible when the battery percentage is smaller than what the size of the hand would represent. For 90 degrees, that would be 25%, and for 120, 33%.

By the way, here are all of the assets, with transparency: (all 1080x1080px)

Keep in mind, image3 should be a quarter circle on the top right corner, image2 should be a half circle on the right side, and image1 should have a quarter circle missing on the top left corner. Center them all, resize the cover until it properly covers all of the images, and it should work just fine.

If the hand doesn’t work, for some reason, try using the same image, but add [ba]*3.6 on the “rotation” field.