openHASP Seiten-Designer

So funktioniert’s

openHASP baut die Oberfläche eines Displays aus der Datei pages.jsonl auf: Jede Zeile beschreibt ein Objekt mit Seite, ID, Typ, Position und Größe. Von Hand ist das mühsam, weil man jede Koordinate im Kopf rechnen muss. Der Designer zeigt immer eine Seite an, verwaltet aber die ganze Datei: Eine vorhandene pages.jsonl lässt sich laden, Seite für Seite bearbeiten und vollständig wieder exportieren.

1. Datei laden oder neu beginnen: Unter „Import / Export“ die IP-Adresse des Displays eintragen und „pages.jsonl herunterladen“ wählen. Die Datei dann auf das Textfeld ziehen oder über „Datei laden …“ öffnen. Wer neu anfängt, startet mit dem Beispiel oder leert die Seite.
2. Seite und Display wählen: Die Leiste zeigt die Seiten 0 bis 12. Seiten mit Inhalt sind hervorgehoben, ein Klick auf eine leere Seite legt sie an. Seite 0 enthält Objekte, die auf allen Seiten sichtbar sind. Die Vorschau blendet sie auf jeder Seite obenauf ein, bearbeiten lassen sie sich aber nur auf Seite 0. Im Bereich „Auflösung & Darstellung“, der sich zuklappen lässt, stehen die Auflösung des Displays, das Theme der Vorschau (dunkel oder hell), die Primärfarbe, der Seitenhintergrund, die Standardschrift und das Raster. Der Seitenhintergrund landet als Objekt mit der ID 0 in der Datei, alle anderen Einstellungen gelten nur für die Vorschau.
3. Objekte anlegen: Über „Objekt hinzufügen“ Taster, Texte, Schalter, Regler, Bögen und mehr auf die Seite setzen. Seltener gebrauchte Typen wie Tastenfeld, Farbwähler, Tacho, Register, Reiter oder QR-Code stehen unter „Weitere Objekte“. Die ID vergibt der Designer fortlaufend, sie lässt sich in den Eigenschaften ändern. Ein Reiter gehört immer zu einem Register: Er kommt in das gewählte Register oder, wenn keines gewählt ist, in das erste der Seite.
4. Anordnen: Objekte in der Vorschau verschieben und über den Griff unten rechts in der Größe ändern. Das Raster (2 bis 20 px) hilft beim sauberen Ausrichten, mit gedrückter Alt-Taste geht es auch ohne. Bei feinen Rastern zeichnet die Vorschau nur jede zweite oder vierte Linie, eingerastet wird trotzdem in der gewählten Weite. Die Liste „Objekte auf Seite“ zeigt alle Objekte der Seite in der Zeichenreihenfolge und dient zur schnellen Auswahl. Objekte innerhalb anderer Objekte (parentid) sind dort eingerückt, doppelt vergebene IDs rot markiert.
5. Eigenschaften setzen: Das Panel zeigt für jeden Objekttyp genau die Eigenschaften, die openHASP für ihn kennt. Oben stehen Text, Optionen und Werte, darunter aufklappbar „Schrift“, „Farben & Rahmen“, die Einstellungen des Typs und „Verhalten“ mit hidden, enabled, click, opacity, parentid und groupid. Icons lassen sich über „Icon einfügen“ in jeden Text setzen, sie landen als \uE335 in der Datei, so wie openHASP sie erwartet. Alles Weitere, etwa action, swipe, ext_click_h oder Styling-Attribute wie pad_top, gehört ins Feld „Weitere Attribute (JSON)“ und wird unverändert exportiert.
6. Exportieren: „JSONL herunterladen“ liefert die ganze Datei als pages.jsonl, „Kopieren“ legt sie in die Zwischenablage. Andere Seiten, Leerzeilen und Kommentare bleiben dabei erhalten. Kommentare, die direkt vor einem Objekt stehen, wandern mit diesem Objekt mit.

Tastatur: Ist ein Objekt gewählt, verschieben die Pfeiltasten es um 1 Pixel, mit Umschalt um eine Rasterweite. Strg+D dupliziert, Entf löscht, Esc hebt die Auswahl auf. Strg+Z macht den letzten Schritt rückgängig, Strg+Y oder Strg+Umschalt+Z stellt ihn wieder her. Dafür gibt es auch die Pfeil-Knöpfe über der Vorschau.

Das Textfeld zeigt immer die ganze Datei als JSONL. Wer dort Zeilen ändert oder Text einfügt, sieht das Ergebnis sofort in der Vorschau. Enthält der Text die eingestellte Seite, bleibt sie angezeigt, sonst die erste Seite der Datei. Mit „Link teilen“ steckt das ganze Layout in der Adresse. Der Browser merkt sich außerdem den letzten Stand. Alles läuft im Browser, es werden keine Daten übertragen.

Seite auf das Display bringen

Dauerhaft über die pages.jsonl: „Datei-Editor öffnen“ führt zur Dateiverwaltung des Displays. Dort die heruntergeladene pages.jsonl hochladen und die alte Datei damit ersetzen. Nach einem Neustart des Displays sind die Seiten da.

Zum schnellen Ausprobieren per MQTT: Die Zeilen einer Seite lassen sich auch an hasp/<plate>/command/jsonl schicken. Das Display legt die Objekte dann sofort an, allerdings nur bis zum nächsten Neustart. Vorher die Seite mit clearpage leeren, sonst bleiben alte Objekte stehen.

Mit dem Modul Raumdisplay werden die Objekte anschließend in Symcon mit Variablen verknüpft. Maßgeblich sind dafür Seite und ID, deshalb lohnt es sich, die IDs von Anfang an sinnvoll zu vergeben.

Gut zu wissen

• Der Designer ist ein privates Projekt und kein offizielles Werkzeug von openHASP.
• Die Vorschau ist ein Nachbau und nicht pixelgenau. openHASP zeichnet mit LVGL, eigenen Schriften und eigenen Theme-Stilen, Abstände und Schriftbreiten weichen daher etwas ab. Für Aufteilung und Größenverhältnisse reicht sie gut aus.
• Die Standardschrift entspricht der Schriftgröße, die in den Theme-Einstellungen des Displays eingestellt ist. Objekte ohne eigene Schriftgröße nutzen diese.
• Nicht jede openHASP-Firmware enthält alle Icons der Material Design Icons. Welche in den eingebauten Schriften stecken, steht in der Dokumentation von openHASP.
• Bilder zeigt die Vorschau nur als Rahmen mit ihrer Quelle in der Ecke, weil die Dateien auf dem Display liegen. Ein Hintergrundbild verdeckt so keine Objekte davor. Der QR-Code ist ebenfalls nur ein Platzhalter-Muster und lässt sich nicht scannen.
• Farbige Textteile schreibt openHASP als #RRGGBB Text#, z. B. #FFC107 \uEA7A# für ein gelbes Icon. Die Vorschau färbt sie genauso ein, die Objektliste zeigt den Text ohne Farbcodes.
• Eine Walze (roller) bekommt ihre Höhe aus rows, der Zahl der sichtbaren Zeilen. Ohne rows gilt h, fehlt auch das, zeigt die Vorschau eine Zeile pro Eintrag. Der gewählte Eintrag steht immer in der Mitte. Im normalen Modus bleibt über dem ersten Eintrag deshalb Platz frei, im Modus „endlos“ wiederholt sich die Liste.
• Ausgeblendete Objekte (hidden) zeigt die Vorschau blass an, damit sie sich weiter bearbeiten lassen.
• Seiten, die man nicht öffnet, übernimmt der Export Zeile für Zeile unverändert. Bei einer geöffneten Seite schreibt er jedes Objekt in eine Zeile, auch wenn es vorher auf mehrere Zeilen verteilt war. Auf dem Display sieht das Ergebnis gleich aus.
• Objekte mit parentid liegen in ihrem übergeordneten Objekt: x und y zählen ab dessen linker oberer Ecke, und was über den Rand ragt, wird wie auf dem Display abgeschnitten. Ragt ein gewähltes Objekt hinaus, ist auch der Griff zum Ändern der Größe verdeckt. Dann die Größe über w und h in den Eigenschaften einstellen. Ein Register zeigt den Inhalt des aktiven Reiters, ist ein Objekt aus einem anderen Reiter gewählt, wechselt die Vorschau zu diesem.
• Die Reihenfolge der Zeilen bestimmt, welches Objekt oben liegt: Spätere Objekte überdecken frühere. „Nach vorn“ und „Nach hinten“ ändern diese Reihenfolge.