[HA] Lovelace UI 기초

Lovelace는 Home Assistant UI의 이름입니다.

카드(Card)라는 다양한 형태의 UI 모듈을 통해 편리하게 IoT 기기를 화면에 배치할 수 있습니다.

아래 영상은 HA에서 제공하는 Lovelace UI 구성 예제입니다.

Editing the user interface

기본적인 배치와 비교해서 UI가 더 깔끔하게 정리되어 있습니다.

HA는 현재 24개의 다양한 카드를 지원하고 있습니다.

Lovelace UI를 적용하는 방법을 살펴보도록 하겠습니다.

 

먼저 config 디렉토리의 configuration.yaml을 수정해야 합니다.

sudo nano /data/homeassistant/config/configuration.yaml

아래 내용을 추가하면 간단하게 Lovelace가 활성화됩니다.

lovelace:
  mode: yaml

다음으로 아래 명령어를 통해 UI를 정의할 yaml 파일을 생성하면 됩니다.

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

처음에는 ui-lovelace.yaml 파일에 아무것도 없기 때문에 화면에 아무것도 표시되지 않습니다.

Lovelace UI

이제 이 빈 화면을 ui-lovelace.yaml 파일을 통해서 채우면 됩니다.

특별한 IoT 기기가 없이도 사용 가능한 날씨 컴포넌트를 활용해서 시작하겠습니다.

날씨 컴포넌트 반영은 아래 링크를 참조해서 진행하면 됩니다.

2019/01/16 - [IT/IoT] - [HA] Home Assistant에 날씨 정보 추가(Dark Sky)

[HA] Home Assistant에 날씨 정보 추가(Dark Sky)

먼저 ui-lovelace.yaml 파일을 열고 아래와 같이 입력합니다.

title: My Awesome Home
views:
  - title: Home
    icon: mdi:home
    path: home
    cards:
      - type: weather-forecast
        entity: weather.seoul_weather
  - title: Network
    icon: mdi:network
    path: network
    cards:
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

가장 먼저 최상단의 title 부분은 화면 상단에 표시되는 타이틀입니다.

Lovelace UI

상단에 설정한 텍스트가 타이틀로 표시되는 것을 확인할 수 있습니다.

다음으로 views 이후에 2개의 title(Home, Network) 설정이 있는 것을 확인할 수 있습니다.

views 부분에서 들여쓰기 한 부분인 title: Home과 title:Network는 각각 탭이 됩니다.

title만 설정하는 경우 텍스트로 표시되지만 icon을 설정하는 경우 위와 같이 아이콘으로 표시됩니다.

path는 해당 탭을 접속하는 주소입니다.

현재 Home은 home으로 되어 있는데 http://IP주소:8123/lovelace/home 형태로 접근 가능합니다.

마지막으로 cards를 추가하고 원하는 카드들을 배치하면 됩니다.

들여쓰기를 주의해서 추가해야 하며 날씨를 위한 weather-forecast를 사용했습니다.

그리고 해당 카드가 사용할 엔티티를 지정하면 되는데 엔티티 이름은 개발자 모드에서 확인 가능합니다.

다른 카드를 사용하고 싶으면 아래 링크의 우측에 보이는 Cards 중 하나를 지정하면 됩니다.

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

Lovelace UI

다음 탭에는 markdown이라는 카드가 적용된 것을 확인할 수 있습니다.

markdown 형식의 텍스트를 표시해주는 간단한 카드입니다.

탭마다 원하는 카드를 추가할 수 있기 때문에 적절히 배치해주면 됩니다.

이것으로 간단하게 Lovelace UI를 시작할 수 있습니다.