Progress bar color jumped too much

I tried 3 progress bars red yellow and green. it seems that at the BEGINNING ONLY of the yellow and green bars

Screen Shot 2024-02-24 at 12.38.28 PM
jumped too big the colour. I think my code is wrong. any help pls?
Thank you

Sorry, I am not sure I understand what are you trying to make, but if you want the colors to smoothly change from green trough yellow to red as the battery depletes, then try it like I described it in this thread:

Thank you Peter. I know that solution, you did mentioned it once before.
The one i added here is not a fade colors from one to another…
I added one the first color ends, it continues to the nest yellow colors and third color…but i faced a jump at the second and third progress bar at the beginning when the yellow starts or the green starts.
So when the first progress bar finish the full color then starts the yellow… and so on…
but the code worked, but not 100%.
There is a fast jump on the progress bar yellow and green.
Keep repeating my self.
Thank you

So, does it work the way they look in the picture i sent.round in circle 400 degrees all of them?
And i have spaces between the 3 colors.
so this one is different than the one you mentioned.
Just look at the picture I sent.
Thank you

I am sorry, but from the image and brief description of your problem I still can not figure, what are you trying to do and what you expect it to look like.


start value = 0
So 0 + [BATT_PER]-30

start value = 0
So 0 + [BATT_PER]-60

My example is 3 x 90 degrees progress bar
First one 0 to 30% (min = 0 to max = 30)
Second 31% to 60% (min = 0 to max = 30)
Last 61% to 100% (min = 0 to max = 40)

So decided what the percentage range per color zone. So if example 36, 36, 28


First one 0 to 36% (min = 0 to max = 36)
Second 37% to 72% (min = 0 to max = 36)
Last 73% to 100% (min = 0 to max = 28)

p.s you can only have max 360 degrees.

so i suggest that you set the
angular distances like this
first (red) = 129.6
second (yellow) = 129.6
third (green) = 100.8

and for start

first (red) = 0
second (yellow) = 129.6
third (green) = 259.2

and the tags

first (red) = [BATT_PER]
second (yellow) = [BATT_PER]-36
third (green) = [BATT_PER]-72

all with 0+

I think you error is thinking that you are starting from 36% for example in yellow so you 36+
but since is a new progress bar to + 1 from the previous progress bar you just need to do 0+[BATT_PER]-36 as you should think as a new 0 to max value progress bar.

of the next set of values, if that make sense. anyway try my formula

Your ideas are perfect and accurate. thank you Knightwing.
and you got my idea, what I meant.
but I added (2) spaces between each colors. And I realized after the yellow and the green when they started at the beginning the color value was almost double. (Just at the beginning).
no big deal… Thank you again.
Thank you to @Peter too…
no worries…

You must have done something wrong. How did u add the space? Maybe post your file here. Rename it to .zip. the colour value will be what u ask it to be.

Either wrong caculation, it doubled because u did 36 +

To add space just move the bars a distance away. Dont use tags to add space.

-36 not -35

-35 (if 37% will increase by 2 (wrong) instead of 1 (correct)

P.s to explain better

Your orignal picture yellow (value now is 37%)
What should be (value = 1) then slowing become value 36 (full yellow)

So u get red + yellow = 36 + (1 to 36)
Total red + yellow = 72%


Red + yellow = 36 + (36 + (2 to max))

Oh…just thought of this did you change the size of each bar beside setting those values i told u too?

E.g adjust curving? Or dimensions? If u did maybe that why you are seeing double because the bar is “stretched”

To add space u need to add a transparent progress bar and add it to the total degrees to make full circle

Example 110.6 (red) + 19(space) + 110.6(yellow) + 19(space) + 81.8(green) + 19(space)

No tags on the “spaces”


Angular distance
Red (110.6)
Space (19)
Yellow( 110.6)
Green (81.8)
Space (19)

Starting point
Red (0)
Space (110.6)
Green (259.2)
Space (341)

Btw @lebanoncedars


First do a normal 360 degree circle progress bar.

Size it and position it how you want to make it look like it the face.

Then duplicate it another 6 copies.

Then adust the start and angular distance and tags accordingly. Keeping the orignal untouched (this will help you realign the 6 layers)

Without changing the curving, and size

Then drag or use arrow key on each layer. To align the layers to the original circle. As close as possible.

Then delete the orignal.

Anyway adjust accordingly base on how much space you need in between…and dont adjust curving manually

this is my file if you wanna check it out.
Thank you.
Progress bar with (184.4 KB)

Look at the yellow color when it starts at 34% to 35% how much it jumps almost double.
and from 68% to 69% the green starts with double too…
Thank you

Later on, at work now…but be assured if you follow my steps all issues are gone

As i always test out before replying

Try this

Angular distance
Red (110.6)
Space (19)
Yellow( 110.6)
Green (81.8)
Space (19)

Starting point
Red (0)
Space (110.6)
Green (259.2)
Space (341)

Hi i will check your code some caculation might be wrong. Not sure if i can fixed it…but will try

I see the problem

But it for all progress bar its seems it start we a double size for 0 to 1% that why.

As you can see when all progress bar is 1%

Why its like that i do not know

If even let’s say you have the red 32 degrees, and yellow 32 degrees and green 32degrees.
Leave 1 % space between each other.
Still does the jump. When the colors started. And you will have double in colors.
Thank you.

@lebanoncedars think even u had a 360 normal progress bar you would notice double at the start (can test?)

  1. If this is doesnt double at 1% or correct to you

Try angular distances dividable by 34 or make sure when divided by 34 the result is to one decimal place only

Example 3.2 not 3.29

Suppect it due to the progress bar cant divide to 34 parts accurately. (Just a theroy)

Instead of 112 , try 34, 68, 102 or 136 or 108.8 or 112.2

  1. if still double at 1% with a one color 360 progress bar then raise it to Ron

3)Look the red, yellow, green or seem to double jump at 1%

What i saying its not just green and yellow. Red too by the way. Anyway if u haven’t test it by the time i come back from work i will help u.

If u try my advice and change the angular distance accordingly. Then its due to uneven division of the progress bar because 112 cannot be evenly divided by 34

Will explain below why this is happening when the angular distance is not properly dividable


This is the maths behind it.
6.4 (first 1%)+(33*3.2) (the rest) = 112;

The progress bar can only caculate up to 1 decimal place.


112/34 = 3.29411764706

So it will choose to move at multiples of 3.2 instead of 3.29

And 3.2 x 35 = exact 112.

Therefore it put the 35th 3.2 into the first percent.

So maybe move 6.4 degree at start 1% then 3.2 degress after wards.

So to solve this and still want to be near 112
Use 108.8 instead or 112.2

Again this just a theory… hope it make sense

P.s very mathical this problem

And my orignal formula use multiples of 3.6

check this one Knightwing, if you can pls.
Thank you.
Progress Bars (184.5 KB)

it seams okay.

First of i think i know what happening the jump is due to cap style u using. For best result use the first cap style. Ignore all my caculation above. If still using the cap style u using now

Change the code a bit

You did [BATT_PER]-33.59? for yellow
And [BATT_PER]-66.59 for green?

Change to this?


(Max should be 33.1)

[BATT_PER]-34.9 (this will add 0.1% for when batt is at 35% and add 1% for when batt is 36% onwards)

(Max should be 33.1)



(this will add 0.1% for when batt is at 69% and add 1% for when batt is 70% onwards)

(Max should be 31.1)

As let l said it will auto remove the 2 decimal place.

Anyway i cant see the actual output now. I looking at raw xml code.

P.s i suggest useing your first wfs file. But change the cap style of each progress bar.

The red one (last cap style)
Tag : [BATT_PER]-0.9
Max: 33.1
(Note only change the tag and max for the first red bar)

Yellow (first cap style)

Green (first cap style)
Max : 32

I think @Knightwing is correct did you try using floor() to avoid rounding up.

Samsung Developer Relations

@r.liechty_SDR i tested it due to cap style. Not the formula.

1 Like