Yes, I was a bit intrigued before your edit). Have seen your WTH and voted there already.
1 Like
got you ) that was the trick!
took some time, but I managed to modify the code, so it´s working now!
type: picture-elements
image: /local/floorplan/base.png
elements:
- type: conditional
conditions:
- entity: light.tradfri_light
state: "on"
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity: light.tradfri_light
image: /local/floorplan/light.tradfri_light.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: var(--my-filter_tradfri_light)
opacity: var(--my-opacity_tradfri_light)
card_mod:
style: |
:host {
--my-filter_tradfri_light: hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
--my-opacity_tradfri_light: {{(states['light.tradfri_light'].attributes.brightness / 255)}};
}
- type: conditional
conditions:
- entity: light.rgb_bad_light
state: "on"
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity: light.rgb_bad_light
image: /local/floorplan/light.rgb_bad_light.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: var(--my-filter_rgb_bad_light)
opacity: var(--my-opacity_rgb_bad_light)
card_mod:
style: |
:host {
--my-filter_rgb_bad_light: hue-rotate({{ state_attr('light.rgb_bad_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
--my-opacity_rgb_bad_light: {{(states['light.rgb_bad_light'].attributes.brightness / 255)}};
}
- type: state-icon
entity: light.tradfri_light
title: null
style:
top: 65.71%
left: 68%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.2)
tap_action:
action: toggle
- type: state-icon
entity: light.rgb_bad_light
title: null
style:
top: 54.88%
left: 80.45%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.2)
tap_action:
action: toggle
1 Like
Looking nice)