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

Posted by JiYiNo
2018. 9. 3. 13:00 지이노/ReView & Using



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 파일 심화 (애니메이션 등)

이 댓글을 비밀 댓글로