Floorplan Creator

ผู้สร้าง FloorPlan สำหรับสหาย ESPresense

โครงการนี้ถูกสร้างขึ้นเพื่อให้ง่ายต่อการสร้างแผนผังชั้นสำหรับ ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) หรือ ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) โดยมีกุย ช่วยให้จัดตำแหน่งได้ง่าย ช่วยให้วัดแต่ละด้านของเคอร์เซอร์ได้เมื่ออยู่บนผนัง แอปพลิเคชั่นนี้ได้รับการพัฒนาใน HTML / JS / CSS ไม่มีไลบรารี่ (แต่ฟอนต์ยอดเยี่ยมบน cdn) พลังของ Canvas !

ผู้สร้างแบบสาธิตและแบบออนไลน์

ตอนนี้คุณสามารถลองใช้แอปได้ที่: https://espresense.com/Floorplan-Creator/
คุณจะสามารถวาดแผน ทดสอบแอป และสร้างการส่งออกได้ การรวม Mqtt ควรใช้งานได้ แต่ใช้อินสแตนซ์สาธารณะของ mqtt ใน https (ตอนนี้ใช้ ssl mqtt แล้ว)

วิธีใช้

• ดาวน์โหลดโครงการ
• เปิด "index.html" ด้วยเบราว์เซอร์
• เริ่มวาดแต่ละห้อง
• เพิ่มอุปกรณ์ esp32 ภายในแต่ละห้อง
• คลิกปุ่ม "ส่งออกเป็น yaml"
• คัดลอกโค้ดที่สร้างขึ้นไปยังไฟล์ ESPresenseIPS app.js
• ไม่จำเป็น :
  • หลังจากคัดลอกการกำหนดค่าและรีสตาร์ท AppDaemon
  • เปิดแผงการกำหนดค่า MQTT (⚙) แล้วป้อนการกำหนดค่าของคุณ
  • อุปกรณ์ต่างๆ จะแสดงบนแปลนอาคารแบบเรียลไทม์
  • อุปกรณ์จะปรากฏในรายการในแผงกำหนดค่า mqtt ด้วย
  • สนุกกับการปรับแต่งทุกอย่างเพื่อให้สมบูรณ์แบบ

การเปลี่ยนแปลง

12-03-2023

• แก้ไขเอาต์พุต yaml เพื่อให้เข้ากันได้กับ https://github.com/ESPresense/ESPresense-companion

05-04-2022

• แก้ไขการคำนวณห้องบนและซ้ายส่วนใหญ่ (ในบางกรณีห้องบนและซ้ายส่วนใหญ่ไม่ใช่ห้องเดียวกัน) - ขอบคุณ @Shuttleu

21-03-2022

• เพิ่มตัวเลือกหน่วย เมื่อเลือกฟุต ค่าจะถูกแปลงเป็นเมตรก่อนส่งออก Yaml
• คุณสามารถสลับหน่วยตามแผนที่วาดไว้แล้วได้
• แอพที่ใช้ในการบันทึกหน่วยใน localstorage ตอนนี้เป็นตัวแปรแล้ว
• หากคุณอัปเดต คุณจะเห็นหน่วยตามแผนและองค์ประกอบที่ถูกต้องเป็น mm และ mft (เนื่องจากหน่วย "m" เก่าอยู่ในป้ายกำกับและฉันผนวกหน่วยตัวแปรใหม่)
• เพียงข้อบกพร่องของ UI จะทำงานตามที่คาดไว้
• คุณสามารถลบ "m" ออกจากป้ายกำกับห้องในที่จัดเก็บในตัวเครื่องได้ด้วยตนเองหากสิ่งนี้รบกวนจิตใจคุณ

05-03-2022

• ทำให้ MQTT อนุญาตการเชื่อมต่อแบบไม่ระบุชื่อ - ขอบคุณ @DTTerastar
• ติดตามข้อยกเว้นการตัดการเชื่อมต่อ MQTT เพื่อป้องกันไม่ให้การทำงานของจาวาสคริปต์เสียหาย - ขอบคุณ @DTTerastar
• SSL ใช้งานในไคลเอนต์ MQTT - ขอบคุณ @DTTerastar
• SSL กำหนดได้จากแผงการตั้งค่า
• ซ่อน/แสดงอุปกรณ์บนแผนผังผ่านแผงการตั้งค่า MQTT
• เปลี่ยนสีของอุปกรณ์บนแผนผังผ่านแผงการตั้งค่า MQTT

28-02-2022

• เมนูเครื่องมือใหม่ทางด้านซ้าย
• สลับป้ายกำกับใหม่เพื่อซ่อน/แสดงป้ายกำกับแผน (ชื่อห้องและรายละเอียด)
• โครงสร้างไฟล์ใหม่ (โปรเจ็กต์ไม่น่าจะโตขนาดนี้)
• แก้ไขการเยื้องในการส่งออก yaml
• เพิ่มชื่อให้กับอุปกรณ์ esp32 ชื่อจะถูกส่งออกใน yaml

27-02-2022

• แสดงตัวบ่งชี้ลูกศรที่ด้านบน ซ้าย ล่าง และขวาของผืนผ้าใบ หากแผนผังชั้นอยู่นอกหน้าจอเพื่อระบุว่าอยู่ด้านใด

26-02-2022

• ขณะนี้แผงควบคุม MQTT แสดงอุปกรณ์ที่เชื่อมต่อ (และอุปกรณ์ที่รู้จักแม้ว่าจะไม่ได้เชื่อมต่ออีกต่อไป)
• ไคลเอนต์ MQTT เพื่อติดตามอุปกรณ์
• หน้าการตั้งค่า MQTT เพื่อป้อนการกำหนดค่า
• แสดงอุปกรณ์บนแผนผังแบบเรียลไทม์

26-02-2022

• แสดงปุ่มครอบคลุมอุปกรณ์ ESP32
• ความครอบคลุมของ ESP32 แสดงเป็นวงกลมรอบๆ อุปกรณ์
• ระยะครอบคลุมสามารถปรับได้
• สีของวงกลมสามารถปรับได้
• วงกลมครอบคลุมสามารถมองเห็นได้เมื่อวางอุปกรณ์เพื่อช่วยจัดตำแหน่งให้ถูกต้อง
• ตอนนี้คุณสามารถสร้างงานศิลปะด้วยแอปนี้ได้แล้ว

25-02-2022

• ธีมสีเข้ม
• แก้ไขพิกัดแผนผังพื้น yaml (อยู่ในหน่วย cm ต้องการ m)
• ไอคอนและการปรับแต่ง UI เล็กน้อย
• เพิ่ม ESP32 ในห้อง
• แก้ไขค่า ESP32 Z และดูโค้ด yaml
• ตอนนี้การส่งออก yaml จะส่งออกตำแหน่ง esp32 ด้วยเช่นกัน

24-02-2022

• ล้อเลื่อน/เมาส์เพื่อย้ายแผนผังบนพื้นผ้าใบ

มีการวางแผนอะไร.

[ ] UI/UX ที่ดีขึ้น
[✓] เลื่อน/ล้อเลื่อนบนผืนผ้าใบเพื่อย้ายแผนผังชั้น
[ ] ซูมบนผืนผ้าใบ
[ ] แพนบนผืนผ้าใบ
[✓] ความสามารถในการเพิ่ม esp32 ในห้องและจัดตำแหน่งได้อย่างแม่นยำ
[✓] ส่งออกตำแหน่ง esp32 จากห้องเป็นรูปแบบ yaml ของ ESPresenseIPS
[✓] มองเห็นรัศมีสัญญาณบลูทูธ esp32 แต่ละรัศมีในแผนเพื่อให้แน่ใจว่าคุณมีสัญญาณอย่างน้อย 3 สัญญาณในแต่ละห้อง (จะช่วยพิจารณาว่าสถานที่ใดดีที่สุดที่จะวางไว้ ;))
[✓] ไคลเอนต์ MQTT เพื่อแสดงอุปกรณ์บนแผนผังชั้นโดยตรง
[ ] อนุญาตให้เปลี่ยนความแม่นยำขณะลาก/สร้างห้อง
[✓] SSL สำหรับ MQTT (เพื่อให้สามารถโฮสต์แอปในโฟลเดอร์ www ผู้ช่วยในบ้านบนอินสแตนซ์ https)
[✓] แถบเครื่องมือด้านซ้าย
[ ] แถบเครื่องมือด้านซ้ายพร้อมตัวแก้ไขค่าเพื่อให้ผู้ใช้ปรับแต่งเกณฑ์สแน็ปและความแม่นยำและอื่นๆ
[✓] แก้ไขการเยื้องใน Yaml
[ ] การปรับโครงสร้างโค้ดเพิ่มความคิดเห็น

เทคนิค

ห้องรูปตัว U / L :

• สร้างห้องหลายห้องเพื่อให้ได้รูปทรงที่ต้องการ
• ตั้งชื่อทั้งหมดด้วยชื่อเดียวกัน
• ESPresenseIPS ควรส่งชื่อเดียวกันไปยังผู้ช่วยที่บ้านหากผู้ใช้อยู่ในห้องเหล่านั้น

ตำแหน่งจะถูกคำนวณดังนี้:

• หาห้องที่มีค่า x น้อยที่สุด (ด้านซ้ายของหน้าจอ)
• ค้นหาห้องที่มีค่า y น้อยที่สุด (ด้านบนของหน้าจอ)
• สร้างออฟเซ็ตด้วย 2 ค่าเหล่านั้น (ซึ่งหมายถึง "smallestX, littlestY" ตอนนี้เป็นตำแหน่ง "0,0"
• ทุกตำแหน่งที่บันทึกไว้จากห้องที่ดึงออกมาจะถูกคำนวณใหม่ด้วยการชดเชยนี้

เลื่อน :

• แถบเลื่อนจะย้ายแผนผังบนพื้นผ้าใบ
• ตำแหน่งการเลื่อนได้รับการอัปเดตโดยตรงในที่เก็บข้อมูล (แทนที่จะชดเชยทุกที่ในโค้ด)
• พิกัดเริ่มต้นของแต่ละห้องจะเปลี่ยนไปหากคุณเลื่อน
• ซึ่งจะไม่ส่งผลต่อค่าที่ส่งออกขั้นสุดท้ายเนื่องจากมีการคำนวณก่อนส่งออก

อุปกรณ์ ESP32 :

• อุปกรณ์ส่งออกเฉพาะค่า x, y, z
• อุปกรณ์มีชื่อห้องเมื่อส่งออกไปยัง yaml
• ค่า z ถูกตั้งค่าเป็น 0 โดยค่าเริ่มต้น และสามารถเปลี่ยนแปลงได้เมื่อเปิดโมดอลอุปกรณ์ (สี่เหลี่ยมสีเขียวใต้ชื่อห้องในเมนูด้านขวา)
• ความครอบคลุมและค่าสีมีไว้เพื่อการแสดงผลเท่านั้น (จะไม่ถูกส่งออก)

การกู้คืน / YAML เป็น JSON / ลบที่เก็บข้อมูลในเครื่อง .... อุ๊ย! (หากคุณเคยส่งออกรหัส yaml มาก่อน):

• ในแอป ให้คลิกปุ่มกู้คืน
• อ่านการแจ้งเตือน คลิกตกลง
• อ่านข้อความที่ด้านบนของกิริยา
• วางรหัส yaml ของคุณลงในพื้นที่ yaml (ซ้าย)
• ทางด้านขวาคุณควรเห็นวัตถุ json ที่เกี่ยวข้อง
• คลิก "บันทึก" และโหลดซ้ำ คุณจะเห็นแผนผังชั้นของคุณอีกครั้ง
• คุณลักษณะนี้เป็นการทดลอง กระบวนการแปลงมีการเขียนโค้ดไม่ดี และอาจทำงานได้เฉพาะกับไวยากรณ์เฉพาะเท่านั้น (ดูโค้ดแผนผังชั้นด้านล่างสำหรับตัวอย่างว่ากระบวนการแปลงมีการเขียนโค้ดไว้เพื่ออะไร)
• การแปลงนี้ไม่ได้คำนวณตำแหน่งป้ายกำกับสำหรับห้องใหม่ ดังนั้นคุณจะมีป้ายกำกับด้านซ้ายบนและบางส่วนไม่ได้กำหนดไว้ในเมนูด้านขวา แต่สามารถช่วยประหยัดเวลาได้ และคุณยังสามารถทำงานและส่งออก yaml ที่อัปเดตได้โดยไม่มีปัญหา
• นี่คือโบนัสความปลอดภัย หากได้ผล จงมีความสุข หากได้ผล ให้เริ่มวาด ฉันอาจจะไม่อัปเดต "คุณสมบัติ" นี้

พยายามมีห้อง: ... แล้วก็ roomplans: ... สำหรับแผนผังห้อง ให้ y1, x1, y2, x2 ตามลำดับนั้น ห้อง: ชื่อควรตรงกับแผนผังห้อง: ชื่อ (เนื่องจากแอปจำเป็นต้องวางอุปกรณ์ไว้ในห้องและคำนวณชื่อเสร็จแล้ว)

 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

เกร็ดเล็กๆ น้อยๆ (ล้าสมัยแต่ฉันไม่สามารถรับอันใหม่ได้ในขณะนี้ - ตรวจสอบการสาธิตเพื่อดูการออกแบบและคุณสมบัติใหม่)