Change color of a png file automaticly

Hi guys

I was trying to do an experiment by using a png to show the battery level, so I’ve created a couple of circle shapes and 2 copies of my png, then Im trying to hide a circle and one of the png files when battery level is under 20% by using:

normal circle shape transparency $#BLN#>20?100:0$
and $#BLN#>20?100:100$ in the other circle

the same with the png files. but Im wondering if there is another way to do this, becouse I need to use 4 layers to do it.

I recorded a short video:

These types of dials generally take 3-4 elements to accomplish. In your example I think you could get away with 3 elements.

Top left one moves from 100-50%, then transparency to disappear at <50%. Then bottom element moves behind bottom mask on left.

1 Like

As far as the other color changing element (battery icon). The way you describe it is how to I’d do it. Only other option would be to incorporate the ‘empty’ battery icon directly into whatever the background is. But yours looks like it was build with shape elements.

1 Like

And for short, STILL theres no way to script color changes to a png file (or anyelse one).

Thank you guys, I am gonna put in practice all your advice. Im really having fun designing!