[Solved] Use led strip color to style image element in picture-elements

Configuration Frontend
1

Hi

I am trying to implement interactive floor plan and I got stuck on shading image based on led color (gledopto gl-c-008p)

I successfully applied a color, but failed to access led’s data to pass it. Here is my attempt:

  - type: conditional
    conditions:
      - entity: switch.livingroom_light_strip
        state: 'on'
    elements:
      - type: image
        image: /local/images/Livingroom_Strip.png
        tap_action:
          action: none
        style:
          top: 39.9%
          left: 74.2%
          filter: >-
            opacity(0.5) drop-shadow(0 0 0
            rgb(255,0, 0)) #pass  gledopto gl-c-008p (device light.livingroom_light_strip) data here

And how it’s looks now (without linking to real led):

image
image866×956 46.7 KB

Any insights to link it to strip?

2

Option “styles” in Picture elements card does not support templates.
Use card-mod to define a dynamic style as a variable, then use this variable in “styles”.

1 Like
3

Thank you! This is exacly I looked for

In case if someone will need it:

type: picture-elements
style: |
  ha-card { height: 10px !important; }
card_mod:
  style: |
    ha-card {
      {% if is_state('switch.livingroom_light_strip','on') %}
      --my-led-color: opacity(0.3) drop-shadow(0 0 0 rgb{{state_attr('light.livingroom_light_strip', 'rgb_color')}});
      {% else %}
      --my-led-color: opacity(0) drop-shadow(0 0 0 rgb(0,0,0));
      {% endif %}
    }
elements:
  - type: conditional
    conditions:
      - entity: switch.livingroom_light_strip
        state: 'on'
    elements:
      - type: image
        image: /local/images/Livingroom_Strip.png
        tap_action:
          action: none
        style:
          top: 39.9%
          left: 74.2%
          filter: var(--my-led-color)

References: