● HA작업) 최종_대시보드 picture-elements 그림 요소 카드 아파트 도면 적용

참고로 full-size는  1개의 대시보드에서 > 편집 > 대시보드의 구성코드 편집하기에서

하기와 같이 pannel: true만  삽입 사용시 nest-hub에서 전체화면으로 보임

type: picture-elements
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
image: /local/image/605_1-2ho_1024_600.png
elements:
  - type: state-icon
    name: 서재 불
    entity: switch.serja_light
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 65%
      left: 30%
  - type: state-icon
    name: 서재 보일러
    entity: light.living_heating_4
    icon: mdi:coolant-temperature
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 75%
      left: 23%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 작은방
    entity: switch.jageunbang_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 70%
      left: 17%
  - type: state-icon
    name: 작은방 보일러
    entity: light.living_heating_3
    icon: mdi:coolant-temperature
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 72%
      left: 5%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 옥장
    entity: switch.jageunbang_osjang
    icon: mdi:dome-light
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 44%
      left: 8%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 복도 화장실 불
    entity: switch.bogdo_hwajangsil_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 36%
      left: 26%
  - type: state-icon
    name: 복도 샤워 불
    entity: switch.bogdo_hwajangsil_syaweobul
    icon: mdi:wall-sconce-round-variant
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 17%
      left: 19%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 복도 샤워 팬
    entity: switch.bogdo_hwajangsil_paen
    icon: mdi:fan
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 17%
      left: 26%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 안방
    entity: switch.anbang_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 45%
      left: 77%
  - type: state-icon
    name: 화장대 불
    entity: switch.hwajangdae_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 45%
      left: 87%
  - type: state-icon
    name: 안방 보일러
    entity: light.living_heating_2
    icon: mdi:coolant-temperature
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 74%
      left: 75%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 침대
    entity: switch.cimdae_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 76%
      left: 88%
  - type: state-icon
    name: 스탠드
    entity: switch.seutaendeu_bul
    icon: mdi:lamps-outline
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 58%
      left: 75%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 주방
    entity: switch.jubang_jubang_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 15%
      left: 55%
  - type: state-icon
    name: 식탁
    entity: switch.jubang_sigtag_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 33%
      left: 60%
  - type: state-icon
    name: 안방 화장실
    entity: switch.anbang_hwajangsil_bul
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 23%
      left: 79%
  - type: state-icon
    name: 안방 화장실샤워불
    entity: switch.anbang_hwajangsil_syaweo_bul
    icon: mdi:wall-sconce-round-variant
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 1%
      left: 79%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 안방 화장실 팬
    entity: switch.anbang_hwajangsil_paen
    icon: mdi:fan
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 4%
      left: 72%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 거실등
    entity: light.light_living_light_1
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 59%
      left: 58%
  - type: state-icon
    name: 거실등2
    entity: light.light_living_light_2
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 80%
      left: 48%
  - type: state-icon
    name: 거실 보일러
    entity: light.living_heating_1
    icon: mdi:coolant-temperature
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 75%
      left: 54%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 앞불
    entity: light.light_living_light_4
    icon: mdi:wall-sconce-round
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 57%
      left: 65%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 뒷불
    entity: light.light_living_light_3
    icon: mdi:wall-sconce-round
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 57%
      left: 45%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 복도불
    entity: light.light_living_light_5
    icon: mdi:wall-sconce-round
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 48%
      left: 47%
  - type: state-icon
    name: 모니터
    entity: switch.moniteo
    icon: mdi:monitor
    tap_action:
      action: toggle
      state_image: null
    style:
      '--iron-icon-stroke-color': '#969696'
      border-radius: 70%
      text-align: center
      background-color: rgba(255,225,255,50.3)
      '--mdc-icon-size': 34px
      '--paper-item-icon-color': green
      top: 77%
      left: 37%
  - type: state-icon
    name: 컴퓨터
    entity: switch.wifi_switch_1ch_socket_1
    icon: mdi:desktop-tower-monitor
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 58%
      left: 35%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: image
    icon: mdi:cctv
    camera_image: camera.amcrest_camera_amcrest_camera_2
    camera_view: live
    show_state: true
    style:
      top: 5%
      left: 38%
      width: 10%
      height: 10%
  - type: state-icon
    name: 현관 카메라
    entity: camera.amcrest_camera_amcrest_camera_2
    icon: mdi:cctv
    tap_action:
      action: toggle
    state_image: null
    state_color: true
    style:
      top: 11%
      left: 34%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-icon
    name: 개패기 일괄소등sw
    entity: switch.gaepaegi
    icon: mdi:dip-switch
    tap_action:
      action: toggle
      state_image: null
    style:
      top: 28%
      left: 35%
      width: 38px
      height: 38px
      line-height: 48px
      transform: scale(1.0,1.0)
      border-radius: 60%
      background-color: rgba(29,119,101)
      text-align: center
      '--mdc-icon-size': 28px
      '--paper-item-icon-color': rgba(64,247,64)
  - type: state-icon
    name: 환기
    entity: switch.sonoff_1001739bad
    icon: mdi:fan-clock
    tap_action:
      action: toggle
      state_image: null
    style:
      top: 35%
      left: 65%
      width: 39px
      height: 39px
      line-height: 33px
      transform: scale(0.8,0.8)
      border-radius: 46%
      background-color: rgba(255,225,255)
      text-align: center
      '--mdc-icon-size': 31px
      '--paper-item-icon-color': green
  - type: state-label
    entity: sensor.time
    style:
      top: 3%
      left: 86%
      width: 20px
      height: 20px
      font-size: 5vW
      color: red
      text-align: left
  - type: state-label
    entity: sensor.onseubdogye_temperature
    style:
      bottom: 8%
      left: 5%
      width: 20px
      height: 20px
      font-size: 5vW
      color: red
      text-align: left
  - type: state-label
    entity: sensor.onseubdogye_humidity
    style:
      bottom: 8%
      left: 48%
      width: 20px
      height: 20px
      font-size: 5vW
      color: red
      text-align: left
  - type: state-label
    entity: sensor.date
    style:
      bottom: 5%
      left: 70%
      width: 20px
      height: 20px
      font-size: 5vW
      color: green
      text-align: left
  - type: image
    name: TV
    entity: switch.tv
    tap_action:
      action: toggle
      state_image: null
    image: /local/imagestv.png
    state_image:
      'on': /local/imagestv_on1.png
    style:
      top: 81%
      left: 66%
      width: 40px
      height: 40px

☞ https://11q.kr 에 등록된 자료 입니다. ♠ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다♠