Use of colors in templates

bk86a · December 8, 2016, 12:24pm

There are many sensors where use of colors to display the state of a value of a sensor comes very handy. Let’s take the waqi - World Air Quality Index for example (http://aqicn.org/). They use 6 levels - in numerical as well as in the color display. The best - values 0 - 50 is associated with green. Then, the worse air pollution is the colors change from green to yellow, amber, red, violet finally to near-brown.
I’ve created a template which apart from displaying the value from waqi sensor also provides me with the name of the level - Good, Moderate, Unhealthy, etc.
I’d like to complement this with colors. So far HASS doesn’t give me this option or at least I couldn’t find any documentation that mention this feature.

Does this sound like a good proposal?

ih8gates · December 8, 2016, 12:26pm

I support this (couldn’t get a vote to work).

It’d be great if the various ways to define color (rgb_color, xy_color) accepted a template.

dennisaion · December 9, 2016, 4:43pm

Could you share the code?

ih8gates · December 9, 2016, 4:51pm

the code for what?

I’m suggesting that rgb_color and xy_color support templates so that you could do something like:

rgb_color: {% if //test if temperature is cold// %}[0,0,255]{% else %}[0,255,0]{% endif %}

So the light would be blue if it’s cold out, green if it’s not. That’s an oversimplification, but the basic idea.

dennisaion · December 9, 2016, 5:34pm

The code of the template you created. I created this template

{%- if states.sensor.waqi_XXXXXX.state | float < 51 %}
Good
{% elif states.sensor.waqi_XXXXXX.state | float < 101 %}
Moderate
{% elif states.sensor.waqi_XXXXXX.state | float < 151 %}
Unhealthy for Sensitive Groups
{% elif states.sensor.waqi_XXXXXX.state | float < 201 %}
Unhealthy
{% elif states.sensor.waqi_XXXXXX.state | float < 301 %}
Very unhealthy
{% elif states.sensor.waqi_XXXXXX.state | float > 300 %}
Hazardous
{% else %}
Unknown
{%- endif %}

thefrenchmatt · December 9, 2016, 5:57pm

Couldn’t either -_-’

I agree that a RGB list feels consistent, but if a dev finds a way, then a few basic values for color_name would be nice to have as well. Maybe a filter is the best route to inject this in the same block…

Although I feel this request may also have more to do with the UI, like is it available there and not included? or does it need to be implemented into templating?

dennisaion · December 10, 2016, 4:39pm

Hey guys. Did waqi stop working for you also?

ih8gates · December 10, 2016, 5:33pm

Wrong thread?

dennisaion · December 10, 2016, 7:16pm

Not really. Since bk86a is also using waqi component I was wondering if his stopped working as well.

ih8gates · December 10, 2016, 7:40pm

Um, right. So wrong thread. Let’s try to keep on topic. PM him if you’d like.

bk86a · December 11, 2016, 10:44pm

I have something like that:

- platform: template
  sensors:
    air_pollution:
      value_template: >-
        {%- if (states.sensor.waqi_brussels.attributes.particle > 0) and (states.sensor.waqi_brussels.attributes.particle <= 50) -%}
          Good ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- elif (states.sensor.waqi_brussels.attributes.particle > 50) and (states.sensor.waqi_brussels.attributes.particle <= 100) -%}
          Moderate ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- elif (states.sensor.waqi_brussels.attributes.particle > 100) and (states.sensor.waqi_brussels.attributes.particle <= 150) -%}
          Unhealthy for Sensitive Groups ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- elif (states.sensor.waqi_brussels.attributes.particle > 150) and (states.sensor.waqi_brussels.attributes.particle <= 200) -%}
          Unhealthy ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- elif (states.sensor.waqi_brussels.attributes.particle > 200) and (states.sensor.waqi_brussels.attributes.particle <= 300) -%}
          Very Unhealthy ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- elif states.sensor.waqi_brussels.attributes.particle > 300 -%}
          Hazardous ({{ states.sensor.waqi_brussels.attributes.particle }})
        {%- else -%}
          undef
        {%- endif -%}
      friendly_name: 'Air pollution'

dennisaion · December 22, 2016, 1:38pm

It should be an easy fix for a dev to include icon color change really.

I have now for a lack of better option setup automation to change a dedicated bulb’s color based on state of sensor.

Once the milight hub is supported I will use that one as the AQI visual indictaor.

ih8gates · December 22, 2016, 1:48pm

Can you share that automation? It’s my understanding that you can’t yet use templates for colors. Whether or not the icon changes.

I use a milight (older hub) to show the temp for the day with color. My workaround was to use a script. Since a script will fail out when it hits a condition that’s false, I start colors for cold and work my way up until the script stops based on a condition that references the temp. It’d be a lot cleaner with a single rbg_color using a template.

  script:
    weatherlight:
      alias: Weather Light
      sequence:
        - service: light.turn_on
          entity_id: light.office_rgbw
          data: 
            #brightness: 255
            rgb_color: [168,108,255] 
        - condition: numeric_state
          entity_id: light.livingroom_accent_level_35_0
          value_template: '{{ states.sensor.dark_sky_daily_high_apparent_temperature.state | float }}'
          above: 32
        - delay:
            seconds: 1
            
        - service: light.turn_on
          entity_id: light.office_rgbw
          data: 
            brightness: 255
            rgb_color: [192,255,239] 
        - condition: numeric_state
          entity_id: light.livingroom_accent_level_35_0
          value_template: '{{ states.sensor.dark_sky_daily_high_apparent_temperature.state | float }}'
          above: 55
        - delay:
            seconds: 1
            
        - service: light.turn_on
          entity_id: light.office_rgbw
          data:
            brightness: 255
            rgb_color: [229,255,193] 
        - condition: numeric_state
          entity_id: light.livingroom_accent_level_35_0
          value_template: '{{ states.sensor.dark_sky_daily_high_apparent_temperature.state | float }}'
          above: 80
        - delay:
            seconds: 1
        
        - service: light.turn_on
          entity_id: light.office_rgbw
          data: 
            brightness: 255
            rgb_color: [255,231,205] 
        - condition: numeric_state
          entity_id: light.livingroom_accent_level_35_0
          value_template: '{{ states.sensor.dark_sky_daily_high_apparent_temperature.state | float }}'
          above: 95
        - delay:
            seconds: 1
        
        - service: light.turn_on
          entity_id: light.office_rgbw
          data: 
            brightness: 255
            rgb_color: [185,13,0]

dennisaion · December 22, 2016, 2:29pm

I also use a spare Milight bulb on the hub.

- alias: "Sensor Light - Green"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Good'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [0, 128, 0]

- alias: "Sensor Light - Yellow"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Moderate'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [255, 255, 0]

- alias: "Sensor Light - Amber"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Unhealthy for Sensitive Groups'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [255, 69, 0]

- alias: "Sensor Light - Red"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Unhealthy'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [255, 0, 0]

- alias: "Sensor Light - Violet"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Very unhealthy'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [238, 130, 238]

- alias: "Sensor Light - Brown"
  trigger:
    platform: state
    entity_id: sensor.waqi_nb
    to: 'Hazardous'
  action:
    service: homeassistant.turn_on
    entity_id: light.waqi
    data:
      brightness: 255
      rgb_color: [165, 42, 42]

that is combination with this

{%- if states.sensor.waqi_XXXXXX.state | float < 51 %}
Good
{% elif states.sensor.waqi_XXXXXX.state | float < 101 %}
Moderate
{% elif states.sensor.waqi_XXXXXX.state | float < 151 %}
Unhealthy for Sensitive Groups
{% elif states.sensor.waqi_XXXXXX.state | float < 201 %}
Unhealthy
{% elif states.sensor.waqi_XXXXXX.state | float < 301 %}
Very unhealthy
{% elif states.sensor.waqi_XXXXXX.state | float > 300 %}
Hazardous
{% else %}
Unknown
{%- endif %}

ih8gates · December 22, 2016, 2:51pm

Ah. I see. You have a separate automation for each. Thanks.

dennisaion · December 22, 2016, 3:31pm

Yeah is better.

tboyce1 · February 3, 2017, 11:40pm

I modified the code to allow specifying data_eval which is a single template that should evaluate to the valid structure for the data option. The downside is you have to specify every data option within it, but the upside is you can use a template for any part of it, including the data keys themselves.

action:
  service: light.turn_on
  entity_id: light.waqi
  data_eval: >
    {
      "brightness": 255,
      "rgb_color":
        {% if is_state('sensor.waqi', 'Good') %}
          [0, 255, 0]
        {% elif ... %}
           ...
        {% endif %}
    }

I’m not sure how likely it would be for a change like this to actually go through though…

https://github.com/tboyce1/home-assistant/commit/180c18f521021f2cc07b26198be9ce278b6b9e80

I made a slightly safer version that expects the template to render to valid JSON rather than using eval(), so maybe it’s more likely to get accepted.

https://github.com/tboyce1/home-assistant/commit/15ed8101495c33ab7788e8d972a55b5c9de4c85f

rpitera · February 4, 2017, 4:14pm

Man, you’re just knocking requests off left and right! My hero!!

milutm · November 27, 2021, 5:03pm

But how to change color of value of sensor.
i mean i have temperature sensor and it show me 21.9 for example.
what i have to do to 21.9 is in orange color?
i want to use template but how?