[HA] Home Assistant의 Picture Elements Card 활용

Home Assistant의 Picture Elements Card는 활용도가 높은 카드입니다.

https://www.home-assistant.io/lovelace/picture-elements/

Picture Elements Card

배경이 되는 이미지 위에 다양한 정보를 추가할 수 있습니다.

집의 평면도를 배경으로 해서 집 안의 다양한 IoT 기기를 위에 올릴 수 있습니다.

아래 링크는 2D나 3D로 평면도를 작성할 수 있는 사이트입니다.

https://floorplanner.com/

Floorplanner - Create 2D & 3D floorplans for real estate, office space or your home.

가입하고 평면도를 작성하면 됩니다.

네이버 부동산 등을 통해서 평면도가 제공된다면 그것을 기반으로 작성하면 됩니다.

평면도

적당히 작성한 이후에 우측 상단의 export 3D image로 출력이 가능합니다.

다만 화질이 좋지 않기 때문에 이미지를 캡처해서 잘라서 사용하는 것을 추천합니다.

Picture Elements Card를 사용하려면 먼저 아래 링크를 통해 Lovelace를 활성화해야 합니다.

2020/02/29 - [IT/IoT] - [HA] Lovelace UI 기초

[HA] Lovelace UI 기초

작성한 평면도 파일은 다음과 같이 HA의 config/www 디렉토리에 복사하면 됩니다.

파일 경로

이제 ui-lovelace.yaml 파일을 수정합니다.

sudo nano /data/homeassistant/config/ui-lovelace.yaml

다음과 같은 형태로 타입이 picture-elements인 카드를 먼저 추가합니다.

title: My Awesome Home
views:
  - title: Home
    icon: mdi:home
    path: home
    cards:
      - type: picture-elements
        image: /local/floorplan.png
        elements:

cards 하위에 위와 같이 추가하면 됩니다.

이미지가 있는 www 경로는 yaml에서는 /local 경로로 작성하면 됩니다.

elements 하위에는 추가하고 싶은 아이콘이나 이미지를 추가시키면 됩니다.

          - type: image
            entity: light.kitchen_light
            tap_action:
              action: toggle
            image: /local/icons/lightbulb_off.png
            state_image:
              "on": /local/icons/lightbulb_on.png
            style:
              top: 32%
              left: 10%
              width: 24px
              height: 24px

아이콘을 관리하기 위해 www 디렉토리 하위에 icons를 생성했습니다.

tap_action은 기본적으로는 toggle이기 때문에 전구의 경우 켜졌다가 꺼지는 동작을 합니다.

image는 기본적인 이미지를 설정하는 부분입니다.

기본 상태는 꺼진 이미지(lightbulb_off.png)가 표시되도록 설정했습니다.

그리고 특정 상태를 위한 이미지 설정은 state_image에서 가능합니다.

전구가 켜진 상태일 때 lightbulb_on 이미지가 표시되도록 설정했습니다.

style 부분에는 CSS 문법으로 포지션과 스타일 설정을 할 수 있습니다.

top과 left 설정을 통해 적당한 위치에 이미지나 아이콘을 위치시킬 수 있습니다.

활용 예시

원하는 엘리먼트를 필요한만큼 추가하고 사용하면 됩니다.

Picture Elements Card는 image 타입을 포함해서 다음과 같은 타입을 지원합니다.

state-badge

state-icon

state-label

service-button

icon

conditional

원하는 타입의 엘리먼트들을 선택해서 평면도를 꾸미면 됩니다.

아이콘은 인터넷에서 무료로 제공되는 아이콘 이미지를 사용해서 꾸밀 수 있습니다.

또는 image 타입 대신 state-icon 사용 시 아래 링크에서 필요한 아이콘(MDI)을 검색해서 사용할 수 있습니다.

https://materialdesignicons.com/

Material Design Icons

다만 image와는 다르게 상태에 따라 다른 아이콘을 적용하는 방법은 기본적으로 제공되지 않습니다.

이것으로 Picture Elements Card의 기본적인 사용이 가능해집니다.