How do you get conditional colors on the Range Info bar

[joazito]

In the readme it says "Progress Color: Customize the color of the progress bar to better indicate the status (e.g., green for sufficient range, red for low range)." But how do you do that?

[ngocjohn]

Hi @joazito, there is a misinterpretation in the readme. 😄 The plan was to have dynamic colors. In the end there was only one color to choose from, I'll fix the readme.

[ngocjohn]

Hi @joazito Color template for progress bar is available in the latest, still beta version v1.8.2-beta.2 https://github.com/ngocjohn/vehicle-status-card/releases/tag/v1.8.2-beta.2

[liveware-problems]

Might seem like a daft question, but can you give an example of how the template should be formatted please?

I have various colour templates for things like gauges and bars, but none of them seem to get picked up here

- from: 0 color: '#80C994' - from: 50 color: '#8CCA8F' - from: 100 color: '#98CB8A'

- color: '#FF453A' from: 0 to: 5 - color: '#FE5335' from: 5 to: 10 - color: '#FE6230' from: 10 to: 15 - color: '#FE702B' from: 15 to: 20

[ngocjohn]

Hi @liveware-problems, templates use Jinja with HA, you can test directly in template editor via developer tools.. for example color based on battery level sensor..

{% set battery_level = states('sensor.battery_level') | float %}
{% if battery_level >= 50 %}
  green
{% elif battery_level >= 30 and battery_level <= 50 %}
  yellow
{% else %}
  red
{% endif %}

[liveware-problems]

Thanks for the swift reply!

Got it sorted now with a nice gradient:

If anyone ends up here, this is the code I've used:

{% set state = states.sensor.tess_battery_level.state | int %}
    {% if state == 'unknown' %} #C7C7C7
    {% elif 0 <= state < 5 %} #FF453A
    {% elif 5 <= state < 10 %} #FE5335
    {% elif 10 <= state < 15 %} #FE6230
    {% elif 15 <= state < 20 %} #FE702B
    {% elif 20 <= state < 25 %} #FE7F26
    {% elif 25 <= state < 30 %} #FE8E21
    {% elif 30 <= state < 35 %} #FE9C1C
    {% elif 35 <= state < 40 %} #FEAB17
    {% elif 40 <= state < 45 %} #FEB912
    {% elif 45 <= state < 50 %} #FEC80D
    {% elif 50 <= state < 55 %} #FED709
    {% elif 55 <= state < 60 %} #EBD10F
    {% elif 60 <= state < 65 %} #D8CC15
    {% elif 65 <= state < 70 %} #C6C61B
    {% elif 70 <= state < 75 %} #B3C121
    {% elif 75 <= state < 80 %} #A1BB28
    {% elif 80 <= state < 85 %} #8EB62E
    {% elif 85 <= state < 90 %} #7BB034
    {% elif 90 <= state < 95 %} #69AB3A
    {% elif 95 <= state < 100 %} #56A540
    {% else %} #44A047
    {% endif %};

[liveware-problems]

oh and meant to say - great card by the way! Many thanks for that too 🥇

[snooty83]

Hello
I've installed version 1.10.0.
The gradient doesn't seem to be working. I used the template above. Any ideas?

{% set state = states.sensor.tess_battery_level.state | int %}
{% if state == 'sensor.iron_man_battery_2' %} #C7C7C7
{% elif 0 <= state < 5 %} #FF453A
{% elif 5 <= state < 10 %} #FE5335
{% elif 10 <= state < 15 %} #FE6230
{% elif 15 <= state < 20 %} #FE702B
{% elif 20 <= state < 25 %} #FE7F26
{% elif 25 <= state < 30 %} #FE8E21
{% elif 30 <= state < 35 %} #FE9C1C
{% elif 35 <= state < 40 %} #FEAB17
{% elif 40 <= state < 45 %} #FEB912
{% elif 45 <= state < 50 %} #FEC80D
{% elif 50 <= state < 55 %} #FED709
{% elif 55 <= state < 60 %} #EBD10F
{% elif 60 <= state < 65 %} #D8CC15
{% elif 65 <= state < 70 %} #C6C61B
{% elif 70 <= state < 75 %} #B3C121
{% elif 75 <= state < 80 %} #A1BB28
{% elif 80 <= state < 85 %} #8EB62E
{% elif 85 <= state < 90 %} #7BB034
{% elif 90 <= state < 95 %} #69AB3A
{% elif 95 <= state < 100 %} #56A540
{% else %} #44A047
{% endif %};

Regards, Dani

[liveware-problems]

You need to change the first line to your vehicle's battery sensor, i.e.

{% set state = states.sensor.iron_man_battery_2.state | int %}

Leave the second line as =='unknown' as that gives it a specific colour when the battery level isn't numeric.

[snooty83]

Ah, completely overlooked. Thanks for the help.
Regards, Dani

[becstas]

Hi I just started using this card and really like it, I am trying to set up the colours for the range bar.

It works if I put in this code
{% set battery_level = states('sensor.ev5_car_battery_level') | float %}
{% if battery_level >= 50 %}
green
{% elif battery_level >= 30 and battery_level <= 50 %}
yellow
{% else %}
red
{% endif %}

but if I use this code it doesnt work and defaults to the Progress color. My battery is at 76.5% so the colour should be #A1BB28 which is a yellowish green colour but it is displaying as #FE6230. Not sure what I am doing wrong as it works for the other code.
{% set state = states.sensor.ev5_car_battery_level |int %}
{% if state == 'unknown' %} #C7C7C7
{% elif 0 <= state < 5 %} #FF453A
{% elif 5 <= state < 10 %} #FE5335
{% elif 10 <= state < 15 %} #FE6230
{% elif 15 <= state < 20 %} #FE702B
{% elif 20 <= state < 25 %} #FE7F26
{% elif 25 <= state < 30 %} #FE8E21
{% elif 30 <= state < 35 %} #FE9C1C
{% elif 35 <= state < 40 %} #FEAB17
{% elif 40 <= state < 45 %} #FEB912
{% elif 45 <= state < 50 %} #FEC80D
{% elif 50 <= state < 55 %} #FED709
{% elif 55 <= state < 60 %} #EBD10F
{% elif 60 <= state < 65 %} #D8CC15
{% elif 65 <= state < 70 %} #C6C61B
{% elif 70 <= state < 75 %} #B3C121
{% elif 75 <= state < 80 %} #A1BB28
{% elif 80 <= state < 85 %} #8EB62E
{% elif 85 <= state < 90 %} #7BB034
{% elif 90 <= state < 95 %} #69AB3A
{% elif 95 <= state < 100 %} #56A540
{% else %} #44A047
{% endif %};

Thanks and great work with the card.

[becstas]

Fantastic thanks for the quick response and great work.

[liveware-problems]

You're missing .state at the end of your battery entity definition, so it should be

states.sensor.ev5_car_battery_level.state

[becstas]

Thanks. I added the .state but it still isn't working.

[ngocjohn]

because the state is float value.

 states('sensor.ev5_car_battery_level') | float

[becstas]

I don't know what that means.