Coloring an image based on state

[JTPublic (JT)]

Now, the complete code:

type: 'custom:config-template-card'
entities: [light.extended_color_light_4]
style: []
card:
  type: picture-elements
  image: /local/floorplan/base.png
  elements:
    - type: image
      entity: light.extended_color_light_4
      state_image:
        "on": /local/floorplan/couch.png
        "off": /local/floorplan/empty.png
        "unavailable": /local/floorplan/empty.png
      style:
        top: 50%
        left: 50%
        width: 100%
        background-color: >-
          ${var light_rgb=states['light.extended_color_light_4'].attributes['rgb_color'].replace('{','').replace('}',''); 
            if (states['light.extended_color_light_4'].state == 'on') 'rgba('+light_rgb+',1)'; 
            else 'rgba(0,0,0,0)';}

If that works, the background color will be your light.extended_color_light_4 color when that’s on.

[Xornop]

That doesn’t work: the card is empty again…

[JTPublic (JT)]

What do you get from {{ state_attr(‘light.extended_color_light_4’,‘rgb_color’) }} in the Template page with the color you set now?

[Xornop]

[JTPublic (JT)]

Ok, what about {{ state_attr(‘light.extended_color_light_4’,‘rgb_color’)[0] }} ?

[Xornop]

@JTPublic

{{ state_attr(‘light.extended_color_light_4’,‘rgb_color’)[0] }}

[JTPublic (JT)]

The attribute is actually a list, not text.

Change the background-color to this:

        background-color: >-
          ${var r=states['light.extended_color_light_4'].attributes['rgb_color'][0];
            var g=states['light.extended_color_light_4'].attributes['rgb_color'][1];
            var b=states['light.extended_color_light_4'].attributes['rgb_color'][2]; 
            if (states['light.extended_color_light_4'].state == 'on') 'rgba('+r+','+g+','+b+',1)'; 
            else 'rgba(0,0,0,0)';}

[Xornop]

YES! some progress! that worked, the background is now the same color as the light.

[JTPublic (JT)]

Would you please share a screenshot to see what it looks like?

[Xornop]

However, the card disappears when i turn off the light.

[JTPublic (JT)]

Would you copy and paste your code here so we can double check it? Screenshot does not show complete set of code.

[Xornop]

type: 'custom:config-template-card'
entities:
  - light.extended_color_light_4
style: []
card:
  type: picture-elements
  image: /local/floorplan/base.png
  elements:
    - type: image
      entity: light.extended_color_light_4
      state_image:
        'on': /local/floorplan/couch.png
        'off': /local/floorplan/empty.png
        unavailable: /local/floorplan/empty.png
      style:
        top: 50%
        left: 50%
        width: 100%
        background-color: >-
          ${var
          r=states['light.extended_color_light_4'].attributes['rgb_color'][0];
            var g=states['light.extended_color_light_4'].attributes['rgb_color'][1];
            var b=states['light.extended_color_light_4'].attributes['rgb_color'][2]; 
            if (states['light.extended_color_light_4'].state == 'on') 'rgba('+r+','+g+','+b+',1)'; 
            else 'rgba(0,0,0,0)';}

I mean… i just copy yours…

[JTPublic (JT)]

I can’t see any difference besides you don’t have quote around unavailable:

"unavailable": /local/floorplan/empty.png

Try adding quote around the word unavailable, just like on and off.

[Xornop]

no change…

[JTPublic (JT)]

Try replacing all the empty.png with couch.png.

[Xornop]

Same result…

[JTPublic (JT)]

Do you see the couch.png when light is off now?
If not, try refresh your browser couple of times, CSS sometimes need force refresh to show up.

[JTPublic (JT)]

For anyone interested, the couch.png was adjusted to not cover the whole base.png and re-positioned using the updated template to accord for undefined rga_color when light is off.

type: 'custom:config-template-card'
entities:
  - light.extended_color_light_4
style: []
card:
  type: picture-elements
  image: /local/floorplan/base.png
  elements:
    - type: image
      entity: light.extended_color_light_4
      state_image:
        'on': /local/floorplan/couch.png
        'off': /local/floorplan/empty.png
        unavailable: /local/floorplan/empty.png
      style:
        . . .
        background-color: >-
          ${if (states['light.extended_color_light_4'].state == 'on') 
             {var r=states['light.extended_color_light_4'].attributes['rgb_color'][0];
              var g=states['light.extended_color_light_4'].attributes['rgb_color'][1];
              var b=states['light.extended_color_light_4'].attributes['rgb_color'][2]; 
              'rgba('+r+','+g+','+b+',1)'; }
            else {'rgba(0,0,0,0)';};}

[Xornop]

Basically it is not possible as of yet to do such filtering.
Filling in an empty image and using that as a light edge works, but does not represent the light properly (since light gets dimmer the farther it travels).

If anyone ever reads this: take a look at https://github.com/bradcrc/color-lite-card
This is exactly what I was looking for, it just lacks support for different white colors.

[Chykan (Andrew)]

SIMPLE AIR COMFORT CARD Colour Change of SVG Image based on state.

Simple Air Comfort card

UPDATE: Flows available to convert numeric temperatures and humidity readings to words are available from here Weather Word Descriptions from Dew Point, Temperature & Tado (Simple Air Comfort Card) Used this sensor to calculate the dewpoint from my Temperature and Humidity Sensors. Available from the below link Dew Point Sensor Calculator Created a flow in node red to convert the numeric dewpoint value to words. The Switch Sorts the Values msg.topic is used as a filter [image] [image] …

 cards:
                - type: picture-elements
                  image: local/overlay.svg
                  card_mod:
                    style: |
                      ha-card {
                         {% if is_state('sensor.text_dewpoint_comfort_living','Dry Cold') %}
                         --ha-card-background: radial-gradient(circle, blue, black, black, blue) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Dry Cool') %}
                         --ha-card-background: radial-gradient(circle, lightblue, black, black, lightblue) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Pleasant') %}
                         --ha-card-background: radial-gradient(circle, lightgreen, black, black, lightgreen) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Comfortable') %}
                         --ha-card-background: radial-gradient(circle, green, black, black, green) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Sticky Humid') %}
                         --ha-card-background: radial-gradient(circle, yellow, black, black, yellow) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Muggy') %}
                         --ha-card-background: radial-gradient(circle, orange, black, black, orange) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Sweltering') %}
                         --ha-card-background: radial-gradient(circle, darkorange, black, black, darkorange) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Stifling') %}
                         --ha-card-background: radial-gradient(circle, red, black, black, red) !important;
                         {% endif %}
                      }
                      ha-card {
                        --ha-card-border-width: 0px !important;
                        --ha-card-border-radius: 5px !important;
                        --box-shadow: none !important;
                      }