idk what site to use these days lol. i thought i was using file.io but i guess they got acquired? too long to put in a comment reply, it cuts off :/
this is the begining, shows the basics of how its set up. One image for white, one image for red (used for colors). lowest opacity is 40%, so that they don't look off when they are really dim.
type: picture-elements
image:
media_content_id: /local/home/bg5.png
media_content_type: ""
metadata:
navigateIds:
- {}
- media_content_type: ""
media_content_id: __MANUAL_ENTRY__
elements:
- type: conditional
conditions:
- condition: state
entity: light.livingroom_ceiling
state: "on"
elements:
- type: image
entity: light.livingroom_ceiling
image: /local/home/livingroom.png
style:
left: 50%
top: 50%
width: 100%
pointer-events: none
card_mod:
style: |
:host {
{% set mode = state_attr('light.livingroom_ceiling', 'color_mode') %}
{% if mode not in ['rgb', 'hs', 'xy'] %}
opacity: {{ 0.4 + (state_attr('light.livingroom_ceiling', 'brightness') | float(0) / 425) }};
{% else %}
opacity: 0;
{% endif %}
}
- type: image
entity: light.livingroom_ceiling
image: /local/home/livingroom-red.png
style:
left: 50%
top: 50%
width: 100%
pointer-events: none
card_mod:
style: |
:host {
{% set mode = state_attr('light.livingroom_ceiling', 'color_mode') %}
{% set hs = state_attr('light.livingroom_ceiling', 'hs_color') %}
{% if mode in ['rgb', 'hs', 'xy'] %}
opacity: {{ 0.4 + (state_attr('light.livingroom_ceiling', 'brightness') | float(0) / 425) }};
filter: hue-rotate({{ hs[0] if hs else 0 }}deg) saturate(500%);
{% else %}
opacity: 0;
{% endif %}
}