[HA] 3D Floor Plan 적용하기 #4_영역 토글

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

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

지난시간까지 만들어 둔 floor plan의 화면을 클릭해서

전등을 제어해 보도록 하겠습니다.

​

★★ IOS나 버전 낮은 안드로이드의 경우 trasnform 처리 관련으로 인하여

본문의 방법이 잘 동작하지 않을 수 있습니다.

이런 경우는 아래 시리즈 링크중 4.5편의 내용을 참조하시기 바랍니다.

​

시리즈

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가능, 다른방법)

​

일반적으로 구역 크기에 맞는 파일을 따로 제작하거나, 투명한 파일을 올려서 만드는데요

저는 다른 방법으로 진행해 보겠습니다.

내용 보시면 아시겠지만, 적당한 파일로 응용만 하시면 됩니다.

전 그냥 위쪽 내용을 그대로 복사해서 사용하도록 하겠습니다.

​

elements 부분 전체를 복사해서 맨 아래 붙여넣기 해주세요.

그런 다음, 가장 아래 부분부터 작업 해주시면 됩니다.

★ 이 단계는 항상 3편에서 진행한것 보다 아래줄에서 작업해 주셔야 합니다.

★★ elements는 작성순서의 역순으로(가장 위에 설정한게 가장 바닥에 깔리는) 레이어 형태를 이룹니다.

​

일단 state_image 로 on / off 에 설정했던 이미지를 그대로 써도 되지만, 구문이 길어지니 좀 변경하겠습니다.

우리는 on/off 상태에 따라 변화하는 이미지가 필요한게 아니라, 그냥 이미지만 있으면 되거든요.

그러니까. state_image 및 그 아래 on/off 항목 대신, image: /local/floor/floor.png 처럼

적당한 이미지 하나만 지정해 주시면 됩니다.

이미지 파일은 뭐든 상관 없어요. 대충 지정해 주셔서 표시만 되면 OK!

    state_image:
      'on': /local/floor/rest1.png
      'off': /local/floor/floor.png

▼▼▼▼▼▼▼

    image: /local/floor/floor.png

​

그리고 지정된 영역을 클릭했을때 불이 켜지고 / 꺼지고 하는 동작을 진행해봐야 겠죠?

일단 이 동작은 tap_action 이라고 합니다. 말 그대로 한번 탭 했을때의 동작인거죠.

    tap_action:
      action: toggle

탭 액션 아래쪽에 두칸 들여쓰기 하고, action: toggle 로 지정해 줍니다.

이렇게 하면, 탭 했을때 => 해당 elements에 지정된 entity를 => 토글해라 라는 액션이 이루어 집니다.

그 아래칸은 hold_action 을 넣어주시고, more-info 로 지정해 주세요.

    hole_action:
      action: more-info

이렇게 하면, 해당 이미지를 길게 눌렀을때 => 지정된 entity에 대한 => 자세한 정보를 표시하게 됩니다.

​

여기까지 하면 화면을 눌렀을때 토글이 되어야 하는데, 안 되겠죠?

그 이유는, 앞서 지정한 style 항목에 있는 구문 때문입니다.

pointer-events: none ▶ 이걸 삭제해 주셔야 해요.

pointer가 올라가 있을때의 events를 none으로 설정했기 때문에, 클릭이 안 됩니다.

지워주시면 정상적으로 클릭이 가능한걸 볼 수 있습니다.

​

하지만 화면의 어디를 클릭해도, 마지막 항목의 entity만 토글이 되죠?

왜냐면 지금 이미지가 화면 전체를 덮고있기 때문이죠.

이제 이걸 줄여줘야 하는데요,width, height 등으로 조절을 하게 되면, 원하는 동작이 잘 안됩니다.

그래서 다른 방법으로 진행해야 하는데요, 그 전에 먼저 설정된 옵션들을 초기화 시키고

몇가지 항목을 추가하도록 하겠습니다.

​

    style:
      top: 50%
      left: 50%
      width: 100%
      pointer-events: none
      mix-blend-mode: lighten

▼▼▼▼▼▼▼

    style:
      top: 0
      left: 0
      bottom: 0
      right: 0
      transform: 'translate(0%, 0%) scale(100%, 100%)'
      border: 5px solid red
      opacity: 100

width, pointer-events, mix-blend-mode 를 제거하고

top, left 값은 0으로 변경, bottom과 right를 추가 후 마찬가지로 0 으로 설정해주시고

transform: 'translate(0%, 0%) scale(100%, 100%)'

border: 5px solid red

opacity: 100

이상 3개 항목을 추가해 줍니다.

opacity: 100

이 카드의 불투명도를 나타내는 옵션 입니다.

지금은 100으로 설정했으니 100%, 완전히 화면을 이 카드로 덮는다는 의미 이고,

필요에 따라 이 수치는 조절할 수 있지만 일단 100으로 진행하시면 됩니다. 어차피 나중에 바꿀거예요

border: 5px solid red

이미지의 위치나 색상에 따라, 경계면이 잘 안보일 수 있습니다.

이럴때 설정할 수 있는 옵션으로, 테두리(border)를 그려주는 항목 입니다.

5픽셀(5px) 두께로 그리고, 꽉 채워진 빨간색(solid red) 으로 만들어 줄거예요.

물론 solid blue나 solid green 등도 사용할 수 있고 rgb값 지정도 가능하지만,

어차피 나중에 안 보일 옵션이기 때문에 그냥 눈에 잘 띄는걸로 해주시면 됩니다.

​

transform 은 복잡한거라 일단 아래쪽에!

​

​

그러면 최종적으로 다음과 같이 변하게 됩니다.

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

▼▼▼▼▼▼▼

위에 2줄 제외하고 싹 다 바뀌었죠?

이렇게 하셔도 되고, state_image와 on/off 까지는 그대로 두셔도 되고 자유입니다.

  - type: image
    entity: switch.rest
    image: /local/floor/floor.png
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 0
      left: 0
      bottom: 0
      right: 0
      transform: 'translate(0%, 0%) scale(100%, 100%)'
      border: 5px solid red
      opacity: 100

하나를 수정했다면, 이제 나머지도 동일하게 하면 되겠죠? tap_action 부터(혹은 image 부터) opacity 까지

싹 긁어서 복사하신 다음, 위에 있는 elements에 붙여넣기 해주세요.

물론 기존에 있는 불필요한 부분들을 지우면서 해주셔야겠죠?

​

이때, floor plan의 베이스가 될 elements까지 변경되지 않도록 잘 구분해서 해주세요.

transform: 'translate(0%, 0%) scale(100%, 100%)'

대망의 trasnform 옵션 입니다.

trasnform은 CSS에서 쓰이는 스타일 옵션중 하나인데, 객체의 이동이나 조절등에 대한 내용을 포함하고 있습니다.

transform - CSS: Cascading Style Sheets | MDN (mozilla.org)

자세한 내용은 위 링크를 참조하시면 되고, 저희가 여기서 사용할 옵션은 이중에 translate 와 scale 옵션 입니다.

​

trasnlate = 이동

scale = 크기조절

​

이게 뭐하는건지는 딱 봐도 알겠지만, 어떻게 쓰는지는 애매하죠?

뒤에 있는 숫자를 이용해서 조절해 주시면 됩니다.

조절 방법은 여러가지가 있지만, 저는 편하고 익숙한 퍼센트(%) 를 사용하도록 하겠습니다.

​

우선 trasnlate부터 보시죠.

translate 뒤에 있는 숫자는 콤마(,) 를 기준으로 앞쪽은 X축(좌, 우) / 뒤쪽은 Y축(상, 하) 의 조절 입니다.

X축은 양수일때 우측 / 음수일때 좌측이고

Y축은 양수일때 하단 / 음수일때 상단 입니다.

​

translate(0%, 0%) = 이미지의 위치를 중앙에 둡니다.

translate(30%, 0%) = 이미지를 중앙에서 우측에 둡니다

translate(-30%, 0%) = 이미지를 중앙에서 좌측에 둡니다

translate(0%, 30%) = 이미지를 중앙에서 하단에 둡니다

translate(0%, -30%) = 이미지를 중앙에서 상단에 둡니다

대략적인 이해가 되시죠?

translate(-30%, -30%) = 이미지를 중앙에서 좌측 상단에 둡니다

translate(30%, 30%) = 이미지를 중앙에서 우측 하단에 둡니다

​

이런식으로 조합하면, 해당 이미지를 어디에 위치할지 결정할 수 있게 되겠죠.

​

​

자 그다음은 scale 옵션 입니다.

이것도 비슷한데, 더 간단합니다. 컴마(,) 앞쪽은 X축(가로길이) / 뒤쪽은 Y축(세로길이) 의 조절 입니다.

scale(100%, 100%) 라는건, 이미지 크기를 가로/세로 100% 로 표시한다는 의미 입니다.

그렇다면 scale(50%, 50%)는? 올려진 이미지의 가로/세로를 50%로 축소해서 표시한다는 의미가 되겠죠.

​

지금 예시의 이미지 같은경우, 가로길이가 세로보다 길죠?

그렇다면 scale(35%, 50%) 이런식으로 하면, 정사각형 비슷하게 나옵니다.

베란다 같은곳을 표현하려면 어떻게 할까요? scale(8%, 80%) 이런식으로 하면 세로로 길죽한 막대형태가 되죠.

​

자 이 두가지를 조합해서, 각 elements(entity) 별로 토글하기 원하는 위치에 이미지 크기를 맞춰주시면 됩니다.

어떻게요? 노.가.다......ㅠ.ㅜ

​

이건 뭐 방법이 없습니다....

대략적인 위치로 translate 옵션 움직여서 이동시키고, scale 조절하고, 다시 translate 조절 하고, 또 scale 조절..

이걸 반복해서 elements 하나를 맞추고, 그 윗칸으로 가서 똑같은 작업을 반복해 주시면 됩니다.

​

이 작업을 할때, 완벽하게 맞춘다는 생각은 버리시는게 좋습니다.

완벽하게 맞추는거 좋긴 한데, 어차피 우리가 클릭할곳(터치할곳) 은 해당 섹터의 중간 근처가 편할테니

경계면쪽을 만질 일은 별로 없거든요. 그래서 전 살짝 겹치거나 조금 부족하더라도 그냥 무시하고 진행했습니다.

물론, 맞추셔도 무방합니다.

​

섹터의 모양이 네모가 아니라 ㄱ 자 모양이나 ㄴ 자 형태 이신가요?

그렇다면 동일한 elements를 만들어서 사각형을 이어붙인다는 느낌으로 영역을 채워주시면 됩니다.

혹시 모양이 마름모꼴 이라던가 사다리꼴 이라면, skew나 rotate 등을 사용해서 조절할 수 있는데

이런 부분은 위에 남겨드린 CSS trasnform 관련 내용 링크를 확인하셔서 진행해 보셔야 할겁니다.

​

자 이렇게 모든 부분을 작성하였다면, 화면을 클릭(터치)해서 해당 영역에 지정된 entity를 토글하는것 까지 완성!

위 GIF는 image로 설정한것도 있고 state_image로 설정한것도 있어서 표시되는 모양이 좀 다르지만,

아무런 상관이 없다는걸 알 수 있습니다.

어차피 이미지는 영역의 테두리만 결정하는 역할이거든요

​

이렇게 영역별로 제대로 켜지고/꺼지는게 확인 되셨다면, 이제 저 이미지들을 가려줄 차례 입니다.

      opacity: 100

▼▼▼▼▼▼▼

      opacity: 0

토글 동작을 하는 elements의 opacity(불투명도) 를 0 으로 만들어주면, 전 시간에 진행한 부분까지만 표시되겠죠?

​

그러면 깔끔하게 완성!

​

여기서 끝이냐구요? 일단은 여기서 끝!

이 다음에 어떻게 꾸미고 어떤걸 배치할건지는... 다음에 기회가 되면 진행해 보겠습니다!

궁금하신 분들은 다음 페이지를 참조하시면 됩니다~

https://www.home-assistant.io/lovelace/picture-elements/%EF%BB%BF

 

​자 오늘은 여기까지!

다음에 또 만나요~