HomeAssistant FloorPlan(평면도) Dashboard 추가하기

Homeassistant (이하 HA)는 기본적으로 모니터링 페이지가 존재한다.

기본페이지로 제공되는 모니터링 페이지에서는 각 장치들의 현재 상태 및 이전의 상태까지 확인 할 수 있으므로

꽤나 편리한 편이다.

하지만 개인적으로 내 기준에는 보기 편하지 않다.

직업이 직업인 만큼 자동화 시스템을 만들다 보니 내 기준에는 P&ID 형식의 모니터링이 편하게 느껴지는게 사실이다.

HMI에 P&ID를 그려 구축해주듯이 내 HA에도 그렇게 하고 싶었고

검색을 해서 이미 예전에 찾아둔 자료가 있었다.

다만 적용을 못하고 있었는데 이번에 적용해 보기로 한다.

1. 설치

해당 기능은 FloorPlan이다.

Floorplan

명사

1. [전문 용어](건물의) 평면도

말은 그렇게 하지만 사실 거의 Custom-UI와 다를바 없다.

이게 왜 그렇게 생각되느냐..하면

개발자는 평면도를 이용하라는 식으로 만들어 둔 듯 하나 실제로는 평면도를 그리지 않아도 사용자가 원하는 그림을 이용하여 사용할 수 있기 때문에

해외 사용자들을 살펴보면 건물의 평면도 대신 판타지스러운 그림을 사용하는 사람도 있고 여러사람이 존재한다.

# Download

https://github.com/pkozul/ha-floorplan

우선 위 링크에 접속한다.

링크에 접속하면 위와 같은 페이지에 접속하는데 1번, 2번을 차례대로 눌러 파일을 다운로드 한다.

# Setup

다운로드된 파일 중

ha-floorplan-master\panels

ha-floorplan-master\www

ha-floorplan-master\floorplan.yaml

위 파일을 HA의 폴더에 넣는다.

configuration.yaml 파일을 열어 원하는 공간에 

frontend: 

  extra_html_url:

    - /local/custom_ui/state-card-floorplan.html

    

panel_custom: 

  - name: floorplan

    sidebar_title: Floorplan

    sidebar_icon: mdi:home

    url_path: floorplan

    config: !include floorplan.yaml

Frontend 와 Panel_custom 을 추가한다.

여기까지 진행했다면 기본 Setup은 완료되었다.

2. 준비

설치가 완료되었다면 Floorplan에 필요한 것 들에 대해 알아야 한다.

Floorplan.svg

Floorplan.yaml

Floorplan.css

Floorplan을 사용하기 위해서는 위의 세가지 파일을 나에게 맞게 수정하여 사용해야 한다.

다른 파일들은 크게 변경 할 필요가 없지만 위 세개의 파일은 완성할 때 까지 자주 변경하므로 주의!

Floorplan.svg 파일은 평면도 파일이다.

평면도 파일을 SVG 형식에 맞게 작성하여 사용하는데 이 안에 표현해야 할 디바이스의 이미지까지 모두 넣어야 한다.

또한 표현할 디바이스의 Entity를 입력해야 이미지와 나의 Entity를 연결하여 표현/제어 할 수 있게 된다.

Floorplan.yaml 파일은 내가 Floorplan에 사용하고자 하는 디바이스를 등록하고, 디바이스의 형식을 설정 할 수 있다.

예를 들면 내가 안방 전등을 등록하고 싶다면 

해당 전등의 Entity와 이 전등을 Switch 형식으로 사용 할 것인지 Binary Sensor 형식으로 사용 할 것인지 설정 할 수 있다.

Floorplan.css 파일은 위에서 설정한 형식을 어떤방식으로 변경할 것인지 설정한다.

On일 때 무슨 색으로 할 것인지 어떤 애니메이션 효과를 넣을 것인지 등을 설정 할 수 있다.

위의 세개의 파일을 잘 설정하여야 문제 없이 Floorplan을 사용 할 수 있게 된다.

문제는 Floorplan.svg 이다.

yaml 이나 css 파일은 Notepad ++ 를 사용해서 텍스트를 수정하는 방식이기 때문에 형식만 이해하면 가능하다.

SVG 파일은 전용 툴이 따로 존재한다. 

내가 다룰 프로그램은 Inkscape (잉크스케이프) 라는 프로그램이다...만 이 프로그램은 따로 글을 추가하기로 한다.

3. YAML 파일 수정

처음 다운로드 한 파일을 열어보면 데모버전이 적혀있다.

데모버전의 내용은 내게 참고용으로 밖에 쓸모가 없으므로 아래 내용을 제외하곤 전부 삭제 또는 주석처리한다.

      name: Demo Floorplan

      image: /local/custom_ui/floorplan/floorplan.svg

      stylesheet: /local/custom_ui/floorplan/floorplan.css

      last_motion_entity: sensor.template_last_motion

      last_motion_class: last-motion

위 내용은 기본적으로 필요한 내용이므로 그대로 두고 이제부터 추가할 내용을 써내려가도록 한다.

아래는 간단한 예시로 Swtich 형식의 커튼을 하나 추가하는 내용이다.

      groups:

        - name: Switches

          entities:

             - switch.st_curtain_library_ae4a

          states:

            - state: 'on'

              class: 'switch-on'

            - state: 'off'

              class: 'switch-off'

          action:

            - service: toggle

위 내용의 풀이는 아래와 같다.

groups - 맨 처음 하나만 적으면 된다. 그 밑에 내용이 하나의 그룹으로 이루어져있다는 분리구문과 같다.

name - 해당 장치의 구분명이다. 사용자가 임의로 부여하는 명칭이므로 적절한 이름을 부여하면 된다.

entities - 내가 등록 할 디바이스의 Entity 를 적어 넣으면 된다. 

             Entity 를 보는 방법은 HA의 메뉴에 <> 라고 표시된 버튼을 누르면 확인 가능하다. 풀네임을 적어야 하므로 주의!

states - 등록된 디바이스의 state에 따라 CSS 파일에서 어떤 내용을 끌어올지 등록한다.

           내 경우 switch-on 과 switch-off를 빨강색, 초록색으로 등록해 두었으며 그에 맞게 색이 변하길 원하므로 위와 같이 등록한다.

           만약 등록한 디바이스의 상태가 on/off 가 아니라 open/closed 등의 다른 내용이라면 그에 맞게 변경해주면된다.

           state는 등록한 디바이스와 맞게 설정해 주어야 하지만 class는 공용으로 사용 할 수 있으므로 

           switch-on 이 아니라 red 같은 식으로 CSS 파일에 등록해도 된다.

action - 엑션은 아직 파악 하지 못하였다.

           데모로 적혀있던 내용에도 특별한 내용이 적혀 있지 않아 파악하지 못하였으나 스위치류는 Service: toggle 로 등록하면 되고

           아날로그나 스트링은 특별히 등록하지 않았다.

           추후 사용방법을 알게 되면 추가할 것.

4. CSS 파일 수정

CSS 파일은 처음 설치에서 보이지 않았겠지만 www 폴더내부에 있다.

경로는 www\custom_ui\floorplan 내부에 floorplan.css 라는 파일이 있다.

이 파일 또한 데모버전으로 내용이 적혀있으므로 참고해도 좋다.

이 파일에서 남겨두어야 할 내용은 

svg, svg * {

  vector-effect: non-scaling-stroke !important;

  pointer-events: all !important;

}

뿐이다.

다른 내용을 그대로 두고 사용해도 좋지만 헷갈리므로 다 주석처리하고 아래 내용으로 변경하였다.

/* Light */

.light-off {

  fill: #1DDB16 !important;

}

.light-on {

  fill: #C90000 !important;

}

/* Switch */

.switch-off {

  fill: #1DDB16 !important;

}

.switch-on {

  fill: #C90000 !important;

}

내가 사용 한 것은 색만을 설정하였지만 많은 내용이 설정 가능하다.

기본예시로

fill	면 색
fill-opacity	면 불투명도
stroke	선 색
stroke-opacity	선 불투명도
stroke-width	선 굵기

위 내용이 가장 자주 쓰인다.

이 외에도 애니메이션 설정 등이 있지만 추후 다른 글로 자세히 적어보겠다.

그 외로 .light-on 은 내가 사용할 class 명이므로 참고!

5. 예시

현재 나는 Floorplan을 구축하다 말았다.

곧 또다시 이사갈 예정이라 임시로 구축해 놓은 Floorplan이 있는데

당장 필요한 내용만 추가하였으므로 별볼일 없기도 하고 디자인쪽으론 잼병이기 때문에 볼품없기도 하다.

그럼에도 참고용으로 올려보자면

내가 Floorplan을 파고 들었던 가장 큰 이유는 이것이다.

직관적으로 보기가 너무 편리하다.

그동안 HA의 기본 카드형식 View도 사용해보았고 SmartThings와 연동하는 Action Tiles도 사용해보았지만 내 취향에 카드형식이나 블럭형식은 맞지 않았다.

현장에서 내가 구축해주는 모든 HMI는 이런식으로 도면을 기반으로 해서 직관적이게 볼 수 있는데

막상 집에서는 그렇게 못하니 답답할 따름이었으나

Floorplan을 만나고 이제야 내 취향에 한걸음 다가간 느낌이다.

문제는 디자인 센스가 영 꽝이라서 이쁘게 못하겠다는 문제가 있다만 그 문제는 추후 해결해 나가기로 한다.

6. 다음 예고

Floorplan, 평면도 제작을 위한 Inkscape (잉크스케이프) 설명

CSS 파일 심화 (애니메이션 등)