그림카드 대용 위지익 수정가능한 대시보드 편집 툴로 집안 도면위에 자유로운 위치 이동 배치 가능한 에디터

그림카드 대용 위지익 수정가능한 대시보드 편집 툴로 집안 도면위에 자유로운 위치 이동 배치 가능한 에디터

편리한 작업 정보 공유 드립니다

출처)

https://www.reddit.com/r/homeassistant/comments/1qgg467/i_built_a_visual_floorplan_editor_for_home/?utm_source=chatgpt.com

작업 > 웹에서 구성 작업 > 대시보드 추가 입니다

https://kishorviswanathan.github.io/ha-floorplan/#/editor

제작자 공유 내용입니다

수동으로 작업하는 게 너무 힘들어서 홈 어시스턴트용 시각적 평면도 편집기를 만들었습니다.

안녕하세요 , r/homeassistant 여러분 !

top: % 많은 분들과 마찬가지로 저도 대시보드에 세련되고 인터랙티브한 평면도를 원했습니다. 하지만 좌표를 추측 하고 left: % 조명 영역을 정의하기 위해 끝없이 많은 YAML 코드를 수동으로 작성하는 과정은 정말 고통스러웠습니다.

그래서 저는 이 문제를 해결하기로 했습니다. 완전한 비주얼 에디터가 포함된 맞춤형 카드를 제작했습니다 .

문제점

CSS 좌표를 이용한 시행착오.

조명 몇 개를 설치하기 위해 복잡한 YAML 설정을 해야 합니다.

사실적인 조명을 위한 사용자 지정 폴리곤 영역을 만드는 것은 어렵습니다.

해결책: HA 평면도 카드

웹 편집기가 함께 제공되는 맞춤형 Lovelace 카드입니다. 사용 방법은 간단합니다.

평면도 이미지를 업로드하세요.

개체를 원하는 위치로 드래그 앤 드롭하세요 .

조명을 위한 사용자 지정 다각형 영역을 그리세요 (클릭).

YAML 파일을 내보내고 대시보드에 붙여넣으세요.

특징

💡 고급 조명 제어 : RGB, 밝기 및 클릭 토글 기능을 지원합니다.

🎵 미디어 플레이어 : 미디어 플레이어가 실행 중인지 시각적으로 확인할 수 있습니다.

에디터를 사용해 보세요: https://kishorviswanathan.github.io/ha-floorplan

코드 다운로드: https://github.com/kishorviswanathan/ha-floorplan

이 프로젝트는 완전한 오픈 소스입니다. 여러분의 피드백이나 기능 요청을 언제든 환영합니다!

또한, 이 기능을 사용하고 계시다면 설정 방법을 공유하여 다른 사람들에게 영감을 주세요.

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

작업방법 > 웹에서 작업후 >편집> 대시보드 추가 입니다

1) 이미지 추가 작업 > png 파일

2) 구성요소 추가 > 새로운 구성요소 추가 > 도면을 클릭 하면 새로운 구성요소 추가 입니다

제작후 > export 하여 저장 >

편집 ( 현제 light및 media_play 만 입력 가능한 구성 > 바이너리 switch 등은 편집으로 구성 변경 )

대시보드에 복사 붙이기

기존 대시보드 > 파일 저장 을

S:ui_lovelace_minimalistdashboardadaptive-dashviewspicture_card.yaml

저는 이용 직접 저장 편집시 > 이파일을 import 하여 편집

편집 작업은 간단한 편집 입니다

사진에 작업한 내용을 viewer로 확인동작후 > export 하여 저장 합니다

참고> 도면그리기 > png파일 편집 저장

https://cafe.naver.com/koreassistant/15475

편리한 간단 스위치을 도면에 편리 하게 구성 합니다