homeassistant

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 %}
            }