Floorplan Creatorのダウンロード - Floorplan Creatorソースコードのダウンロード

Floorplan Creator

その他のソースコード

1.0.0

ダウンロード

ESPresense コンパニオンの FloorPlan 作成者

このプロジェクトは、ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) または ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) のフロアプランを簡単に作成できるように作成されました。 GUIを持つことによって。部屋にスナップして簡単に位置合わせでき、壁に置いたときにカーソルの両側の寸法を表示します。このアプリケーションは HTML/JS/CSS で開発されており、ライブラリはありません (ただし、CDN 上のフォントは素晴らしいです)。キャンバスパワーを備えています。

デモおよびオンラインフロアプラン作成者

アプリを https://espresense.com/Floorplan-Creator/ で試すことができるようになりました。
計画を作成し、アプリをテストし、エクスポートを生成することができます。 Mqtt 統合は機能するはずですが、https の mqtt のパブリックインスタンスを使用します。 (SSL MQTT が実装されました)

使用方法

プロジェクトをダウンロードする
「index.html」をブラウザで開く
各部屋の描画を開始します
各部屋内に esp32 デバイスを追加します
「yamlにエクスポート」ボタンをクリックします
生成されたコードを ESPresenseIPS app.js ファイルにコピーします
オプション:
- 構成がコピーされ、AppDaemon が再起動された後
- MQTT 設定パネル (⚙) を開き、設定を入力します
- デバイスはリアルタイムでフロアプランに表示されます
- デバイスは mqtt 設定パネルのリストにも表示されます
- 完璧にするためにすべてを微調整することを楽しむ

変更点

2023 年 3 月 12 日

https://github.com/ESPresense/ESPresense-companion と互換性があるように yaml 出力を変更しました

2022 年 5 月 4 日

ほとんどの上と左の部屋の計算を修正しました (ほとんどの上と左の部屋が同じ部屋ではない場合があります) - @Shuttleu に感謝します

2022 年 3 月 21 日

単位セレクターが追加されました。フィートを選択すると、Yaml にエクスポートする前に値がメートルに変換されます。
すでに描かれた計画上のユニットを切り替えることができます
アプリはローカルストレージにユニットを保存するために使用されていましたが、変数になりました。
更新すると、プラン上の単位が表示され、右側の要素が mm および mft として表示されます (古い「m」単位がラベルにあり、新しい変数単位を追加したため)
単なる UI のバグですが、期待どおりに動作します
気になる場合は、ローカルストレージ内のルームラベルから「m」を手動で削除できます。

2022 年 3 月 5 日

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 位置をルームから ESPresenseIPS yaml 形式にエクスポートします。
[✓] 各部屋に少なくとも 3 つの信号があることを確認するために、各 esp32 Bluetooth 信号の半径を計画上に表示します。 (どこに置くのが最適かを判断するのに役立ちます ;))。
[✓] フロアプラン上にデバイスを直接表示する MQTT クライアント。
[ ] ルームのドラッグ/作成中に精度を変更できるようにします。
[✓] MQTT 用の SSL (https インスタンスのホームアシスタント www フォルダーでアプリをホストできるようにするため)
[✓] 左ツールバー
[ ] ユーザーがスナップのしきい値や精度などをカスタマイズできる値修飾子を備えた左側のツールバー
[✓] Yaml のインデントを修正
[ ] コードのリファクタリング、コメントの追加。

テクニカル

U / L 型の部屋:

複数の部屋を作成して目的の形状を実現する
それらすべてに同じ名前を付けます
ユーザーがこれらの部屋にいる場合、ESPresenseIPS は同じ名前をホームアシスタントに送信する必要があります。

位置は次のように計算されます。

x 値が最小の部屋を見つける (画面の左側)
最小の y 値を持つ部屋を見つけます (画面の上部)
これら 2 つの値を使用してオフセットを生成します (つまり、「smallestX、smallestY」が「0,0」の位置になります)
描画された部屋から保存されたすべての位置は、このオフセットを使用して再計算されます。

スクロール:

スクロールするとキャンバス上のフロアプランが移動します
スクロール位置は、(コード内のあらゆる場所でオフセットするのではなく) ストレージ内で直接更新されます。
スクロールすると各部屋の初期座標が変わります
エクスポート前の計算方法により、これは最終的にエクスポートされる値には影響しません。

ESP32 デバイス:

デバイスは x、y、z 値のみをエクスポートします
yaml にエクスポートすると、デバイスにはそのルームの名前が付けられます。
z 値はデフォルトで 0 に設定されており、デバイスのモーダル (右側のメニューの部屋名の下にある緑色の四角形) を開くときに変更できます。
カバレッジとカラー値は表示のみを目的としています (エクスポートされません)。

回復 / YAML から JSON へ / 削除されたローカルストレージ.... おっと！ (以前に yaml コードをエクスポートしたことがある場合):

アプリで、回復ボタンをクリックします。
アラートを読み、「OK」をクリックします
モーダルの上にあるテキストを読む
yaml コードを yaml (左側) 領域に貼り付けます。
右側に、対応する json オブジェクトが表示されるはずです。
「保存」をクリックしてリロードすると、フロアプランが再び表示されるはずです。
この機能は実験的なものであり、変換プロセスのコード化が不十分であり、特定の構文でのみ機能する可能性があります (変換プロセスのコード化の例については、以下のフロアプランコードを参照してください)。
変換では部屋のラベルの位置は再計算されないため、左上にラベルが表示され、右側のメニューには未定義のラベルが表示されます。ただし、時間を節約でき、問題なく作業して更新された yaml をエクスポートできます。
これはおまけのセーフティネットです。効果があれば喜んでください。効果がなければ、絵を描き始めてください。おそらくこの「機能」は更新されません

room: ... then roomplans: ... を作成してみてください。roomplan の場合は、y1、x1、y2、x2 の順にします。 rooms: 名前は roomplan: 名前と一致する必要があります (アプリはデバイスを部屋に配置する必要があり、計算は名前を使用して行われるため)

 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