Use sensor value as value for color?

1

Hi all,

I have a sensor template that returns a color value:

    magneet_voordeur_batterijstatus:
      value_template: >-
        {%- if states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 80 %}
           green
        {% elif states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 20 %}
           yellow
        {% elif states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 10 %}
           orange
        {% else %}
           red
        {%- endif %}
      friendly_name: 'magneet voordeur batterijstatus'

This returns nicely green,yellow,orange or red, depending on the battery value of this sensor.

However, when I try the following in a picture element, the battery icon stays white.

      - type: icon
        description: '---VOORDEUR BATTERIJ---'
        entity: sensor.magneet_voordeur_batterijstatus
        icon: mdi:battery
        style:
          color: states('sensor.magneet_voordeur_batterijstatus')
          top: 639px
          left: 104px
          transform: scale(1.5,1.5)

When I replace the line with color: states(‘sensor.magneet_voordeur_batterijstatus’) to color: red or color: green, the icon changes color accordingly.
What is the magic command to pass the template value as a “real color-value” to the color: statement ?

Thanks in advance,
greetings from Belgium,
Kris

2

I don’t know if this works or not but you need to make it a template to even have a chance of making it work.

      - type: icon
        description: '---VOORDEUR BATTERIJ---'
        entity: sensor.magneet_voordeur_batterijstatus
        icon: mdi:battery
        style:
          color: "{{ states('sensor.magneet_voordeur_batterijstatus') }}"
          top: 639px
          left: 104px
          transform: scale(1.5,1.5)
3

Thanks Hellis81,

That also did not work for me.
I solved it with a conditional type.

In my configuration.yaml I now have this:

    magneet_voordeur_batterijstatus:
      value_template: >-
        {%- if states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 80 %}
           high
        {% elif states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 20 %}
           medium
        {% elif states.sensor.lumi_lumi_sensor_magnet_aq2_power.state|int >= 10 %}
           low
        {% else %}
           replace
        {%- endif %}
      friendly_name: 'magneet voordeur batterijstatus'

and in my "picture elements"I have this:

      - type: conditional
        description: '---VOORDEUR BATTERIJ GREEN---'
        conditions:
          - entity: sensor.magneet_voordeur_batterijstatus
            state: high
        elements:
          - type: state-label
            entity: sensor.lumi_lumi_sensor_magnet_aq2_power
            icon: mdi:battery
            style:
              color: rgba(0,255,0,100%)
              top: 639px
              left: 104px
              transform: scale(1,1)
      - type: conditional
        description: '---VOORDEUR BATTERIJ RED---'
        conditions:
          - entity: sensor.magneet_voordeur_batterijstatus
            state: replace
        elements:
          - type: icon
            icon: mdi:battery
            style:
              color: red
              top: 639px
              left: 104px
              transform: scale(2,2)

Final change will be that the “high” and “medium” statusses will not be shown (to have less “clutter” on the dashboard)
“Low” will be shown in orange and small, replace will be shown in red and bigger :slight_smile:
(just a matter of replacing a few things in my code above)

1 Like