I am trying to change the color of an icon on a lovelace card but having trouble configuring it to display a certain color when above/below a number (e.g. below 40 = green, above 40 = yellow, above 50 = red).
This is what I have so far that at least changes the color:
- type: custom:mushroom-template-card
icon: mdi:car
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
entity: sensor.travel
icon_color: |-
{% set state=states('sensor.travel') %}
{% if state | float > 5 %}
green
{% elif state | float > 10 %}
yellow
{% endif %}
secondary: '{{ states(''sensor.travel'')}}'
multiline_secondary: true
primary: Travel Time
I know I need to change this part {% if state | float > 5 %}
I think but not sure how to set for the above.
Thank you.
You need to change the order of your tests. When your template is evaluated it looks at the first statement. If the first statement evaluates to true, then it doesn’t even look at the rest. So if the state is 11, it is greater than 5 so the result will be green.
Check the highest value first and work your way down. Also you should declare a default value so you don’t get errors if sensor.travel is unknown or unavailable for some reason.
{% set state=states('sensor.travel')|float(-1) %}
{% if state > 10 %} yellow
{% elif state > 5 %} green
{% endif %}
Thanks for the prompt reply. How would I include a default value, say, 30? And what does (-1) do?
The |float(-1)
causes states('sensor.travel')
to evaluate to an numerical float value so you can use it in operations where a valid number is required (such as comparing it with another numerical value). The -1 is the default value if states('sensor.travel')
cannot be evaluated as an float number. I chose -1 to indicate an erroneous value.
What do you mean by “default value of 30”? If you want states('sensor.travel')
to equal 30 if it’s state isn’t some another valid number you can change that -1 to 30 and it will do exactly that.
If you mean something else, please clarify. Describe you you want the color template to work.
Edit: I just changed those int to float - I just realized you were working with floats in your template. I just got up, I don’t have enough coffee in me yet ![:crazy_face: :crazy_face:](https://community.home-assistant.io/images/emoji/twitter/crazy_face.png?v=10)
Sorry for not being more clear. I am using this to quickly visualize travel time to work so a good travel number is 30 so I would like that to be the base number the calculation is done from. So anything between 30 and 40 = green, 40 and 50 = yellow and 50+ red.
With this template the result will be green if it is below 40.
{% set state = states('sensor.travel')|float(-1) %}
{% if state >= 50 %} red
{% elif state >= 40 %} yellow
{% else %} green
{% endif %}
With this one the result will be green if it is between 30 and 40 as you described, but there is no default value provided if the state is below 30. I don’t know how the mushroom cards treat icon_color
the template if you don’t provide a default value (the else statement).
{% set state = states('sensor.travel')|float(-1) %}
{% if state >= 50 %} red
{% elif state >= 40 %} yellow
{% elif state >= 30 %} green
{% endif %}
You can always add a default value if necessary.
{% set state = states('sensor.travel')|float(-1) %}
{% if state >= 50 %} red
{% elif state >= 40 %} yellow
{% elif state >= 30 %} green
{% else %} white
{% endif %}
3 Likes
Thank you for such a detailed explanation. It works perfectly!
1 Like