Applying color to state-label depending on sensor value

Configuration Frontend
1

Hi All,

I tried a few things (including card_mod) but with no luck.

Here’s a snippet of my code (and test picture):


type: picture-elements
elements:
  - type: state-label
    entity: sensor.sensore_bagno_vasca_temperature
    style:
      left: 15%
      top: 30%
image: https://demo.home-assistant.io/stub_config/floorplan.png

ha
ha711×817 79.2 KB

I’d like the temperature label (in this case 19.6 C) to get a color. E.g.:
Green if between 18 and 22
Red if above 22
Blue if below 18

Any idea?

Thank you
Stefano

2

there is a rather large section on modifying picture-elements card in the Fantastic post in the card-mod thread

did you check that?

3

Either check the fantastic post, or google “picture elements small tutorial” → 1st post → follow smth like “how to style dynamically”

4

I checked the examples and adapted my code. Nevertheless the color does not change and remains black…

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.sync_box
    style:
      top: 32%
      left: 40%
  - type: state-label
    entity: sensor.sensore_bagno_vasca_temperature
    style:
      left: 21%
      top: 31%
    card_mod:
      style: |
        :host {
          color: 
              {% set temp = ('sensor.sensore_bagno_vasca_temperature.state')|float(29) %}
              {% if temp > 20}
                #FF0000
              {% elif temp > 18}
                #00FF00
              {% elif temp < 18}
                #FF0000
              {% else %}
                #0000FF
              {% endif %}
image: https://demo.home-assistant.io/stub_config/floorplan.png
5

Did you try it with just the color to see if your code is incorrect?

    card_mod:
      style: |
        :host {
          color: red;
             }

You are missing a few %

{% if temp > 20 %} is the correct format vs {% if temp > 20}

Something like this :arrow_down:

    card_mod:
      style: |
        :host {
          color: 
              {% set temp = states(config.entity)|int(0) %}
              {% if temp > 20 or temp < 18 %} #FF0000
              {% elif temp > 18 %} #00FF00
              {% else %} #0000FF
              {% endif %}
              }
6

states('sensor.sensore_bagno_vasca_temperature')
Updated: see below a remark of Marius.

7

What an idiot I am

THANKS!!!

1 Like
8

probably a typo, should be

states('sensor.sensore_bagno_vasca_temperature')
1 Like
9

Yes, correct. Mea culpa!