Led color as background color in picture-elements card

Configuration Frontend
1

Hi!!

I have a picture-elements card with a blue print of my house, one of the entities shown its:

  • entity: light.led_cocina
    style:
    box-shadow: ‘inset 0px -5px 8px 2px rgba(255,0,0,1)’
    width: 16.8%
    height: 3%
    display: block
    top: 78.7%
    left: 23%
    overflow: hidden
    text-align: center
    color: white
    icon: none
    type: icon

This create this red (rgba(255,0,0,1)) highlight over the kitchen countertop where the light actually is:
image

Could it be possible to use the current color of that light entity as the color value for the box-shadow?

Thanks in advance.
Carlos.

2

Should be doable with card-modder.

3

Hi again,

Thanks to your advice I get to know card-modder and used it in 2 or 3 parts of my home assistant, but still couldn’t get the current light color changing the light entity background.

I’ve tryed doing different variations of:

box-shadow: 'inset 0px -5px 8px 2px rgba([[light.led_cocina.attributes.rgb_color]],0.5)'

But none of them worked to me. I think it may be because of the light declaration but I’m not sure:

light:
  - platform: mqtt
    name: "Led Cocina"
    command_topic: "cmnd/magichome/POWER"
    state_topic: "tele/magichome/STATE"
    state_value_template: "{{value_json.POWER}}"
    availability_topic: "tele/magichome/LWT"
    brightness_command_topic: "cmnd/magichome/Dimmer"
    brightness_state_topic: "tele/magichome/STATE"
    brightness_scale: 100
    on_command_type: "brightness"
    brightness_value_template: "{{value_json.Dimmer}}"
    white_value_state_topic: "tele/magichome/STATE"
    white_value_command_topic: "cmnd/magichome/White"
    white_value_scale: 100
    white_value_template: "{{ value_json.Channel[3] }}"
    rgb_command_topic: "cmnd/magichome/Color2"
    rgb_state_topic: "tele/magichome/STATE"
    rgb_value_template: "{{value_json.Color.split(',')[0:3]|join(',')}}"
    effect_command_topic: "cmnd/magichome/Scheme"
    effect_state_topic: "tele/magichome/STATE"
    effect_value_template: "{{value_json.Scheme}}"
    effect_list:
      - 0
      - 1
      - 2
      - 3
      - 4
    payload_on: "ON"
    payload_off: "OFF"
    payload_available: "Online"
    payload_not_available: "Offline"
    qos: 1
    retain: false

Any idea?
Thanks in advance

4

Hi again,

I finally got some advance:

I have created a new sensor:

sensor colorled1:
  - platform: template
    sensors:
      led_color1:
        friendly_name: "Color del led1"
        value_template: "{{ state_attr('light.led_cocina_1', 'rgb_color') }}"

With the value of this new sensor I’ve been able to change the color of the picture-elements card
background:

style:
  background: 'rgb[[ sensor.led_color1 ]]'

But still I’m not able to use this value to change the color of the box-shadow, I’m not sure if that is possible.

Any help will be appreciated.