Coloring an image based on state

Configuration
21

Now, test using template to set background-color:

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='{0,255,0}'.replace('{','').replace('}',''); 
            if (states['light.extended_color_light_4'].state == 'on') 'rgba('+light_rgb+',1)'; 
            else 'rgba(0,0,0,0)';}

If that works, background color will be green when light is on.

22

Yep, that works too.

23

Yes, the hue-rotate would work with a static color for each defined state.
Here, we are try to match the color of an RGB light with a wide range of colors.

24

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.

25

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

emptycard
emptycard976×467 13.4 KB

26

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

27

blue

28

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

29

blue

30

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)';}
31

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

32

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

33

blue
blue895×542 32.8 KB

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

34

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

35 
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… :slight_smile:

36

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.

37

no change…

38

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

39

Same result…

40

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.