Coloring an image based on state

Xornop · February 5, 2021, 3:15pm

I have some rgb lights, and when they turn red for example, I want my picture-element image to turn red (from default white) too. Can this be done, perhaps by css filter?
I had gotten bored by the default icons, so I wanted to have the actual light to be seen on my floorplan. What do I add to my code?

type: picture-elements
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%

JTPublic · February 5, 2021, 3:44pm

You can try using state_filter. This image of mine, changes opacity of the state_image based on state, you can use any CSS filter instead:

              - type: image
                entity: binary_sensor.entry_lights
                tap_action: {action: none}
                state_image: {"off": /local/lightbulb-outline.png,"on": /local/lightbulb-outline.png}
                state_filter:
                  'on': opacity(0.5)
                  'off': opacity(0)
                style:
                  top:  50%
                  left: 50%
                  height: auto
                  width: 3.5vw

Xornop · February 5, 2021, 8:36pm

Thank you for your reply.
I figured that was the way to go, but how would I implement the dynamic state that is rgb(cct) color? What is the code that I am looking for? I have no prior CSS experience…

JTPublic · February 5, 2021, 10:28pm

I don’t normally use rgb, but try this CSS color resources to get you the rgb values.
If you want true dynamic color based on your input state, you may have to pass in rgb values via template.

Xornop · February 6, 2021, 7:22am

How do i do that then?
What is the code for that?

JTPublic · February 6, 2021, 8:22pm

I don’t have RGB light, from what I’ve seen, RGB light has rgb_color attribute:
enter this: {{ state_attr(‘light.extended_color_light_4’,‘rgb_color’) }} in the Developer Tools/Template will result in something like: {250,255,120}.

If that’s what you get from Template, next, you’ll need:

This works with image having transparent background. To test, you should see green background with this added to your existing code under style:

      background-color: rgb(0,255,0,1)

And this uses Config Template Card to do templating, install from HACS.

You can test this if all the above are true and ready:

      - type: 'custom:config-template-card'
        entities: [light.extended_color_light_4]
        style: []
        card:
          type: picture-elements
          image: /local/your_image.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
            state_filter:
              'off': opacity(0)
              "unavailable": opacity(0)
            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)';}"

This works with an assigned value for light_rgb, i.e. var light_rgb=‘0,255,0’

Xornop · February 7, 2021, 12:00am

Thanks for your reply @JTPublic .
I’ve installed the Config Template Card via HACS, and changed “/local/your image.png” to the “/local/floorplan/base.png”, but then the code you provided gives me no card at all. Just empty nothingness. What should my next move be? Is the code wrong?

Xornop · February 7, 2021, 12:29am

This is the code for the full card that i am looking at now. It still does not work:

type: picture-elements
image: /local/floorplan/base.png
elements:
  - type: 'custom:config-template-card'
    entities: [light.extended_color_light_4]
    style: []
    card:
      type: picture-elements
      image: /local/floorplan/couch.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
          state_filter:
            'off': opacity(0)
            "unavailable": opacity(0)
          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)';}"

Let me give you some more specifics.
Under the couch there is an led strip light. HA calls them light.extended_color_light_4
base.png is the complete floorplan of my apartment
couch.png is an empty (transparent) image with only a white line. This white line, when overlaid on top of base.png shows a line around the couch on the floor plan, indicating the led strip is on and in which color (or at least that is the goal here).
I figured an empty.png was necessary to just have a completely transparent overlay when the light is off.

JTPublic · February 7, 2021, 2:03am

You will have to remove the first 3 lines, and re-align the indentation of the sample code.
Basically, the sample code replaces yours.

Xornop · February 7, 2021, 2:07pm

Your sample code gives empty nothingness. A card that exists but nothing is visible. An empty card. Try it yourself!
The code i provided at least gives a card of the floorplan, but still no functioning card.
Please help?

JTPublic · February 7, 2021, 3:24pm

Please share your original code with the base.png and an image of how it look like would be helpful.

Xornop · February 7, 2021, 3:57pm

@JTPublic
As requested I will upload the images here. Thank you for sticking around.

This is the yaml edit screen with the code.

This is the base.png

This is the overlay image for the edge light around the couch: couch.png

This is the placeholder empty.png for when the light is off. This picture is nothingness, completely transparent.

In the bottom room on base.png you can see a greyish rectangle representing my couch. If you were to overlay couch.png on top of this, you would have a white edge around the couch.
The goal is to change the color of this white edge.

All the images are stored in /www/floorplan/ to keep them together.

Xornop · February 7, 2021, 4:05pm

The original code from the first post gives this when the light is on (see the white border?):

JTPublic · February 7, 2021, 4:20pm

Yes, now I see how the base.png was used originally.
Did {{ state_attr(‘light.extended_color_light_4’,‘rgb_color’) }} give something like: {number,number,number}?

If so, let’s take it one step a time:

  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: rgba(0,255,0,1)

This replaces your original code and should give the couch.png a green background regardless light on or off.
If this works, we can take the next step.

Xornop · February 7, 2021, 8:58pm

@JTPublic
That works, and the state call too.

JTPublic · February 7, 2021, 10:34pm

The template rgb color works too?

The next step, try this:

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

Turn light on and off to see if there is color change to the couch.png/empty.png location.

Xornop · February 8, 2021, 8:39am

Something must be wrong, this code just gives no card at all.

JTPublic · February 8, 2021, 5:41pm

Ok, one step back:

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: rgba(0,0,0,0)

This should be the same as your original code’s behavior.
If not, check for error and config-template-card set up.

Holdestmade · February 8, 2021, 6:09pm

This is how I colourise my picture elements to show different states:

Took a while to get the right colours.

type: picture-elements
image: /local/images/BG.png
elements:
  - type: image
    entity: sensor.hp_printer_status
    image: /local/images/icons8-print-100.png
    state_filter:
      "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
      "cartridgeMissing": hue-rotate(135deg) drop-shadow(0px 0px 2px Red)
      "On": grayscale(100%) brightness(150%)
      "Printing": hue-rotate(90deg) drop-shadow(0px 0px 3px Red) saturate(200%)
      "Scanning": hue-rotate(180deg) drop-shadow(0px 0px 3px Orange) saturate(200%)
      "Off": grayscale(100%) brightness(150%)
    style:
      top: 65%
      left: 61.6%
      width: 12%

Xornop · February 8, 2021, 6:26pm

This code works. Whats the next step? It seems the css code is causing issues.