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) 建立平面圖透過有一個圖形使用者介面。它提供了房間對齊功能，方便對齊，讓您在牆上時可以測量遊標兩側的尺寸。這個應用程式是用 HTML/JS/CSS 開發的，沒有函式庫（但在 CDN 上有 fontawesome），Canvas 強大！

演示和線上平面圖創建器

現在您可以在以下位置試用應用程式：https://espresense.com/Floorplan-Creator/
您將能夠繪製計劃、測試應用程式並產生匯出。 Mqtt 整合應該可以工作，但需要使用 https 中的 mqtt 公共實例。（ssl mqtt現已實作）

如何使用

下載項目
用瀏覽器開啟“index.html”
開始繪製每個房間
在每個房間內添加 esp32 設備
點擊“匯出到 yaml”按鈕
將產生的程式碼複製到 ESPresenseIPS app.js 文件
選修的：
- 複製配置並重新啟動 AppDaemon 後
- 打開 MQTT 配置面板 (⚙) 並輸入您的配置
- 設備將即時顯示在平面圖上
- 設備也會出現在 mqtt 配置面板的清單中
- 享受調整一切使其完美的樂趣

變化

12-03-2023

修改 yaml 輸出以與 https://github.com/ESPresense/ESPresense-companion 相容

2022年5月4日

修復了大多數頂部和左側房間的計算（在某些情況下，大多數頂部和左側房間不是同一個房間） - 感謝@Shuttleu

2022年3月21日

新增單位選擇器，選擇英尺時，在 Yaml 匯出之前，值將轉換為公尺。
您可以在已繪製的平面圖上切換單位
App過去將單位保存在本地儲存中，現在它是一個變數。
如果您更新，您將看到平面圖上的單位和右側元素為 mm 和 mft（因為舊的“m”單位位於標籤中，我附加了新的變數單位）
只是一個 UI 錯誤，將按預期工作
如果您覺得麻煩，您可以手動從本地儲存的房間標籤中刪除“m”。

2022年5月3日

讓 MQTT 允許匿名連接 - 感謝@DTTerastar
捕獲 MQTT 斷開連接異常以防止 javascript 執行中斷 - 感謝 @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 位置從 rooms 匯出為 ESPresenseIPS yaml 格式。
[✓] 讓每個 esp32 藍牙訊號半徑在平面圖上可見，以確保每個房間至少有 3 個訊號。（將有助於確定放置它們的最佳位置；））。
[✓] MQTT 用戶端直接在平面圖上顯示設備。
[ ] 允許在拖曳/建立房間時更改精確度。
[✓] 用於 MQTT 的 SSL（能夠將應用程式託管在 https 實例上的家庭助理 www 資料夾中）
[✓] 左側工具列
[ ] 左側工具列帶有值修飾符，允許使用者自訂捕捉閾值和精確度等
[✓] 修正 Yaml 中的縮排
[ ] 程式碼重構，新增註解。

技術的

U / L 型房間：

創建多個房間以達到所需的形狀
將它們全部命名為相同的名字
如果使用者位於這些房間中的任何一個，ESPresenseIPS 應將相同的名稱發送給家庭助理。

位置計算如下：

找到 x 值最小的房間（螢幕左側）
找出 y 值最小的房間（螢幕頂部）
使用這兩個值來產生偏移量（這意味著“smallestX，smallestY”現在是“0,0”位置
然後使用此偏移量重新計算從繪製的房間保存的每個位置

滾動：

滾動在畫布上移動平面圖
滾動位置直接在儲存中更新（而不是在程式碼中的任何地方進行偏移）
如果滾動，每個房間的初始座標都會改變
由於導出前的計算方式，這對最終導出值沒有影響。

ESP32 設備：

設備僅匯出 x、y、z 值
匯出到 yaml 時設備有其房間名稱
z值預設為0，可在開啟裝置模態時變更（右側選單房間名稱下的綠色方塊）
覆蓋率和顏色值僅用於顯示目的（它們不會導出）

恢復/YAML 到 JSON/刪除的本地儲存....哎呀！（如果您之前匯出過 yaml 程式碼）：

在應用程式中，按一下恢復按鈕。
閱讀警報，按一下“確定”
閱讀模式頂部的文本
將 yaml 程式碼貼到 yaml（左側）區域。
在右側您應該會看到對應的 json 物件。
點擊“儲存”並重新加載，您應該再次看到您的平面圖。
此功能是實驗性的，轉換過程的編碼很差，可能僅適用於特定語法（請參閱下面的平面圖程式碼，以了解轉換過程的編碼內容範例）
轉換不會重新計算房間的標籤位置，因此您將在左上角看到標籤，並在右側選單中看到一些未定義的標籤。但它可以節省您一些時間，您仍然可以繼續處理並匯出更新的 yaml，不會出現任何問題
這是一個額外的安全網，如果有效，就高興，如果無效，就開始畫畫。我可能不會更新這個“功能”

試試有 rooms: ... 然後 roomplans: ... ，對於 roomplans，依序有 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