Battery indicator on X-axis

Hello!

I am trying to get a object moving on x-axis to indicate battery level, but I have searced here on the community, but these I have tried, they don’t work on x-axis.
So now I wonder if someone have an idea have to solve this?

3 Likes

Welcome to the community- it’s the best place to e and everybody is helpful. Could you not just use a horizontal progress bar and #BLN# ?

3 Likes

Also, welcome. I’ve done an expression template with a variety of battery indicator types here: Template for basic, beginner expressions
Should give you a few sample expressions.

2 Likes

Here is what I would do to move an image from left (0) to right (100) on your display .

(start position in pixels+((#BLN#)/100)*distance image is to travel in pixels))

(80+((#BLN#)/100)*120)

2 Likes

What about using this (80+((#BLN#)/100)*120) with the 3 (Green, Yellow, Red) or 4 (Green, Yellow, Orange, Red) colors battery level? And making 3 or 4 different objects switch to the right color with given code?

3 Likes

If you have 3 or 4 different colour shapes you would be best to switch them on and of with Opacity But you could move a mask over them . You mat want to step it . Some more Data and Images would be usefull to help understand the Task .

2 Likes

In the expressions template there are 2 examples of this with the phone battery.
The rectangle bar in the phone icon just uses 3 on/off colours that flip over at specific levels via opacity.
The right hand arc uses a more complex set of opacity expressions to fade the colour throughout progress. It’s just a case of playing with the numbers until it looks right for you.
The other expressions (fill, height, or X/Y) would be the same for all, just the opacity based on battery level.

2 Likes

There is also a great tutorial here where you van make a gradient as an image and have reverse battery fill so you hide less of the gradient the fuller the battery is ([width]-(#BLN#/100*[width]):
Gradient battery progress bar tutorial.
You probably also want to rotate your shape 180° to reverse the fill direction.

2 Likes

Here is a test setup to give you the idea. Of course you can use battery level instead of heart rate in the same way.

3 Likes

Hello!

Thank you for all suggestions!

I used this formula for moving the battery indicator from right to left and placed this in X Position Field:
(End Position+((#BLN#)/100)*Start Position-End Position)

Thank you again!

3 Likes