My floorplan

floorplan.yaml

.image-common: &image-common
  action: none
  hold_action:
    action: none
  tap_action:
    action: none
  type: image

.image-style: &image-style
  top: 50%
  left: 50%
  height: 100%
  width: 100%
  mix-blend-mode: lighten
  # transition: opacity 1s linear

title: PK
path: pk
panel: true
cards:
- type: 'custom:config-template-card'
  variables:
    - common: *image-common
      style: *image-style
      daytime:
        entity: sensor.sunlight_pct
        <<: *image-common
        # state_image:
        #   above_horizon: /local/floorplan/lights/best/960x540/base-noon.png
        #   below_horizon: /local/transparent.png
        style: *image-style

    - { id: "light.kaya_s_light", type: "rgb", left: 50, top: 25, image: "kayas-room-light" }
    - { id: "light.taiki_s_light", type: "rgb", left: 50, top: 53, image: "taikis-room-light" }

    - { id: "light.master_light_1", type: "cwww", left: 15, top: 33, image: "master-lights"}
    - { id: "light.master_light_2", type: "cwww", left: 11, top: 33, image: "master-lights"}

    - { id: "light.lounge_light_1", type: "cwww", left: 28, top: 58, image: "lounge-north-light" }
    - { id: "light.lounge_light_2", type: "cwww", left: 28, top: 70, image: "lounge-south-light" }

    # - { id: "light.dining_light", type: "cwww", left: 15, top: 77, image: "dining-light" }

    # - { id: "light.kitchen_lights", type: "binary", left: 14, top: 57, image: "kitchen-lights" }

    # - { id: "light.hallway_west_light", type: "binary", left: 31, top: 43, image: "hallway-west-light" }
    # - { id: "light.hallway_east_light", type: "binary", left: 50, top: 38, image: "hallway-east-light" }
    # - { id: "light.entry_light", type: "binary", left: 40, top: 53, image: "entry-light" }

    # - { id: "light.toilet_light", type: "binary", left: 31, top: 23, image: "toilet-light" }
    # - { id: "light.bathroom_light", type: "binary", left: 37, top: 25, image: "bathroom-light" }
    # - { id: "light.ensuite_light", type: "binary", left: 25, top: 21, image: "ensuite-light" }

    # - { id: "light.master_wir_light", type: "binary", left: 24, top: 33, image: "master_wir-light" }

    # - { id: "light.garage_light", type: "binary", left: 67, top: 40, image: "garage-light", sub_image: "garage", sub_state: "cover.garage_door" }
    # - { id: "light.laundry_light", type: "binary", left: 60, top: 25, image: "laundry-light" }

    - { id: "cover.garage_door", type: "cover", left: 77, top: 41 }

    # - { id: "climate.kogan_heater", type: "state", left: 50, top: 20, icon: 'mdi:radiator' }
    # - { id: "climate.kogan_heater", type: "label", left: 47, top: 20, attribute: 'current_temperature', suffix: ' °C'}

    - { id: "sensor.master_room_temperature", type: "label", left: 10, top: 22 }
    - { id: "sensor.master_room_humidity", type: "label", left: 10, top: 40 }

    - { id: "sensor.play_kitchen_temperature", type: "label", left: 47, top: 20 }
    - { id: "sensor.play_kitchen_humidity", type: "label", left: 53, top: 20 }

    - { id: "person.jesse", type: "badge", left: 50, top: 75 }
    - { id: "person.rina", type: "badge", left: 65, top: 75 }

    - { id: "media_player.lounge_speaker", left: 34, top: 73 }
    - { id: "media_player.lounge_tv", left: 34, top: 80 }

    - { id: "media_player.kaya_s_room_speaker", left: 50, top: 32 }
    - { id: "media_player.taiki_s_room_speaker", left: 45, top: 60 }

    - { id: "binary_sensor.aarlo_motion_taiki_s_room", left: 45, top: 45 }
    - { id: "binary_sensor.aarlo_motion_kaya_s_room", left: 45, top: 32 }

    - { id: "binary_sensor.aarlo_motion_back_door", left: 65, top: 16, bg: "#CCCCCC" }
    - { id: "binary_sensor.aarlo_motion_garage", left: 58, top: 60 }
    - { id: "binary_sensor.aarlo_motion_front_flood", left: 40, top: 80 }

    - { id: "binary_sensor.ha_dev_aarlo_motion_belle", left: 40, top: 65 }
    - { id: "binary_sensor.ha_dev_aarlo_motion_essential", left: 3, top: 80 }
    - { id: "binary_sensor.ha_dev_aarlo_motion_pro4", left: 30, top: 80 }

    - { id: "binary_sensor.alarm_panel_garage_motion", left: 58, top: 55 }
    - { id: "binary_sensor.alarm_panel_lounge_motion", left: 9, top: 86 }
    - { id: "binary_sensor.alarm_panel_master_motion", left: 5, top: 45 }

    - { id: "switch.alarm_panel_outside_siren", left: 82, top: 60 }

    - { id: "sensor.garage_temperature", type: "label", left: 65, top: 41 }

    - { id: "sensor.roof_space_temperature", type: "label", left: 90, top: 41 }

  entities:
    - sensor.sunlight_pct
    - cover.garage_door

    - light.kaya_s_light
    - light.taiki_s_light

    - light.master_light_1
    - light.master_light_2

    - light.lounge_light_1
    - light.lounge_light_2

    # - climate.kogan_heater
    - sensor.master_room_temperature
    - sensor.master_room_humidity

    - media_player.kaya_s_room_speaker
    - media_player.taiki_s_room_speaker
    - media_player.lounge_speaker
    - media_player.lounge_tv

    - sensor.play_kitchen_temperature
    - sensor.play_kitchen_humidity

    - person.jesse
    - person.rina

    - binary_sensor.aarlo_motion_taiki_s_room
    - binary_sensor.aarlo_motion_kaya_s_room
    - binary_sensor.aarlo_motion_back_door
    - binary_sensor.aarlo_motion_front_flood
    - binary_sensor.aarlo_motion_garage

    - binary_sensor.alarm_panel_garage_motion
    - binary_sensor.alarm_panel_lounge_motion
    - binary_sensor.alarm_panel_master_motion

    # - light.kitchen_lights
    # - light.hallway_west_light
    # - light.hallway_east_light
    # - light.entry_light
    # - light.toilet_light
    # - light.bathroom_light
    # - light.ensuite_light
    # - light.master_wir_light
    # - light.ensuite_light
    # - light.garage_light
    # - light.laundry_light

  card:
    type: picture-elements
    style: |
      ha-card {
        position: absolute;
        transition: transform 0s;
        height: initial !important;
      }
      # hui-state-icon-element,
      # hui-icon-element,
      # hui-state-label-element {
      #   transform: rotate(-90deg) !important;
      # }
      @media screen and (orientation:portrait) {
        ha-card {
          transform: translateY(-100%) rotate(90deg) scale(calc(16/9));
          transform-origin: bottom left;
          max-width: 540px;
        }
        hui-state-icon-element,
        hui-icon-element,
        hui-state-badge-element {
          transform: rotate(-90deg) translate(50%, -50%) scale(calc(9/16)) !important;
        }
        hui-state-label-element {
          transform-origin: top left;
          transform: rotate(-90deg) translate(-35%, -50%) scale(calc(9/16)) !important;
        }
      }
    image: ${"/local/floorplan/lights/best/960x540/base-night-garage-" + states['cover.garage_door'].state + ".png"}
    elements: >-
        ${
          var images = [];
          var interactions = [];
          var { daytime } = vars[0];
          daytime = {
            ...daytime,
            image: `/local/floorplan/lights/best/960x540/base-noon-garage-${ states['cover.garage_door'].state }.png`,
            style: {
              ...daytime.style,
              opacity: states['sensor.sunlight_pct'].state / 100
            }
          };
          var elements = [daytime];
          vars.slice(1).forEach(entity => {
            var style = { ...vars[0].style };
            if (entity.type === 'rgb') {
              style['filter'] =
                "saturate(" + (states[entity.id].attributes.hs_color ? states[entity.id].attributes.hs_color[1] / 10 : 0) + ") " +
                "hue-rotate(" + (states[entity.id].attributes.hs_color ? states[entity.id].attributes.hs_color[0] : 0) + "deg)"
            }
            if (entity.type === 'rgb' || entity.type === 'cwww') {
              style['opacity'] = states[entity.id].state === 'on' ? (states[entity.id].attributes.brightness / 255) : '0'
            } else if (entity.type == 'binary') {
              style['opacity'] = states[entity.id].state === 'on' ? 1 : 0
            }
            if (entity.type === 'binary' || entity.type === 'rgb' || entity.type === 'cwww') {
              var image;
              if (entity.sub_image) {
                image = `/local/floorplan/lights/best/960x540/${ entity.image }-${ entity.sub_image }-${ states[entity.sub_state].state }.png`
              } else {
                image = `/local/floorplan/lights/best/960x540/${ entity.image }.png`
              }
              images.push({
                ...vars[0].common,
                entity: entity.id,
                image,
                style
              });
            }
            var icon_style = {
              left: `${ entity.left }%`,
              top: `${ entity.top }%`,
            };
            if (entity.bg) {
              icon_style['background'] = `${entity.bg};`;
              icon_style['border-radius'] = "50%;";
              console.log("Setting background");
            }
            switch (entity.type) {
              case 'state':
                interactions.push({
                  entity: entity.id,
                  type: 'state-icon',
                  icon: entity.icon,
                  style: icon_style,
                  tap_action: {
                    action: 'more-info'
                  }
                })
                break;
              case 'label':
                interactions.push({
                  entity: entity.id,
                  type: 'state-label',
                  style: icon_style,
                  attribute: entity.attribute,
                  suffix: entity.suffix,
                })
                break;
              case 'badge':
                interactions.push({
                  entity: entity.id,
                  type: 'state-badge',
                  style: icon_style,
                })
                break;
              case 'rgb':
              case 'cwww':
                interactions.push({
                  entity: entity.id,
                  type: 'state-icon',
                  style: icon_style,
                  tap_action: {
                    action: 'toggle'
                  }
                })
                break;
              default:
                interactions.push({
                  entity: entity.id,
                  type: 'state-icon',
                  style: icon_style,
                  tap_action: {
                    action: 'more-info'
                  }
                })
            }
          });
          [...elements, ...images, ...interactions]
        }