Floorplan Creator herunterladen - Floorplan Creator -Quellcode herunterladen

Floorplan Creator

Anderer Quellcode

1.0.0

Herunterladen

FloorPlan-Ersteller für ESpresense-Companion

Dieses Projekt wurde erstellt, um die Erstellung von Grundrissen für ESPresenseIPS (https://github.com/ESPresense/ad-espresense-ips) oder ESPresense-companion (https://github.com/ESPresense/ESPresense-companion) zu erleichtern. indem man eine GUI hat. Es lässt sich an Räumen einrasten, um die Ausrichtung zu erleichtern, und gibt Ihnen Messungen auf jeder Seite Ihres Cursors an, wenn Sie ihn an einer Wand befestigen. Diese Anwendung wurde in HTML/JS/CSS entwickelt, keine Bibliotheken (aber großartige Schriftarten auf einer CD), Canvas-Leistung!

Demo- und Online-Grundrissersteller

Sie können die App jetzt ausprobieren unter: https://espresense.com/Floorplan-Creator/
Sie können Ihre Pläne zeichnen, die App testen und Exporte generieren. Die Mqtt-Integration sollte funktionieren, jedoch mit einer öffentlichen Instanz von mqtt in https. (das SSL MQTT ist jetzt implementiert)

Wie zu verwenden

Laden Sie das Projekt herunter
Öffnen Sie „index.html“ mit einem Browser
Beginnen Sie mit dem Zeichnen jedes Zimmers
Fügen Sie in jedem Raum ESP32-Geräte hinzu
Klicken Sie auf die Schaltfläche „Nach Yaml exportieren“.
Kopieren Sie den generierten Code in die Datei ESPresenseIPS app.js
Optional:
- nachdem die Konfiguration kopiert und AppDaemon neu gestartet wurde
- Öffnen Sie das MQTT-Konfigurationsfenster (⚙) und geben Sie Ihre Konfiguration ein
- Geräte werden in Echtzeit im Grundriss angezeigt
- Geräte werden auch in der Liste im MQTT-Konfigurationsfenster angezeigt
- Genießen Sie es, alles zu optimieren, um es perfekt zu machen

Änderungen

12.03.2023

Die Yaml-Ausgabe wurde so geändert, dass sie mit https://github.com/ESPresense/ESPresense-companion kompatibel ist

05.04.2022

Die Berechnung der meisten oberen und linken Räume wurde korrigiert (in einigen Fällen sind die meisten oberen und linken Räume nicht der gleiche Raum) – Danke @Shuttleu

21.03.2022

Einheitenauswahl hinzugefügt. Bei der Auswahl von Fuß werden die Werte vor dem Yaml-Export in Meter konvertiert.
Sie können die Einheit in einem bereits gezeichneten Plan umschalten
Die App wurde zum Speichern der Einheit im lokalen Speicher verwendet und ist jetzt eine Variable.
Wenn Sie aktualisieren, sehen Sie die Einheit im Plan und in den rechten Elementen als mm und mft (da die alte „m“-Einheit in der Beschriftung steht und ich die neue variable Einheit anfüge).
Nur ein Fehler in der Benutzeroberfläche, funktioniert wie erwartet
Sie können das „m“ manuell aus den Raumbeschriftungen im Localstorage entfernen, wenn es Sie stört.

05.03.2022

Sorgen Sie dafür, dass MQTT anonyme Verbindungen zulässt – Danke @DTTerastar
MQTT-Trennungsausnahmen abfangen, um zu verhindern, dass die Javascript-Ausführung unterbrochen wird – Danke @DTTerastar
SSL im MQTT-Client implementiert – Danke @DTTerastar
SSL konfigurierbar über das Einstellungsfeld
Geräte im Grundriss über das MQTT-Einstellungsfeld ein-/ausblenden
Ändern Sie die Farbe der Geräte im Grundriss über das MQTT-Einstellungsfeld

28.02.2022

Neues Werkzeugmenü auf der linken Seite
Neuer Beschriftungsschalter zum Ein-/Ausblenden von Planbeschriftungen (Raumtitel und Räume)
Neue Dateistruktur (das Projekt sollte nicht so stark wachsen)
Korrigieren Sie die Einrückung beim Yaml-Export
Namen zu ESP32-Geräten hinzufügen. Der Name wird im Yaml exportiert

27.02.2022

Zeigen Sie Pfeilanzeigen oben, links, unten und rechts auf der Leinwand an, wenn der Grundriss außerhalb des Bildschirms liegt, um anzuzeigen, auf welcher Seite bzw. welchen Seiten er sich befindet

26.02.2022

Das MQTT-Kontrollfeld zeigt jetzt verbundene Geräte an (und bekannte Geräte, auch wenn sie nicht mehr verbunden sind).
MQTT-Client zum Verfolgen von Geräten
MQTT-Einstellungsseite zur Eingabe der Konfiguration
Zeigen Sie Geräte in Echtzeit auf dem Grundriss an

26.02.2022

Schaltfläche „ESP32-Geräteabdeckung“ anzeigen
Die ESP32-Abdeckung wird als Kreis um das Gerät angezeigt
Die Reichweite ist einstellbar
Die Kreisfarbe ist einstellbar
Beim Platzieren des Geräts kann der Abdeckungskreis sichtbar sein, um die richtige Positionierung zu erleichtern
Jetzt können Sie mit der App sogar Kunst machen.

25.02.2022

Dunkles Thema
Yaml-Grundrisskoordinaten korrigieren (war in cm, benötigt m)
Symbole und kleine Änderungen an der Benutzeroberfläche
Fügen Sie ESP32 zu Räumen hinzu
Bearbeiten Sie den ESP32-Z-Wert und sehen Sie sich den Yaml-Code an
Yaml-Export exportiert jetzt auch die ESP32-Position

24.02.2022

Scrollen/Mausrad, um den Grundriss im Canvas zu verschieben

Was ist geplant.

[ ] Bessere UI/UX.
[ ✓] Scrollen/Rad auf der Leinwand, um den Grundriss zu verschieben.
[ ] Zoomen Sie auf die Leinwand.
[ ] Schwenk auf der Leinwand.
[ ✓ ] Möglichkeit, ESP32 in Räumen hinzuzufügen und diese präzise zu positionieren.
[ ✓] Exportieren Sie die ESP32-Position aus Räumen in das ESPresenseIPS-YAML-Format.
[ ✓ ] Lassen Sie jeden ESP32-Bluetooth-Signalradius im Plan sichtbar, um sicherzustellen, dass Sie in jedem Raum mindestens 3 Signale haben. (hilft herauszufinden, wo man sie am besten hinstellen kann ;)).
[ ✓] MQTT-Client zur direkten Anzeige von Geräten im Grundriss.
[ ] Ermöglicht das Ändern der Präzision beim Ziehen/Erstellen eines Raums.
[ ✓] SSL für MQTT (um die App im Home Assistant-WWW-Ordner auf https-Instanzen hosten zu können)
[ ✓ ] Linke Symbolleiste
[ ] Linke Symbolleiste mit Wertemodifikatoren, mit denen ein Benutzer Fangschwellenwerte, Präzision und mehr anpassen kann
[ ✓] Einrückung in Yaml korrigiert
[] Code-Refactoring, Kommentare hinzufügen.

Technisch

U-/L-förmige Räume:

Erstellen Sie mehrere Räume, um die gewünschte Form zu erreichen
Nennen Sie sie alle mit demselben Namen
ESPresenseIPS sollte denselben Namen an den Heimassistenten senden, wenn sich der Benutzer in einem dieser Räume befindet.

Die Positionen werden wie folgt berechnet:

Finde den Raum mit dem kleinsten x-Wert (linke Seite des Bildschirms)
Finden Sie den Raum mit dem kleinsten y-Wert (oben auf dem Bildschirm).
Generieren Sie einen Offset mit diesen beiden Werten (was bedeutet, dass „kleinstesX, kleinstesY“ jetzt die Position „0,0“ ist
Jede aus gezeichneten Räumen gespeicherte Position wird dann mit diesem Offset neu berechnet

Scrollen:

Der Bildlauf verschiebt den Grundriss auf der Leinwand
Die Bildlaufposition wird direkt im Speicher aktualisiert (anstatt überall im Code zu versetzen).
Die Anfangskoordinaten jedes Raums ändern sich, wenn Sie scrollen
Aufgrund der Art und Weise, wie diese vor dem Export berechnet werden, hat dies keinen Einfluss auf die endgültig exportierten Werte.

ESP32-Geräte:

Geräte exportieren nur X-, Y- und Z-Werte
Beim Export nach Yaml erhält das Gerät den Namen seines Raums
Der Z-Wert ist standardmäßig auf 0 eingestellt und kann beim Öffnen des Gerätemodals geändert werden (grünes Quadrat unter dem Raumnamen im rechten Menü).
Abdeckung und Farbwert dienen nur zu Anzeigezwecken (sie werden nicht exportiert)

Wiederherstellung / YAML zu JSON / Gelöschter lokaler Speicher ... Ups! (wenn Sie den Yaml-Code zuvor exportiert haben):

Klicken Sie in der App auf die Schaltfläche „Wiederherstellung“.
Lesen Sie die Warnung und klicken Sie auf „OK“.
Lesen Sie den Text über dem Modal
Fügen Sie Ihren Yaml-Code in den Yaml-Bereich (links) ein.
Auf der rechten Seite sollten Sie das entsprechende JSON-Objekt sehen.
Klicken Sie auf „Speichern“ und laden Sie es neu. Sie sollten Ihren Grundriss erneut sehen.
Diese Funktion ist experimentell, der Konvertierungsprozess ist schlecht codiert und funktioniert möglicherweise nur für eine bestimmte Syntax (siehe Grundrisscode unten als Beispiel dafür, wofür der Konvertierungsprozess codiert wurde).
Bei der Konvertierung wird die Beschriftungsposition für Räume NICHT neu berechnet, sodass Sie oben links Beschriftungen und im rechten Menü einige undefinierte Beschriftungen haben. Aber es kann Ihnen etwas Zeit sparen und Sie können trotzdem ohne Probleme daran arbeiten und aktualisierte Yaml-Dateien exportieren
Dies ist ein zusätzliches Sicherheitsnetz. Wenn es funktioniert, seien Sie zufrieden, wenn es funktioniert, dann beginnen Sie mit dem Zeichnen. Ich werde diese „Funktion“ wahrscheinlich nicht aktualisieren.

Versuchen Sie, Räume zu haben: ... dann Raumpläne: ..., für Raumpläne haben Sie y1, x1, y2, x2 in dieser Reihenfolge. Räume: Namen sollten mit den Raumplänen: Namen übereinstimmen (da die App ein Gerät in einen Raum stellen muss und die Berechnung mit dem Namen erfolgt)

 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