Card that changes color based on temperature

Configuration Frontend
1

FRONTEND
FRONTEND749×184 17.2 KB

I am trying to update my frontend to more clearly alert me if my theater room or garage temperatures go above 90 degrees. I’ve used the conditional card in the past when states change - but I’m struggling to get this to work with my temperature sensor. I think that my issue is that the conditional card is looking for a specific temperature (“75”), but won’t satisfy the condition if it’s 75.2 or 76.

I basically want the card to be visible with white text if the temp is below 90 degrees. If the temp is above 90 degrees, it should be red text.

In short,

2

You can use custom:button-card (HACS).

3

Define a color by card-mod dependently on some entity’s state.
Any card may be used - glance, entities, entity, button.
For details: card-mod thread - 1st post - link at the bottom - chose any card you wish to use

4

I have a “tile card” that displays the temperature of a thermometer.
I set the icon color to orange to make the card stand out.
However, I have created a program to adjust the icon color according to the temperature. The program is correct and the changed card does not report a code error, but the color change does not work and still leaves the icon completely white.
Is there an error in my code or does this type of implementation simply not work?

Card as it is:

image
image760×256 9.64 KB

Programming the color change:

image
image757×468 17.8 KB

5

try 2 things:

  • It’s hard to see, but you have |float(default) (where default is a number) after states() in line 5?
  • Also, remove the % from lines 6,8,10 and 12.
6

Hello.
Yes, I have a default value parameterized.
And removing the % from the lines did not change the result.

type: tile
entity: sensor.termometro_do_quarto_led_temperature
name: Temperatura
color: >-
  {% set temp = states('sensor.termometro_do_quarto_led_temperature') |
  float(29) %} { if temp < 23 }
    blue
  { elif temp >= 23 and temp < 30 }
    green
  { elif temp >= 30 and temp < 33 }
    orange
  { elif temp >= 33 }
    red
  {% endif %}
tap_action:
  action: none
icon_tap_action:
  action: none
features_position: bottom
vertical: false

image
image758×439 17.7 KB

7

All your if elif and end tf statements need to be surrounded with {% and %}. currently only {% endif $} is correct.

type: tile
entity: sensor.termometro_do_quarto_led_temperature
name: Temperatura
color: >-
  {% set temp = states('sensor.termometro_do_quarto_led_temperature') |float(29) %}
  {% if temp < 23 %}
    blue
  {% elif temp >= 23 and temp < 30 %}
    green
  {% elif temp >= 30 and temp < 33 %}
    orange
  {% elif temp >= 33 %}
    red
  {% endif %}
tap_action:
  action: none
icon_tap_action:
  action: none
features_position: bottom
vertical: false

I think you can also simply it a little:

type: tile
entity: sensor.termometro_do_quarto_led_temperature
name: Temperatura
color: >-
  {% set temp = states('sensor.termometro_do_quarto_led_temperature') |float(29) %}
  {% if temp < 23 %}    blue
  {% elif temp < 30 %}  green
  {% elif temp < 33 %}  orange
  {% else %}            red
  {% endif %}
tap_action:
  action: none
icon_tap_action:
  action: none
features_position: bottom
vertical: false
8

The original code had the % symbol in all the decision blocks. But in your first interaction, you suggested that I remove the symbol from the code:

Also, remove the % from lines 6,8,10 and 12.

I did it and it made no difference.

Now I’ve put your entire code here and it didn’t help either, because it’s a copy of my original code.

Note: I’m not using lovelace or any custom card. I’m using a regular “tile card”.

As I said, the code block doesn’t give any errors, but it doesn’t change the color.

image
image780×348 14.3 KB

9

Oh, sorry: I’m on a small screen without my glasses and I misread it thinking the last % in each line was referring to the value as a percentage - so sorry about that.

Perhaps the tile card doesn’t allow templating.

10

Ok. Tanks.

11

Tile does NOT support templates as was said by @jchh