Floorplan Creator 다운로드 - Floorplan Creator 소스 코드 다운로드

Floorplan Creator

기타 소스코드

1.0.0

다운로드

ESPresense-companion을 위한 FloorPlan 생성기

이 프로젝트는 ESPresenseIPS(https://github.com/ESPresense/ad-espresense-ips) 또는 ESPresense-companion(https://github.com/ESPresense/ESPresense-companion)에 대한 평면도를 더 쉽게 생성할 수 있도록 만들어졌습니다. GUI를 가짐으로써. 쉽게 정렬할 수 있도록 공간에 스냅 기능을 제공하고 벽에 있을 때 커서 양쪽에 측정값을 제공합니다. 이 애플리케이션은 HTML/JS/CSS로 개발되었으며, 라이브러리가 없습니다(그러나 CDN에서는 정말 훌륭합니다). Canvas의 강력함!

데모 및 온라인 평면도 작성기

이제 https://espresense.com/Floorplan-Creator/에서 앱을 사용해 볼 수 있습니다.
계획을 세우고, 앱을 테스트하고, 내보내기를 생성할 수 있습니다. Mqtt 통합은 작동해야 하지만 https의 mqtt 공개 인스턴스에서는 작동해야 합니다. (SSL mqtt가 이제 구현되었습니다)

사용방법

프로젝트 다운로드
브라우저로 "index.html"을 엽니다.
각 방 그리기 시작
각 방 안에 esp32 장치를 추가하세요
"yaml로 내보내기" 버튼을 클릭하세요
생성된 코드를 ESPresenseIPS app.js 파일로 복사
선택사항:
- 구성이 복사되고 AppDaemon이 다시 시작된 후
- MQTT 구성 패널(⚙)을 열고 구성을 입력하세요.
- 장치가 실시간으로 평면도에 표시됩니다.
- 장치는 mqtt 구성 패널의 목록에도 나타납니다.
- 완벽하게 만들기 위해 모든 것을 조정하는 것을 즐겨라

변경 사항

2023년 12월 3일

https://github.com/ESPresense/ESPresense-companion과 호환되도록 yaml 출력을 수정했습니다.

2022년 5월 4일

대부분의 상단 및 왼쪽 방 계산 수정(대부분의 상단 및 왼쪽 방이 동일한 방이 아닌 경우도 있음) - 감사합니다 @Shuttleu

2022년 3월 21일

단위 선택기가 추가되었습니다. 피트를 선택하면 Yaml 내보내기 전에 값이 미터로 변환됩니다.
이미 작성된 계획에서 단위를 전환할 수 있습니다.
로컬 저장소에 단위를 저장하는 데 사용된 앱은 이제 변수입니다.
업데이트하면 계획 및 오른쪽 요소의 단위가 mm 및 mft로 표시됩니다(이전 "m" 단위가 라벨에 있고 새 변수 단위를 추가하기 때문입니다).
UI 버그일 뿐이며 예상대로 작동합니다.
귀찮은 경우 로컬 저장소의 방 레이블에서 "m"을 수동으로 제거할 수 있습니다.

2022년 5월 3일

MQTT에서 익명 연결을 허용하도록 설정하세요. @DTTerastar에게 감사드립니다.
자바스크립트 실행이 중단되는 것을 방지하기 위해 MQTT 연결 끊김 예외를 포착하세요. @DTTerastar에게 감사드립니다.
MQTT 클라이언트에 SSL이 구현되었습니다. @DTTerastar에게 감사드립니다.
설정 패널에서 SSL 구성 가능
MQTT 설정 패널을 통해 평면도에서 장치 숨기기/표시
MQTT 설정 패널을 통해 평면도에서 장치 색상 변경

2022년 2월 28일

왼쪽의 새로운 도구 메뉴
계획 라벨(방 제목 및 메뉴)을 숨기거나 표시하는 새로운 라벨 토글
새로운 파일 구조(프로젝트가 이 정도로 성장할 예정은 아니었음)
yaml 내보내기 시 들여쓰기 수정
esp32 장치에 이름을 추가합니다. 이름은 yaml로 내보내집니다.

2022년 2월 27일

평면도가 화면 밖에 있는 경우 캔버스의 위쪽, 왼쪽, 아래쪽 및 오른쪽에 화살표 표시기를 표시하여 어느 쪽인지 나타냅니다.

2022년 2월 26일

MQTT 제어판에 이제 연결된 장치(및 더 이상 연결되지 않은 경우에도 알려진 장치)가 표시됩니다.
장치를 추적하는 MQTT 클라이언트
구성을 입력하는 MQTT 설정 페이지
실시간으로 평면도에 장치 표시

2022년 2월 26일

ESP32 장치 적용 범위 버튼 표시
장치 주위에 원으로 표시되는 ESP32 적용 범위
적용 거리는 조정 가능합니다.
원 색상은 조정 가능
장치를 배치할 때 적용 범위 원이 표시되어 올바른 위치에 배치할 수 있습니다.
이제 앱으로 예술 작품을 만들 수도 있습니다.

2022년 2월 25일

어두운 테마
yaml 평면도 좌표 수정(cm 단위로 m 필요)
아이콘 및 작은 UI 조정
방에 ESP32 추가
ESP32 Z 값을 편집하고 해당 yaml 코드를 확인하세요.
yaml 내보내기는 이제 esp32 위치도 내보냅니다.

2022년 2월 24일

캔버스에서 평면도를 이동하려면 스크롤/마우스 휠을 사용하세요.

계획된 것.

[ ] 더 나은 UI/UX.
[✓] 평면도를 이동하려면 캔버스에서 스크롤/휠을 사용하세요.
[ ] 캔버스를 확대/축소합니다.
[ ] 캔버스에서 이동합니다.
[✓] 방에 esp32를 추가하고 정확하게 배치하는 기능.
[✓] esp32 위치를 회의실에서 ESPresenseIPS yaml 형식으로 내보냅니다.
[✓] 각 방에 최소 3개의 신호가 있는지 확인하기 위해 각 esp32 블루투스 신호 반경을 계획에 표시하십시오. (어디에 배치하는 것이 가장 좋은지 결정하는 데 도움이 됩니다;)).
[✓] 평면도에 장치를 직접 표시하는 MQTT 클라이언트.
[ ] 방을 드래그/생성하는 동안 정밀도 변경을 허용합니다.
[✓] MQTT용 SSL(https 인스턴스의 홈 어시스턴트 www 폴더에서 앱을 호스팅할 수 있음)
[✓] 왼쪽 도구 모음
[ ] 사용자가 스냅 임계값과 정밀도 등을 사용자 정의할 수 있는 값 수정자가 있는 왼쪽 도구 모음
[✓] Yaml의 들여쓰기 수정
[ ] 코드 리팩토링, 주석 추가.

인위적인

U/L 모양의 방:

원하는 모양을 얻기 위해 여러 개의 방을 만듭니다.
모두 같은 이름으로 이름을 지어주세요
ESPresenseIPS는 사용자가 해당 방에 있으면 홈 어시스턴트에게 동일한 이름을 보내야 합니다.

위치는 다음과 같이 계산됩니다.

x 값이 가장 작은 방을 찾습니다(화면 왼쪽).
y 값이 가장 작은 방을 찾습니다(화면 상단).
해당 2개 값으로 오프셋을 생성합니다. 즉, "최소X, 최소Y"는 이제 "0,0" 위치입니다.
그려진 방에서 저장된 모든 위치는 이 오프셋으로 다시 계산됩니다.

스크롤 :

스크롤은 캔버스의 평면도를 이동합니다
스크롤 위치는 저장소에서 직접 업데이트됩니다(코드의 모든 곳에서 오프셋하는 대신).
스크롤하면 각 방의 초기 좌표가 변경됩니다.
내보내기 전에 계산되는 방식으로 인해 최종 내보낸 값에는 영향을 미치지 않습니다.

ESP32 장치:

장치는 x, y, z 값만 내보냅니다.
yaml로 내보낼 때 기기에 방 이름이 있습니다.
z 값은 기본적으로 0으로 설정되어 있으며 장치 모달을 열 때 변경할 수 있습니다(오른쪽 메뉴의 방 이름 아래 녹색 사각형).
적용 범위 및 색상 값은 표시 목적으로만 사용됩니다(내보낼 수 없음).

복구/YAML을 JSON으로/삭제된 로컬 저장소.... 이런! (이전에 yaml 코드를 내보낸 경우):

앱에서 복구 버튼을 클릭하세요.
경고를 읽고 확인을 클릭하세요.
모달 위에 있는 텍스트를 읽습니다.
yaml 코드를 yaml(왼쪽) 영역에 붙여넣습니다.
오른쪽에는 해당 json 객체가 표시됩니다.
"저장"을 클릭하고 다시 로드하면 평면도가 다시 표시됩니다.
이 기능은 실험적이며 변환 프로세스가 제대로 코딩되지 않았으며 특정 구문에 대해서만 작동할 수 있습니다(변환 프로세스의 코딩 대상에 대한 예는 아래 평면도 코드 참조).
변환은 룸의 레이블 위치를 다시 계산하지 않으므로 레이블이 왼쪽 상단에 표시되고 일부는 오른쪽 메뉴에 정의되지 않습니다. 하지만 시간을 절약할 수 있고 계속해서 작업하고 문제 없이 업데이트된 yaml을 내보낼 수 있습니다.
이것은 보너스 안전망입니다. 작동하면 기뻐하고, 문제가 없으면 그리기를 시작하세요. 아마도 이 "기능"을 업데이트하지 않을 것입니다.

객실을 확보해 보세요: ... 그런 다음 객실 계획: ... , 객실 계획의 경우 y1, x1, y2, x2를 순서대로 사용하세요. Rooms: 이름은 roomplans: 이름과 일치해야 합니다. 왜냐하면 앱이 장치를 방에 배치해야 하고 계산이 이름으로 수행되기 때문입니다.

 rooms:
    kitchen: [0.035, 2.285, 0]
    bedroom: [3.68, 11.045, 1.2]
    livingroom: [3.59, 5.805, 1.2]
    second_bedroom: [7.275, 5.559928991794586, 0]
    office: [10.48, 2.715, 0]
roomplans:
    - name: kitchen
        y1: 0
        x1: 0
        y2: 4.29
        x2: 3.59
    - name: bathroom
        y1: 4.29
        x1: 0
        y2: 6.72
        x2: 2.36
    - name: toilet
        y1: 6.72
        x1: 0
        y2: 7.98
        x2: 2.36
    - name: second_bedroom
        y1: 7.98
        x1: 0
        y2: 12.06
        x2: 3.68
    - name: bedroom
        y1: 7.98
        x1: 3.68
        y2: 12.06
        x2: 7.6
    - name: entrance
        y1: 4.29
        x1: 2.36
        y2: 7.98
        x2: 3.59
    - name: entrance
        y1: 6.2
        x1: 3.59
        y2: 7.98
        x2: 7.6
    - name: livingroom
        y1: 1.37
        x1: 3.59
        y2: 6.2
        x2: 7.6
    - name: office
        y1: 0
        x1: 7.6
        y2: 4.92
        x2: 10.53