Color 1/8 battery progress bar

Good Morning at all

I would like to color my battery progress bar.
My problem is that I only use 1/8 of the progress bar!
Here is the formula: ((#BLN#/100)*0.120)

I want this 1/8 according to this principle ((#BLN#2-100)(#BLN#>49)) for green and for yellow (100-(50-#BLN#)2(#BLN #<50)) colorize.
I’ve tried a few things to change the formula and I’ve always failed…
Who can help me to solve my problem?
Thanks in advance…

2 Likes

my solution for the same problem was fixed using graphics not code as thats my speciality. Simply by putting repeated images into the extra slots for battery it changes from green to yellow to red as a star fish, or you could change the color of image slighly using Photo Editor : Pixlr X - free image editing online and the vibrance and saturation in color options to make it blend between.
Linked below and is open for inspection. I hope this is what you were talking about.

1 Like

Not sure it is possible with a progress bar, especially if you want different colors. I came up doing 5 circles for my watch face with the formulas (color brightness calculated in opacity) :
red: $#BLN#>=2?(#BLN#*5):0$
orange: $#BLN#>=20?(#BLN#*2.5):0$
orange: $#BLN#>=40?(#BLN#*1.66):0$
light green: $#BLN#>=60?(#BLN#*1.25):0$
green: $#BLN#>=2?(#BLN#*5):0$

But there is also an example @russellcresser made available that can be inspected here.

3 Likes

Morning @daredevill
All you need to do is set the right values in the Opacity box, you already have the correct sizing in the Fill Ratio box.
For 50-100% you can use $#BLN#>50&&#BLN#<=100?100:0$
10-50% would be $#BLN#>10&&#BLN#<=50?100:0$
And the Red, 0-10% is then $#BLN#>0&&#BLN#<=10?100:0$
The last 100 figure is the actual brightness/opacity.
Just change the first and second numbers to the value range you want, where the first number is the start point and the second the end. I’ve used it for 5 different colours before.
Opening your Face with Inspection on (thanks), and put the top 3 Tags into the Opacity box and it worked just fine for Battery Levels to show Red between 0=10%, Yellow between 10-50%, and Green between 50-100%.
Different Opacity for different colours, which there’s an example of here where only 2 colours are used -

3 Likes

Thank you for your help and suggestions.
I’ve taken pictures now.
I don’t like the coloring yet, I still have to tinker around a bit.

3 Likes

You will see the Third battery down in this test has colour Morphing. This code was gifted to the Community by @petruuccios.

1 Like

It could also be done with some layers. If you look at it inversely, starting with battery level at zero and going up, the bottom layer could be red, with a yellow layer above, starting out transparent and moving up to opaque. That would change the color from red to yellow through orange. Above that a green layer that starts becoming opaque when the yellow is, which then changes the color through various shades of green.
If anyone is interested I can make an example.

1 Like

See test above :slightly_smiling_face:

I’d like to “steal” the idea with the emoji if the opportunity arises, if that’s okay.
I think that’s great.

1 Like

Not my Idea . Could do with more than just two . But the Structure is there to do anything like that . I have lifted the cat emojis of my Phone but the Animated ones are sweet . I look forward to seeing you patch that in to your current Styling . :slightly_smiling_face: :rofl: :+1: