Coloring an image based on state

[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;
                      }