새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


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

♨ 카랜더 일정 : 2023년06월14일
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

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


    최종 적용 사례

    3232235521_1686817025.9791.png



    적용조건 > HACS > Frontend >관계무>>  설치 상태이나 소스내용에는 특별한 카드 설치 없이 구성

     3232235521_1686739147.5685.png


    아이콘 적용은 

    https://pictogrammers.com/

    에서  찾아 사용합니다.

    3232235521_1686739325.6687.png




    적용방법 > 대시보드 > 카드 추가 > 그림 복합요소 

    3232235521_1686739549.2407.png


    소스 모드 복사 붙이기

    -  처음에  형식을 1개의 스위치를 복사후  반복 복사 붙이기 합니다


    
    type: picture-elements
    panel: true
    image: /local/image/605_12_apart12.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: 60%
          left: 27%
        # 이상 상기 내용을 반복적으로 붙이기 하면서 위치조정 및 사이즈 조정 합니다
        # 아래는 사이즈 조금 줄일수 있음
     - 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: 70%
          left: 22%
          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
       


    3232235521_1686817279.5812.png


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

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

    3232235521_1686817175.6957.png

    
    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 에 등록된 자료 입니다. ♠ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다♠1.png
    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    등록된 댓글이 없습니다.


    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-11-23 14:28:57

    오늘의 홈 현황


    • 현재 접속자♨ 367 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 3 명
    • 주간 가입자※ 9 명
    • 오늘 방문자 2,498 명
    • 어제 방문자 3,461 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,805,115 명
    • 전체 게시물※ 8,856 개
    • 전체 댓글수※ 25,232 개
    • 전체 회원수 11,326 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑