[HA] 3D Floor Plan 적용하기 #3_HA 적용

안녕하세요~ 레이군 입니다.

오늘은 3D floor plan 만들기 3번째 시간으로

지난시간에 만든 파일들을 HA에 올려서 화면에 표시하는것 까지 진행해 보겠습니다.

​

시리즈

1편 : [IoT/HomeAssistant] - [HA] 3D Floor Plan 적용하기 #1_집 그리기

2편 : [IoT/HomeAssistant] - [HA] 3D Floor Plan 적용하기 #2_조명, 렌더링

3편 : [IoT/HomeAssistant] - [HA] 3D Floor Plan 적용하기 #3_HA 적용

4편 : [IoT/HomeAssistant] - [HA] 3D Floor Plan 적용하기 #4_영역 토글

4.5편 : [IoT/HomeAssistant] - [HA] 3D Floor Plan 적용하기 #4.5_영역 토글(ios가능, 다른방법)

영상으로 보셔도 되고, 스크롤 내려서 텍스트로 보셔도 되니 편하신걸 골라주세요~

 

 

 

​

​

​

우선 파일을 올릴 수 있는 방법은 다양하지만, 저는 지금까지 진행해왔던걸 기준으로 하려고 하기때문에

File editor를 사용하도록 하겠습니다.

​

​

​

File editor를 열어주시고, 상단의 Brows File System 을 클릭해 주세요.

www폴더를 찾아주시면 되는데, 혹시 한번도 사용한적이 없다면 폴더가 없을겁니다.

상단의 New folder를 눌러 www 폴더를 만들어 주시고

여기에 직접 올려도 되지만, 나중에 자주 쓰는 폴더이니 만큼 구분을 위해 추가 폴더를 만들어 주세요.

다시 New folder를 눌러 floor 라고 한번 추가해 볼께요.

​

상단에 Upload file을 눌러서 렌더링한 png파일을 하나씩 업로드 해주시면 되는데,

이때 파일명을 메모장 등에 복사해두고 업로드 해주시는게 좋습니다. 나중에 편해요.

​

모든 파일을 업로드 하였다면, HA를 재시작 해줍니다.

www폴더를 이미 사용하고 있었다면 재시작 과정이 필요 없지만, 혹시 모르니 재시작을 해주시는게 좋아요.

​

재시작이 완료 되었다면, 각 파일별로 사용할 entity를 매칭시킵니다.

개발자도구 항목에 가서 사용할 전등이나 스위치의 entity_id를 확인하여

아까 파일명 적어둔 메모장에 추가해 주세요.

가령 rest.png 라고 하면, 이건 화장실 불이 켜져있을때의 렌더링 파일이니까

rest.png = switch.restroom 이런식으로 적당히 매칭시켜서 적어두시면 됩니다.

​

다 매칭해두고 나면 파일이 하나 남을거예요. 바로 불이 전부 꺼져있을때 파일인데,

이건 매칭을 할 필요가 없으니 그냥 두시면 됩니다.

​

이제 본격적으로 카드를 만들어 볼까요?

HA의 둘러보기 화면으로 가서 우측 상단 3점을 누른 후 대시보드 편집하기 를 눌러줍니다.

어떤 뷰에 추가할지 결정하신 다음, 우측 하단의 + 카드 추가하기 버튼을 눌러주시고

카드 종류는 그림 복합요소(picture elements) 를 선택해 주세요.

​

image항목이 있는데, 아마 기본값으로 HA에서 제공하는 데모페이지의 파일이 연결되어 있을겁니다.

이걸, 불이 꺼져있을때의 파일로 연결해 줘야 하는데요

이때 우리가 파일을 넣은 경로인 /www/floor/floor.png 이렇게 넣으면 동작이 되지 않습니다.

HA에서 인식하는 경로가 다르기 때문인데요, /www/ => /local/ 로 인식합니다.

​

즉, /www/floor/floor.png 경로에 넣은 파일을 표시하려면 => /local/floor/floor.png 이렇게요

이건 앞으로 나올 파일과, 나중에 사용할 아이콘이나 기타 이미지 등 모든것에 적용됩니다.

/www/ ==> /local/ 기억하세요!

​

베이스에 깔릴 이미지를 잘 넣어 주셨나요?

저는 일단 이 항목이 가장 아래 있는게 마음에 안 들기 때문에 윗줄로 좀 옮기겠습니다.

이건 취향 나름이라....

​

elements 라고 있고, 그 아래 type: state-badge 가 보이실겁니다.

이게 무엇인고 하니..

elements 라는건, 우리가 사용할 그림 복합요소 에 표시될 요소들을 의미합니다.

거기에 세부사항으로 state-badge 라는 type 을 사용한다 인거죠.

이곳에 그림을 표시하는 방법은 여러가지가 있는데, 그중에 제일 간단한걸로 해볼꺼예요.

elements:
  - type: image
    entity: switch.balcony
    state_image:
      'on': /local/floor/balcony1.png
      'off': /local/floor/floor.png
    style:
      top: 50%
      left: 50%
      width: 100%

elements의 type은 image로 지정할꺼구요

사용할 entity는 switch.balcony 로 할께요.

state_image로 on 일때는 /local/floor/balcony1.png, off 일때는 /local/floor/floor.png 로 지정할거예요.

이 의미는, entity로 지정한(switch.balcony) 가 on 일때는 /local/floor/balcony1.png 를 표시하고,

off상태라면 /local/floor/floor.png 를 표시하는거예요.

off일때 왜 기본 이미지를 표시하냐구요? 원래는 투명 이미지를 표시하면 되는데 다음에 들어갈 옵션때문에

딱히 그럴 이유가 없어서 그냥 쉽게 가려고 기본 이미지를 표시하도록 하겠습니다.

​

아래쪽의 style 옵션으로 해당 image(type을 이미지로 지정했으므로) 의 위치나 크기를 지정합니다.

top: 50% / left: 50% 라는 의미는 상단에서 50% 지점, 좌측에서 50% 지점 이라는 의미인데요

최상단이 0%, 최하단이 100% 입니다, 마찬가지로 좌측 끝이 0%, 우측 끝이 100% 겠죠.

상단 50%, 좌측 50%면? 당연히 정 중앙이 됩니다. 이곳이 바로 image의 중심점이 됩니다.

​

그런데 여기까지만 적으면 이미지가 작아요. 왜냐면 이건 elements, 즉 배경이 아니라 구성요소이기 때문에

기본 크기가 좀 작게 나옵니다.

그래서 width: 100% 옵션을 넣어서 가로길이를 100%로 맞춰줍니다.

가로만 늘어나는게 아니라, 세로도 비율에 따라 늘어나기 때문에 딱 배경화면과 겹쳐지게 되요.

​

이대로 복사 / 붙여넣기 해서 entity와 on일때의 이미지만 바꿔주면 되겠지만, 아쉽게도 그건 또 아닙니다.

표시할 이미지가 1개가 아니기 때문에, 서로 겹쳐지면서 가장 마지막것만 표시가 되거든요.(포토샵의 레이어 개념)

​

이때 등장하는 옵션이 있습니다.

mix-blend-mode: lighten

바로 스타일 옵션에 들어가는 mix-blend-mode 라는 옵션인데요,

저희가 사용할건 이중에서도 lighten 이라는 옵션 입니다.

혹시나 그래픽 프로그램을 조금이라도 다뤄보셨다면, 한번에 뭔지 아시겠죠?

바로 겹쳐진 레이어를 어떤식으로 표시할지 결정하는 옵션이거든요.

보통 nomal 상태라면, 여러장의 종이를 겹쳐두는것 처럼 맨 마지막에 올라온 이미지만 표시가 되죠.

하지만 lighten 옵션은, 겹친 이미지 중에 상대적으로 밝은 부분이 있다면,

그 이미지가 설령 가장 아래 깔려있다고 해도 밝은 부분은 보여지게 됩니다.

즉, 불이 켜져있는 이미지가 표시되면, 그게 맨 아래나 중간에 있어도 가장 위에서 보이게 되는거죠.

그것도 딱 밝은 부분만 요.

​

우리는 베이스 이미지와 off상태의 이미지가 같고, 불이 켜져있는 이미지는 딱 베이스 이미지에서

해당 영역만 더 밝아지게 만들어 놨기 때문에, 이 lighten 옵션을 쓰게 되면

불 켜진 부분만 보이게 됩니다.

​

물론 이 옵션은 한계가 있기도 합니다.

빛이 겹치는 부분이 있다면, 겹쳐셔 더 밝게 표현되는게 아니라 가장 밝은 값만 표시하게 되거든요.

하지만 이런식으로 더 세세하고 예쁘게 만들려면, 그래픽 프로그램을 필수적으로 거쳐야 합니다.

이것저것 해봤는데, 제 실력이 부족한건지 그냥은 답이 없더라구요..

​

​

자 이런식으로 다 만들고 나면, 마우스를 올릴때 계속 마지막에 설정한 entity에 대한 정보를 불러오려고 합니다.

어디에 올려도요... 이러면 불편하겠죠?

pointer-events: none

style 항목에 추가로 지정을 해주세요.

문자 그대로, pointer가 올라가 있을때의 event를 none(없음) 으로 해줍니다.

그러면 마우스 커서나 손가락을 대도, 아무 반응이 없겠죠.

​

아, 그런데 클릭해서 켜고/끄기 할거 아닌가요?

그건 맞는데, 지금 하는건 그 베이스로 깔리는 이미지를 만드는 과정이라 별개입니다!

다음시간에 보시면 알아요~

​

  - type: image
    entity: switch.balcony
    state_image:
      'on': /local/floor/balcony1.png
      'off': /local/floor/floor.png
    style:
      top: 50%
      left: 50%
      width: 100%
      pointer-events: none
      mix-blend-mode: lighten

그래서 최종 모습은 위와 같이 됩니다.

​

이제 elements: 아래에 있는 부분(- type image 부터 mix-blend-mode 까지) 선택해서

복사 / 붙여넣고(이미지 수량만큼) 하고, entity 부분과 on일때 표시할 이미지만 앞에서 체크한걸로 맞춰서 바꿔주시면 됩니다.

그런다음, 각 위치별 스위치를 껐다/켰다 하면서 이미지들이 정상적으로 잘 표시 되는지 확인하시면 완성!

​

혹시 블렌드 모드가 뭔가 어색하다 싶으면, style 부분에 opacity: 80% 이런식으로

투명도 조절 옵션을 넣어주면 좀 더 자연스러워 집니다.

물론 색이 다르거나 라이트의 밝기가 다른경우는 근본적인 수정이 필요할수도 있어요...

이건 렌더링 하는 환경마다 다르기 때문에 정답이 없네요.

​

제 경험으로는, 강한 빛이 섞이는 영역에 다른 색의 빛이 들어가면, 경계가 잘 드러나더라구요.

그러므로 한쪽 구석에 있는게 아니라면, 왠만하면 동일한 색으로 빛을 구성하는게 좋을것 같아요.

​

자 이번시간은 여기까지!

다음에 또 만나요~