Battery Icons for Phone?

I made my first post the other day and was amazed at how helpful the replies were, I have now learned a lot about tags so I appreciate that help, however, now I find myself with a new confusion that after searching for a few hours I still cannot find the answer to.

The similar topic suggestion mentioned this thread: Phone battery icons which is actually what I’m looking for an answer to but this was made over 2 years ago and since using Facer I have seen a bar that changes based on percentage being used so I ask:

Is it possible to use the battery icons element to create a bar for the phone instead of the watch itself? I am currently trying to figure this out but with no luck but as I mentioned I have seen it done and would like to replicate it. Any help would be amazing.


I quite often use different battery gauges, and here’s a blank/see through battery for you to practice with. Just use the Progress Bar in the Creator for setting different levels: I’m showing you an easy example with Inspection On as well ok.

In this other Face you can see how I used the Battery Progress Bars with different colours for different levels -


Simply use (#PBN#/100) for the Fill Ratio for the Phone Battery, and $#PBN#>75&&#PBN#<=100?60:0$ for the different Opacity settings, where 75 is the from level and 100 is the to, 75-100%, and just change them for different levels, such as $#PBN#>50&&#PBN#<=75?60:0$ which is 50-75%. The 60 near the end is the actual Opacity/brightness, so raise it if you want the colour to stand out more.
Hope all this makes sense and helps :smiley:


So the issue is I don’t want to use transparency as I’ve created a bar already on one side of the design for the watch itself and want to have a matching one on the other hence I wanted to use battery icons element as that’s how I did the first.

This is waht I’m working with


and I have multiple images for each of the battery stages

I have Bookmarked this tutorial. Thanks to you Both .

1 Like

Try using your Formula/Tags in the Height or Width sizes then, and it’ll be PBN for Phone, instead of BLN, which is for Watch.
I always use the Opacity as it’s quick, precise, and simple.

1 Like

If you make the frame with transparent centre, you do not need to use any other pictures.
Just put progress bar underneath and it will fill the frame exactly (#PBN#/100).


Exactly as I explained in my first message petruuccios, it’s so much easier doing it that way isn’t it (and I’m still a relative noob here :joy:)

1 Like

Such a shame we cannot Change colours of Stuff with RGB values. We would have loads more Phycadelic Faces.

1 Like

Hell yes :smiley: One for the Feature Requests Category maybe… :thinking:


Maybe because I’m so new to this but you lost me entirely.

The effect I’m trying to do is Like so:


So the full bar I posted would be 100% and as the battery goes down the green line shortens rather than becomes transparent if that makes sense?

So how exactly does that work with transparency and what element on the face creator do I use?
Tags are still new to me so reading your reply was like trying to read Chinese, my issue, not you explanation lol I was just wondering if you could explain it again but a little more dumbed down and step by step? If not I’ll keep at it and try to figure it out but right now I’m lost and it’s frustrating as it’s the last element to finishing the watch face I’ve been working on >.<

1 Like

You obviously know how to move the Progress bar or may be not. As mentioned (#BPN#/100) will scale the progress bar exactly to the Phones Battery Reserve. That would be entered in the Progress Barr Fill Tag. The other formulas would be entered in the Opacity Tag to vary the colour of the bar if you wanted to do that. You will have to look more carefully at that it is not so easy. Once you have mastered these you have some very valuable lessons learnt. Take on step at a time.
Be aware that Phone Battery Reserve is not reported on every watch.

With all my respect to my colleagues …With the aid :slightly_smiling_face:

I now thought, to help @bigzombiemonkey in this way …
With the website that has, with the explanation of the different ways that the batteries can be designed
Step by Step…

In the case of @bigzombiemonkey … using the command BPN (Phone Battery Information) … instead of BLN (Clock Battery Information) …

Hello good afternoon @bigzombiemonkey

Then I also show you a website that Facer has. which is very interesting and step by step, as you need it to be.

I don’t know, if you looked at these pages, or not …
but, just in case, I show it to you so you have an idea …
step by step as you want …
Very interesting …
Animated battery power level indicator :point_left:

Example :point_left:

Also look at these pages that will help you a lot … with all kinds of programming …

Facer Creator help :point_left:

Hope I can have helped with your question …

Cordially JDCardozo


I have figured it out now thanks to all of your help. I ended up making 3 layers and following the guide from cardozo198013 and now it is working perfectly, so much so I will be doing the same for my watch battery meter too.

I cannot thank you all enough for your patience :slight_smile:


I’m glad we were able to help you :slightly_smiling_face: :+1:

Welcome to the group !!!

Cordially JDCardozo