Siebenschläfer Display - Dokumentation

1. Einführung

1.1 Über das Siebenschläfer Display System

Das Siebenschläfer™ Display ist ein kabelloses, solarbetriebenes E-Paper-Display-System für langfristigen, wartungsfreien Betrieb. Es kombiniert E-Paper-Technologie mit integrierten Solarzellen und Superkondensatoren, um ein Display zu schaffen, das keine Kabel, keine Batterien und praktisch keine Wartung benötigt, sobald es installiert ist.

Das System besteht aus drei Hauptkomponenten:

• Siebenschläfer™ Display - Das eigentliche E-Paper-Display, betrieben von einem STM32L496-Mikrocontroller mit integriertem Solarpanel und Superkondensator-Energiespeicher.
• Hase (Gateway) - Ein kompaktes Gateway auf ESP32-S3-Basis, das das LoRa-Funknetzwerk mit WLAN oder Ethernet verbindet und Ihre Displays mit dem Web-Backend verknüpft.
• Webseite - Die browserbasierte Plattform, die Sie über das Internet über https://www.siebenschläfer-display.eu/ erreichen, um Layouts zu erstellen, Geräte zu verwalten und Datenquellen zu konfigurieren.

• Solarbetriebener Betrieb - auch im Innenbereich (ab 200 Lux, mit Extension Panel auch bei geringerer Beleuchtung)
• LoRa-Funkkommunikation mit bis zu 1 km Reichweite bei Sichtverbindung mit den internen Antennen (bzw. durch ca. 3 Wände je nach Wandstärke), bis zu 7 km mit einer externen Antenne
• Ende-zu-Ende-verschlüsselte Kommunikation (AES, Ed25519, X25519)
• Intuitiver WYSIWYG-Layout-Designer mit Echtzeit-Vorschau via WebAssembly
• Lua-Scripting-Engine für fortgeschrittene Anwendungen
• Dynamische Datenbindung über JSON/XML-Datenquellen
• Tilt-to-Act-Taster für Smart-Home-Automatisierung über Webhooks
• Langjähriger wartungsfreier Betrieb dank Superkondensatoren statt alternder Batterien

1.2 Was ist im Lieferumfang enthalten?

Siebenschläfer™ Display Paket:

• Siebenschläfer™ Display (7-Zoll 6-Farben E-Paper, 800×480 Auflösung)
• Integriertes Anti-Reflex-Glas mit UV-Filter
• Montagematerial für Wandinstallation

• Hase Gateway Gerät
• USB-C Stromkabel
• USB-Wandnetzteil

• Extension Panel - Zusätzliche Solarfläche für dunklere Umgebungen (beliebig verkettbar)
• Fensterhalterung

1.3 Systemvoraussetzungen

Um das Siebenschläfer™ Display System zu verwenden, benötigen Sie:

Für die Webseite:

• Einen modernen Webbrowser (Google Chrome, Microsoft Edge, Firefox oder Safari)
• Internetverbindung zum Zugriff auf das Web-Backend
• Ein kostenloses Konto auf der Siebenschläfer-Plattform

• USB-C Stromversorgung (5V)
• Ethernet-Verbindung zu Ihrem Router oder WLAN-Netzwerk (2,4 GHz)

• Ausreichend Umgebungslicht (Minimum 200 Lux für tägliche Aktualisierung, 400 Lux für Aktualisierungen alle 3 Stunden)
• Reichweite eines Hasen-Gateways (LoRa 433 MHz @10mW)
• Kein Stromkabel erforderlich - das Display ist vollständig autark

1.4 Schnellstartanleitung

Für eine schrittweise Anleitung zum Inbetriebnehmen Ihres ersten Displays, siehe die Schnellstartanleitung. Sie führt Sie durch:

2. Hardware - Siebenschläfer Display

Das Siebenschläfer™ Display ist die Kernkomponente des Systems - ein autarkes E-Paper-Display, das keine Kabel benötigt und langjährig wartungsfrei betrieben werden kann.

2.1 Technische Spezifikationen

2.1.1 E-Paper-Display (800×480)

Das Siebenschläfer™ verwendet ein 7-Zoll-Farben-E-Paper-Display mit einer Auflösung von 800×480 Pixeln. Die E-Paper-Technologie bietet mehrere Vorteile:

• Statische Bildspeicherung - Der angezeigte Inhalt bleibt auch ohne Strom sichtbar und verbraucht zwischen den Aktualisierungen keine Energie.
• Sonnenscheinlesbarkeit - Im Gegensatz zu LCD- oder OLED-Bildschirmen ist E-Paper bei direktem Sonnenlicht gut lesbar, ohne Blendung.
• Farbunterstützung mit Dithering - Durch intelligente Dithering-Algorithmen kann das Display Fotos und farbenfrohe Inhalte darstellen, die trotz des E-Paper-Mediums lebendig wirken.
• Lange Lebensdauer - Das E-Paper-Panel hat eine Lebensdauer von ca. 1 Million Aktualisierungen.

2.1.2 Mikrocontroller (STM32L496)

Das Display wird von einem STM32L496-Mikrocontroller von STMicroelectronics betrieben, der für seinen ultra-niedrigen Stromverbrauch ausgewählt wurde:

• ARM Cortex-M4-Kern mit FPU (Floating Point Unit)
• Kann die LVGL-Grafikengine direkt auf dem Gerät zum Rendern von Layouts ausführen
• Unterstützt Lua-Scripting über eine integrierte Script-Engine
• Kann in Deep-Sleep-Modi gehen, die nur 20 µA im Standby verbrauchen
• Erlaubt die Anbindung des für stromsparende Mikrocontroller recht großen und für das Rendern des Layouts auf dem Gerät benötigten Arbeitsspeichers

2.1.3 Arbeitsspeicher und Flash-Speicher

2.2 Gehäuse und Anschlüsse

Das Siebenschläfer™ Display verfügt über ein schlankes, elegantes Gehäuse, das sich in jede Umgebung einfügt:

• Gehäuseabmessungen: 21,5 × 15,5 × 1,7 cm
• Displayfläche: 16 × 9,6 cm (ca. 7 Zoll Diagonale)
• Solarrahmenbreite: 2 cm um den Display-Umfang
• Gewicht: ca. 400g

2.3 Solarpanel und Energieversorgung

2.3.1 Integriertes Solarpanel

Ein Topcon-Solarpanel ist in den 2 cm breiten Rahmen um das E-Paper-Display integriert. Dieses Panel fängt Umgebungslicht ein, um alle Display-Operationen zu betreiben:

• Fängt auch diffuses Innenraumlicht ein
• Betreibt sowohl die Mikrocontroller-Operationen als auch den E-Paper-Aktualisierungszyklus
• Lädt die Superkondensatorbank kontinuierlich während des Betriebs auf

2.3.2 Superkondensatoren - Funktionsweise und Pflege

Anstelle herkömmlicher Lithium-Batterien verwendet das Siebenschläfer™ 5,5 F VINATech EDLC-Superkondensatoren zur Energiespeicherung. Dies ist eine bewusste Designentscheidung mit erheblichen Vorteilen:

• Keine Alterung - Im Gegensatz zu Batterien, die im Laufe der Zeit degradieren, behalten Superkondensatoren ihre Kapazität über Jahrzehnte
• Lange Lebensdauer - Kein Batteriewechsel erforderlich
• Sichere Lagerung ohne Ladung - Das Display kann jahrelang ungeladen gelagert werden, ohne Schäden (im Gegensatz zu Lithium-Batterien, die aufquellen oder gefährlich werden können)
• Hohe Lade-/Entladezyklen - Superkondensatoren können Millionen von Zyklen ohne Degradation bewältigen

2.3.3 Minimale Lichtbedingungen (Lux-Werte)

Das Siebenschläfer™ Display benötigt eine Mindestmenge an Umgebungslicht zum Betrieb:

• 200 Lux = Schwach beleuchteter Raum oder bewölktes Tageslicht durch ein Fenster
• 400 Lux = Normale Bürobeleuchtung
• 500-1000 Lux = Gut beleuchteter Raum oder helle Innenraumumgebung

2.3.4 Aktualisierungshäufigkeit und Energieverbrauch

Das Display plant alle 5 Minuten ein Datenübertragungs-Fenster, wenn ausreichend Energie verfügbar ist. Die tatsächliche Aktualisierungshäufigkeit hängt ab von:

2.4 Extension Panel (Optional)

2.4.1 Zusätzliche Solarfläche für dunkle Umgebungen

Das Extension Panel ist ein optionales Zubehörteil, das zusätzliche Solarfläche für Umgebungen mit begrenztem Umgebungslicht bietet:

• Verbindet sich mit dem Siebenschläfer™ Display, um das integrierte Solarpanel zu ergänzen
• Ermöglicht den Betrieb in dunkleren Räumen oder Standorten mit geringer Beleuchtung
• Kann separat vom Display platziert und über Kabel verbunden werden

2.4.2 Verkettung mehrerer Panels

Mehrere Extension Panels können in Reihe geschaltet werden, um noch mehr Solarfläche zu erhalten:

• Verbinden Sie die Panels in Serie mit den mitgelieferten Steckern
• Keine Begrenzung der Anzahl verkettbarer Panels
• Jedes zusätzliche Panel erhöht die verfügbare Ladeoberfläche proportional
• theoretisch ab 10 Lux nutzbar (aktuell aber noch ungetestet, Extension Panel noch in Entwicklung)

3. Hardware - Hase (Gateway)

Der Hase ist das Gateway-Gerät, das Ihre Siebenschläfer™-Displays mit dem Internet verbindet. Er kommuniziert mit den Displays über LoRa-Funk und stellt die Verbindung zum Web-Backend über WLAN oder Ethernet her. Ein einzelnes Gateway kann eine unbegrenzte Anzahl von Displays verwalten.

3.1 Technische Spezifikationen

3.1.1 Mikrocontroller (ESP32-S3)

Der Hase wird von einem ESP32-S3-Mikrocontroller betrieben, einem leistungsstarken und vielseitigen Chip für IoT-Anwendungen:

• Dual-Core-Prozessor mit hoher Leistungsfähigkeit
• Integriertes WLAN- und Bluetooth-Funkmodul
• Hardware-Beschleunigung für kryptografische Operationen
• Unterstützt gRPC-Kommunikation mit dem Web-Backend
• Kann Lua-Skripte für lokale Automatisierung ausführen

3.1.2 Arbeitsspeicher und Flash-Speicher

3.2 Anschlüsse und LEDs

Der Hase verfügt über ein kompaktes Gehäuse mit folgenden Anschlüssen:

• USB-C-Anschluss - Stromversorgung (5V, 0,5 W Verbrauch), serielle Schnittstelle zur konfiguration
• Ethernet-Anschluss (RJ45) - Kabelgebundene Netzwerkverbindung zu Ihrem Router
• SD-Kartensteckplatz - Für zusätzlichen Speicher und Protokollierung
• WIFI-Antenne - Antenne zur Kommunikation mit dem W-LAN
• LoRa-Antenne - Antenne zur Kommunikation mit den Displays

• Der Hase enthält ein kleines E-Paper-Display (5,7 × 3,8 cm Fläche in einem 7,7 × 6,4 × 2,1 cm Gehäuse), das Statusinformationen anzeigt, einschließlich QR-Codes zur Registrierung, Verbindungsstatus und zugewiesener Displays.

3.3 Netzwerkverbindungen

Der Hase unterstützt mehrere Netzwerkverbindungsarten, um eine zuverlässige Konnektivität in jeder Umgebung zu gewährleisten. Es wird sowohl IPv4 als auch IPv6 unterstützt.

3.3.1 Ethernet

Die empfohlene Verbindungsmethode ist über Ethernet-Kabel:

Ethernet bietet die stabilste und zuverlässigste Verbindung, ohne dass eine Konfiguration über die physische Verbindung hinaus erforderlich wäre.

3.3.2 WiFi (WPS)

Für eine schnelle Einrichtung ohne Passworteingabe unterstützt der Hase WPS (WiFi Protected Setup):

WPS bietet eine bequeme Alternative, wenn Sie keine Credentials manuell eingeben möchten oder das Passwort unbekannt ist.

3.3.3 WiFi (Manuelle Konfiguration)

Wenn Ethernet nicht verfügbar ist, können Sie den Hasen manuell mit Ihrem WLAN-Netzwerk verbinden:

Das Gateway scannt nach verfügbaren Netzwerken und zeigt sie in einer Liste zur Auswahl an. Sie können die SSID auch manuell eingeben, wenn Ihr Netzwerk nicht in den Scan-Ergebnissen erscheint.

4. Installation und Inbetriebnahme

Dieses Kapitel bietet detaillierte Schritt-für-Schritt-Anweisungen zum Einrichten Ihres Hasen-Gateways und Siebenschläfer-Displays. Für eine kompakte Version siehe die Schnellstartanleitung.

4.1 Hase (Gateway) einrichten

4.1.1 Stromversorgung anschließen (USB-C)

Der Hase verbraucht im normalen Betrieb ca. 0,5 W. Jede Standard-5V-USB-Stromquelle reicht aus.

4.1.2 Ethernet-Konfiguration

Der einfachste Weg, den Hasen mit Ihrem Netzwerk zu verbinden, ist über Ethernet:

Sobald die Verbindung besteht, zeigt das kleine E-Paper-Display des Hasen einen QR-Code zur Registrierung an.

Die WiFi-Konfiguration (manuell und WPS) wird in Kapitel 3.3.3 und 3.3.4 beschrieben. Siehe dort für detaillierte Anweisungen.

4.1.3 QR-Code scannen und registrieren

Sobald der Hase mit dem Internet verbunden ist, zeigt er einen QR-Code auf seinem kleinen E-Paper-Bildschirm an:

Nach erfolgreicher Registrierung erscheint der Hase als "Online" in Ihrer Geräteübersicht auf der Webseite.

4.1.4 Gateway in der Webseite konfigurieren

Nach der Registrierung können Sie Ihr Gateway über die Webseite unter "Geräte verwalten" administrieren:

• Status einsehen - Prüfen, ob das Gateway online ist
• Namen Konfigurieren - Anzeigename des Gateway ändern

4.2 Display einrichten

4.2.1 QR-Code scannen und registrieren

Jedes Siebenschläfer Display hat einen eindeutigen QR-Code auf der Rückseite:

Nach der Registrierung erscheint das Display in Ihrer Geräteübersicht als "Suche ...", bis es Kontakt mit einem Gateway herstellt.

4.2.2 Platzierung und Lichtbedingungen

Die richtige Platzierung ist entscheidend für einen zuverlässigen Betrieb:

Vermeiden Sie die Platzierung des Displays über längere Zeit im direkten Sonnenlicht, da extreme Hitze die Superkondensatoren beeinträchtigen kann. Das Anti-Reflex-Glas schützt vor UV-Strahlung, aber extreme Temperaturen sollten vermieden werden.

4.2.3 Display mit Gateway verbinden

Das Display sucht automatisch nach einem Gateway nach der Registrierung:

Sobald die Verbindung besteht, können Sie den Verbindungsstatus in der Geräteübersicht überwachen. Der Display-Status ändert sich von "Suche ..." zu "Lade auf", während es Energie sammelt, und dann zu "Voll geladen und bereit", wenn es für Inhaltsupdates bereit ist.

4.3 Halterung und Montage

Das Montagesystem besteht aus drei Komponenten, die flexibel kombiniert werden können:

• Display - Verfügt auf der Rückseite über ein VESA 100×100 Montagebohrbild
• Wandhalterung - Zweiteiliges System mit integriertem Klickmechanismus. Eine Hälfte wird an den VESA 100×100 Gewinden des Displays befestigt, die andere Hälfte direkt an der Wand (mit Schrauben). Das Display wird dann in die wandseitige Hälfte eingeklickt und verriegelt. Die zweite Hälfte verfügt zudem über ein VESA 75×75 Bohrbild für externe Halterungen. Bietet Neigungsfunktion (Tilt-to-Act)
• Ständer - Wird mit der zweiten Hälfte der Wandhalterung kombiniert, die über das VESA 75×75 Bohrbild am Ständer befestigt wird

4.3.1 Direkte VESA 100×100 Montage (ohne Neigung)

Das Display kann direkt an jeder VESA 100×100-kompatiblen Halterung befestigt werden:

Hinweis: Diese Montage bietet keine Neigungsfunktion. Tilt-to-Act ist in dieser Konfiguration nicht verfügbar.

4.3.2 Wandmontage mit Neigung (Tilt-to-Act)

Für die direkte Wandbefestigung mit Neigung:

Die Neigung der Halterung ermöglicht die Tilt-to-Act-Funktion (siehe Kapitel 10).

4.3.3 VESA 75×75 Montage mit Neigung (Tilt-to-Act)

Über die Wandhalterung kann das Display auch an VESA 75×75 Halterungen befestigt werden:

Diese Konfiguration bietet Neigung und damit Tilt-to-Act-Funktion (siehe Kapitel 10).

4.3.4 Tischplatzierung mit Ständer (Tilt-to-Act)

Für die Platzierung auf dem Tisch oder einer anderen flachen Oberfläche:

Auch diese Konfiguration bietet Neigung und damit Tilt-to-Act-Funktion (siehe Kapitel 10). Keine Kabel erforderlich - das Display ist vollständig autark.

5. Webseite - Erste Schritte

Die Siebenschläfer-Webseite ist Ihre zentrale Steuerzentrale zum Verwalten aller Geräte, Erstellen von Layouts und Konfigurieren von Datenquellen. Sie läuft vollständig in Ihrem Browser und erfordert keine Softwareinstallation.

5.1 Konto erstellen und anmelden

So beginnen Sie:

Angemeldet bleiben: Sie können die Option "Angemeldet bleiben" aktivieren, die einen sicheren Cookie für automatische Sitzungswiederherstellung installiert. Dies legt einen JWT im local storage ab und verwendet zusätlich einen secure cookie zur absicherung, um Session-Hijacking zu erschweren.

5.2 Navigation und Menüstruktur

Das Hauptnavigationsmenü bietet Zugriff auf alle Anwendungsbereiche:

• Geräte verwalten - Alle Gateways und Displays einsehen und konfigurieren
• Layout-Designer - Display-Layouts erstellen und bearbeiten (WYSIWYG-Editor)
• Datenquellen - JSON/XML-Datenquellen für dynamische Inhalte verwalten
• Dokumentation - Zugriff auf diese Dokumentation und API-Referenz
• Einstellungen - Benutzereinstellungen, Zeitzone, Sprache

5.3 Spracheinstellungen

Die Webseite unterstützt mehrere Sprachen:

Ihre Sprachpräferenz wird mit Ihrem Browser gespeichert. Derzeit werden Englisch und Deutsch unterstützt, weitere Sprachen sind für zukünftige Releases geplant.

6. Geräte verwalten

Der Bereich "Geräte verwalten" ist der Ort, an dem Sie alle Ihre Gateways und Displays konfigurieren und überwachen.

6.1 Gateway verwalten

6.1.1 Gateway-Status überprüfen (Online/Offline)

Jedes Gateway zeigt seinen Verbindungsstatus in der Geräteübersicht an:

• Online - Das Gateway ist aktiv über gRPC mit dem Web-Backend verbunden
• Offline - Zeitstempel "zuletzt gesehen" wird angezeigt; Netzwerkverbindung und Stromversorgung prüfen

Aufgrund des gRPC-KeepAlive-Mechanismus (Server-Ping alle 2 Stunden) kann ein Gateway je nach Client-Aktivität bis zu 2 Stunden nach einem tatsächlichen Verbindungsabbruch noch als "Online" angezeigt werden.

6.2 Display verwalten

6.2.1 Display-Status und Zustände verstehen

Das Display durchläuft während seines Betriebszyklus verschiedene Zustände:

##### 6.2.1.1 "Suche ..."

Das Display sucht nach einem Gateway, hat aber noch keinen Kontakt hergestellt. Dies ist direkt nach der Registrierung normal, solange das Display noch keinen Kontakt mit einem Gateway hergestellt hat. Prüfen Sie:

• Das Display befindet sich in Reichweite des zugewiesenen Gateways


• Das richtige Gateway ist in der Gerätekonfiguration zugewiesen


• Das Gateway ist online und mit dem Internet verbunden

Dies ist der Idle-Zustand des Displays, wenn es nichts zu tun hat und der Superkondensator nicht vollständig geladen ist. Das Display sammelt in diesem Zustand Solarenergie, bis der Superkondensator voll geladen ist oder eine Inhaltsaktualisierung eintrifft.

##### 6.2.1.3 "Voll geladen und bereit"

Das Display hat ausreichend Energie und ist bereit, Inhaltsupdates zu empfangen. Das Gateway sendet neue Inhalte, sobald verfügbar.

##### 6.2.1.4 "Inhalt erfolgreich aktualisiert."

Das Display hat ein Inhaltsupdate erfolgreich empfangen und angewendet. Dieser Status wird für kurze Zeit nach einer erfolgreichen Aktualisierung angezeigt (innerhalb von 5 Minuten nach der letzten Inhaltsänderung).

##### 6.2.1.5 "Sende Update"

Das Gateway hat ein Inhaltsupdate für das Display vorbereitet und wartet auf das nächste Übertragungsfenster, um die Daten via LoRa-Funk zu senden.

##### 6.2.1.6 "Übertrage Daten"

Das Display empfängt und verarbeitet die übermittelten Daten (Layout-Definition, Bilder oder Datenbindungen). Große Layouts mit vielen Bildern können in diesem Zustand länger brauchen.

##### 6.2.1.7 "Bereite Bild vor"

Die LVGL-Engine des Displays rendert das Layout in ein finales Bild für das E-Paper-Panel. Dies umfasst Dithering-Algorithmen und die Vorbereitung des Aktualisierungsmusters. Anschließend folgt die physische E-Paper-Aktualisierung (Panel Refresh), die zusätzliche ca. 30 Sekunden dauert.

##### 6.2.1.8 "Fehler beim Rendern"

Während der Inhaltsdarstellung ist ein Fehler aufgetreten. Mögliche Ursachen:

• Bilder oder Schriftarten zu groß für den verfügbaren RAM (4 MB SRAM)


• Layout zu komplex für die Render-Engine


• Strombedarf übersteigt Kapazität der Super-Kondensatoren.

6.2.2 Anzeigenamen ändern

Um Ihr Display umzubenennen:

Der Anzeigename wird zur Identifizierung in der Webseite verwendet und beeinflusst das Gerät selbst nicht. Er wird zudem auf dem kleinen E-Paper-Display des Gateways angezeigt.

6.2.3 Layout zuweisen

Um ein Layout Ihrem Display zuzuweisen:

Das Display erhält das neue Layout bei seinem nächsten Aktualisierungszyklus. Die Vorschau des ausgewählten Layouts wird direkt unter dem Dropdown-Menü angezeigt.

6.2.4 Datenquelle zuweisen

Um dynamische Daten an Ihr Display zu binden:

Bei einer Änderung der Datenquelle werden die neuen Daten an das Display gesendet. Weitere Informationen zur Datenbindung in Layouts finden Sie unter Datenquellen.

6.2.5 Gateway zuordnen und ändern

Um ein Gateway Ihrem Display zuzuweisen:

6.2.6 Ladeverlauf einsehen

Überwachen Sie den Energieverbrauch Ihres Displays über die Zeit:

Der Leistungsverlauf hilft Ihnen zu verstehen, ob Ihr Display-Standort ausreichend Licht bietet und ob ein Extension Panel für häufigere Updates benötigt wird.

Zusätzliche Energieinformationen:

• Energie für das Rendern - Vom LVGL-Engine zum Verarbeiten des Layouts verbrauchte Leistung


• Energie für die E-Paper-Aktualisierung - Vom physischen Panel-Aktualisierungszyklus verbrauchte Leistung


• Letztes Inhaltsupdate - Zeitstempel der letzten erfolgreichen Inhaltsaktualisierung

6.2.7 Webhook-URL konfigurieren

Konfigurieren Sie einen Webhook-Endpunkt für Tilt-to-Act und Automatisierung:

Wenn der Neigungstaster des Displays ausgelöst wird, sendet es eine HTTP POST-Anfrage an diese URL mit Geräteidentifikationsdaten. Dies ermöglicht die Integration mit Smart-Home-Systemen wie Home Assistant, Node-RED oder benutzerdefinierten Automatisierungsservern.

7. Layout-Designer

Der Layout-Designer ist ein WYSIWYG-Editor (What You See Is What You Get), mit dem Sie Display-Layouts visuell erstellen können, ohne Code zu schreiben. Er läuft vollständig in Ihrem Browser und verwendet WebAssembly, um dieselbe LVGL-Engine zu rendern, die die Geräte-Firmware antreibt, was pixelgenaue Vorschauen gewährleistet.

7.1 Grundlagen

7.1.1 Layout erstellen (Horizontal/Vertikal)

So erstellen Sie ein neues Layout:

Die Leinwand repräsentiert Ihren Displaybildschirm in tatsächlicher Auflösung. Sie können Steuerelemente von der Palette auf die Leinwand ziehen und frei positionieren.

7.1.2 Layout umbenennen und löschen

Umbenennen:

• Klicken Sie auf den Layout-Namen in Kopfzeile


• Geben Sie einen neuen Namen ein (z. B. "Wetter-Dashboard", "Besprechungsraumplan")


• Drücken Sie Enter zur Bestätigung

• Wählen Sie das Layout in der Seitenleiste aus


• Klicken Sie auf das Papierkorbsymbol


• Bestätigen Sie den Löschdialog

Das Löschen eines Layouts ist endgültig. Wenn das Layout gerade von einem Display in Verwendung ist, lässt es sich nicht löschen.

7.1.3 Speichern und Veröffentlichen

Der Layout-Designer verwendet einen zweistufigen Arbeitsablauf:

Layout Speichern: Klicken Sie auf "Layout Speichern", um Ihre aktuelle Arbeit als Entwurf zu speichern. Entwurfs-Layouts sind auf Displays nicht sichtbar und können frei bearbeitet werden.

Layout Veröffentlichen: Wenn Sie mit dem Layout zufrieden sind, klicken Sie auf "Layout Veröffentlichen", um es für die Zuweisung an Displays verfügbar zu machen. Veröffentlichte Layouts werden schreibgeschützt; erstellen Sie eine neue Version, wenn weitere Änderungen erforderlich sind.

Displays erhalten das veröffentlichte Layout automatisch bei ihrem nächsten Aktualisierungszyklus.

Änderungen Verwerfen: Sie können alle Änderungen seit dem letzten Veröffentlichen verwerfen, indem sie auf "Änderungen Verwerfen" klicken.

7.1.4 Echtzeit-Vorschau (WebAssembly-Rendering im Browser)

Der Layout-Designer verfügt über eine Echtzeit-Vorschau, die von WebAssembly angetrieben wird:

• Dieselbe LVGL-Rendering-Engine, die auf dem Display läuft, wird zu WebAssembly kompiliert und läuft in Ihrem Browser
• Jede Änderung erscheint sofort im Vorschaufenster mit pixelgenauer Darstellung
• Dithering-Effekte, Schriftrendering und Farbquantisierung entsprechen exakt dem, was auf dem E-Paper-Display angezeigt wird, wenn Sie Dithering über "Dithering Aktivieren" einschalten
• Es ist kein physisches Gerät erforderlich, um Layouts zu designen.

7.2 Steuerelemente (Widgets)

Der Layout-Designer bietet eine umfassende Auswahl an auf LVGL-Widgets basierenden Steuerelementen. Ziehen Sie sie von der Palette auf die Leinwand.

7.2.1 Text

Einfache Textanzeige mit konfigurierbarer Schriftart, Größe und Farbe. Verwenden Sie Labels für statischen Text wie Titel und Überschriften. Verwenden Sie Spangroup, wenn Sie gemischte Formatierung in einer einzigen Zeile benötigen.

7.2.2 Bild

Statische Bildanzeige mit Unterstützung für PNG-, JPG- und SVG-Formate. Bilder werden zum Web-Backend hochgeladen und in Ihrem Layout per ID referenziert. Das System optimiert Bilder automatisch für die E-Paper-Darstellung mit Dithering.

7.2.3 Kalender

Zeigt eine Monatskalenderansicht an mit konfigurierbarer Hervorhebung des aktuellen Datums, Anpassung der Wochentag-Überschriften und Unterstützung von Datenbindung für dynamische Ereignismarker.

7.2.4 Fortschrittsanzeige

Lineare Fortschrittsleiste mit konfigurierbarem Füllprozentsatz und Farbe. Unterstützt Datenbindung für dynamische Werte aus JSON/XML-Quellen.

7.2.5 Diagramm

Rendert Liniendiagramme oder Balkendiagramme mit konfigurierbarer Anzahl von Serien und Datenpunkten, Achsenbeschriftungen und Gitterlinien. Unterstützt Echtzeit-Datenupdates via Datenbindung.

7.2.6 Checkbox

Standard-Checkbox mit Beschriftungstext. Primär visueller Indikator auf dem E-Paper-Display, da das Display keine Touch-Eingabe hat.

7.2.7 LED-Anzeige

Eine kleine kreisförmige LED-Anzeige, die gefärbt werden kann. Konfigurierbare Größe und Farbe. Nützlich für Statusanzeigen (z. B. Systemzustand, Warnungen).

7.2.8 QR-Code

Generiert einen QR-Code aus Text- oder URL-Daten. Codiert den bereitgestellten String automatisch in einen scannbaren QR-Code mit konfigurierbarer Größe und Fehlerkorrekturstufe. Unterstützt Datenbindung für dynamische URLs.

7.2.9 Skala

Messskala mit Markierungen und Beschriftungen. Konfigurierbarer Wertebereich und Drehwinkel für verschiedene Anzeigeebenen.

7.2.10 Switch

Toggle-Schalter (Ein/Aus) als visuelles Element. Primär visueller Indikator auf dem E-Paper-Display, da das Display keine Touch-Eingabe hat.

7.2.11 Textfeld

Mehrzeiliges Textfeld mit konfigurierbarer Anzahl sichtbarer Zeilen, scrollbarem Inhalt für längeren Text und Unterstützung von Datenbindung für dynamischen mehrzeiligen Inhalt.

7.3 Steuerelement-Eigenschaften

Jedes Steuerelement hat konfigurierbare Eigenschaften, die im rechten Eigenschaftsfeld verfügbar sind, wenn es auf der Leinwand ausgewählt ist.

7.3.1 Position und Größe (X, Y, Breite, Höhe)

• X / Y - Obere linke Ecke in Pixeln
• Breite / Höhe - Abmessungen in Pixeln
• Steuerelemente können durch Ziehen ihrer Kanten auf der Leinwand skaliert werden
• Snap-to-Grid-Ausrichtung unterstützt präzise Positionierung

7.3.2 Rotation und Skalierung

• Rotation - Dreht das Steuerelement um einen angegebenen Winkel (0-360°)
• Skalierung X / Y - Gleichmäßiger oder ungleichmäßiger Skalierungsfaktor (1,0 = Originalgröße)

7.3.3 Farben (Textfarbe, Hintergrundfarbe, Randfarbe, Deckkraft)

• Textfarbe - Schriftfarbe (Hex-Code oder Farbwähler)
• Hintergrundfarbe - Füllfarbe hinter dem Steuerelement
• Randfarbe - Umrissfarbe mit konfigurierbarer Randbreite
• Deckkraft - Transparenzstufe (0 % = vollständig transparent, 100 % = undurchsichtig)

7.3.4 Schriftart und Schriftgröße

• Schriftfamilie - Auswahl aus verfügbaren Systemschriften (z. B. DejaVu Sans, Noto Sans)
• Schriftgröße - Textgröße in Pixeln
• Fett / Kursiv - Textstil-Modifikatoren (über Spangroup-Steuerelement verfügbar)

7.3.5 Ausrichtung und Textdekoration

• Horizontale Ausrichtung - Links, Zentriert, Rechts
• Vertikale Ausrichtung - Oben, Mitte, Unten
• Textdekoration - Unterstrichen, Durchgestrichen

7.3.6 Dithering aktivieren/deaktivieren

Das E-Ink-Display unterstützt nur 6 Farbstufen. Die Dithering-Einstellung in der Vorschau steuert, wie Farben im Layout-Designer dargestellt werden:

• Dithering deaktiviert - Farben werden in 16-Bit-Farbtiefe dargestellt. Dies entspricht der ursprünglichen Farbdefinition, zeigt aber nicht das tatsächliche Display-Ergebnis.
• Dithering aktiviert - Farben werden so dargestellt, wie sie auf dem Display erscheinen werden. Der Dithering-Algorithmus simuliert die begrenzte 6-Farben-Palette des E-Ink-Displays durch Muster aus schwarzen und weißen Pixeln.

7.4 Bilder verwalten

7.4.1 Bilder hinzufügen

Um ein Bild zu Ihrem Layout hinzuzufügen:

7.4.2 Bildqualität und Skalierung

Beim Hochladen von JPG-Bildern erscheint ein Popup, das eine Qualitäts-Skalierung zulässt. Damit können Sie die Dateigröße direkt beim Upload anpassen, um unter das Limit zu kommen. Das System optimiert Bilder automatisch für die E-Paper-Darstellung:

• Große Bilder werden skaliert, um innerhalb der Display-Auflösung (800×480) zu passen


• Seitenverhältnis wird beim Skalieren beibehalten

7.4.3 Dateigrößen- und Auflösungsbeschränkungen

Bilder dürfen eine maximale Dateigröße von 64 KB nicht überschreiten und die Auflösung darf maximal 800×480 Pixel betragen:

7.4.4 Unterstützte Formate (PNG, JPG, SVG)

• PNG - Beste für Grafiken mit Transparenz oder scharfen Kanten
• JPG - Beste für Fotos und komplexe Verläufe
• SVG - Beste für Logos, Symbole und skalierbare Vektorgrafiken

7.5 Datenbindung

Datenbindung ermöglicht das Einfügen dynamischer Werte aus Datenquellen in Ihre Layout-Steuerelemente.

7.5.1 Dynamische Werte einfügen

Um ein Steuerelement an ein Datenfeld zu binden:

7.5.2 Datenfelder auswählen

Der Datenbindungsdialog zeigt:

• Verfügbare Datenquellen, die Ihrem Konto zugewiesen sind


• Feldhierarchie innerhalb jeder Datenquelle (JSON/XML-Struktur)


• Vorschau aktueller Werte zur Überprüfung

7.5.3 Syntax und Platzhalter

Die Datenbindung verwendet Lupa, eine Jinja2-Template-Engine-Implementierung in Lua, die Lua-Syntax innerhalb von Tags und Variablen unterstützt.

Datenbindung verwendet Platzhaltersyntax im Textinhalt:

{{datenQuelle.feldName}}

Beispiele:

• {{wetter.temperatur}} - Fügt den Temperaturwert aus einer Wetterdatenquelle ein


• {{plan.naechstesMeeting}} - Zeigt die nächste Meeting-Zeit an


• Aktuelle Temperatur: {{sensoren.temp}}°C - Gemischter statischer und dynamischer Text

Da Lupa Jinja2-Syntax unterstützt, stehen auch erweiterte Template-Funktionen zur Verfügung, wie Bedingungen ({% if %}), Schleifen ({% for %}) und Filter. Innerhalb von Tags kann zudem Lua-Code verwendet werden.

7.6 Undo/Redo

Der Layout-Designer unterstützt vollständige Undo/Redo-Funktionalität:

• Rückgängig - Klicken Sie auf die Rückgängig-Schaltfläche in der Symbolleiste
• Wiederholen - Klicken Sie auf die Wiederholen-Schaltfläche

8. Datenquellen

Datenquellen liefern dynamischen Inhalt für Ihre Display-Layouts. Anstatt statischen Text und Bilder, können Sie Layout-Steuerelemente an Daten binden, die automatisch von externen Systemen, APIs oder manueller Eingabe aktualisiert werden.

8.1 Datenquelle erstellen

So erstellen Sie eine neue Datenquelle:

Displays werden an Datenquellen gebunden (nicht Layouts). Wenn ein Display an eine Datenquelle gebunden ist und das diesem Display zugeordnete Layout bearbeitet wird, so steht die Datenquelle im Layout-Designer automatisch zur Verfügung. Alternativ kann der Inhalt auch manuell direkt im Designer gesetzt werden – dies muss jedoch bei jeder Bearbeitung erneut erfolgen.

8.2 JSON-Datenformat

JSON (JavaScript Object Notation) ist das empfohlene Format für Datenquellen aufgrund seiner Einfachheit und breiten API-Unterstützung:

{
  "temperatur": 23.5,
  "luftfeuchtigkeit": 65,
  "wetter": "Teilweise bewölkt",
  "vorhersage": [
    { "tag": "Montag", "temp": 24 },
    { "tag": "Dienstag", "temp": 22 }
  ]
}

Bindungsbeispiele in Layouts:

• {{temperatur}} -> Zeigt 23.5 an


• {{wetter}} -> Zeigt Teilweise bewölkt an


• {{vorhersage[0].tag}} -> Zeigt Montag an

8.3 XML-Datenformat

XML wird zur Kompatibilität mit Legacy-Systemen und Enterprise-Datenfeeds unterstützt:

  23.5
  65
  Teilweise bewölkt
  
    Montag24
    Dienstag22
  

Bindungsbeispiele in Layouts:

• {{temperatur}} -> Zeigt 23.5 an


• {{wetter}} -> Zeigt Teilweise bewölkt an


• {{vorhersage.eintrag[0].tag}} -> Zeigt Montag an

8.4 Manuelles Aktualisieren der Daten

Um eine Datenquelle manuell zu aktualisieren:

Das Display spiegelt die aktualisierten Daten automatisch bei seinem nächsten Aktualisierungszyklus wider (typischerweise innerhalb von 5 Minuten, wenn Energie verfügbar ist). Manuelle Updates sind nützlich für:

• Statische Informationen, die sich selten ändern (z. B. Öffnungszeiten, Ankündigungen)


• Testen von Layout-Designs mit Beispieldaten vor der API-Verbindung


• Notfall-Inhaltsüberschreibungen

8.5 Automatisches Aktualisieren über API/Webhook

Für automatisierte Datenupdates verwenden Sie die REST-API oder Webhook-Integration:

Aktualisierung via cURL:

curl -X PUT "https://api.siebenschlaefer.com/v1/datasources/{id}/content" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"temperatur": 24.1, "luftfeuchtigkeit": 62}'

Aktualisierung via PowerShell:

Invoke-RestMethod -Uri "https://api.siebenschlaefer.com/v1/datasources/{id}/content" 
  -Method Put 
  -Headers @{ Authorization = "Bearer YOUR_API_TOKEN" } 
  -ContentType "application/json" 
  -Body '{"temperatur": 24.1, "luftfeuchtigkeit": 62}'

Die API akzeptiert sowohl JSON- als auch XML-Inhalt. Ersetzen Sie das Beispiel-Payload durch Ihre tatsächlichen Daten. Das Display aktualisiert sich automatisch, sobald es sich aktualisiert.

Für detaillierte API-Dokumentation einschließlich Authentifizierung, Ratenlimits und aller Endpunkte siehe Kapitel 16 (API-Referenz).

8.6 Datenquelle mehreren Displays zuweisen

Eine einzelne Datenquelle kann über mehrere Displays hinweg geteilt werden:

Wenn Sie den Inhalt der Datenquelle aktualisieren (manuell oder via API), werden alle Displays, die sie verwenden, die Änderungen bei ihrem nächsten Aktualisierungszyklus widerspiegeln. Dies ist ideal für:

• Unternehmensweite Ankündigungen auf mehreren Bildschirmen


• Geteilte Metriken-Dashboards über Abteilungen hinweg


• Konsistentes Branding mit zentral verwalteten Bildern und Texten

9. Lua-Scripting

Lua-Scripting bietet erweiterte Anpassungsmöglichkeiten über den visuellen Layout-Designer hinaus. Mit Lua können Sie dynamische Layouts erstellen, Datenquellen programmgesteuert verarbeiten, benutzerdefinierte Grafiken zeichnen und komplexe Logik direkt auf dem Gerät implementieren.

9.1 Einführung in Lua auf dem Siebenschläfer Display

Das Siebenschläfer™ Display enthält eine integrierte Lua-Scripting-Engine (Lua 5.x), die direkt auf dem STM32L496-Mikrocontroller läuft:

• Vollständige Lua-Sprachunterstützung - Variablen, Funktionen, Schleifen, Bedingungen, Tabellen
• LVGL-Bindungen - Direkter Zugriff auf LVGL-Grafikprimitive für benutzerdefiniertes Rendering
• JSON/XML-Parsing - Integrierte Bibliotheken zur Verarbeitung von Datenquellen
• Begrenzte Ressourcen - Skripte laufen innerhalb der Speicherbeschränkungen des Geräts (4 MB RAM)

9.2 Lua-Skript im Layout einbinden

Jedes Layout verfügt über ein Lua-Skript, das die gesamte Logik des Designs steuert. Um den Skripteditor zu öffnen:

Der Aufbau des Skripts ist wie folgt:

• Oberer Bereich: Alle Elemente, die Sie im visuellen Layout-Designer platziert haben, werden automatisch in Lua-Code umgesetzt und hier angezeigt. So können Sie die korrekte Syntax und API-Nutzung direkt nachvollziehen.


• Unterer Bereich: Ab der Markierung -- Add additional commands below können Sie eigenen Lua-Code hinzufügen. Hier können Sie die vom Layout-Designer erstellten Elemente direkt verändern, manipulieren oder um zusätzliche Logik erweitern.

• Benutzerdefinierte Widgets erstellen, die im visuellen Designer nicht verfügbar sind


• Datenquelleninhalt vor der Bindung verarbeiten


• Komplexe Grafiken mit LVGL-Primitiven zeichnen


• Bedingte Logik für dynamische Layouts implementieren

9.3 Praxisbeispiel: Gold-Tageskurs mit n8n auf dem Display anzeigen

In diesem Abschnitt erstellen wir ein komplettes Beispiel: Den aktuellen Gold-Tageskurs über n8n abrufen, verarbeiten und auf dem Siebenschläfer-Display anzeigen.

Schritt 1: n8n-Workflow erstellen

Erstellen Sie in n8n einen neuen Workflow mit folgenden drei Schritten:

Schritt 1 – Gold-Daten abrufen (HTTP Request)

Fügen Sie einen HTTP Request-Node hinzu und konfigurieren Sie ihn wie folgt:

Lizenzhinweis: Verwenden Sie nur Datenquellen, deren Nutzung lizenzrechtlich erlaubt ist. Der oben genannte Endpunkt kann ein bezahltes Konto erfordern. Prüfen Sie stets die Nutzungsbedingungen des jeweiligen Anbieters und stellen Sie sicher, dass Sie über die erforderlichen Berechtigungen verfügen, bevor Sie den Workflow produktiv einsetzen.

Dieser Schritt lädt die Rohdaten des Goldkurses herunter. Die Antwort enthält Arrays für Open (o), High (h), Close (c) und Low (l) Werte.

Schritt 2 – Daten verarbeiten (Code)

Fügen Sie einen Code-Node (JavaScript) hinzu, um die Rohdaten in das gewünschte Format zu transformieren:

// Daten aus dem API-Response holen
const data = items[0].json.data;
const o = data.o || [];
const h = data.h || [];
const c = data.c || [];
const l = data.l || [];
let cur = 0;
const resultItems = [];
for (let i = 0; i < o.length; i++) {
    cur = cur + o[i];
resultItems.push({
        json: {
            open: cur / 100,
            low: (cur - l[i]) / 100,
            high: (cur + h[i]) / 100,
            close: (cur + h[i] - c[i]) / 100
        }
    });
cur = cur + h[i] - c[i];
}
// Nur die letzten 60 Einträge nehmen
const last60 = resultItems.slice(-120);
// Datum berechnen (Vortag)
const yesterday = new Date();
yesterday.setDate(yesterday.getDate());
// Formatieren als DD.MM.YYYY
const day = String(yesterday.getDate()).padStart(2, '0');
const month = String(yesterday.getMonth() + 1).padStart(2, '0');
const year = yesterday.getFullYear();
const dateStr = ${day}.${month}.${year};
// JSON-Objekt erstellen und als STRING stringifizieren
const payloadObject = {
    symbol: "GOLD",
    date: dateStr,
    data: last60.map(item => item.json)
};
return [{
    json: {
        payload: JSON.stringify(payloadObject)
    }
}];

Dieser Code berechnet die tatsächlichen Kurswerte aus den inkrementalen Rohdaten, beschränkt sie auf die letzten 120 Datenpunkte und packt alles in ein JSON-Objekt mit Symbol, Datum und Datentabelle.

Schritt 3 – An das Display senden (HTTP Request)

Fügen Sie einen zweiten HTTP Request-Node hinzu, um die verarbeiteten Daten an Ihre Datenquelle im Siebenschläfer-System zu senden:

Ersetzen Sie {ResourceLink} und {Token} durch Ihre tatsächlichen Werte. Diese erhalten Sie, wenn Sie Ihre Datenquelle auf der Webseite öffnen – der Update-Endpunkt wird dort angezeigt.

Speichern Sie den Workflow und testen Sie ihn. Bei erfolgreichem Durchlauf enthält Ihre Datenquelle nun die Goldkurs-Daten im Format:

{
  "symbol": "GOLD",
  "date": "28.07.2026",
  "data": [
    {"open": 3412.5, "low": 3405.2, "high": 3420.8, "close": 3418.0},
    ...
  ]
}

Im nächsten Schritt erstellen wir das Layout auf dem Display, um diese Daten ansprechend darzustellen.

Schritt 2: Layout im Designer erstellen

Öffnen Sie den Layout-Designer und erstellen Sie ein neues horizontales Layout. Das Goldkurs-Layout besteht aus folgenden Elementen:

Platzieren Sie die ersten vier Elemente visuell im Designer:

Schritt 3: Benutzerdefiniertes Lua-Skript schreiben

Klicken Sie auf „Lua-Skript Einstellungen", um den Skripteditor zu öffnen. Der obere Bereich zeigt den automatisch generierten Code für die oben platzierten Elemente. Fügen Sie ab der Markierung -- Add additional commands below folgenden benutzerdefinierten Code hinzu:

-- Add additional commands below
scale_3:set_mode(2)
num_elements = #_G.dormouse.bindingData.data
print_elements = num_elements
local min_val = nil
local max_val = nil
for k = 1, num_elements do
    v = _G.dormouse.bindingData.data[k]
if min_val == nil then
        min_val = v.low
        max_val = v.high
    else
        if v.open < min_val then min_val = v.open end
        if v.close < min_val then min_val = v.close end
        if v.low < min_val then min_val = v.low end
if v.open > max_val then max_val = v.open end
        if v.close > max_val then max_val = v.close end
        if v.high > max_val then max_val = v.high end
    end
end
padding = (max_val - min_val) * 0.05
low_line = min_val - padding
high_line = max_val + padding
scale_3:set_range(math.floor(low_line), math.floor(high_line))
x_start = 120
for k2 = num_elements-print_elements+1,num_elements,1 do
    v = _G.dormouse.bindingData.data[k2]
    k = k2 - num_elements+print_elements
    open = v.open
    close = v.close
y_open = (open - low_line) / (high_line - low_line) * 300
    y_close = (close - low_line) / (high_line - low_line) * 300
-- Docht berechnen (von low bis high)
    wick_y_low = (v.low - low_line) / (high_line - low_line) * 300
    wick_y_high = (v.high - low_line) / (high_line - low_line) * 300
    wick_height = math.abs(wick_y_low - wick_y_high)
-- Docht zeichnen (vor dem Körper, damit er nicht überdeckt wird)
    wick_i = lvgl.Line(nil)
    wick_x = x_start + k*5
    wick_y_start = 400 - math.max(wick_y_low, wick_y_high)
    wick_i:set_pos({x = wick_x+1, y = wick_y_start})
    wick_i:set({width = 2, height = wick_height, text= "", bg_color = "#000000", bg_opa = 255})
-- Kerzenkörper
    label_i = lvgl.Line(nil)
if (close > open) then
        label_i:set_pos({x = x_start+k*5, y = 400 - y_close});
        label_i:set({width = 4, height = y_close-y_open, text= "", bg_color = "#00ff00", bg_opa = 255})
    else
        label_i:set_pos({x = x_start+k*5, y = 400 - y_open});
        label_i:set({width = 4, height = y_open-y_close, text= "", bg_color = "#ff0000", bg_opa = 255})
    end
end

Funktionsweise des Skripts im Detail:

Speichern Sie das Layout und veröffentlichen Sie es. Weisen Sie es dem Display zu, das an Ihre Goldkurs-Datenquelle gebunden ist. Das Display zeigt nun den aktuellen Gold-Tageskurs als Candlestick-Chart mit dynamischer Y-Achse, Symbolbezeichnung und Datum.

9.4 Debugging und Fehlerbehebung

Debuggen von Lua-Skripten auf dem Gerät:

Häufige Probleme:

• Speicherlimits - Halten Sie Skripte knapp; vermeiden Sie große Datenstrukturen


• Fehlende Datenfelder - Prüfen Sie immer auf nil-Werte vor dem Zugriff auf Datenquellenfelder


• LVGL-API-Unterschiede - Einige LVGL-Funktionen haben möglicherweise begrenzte Lua-Bindungen

10. Webhooks und Automatisierung

Das Siebenschläfer™ Display kann externe Aktionen über Webhooks auslösen, was die Integration mit Smart-Home-Systemen, Automatisierungsservern und benutzerdefinierten Anwendungen ermöglicht.

10.1 Tilt-to-Act Tastendrücke mit n8n verarbeiten

Der Webhook wird vom Gateway (Hase) aufgerufen, nicht direkt vom Display. Das Gateway empfängt den Tastendruck per LoRa vom Display und leitet ihn als HTTP POST an die konfigurierte Webhook-URL weiter.

In n8n erstellt man einen Webhook-Knoten, der als Empfänger für die Tastendruck-Ereignisse des Displays dient. Der Webhook-Knoten stellt einen Test-Endpoint bereit, der in etwa so aussieht:

http://192.168.0.3/webhook-test/c269e3c5-e4d7-40de-9056-8b0e80df3490

Diesen Endpoint tragen Sie als Webhook URL in der Display-Konfiguration ein (siehe Kapitel 6.2.7).

Webhook-Knoten konfigurieren

JSON-Nutzlast der Tilt-to-Act Tastendrücke

Das Display verfügt über zwei physische Tasten (links und rechts), die durch Neigen ausgelöst werden können. Bei jedem Tastendruck sendet das Gateway eine HTTP POST-Anfrage an die konfigurierte Webhook-URL mit folgender JSON-Nutzlast:

{
  "leftButton": true,
  "rightButton": false
}

Die Felder haben folgende Bedeutung:

11. Energie und Leistung

Dieses Kapitel behandelt alles rund um das Solarenergiesystem des Siebenschläfer™ Displays, Energiemanagement und Leistungsoptimierung.

11.1 Solarbetrieb verstehen

Das Siebenschläfer™ Display läuft vollständig mit Solarenergie, ohne elektrische Verbindung oder Batteriewechsel:

• Solar-Rahmen - Ein dünner Solarzellenstreifen umgibt den E-Paper-Bildschirm und sammelt kontinuierlich Umgebungslicht
• Superkondensatoren - Gesammelte Energie wird in Hochleistungs-Superkondensatoren (keine Batterien) gespeichert, die sofortige Leistung für Display-Aktualisierungen bereitstellen
• Kein Verschleiß - Im Gegensatz zu Batterien verschleißen Superkondensatoren nicht mit der Zeit und haben praktisch unbegrenzte Lade-/Entladezyklen
• Wartungsfrei - Das System erfordert keine Batteriewechsel oder elektrische Anschlüsse

11.2 Minimale Lichtbedingungen (Lux-Werte)

Die Aktualisierungshäufigkeit des Displays hängt direkt von der Umgebungslichtstärke ab:

11.2.1 200 Lux - 1 Aktualisierung pro Tag

Bei ca. 200 Lux Umgebungslicht kann das Display genug Energie für einen vollständigen Aktualisierungszyklus pro Tag ansammeln. Diese Stufe ist typisch für:

• Schwach beleuchtete Flure oder Korridore


• Räume mit kleinen Fenstern, weit entfernt vom Display


• Stark bewölkte Tage im Innenbereich

11.2.2 400 Lux - 1 Aktualisierung alle 3 Stunden

Bei ca. 400 Lux kann sich das Display etwa alle 3 Stunden aktualisieren. Diese Stufe ist typisch für:

• Gut beleuchtete Büroumgebungen mit Deckenbeleuchtung


• Räume in Fensternähe während des Tages


• Einzelhandelsgeschäfte mit Standard-Gewerbebeleuchtung ohne große Schaufenster

11.2.3 Dunklere Umgebungen mit Extension Panel

Für Standorte mit unzureichendem Umgebungslicht (unter 200 Lux) bietet das optionale Extension Panel zusätzliche Solarsammelfläche:

• Verdoppelt die verfügbare Solarzellen-Oberfläche
• Ermöglicht Betrieb in lichtärmeren Umgebungen
• Verbindet sich über ein kurzes Kabel mit der Hauptdisplay-Einheit
• Beibehaltung desselben kabellosen, selbstversorgenden Designs

11.3 Aktualisierungshäufigkeit und Energieverbrauch

Die für jeden Aktualisierungszyklus benötigte Energie hängt von mehreren Faktoren ab:

• Verwenden Sie einfache Layouts mit weniger Steuerelementen für schnellere, energieärmere Aktualisierungen
• Bevorzugen Sie Text gegenüber Bildern, wo möglich (Textrendering ist sehr effizient)

11.4 Ladeverlauf interpretieren

Das Ladeverlauf-Diagramm in "Geräte verwalten" zeigt den Energiepegel Ihres Displays über die Zeit:

• Steigende Kurve - Display sammelt Solarenergie (gute Lichtbedingungen)
• Flache Linie auf hohem Niveau - Superkondensatoren sind voll geladen und halten den Ladestand
• Scharfe Abfälle - Inhaltsaktualisierungszyklen verbrauchen gespeicherte Energie
• Allmählicher Rückgang - Unzureichendes Licht; Standort wechseln oder Extension Panel hinzufügen

11.5 Standby-Stromverbrauch (100 µW)

Das Siebenschläfer™ Display erreicht einen extrem niedrigen Standby-Stromverbrauch von ca. 100 Mikrowatt (µW):

• Shutdown-Modus - Der STM32L496-Mikrocontroller geht in den Shutdown-Modus mit aktiver RTC, die ihn regelmäßig wieder aufweckt
• RTC-Aufweckzyklus - Die Echtzeituhr weckt den Controller in der Regel alle ca. 5 Minuten für periodische Gateway-Kontrollen
• DCDC-Wandler im Duty-Cycle - Auch der DCDC-Wandler läuft im Duty-Cycle-Betrieb, um den Stromverbrauch niedrig genug zu halten

12. Kommunikation und Netzwerk

Dieses Kapitel erklärt die Kommunikationstechnologie hinter dem Siebenschläfer™-System, von LoRa-Funk bis Webseiten-Konnektivität und Sicherheit.

12.1 LoRa-Funktechnologie (433 MHz, E22M22S)

Das Display kommuniziert mit dem Hase-Gateway mittels LoRa (Long Range)-Funktechnologie über das E22-400M22S-Modul:

• Frequenz - 433-MHz-ISM-Band (Europa), bietet gute Durchdringung durch Wände und Hindernisse
• Sendeleistung - 10 dBm, ermöglicht Langstrecken-Kommunikation mit minimalem Energieverbrauch
• Modulation - LoRa-Spread-Spectrum-Modulation für robuste Störungsresistenz

12.1.1 Reichweite (1 km Sichtverbindung mit internen Antennen / bis 7 km mit externer Antenne)

Die effektive Reichweite hängt von der Umgebung und der verwendeten Antenne ab:

12.1.2 Adaptive Data Rate (ADR)

Das LoRa-Modul unterstützt Adaptive Data Rate, die die Übertragungsgeschwindigkeit basierend auf Signalqualität anpasst:

• Starkes Signal - Höhere Datenrate für schnellere Inhaltsübertragung
• Schwaches Signal - Niedrigere Datenrate mit höherem Spreading-Faktor für Zuverlässigkeit
• Automatische Anpassung - Das System überwacht kontinuierlich die Link-Qualität und passt ohne manuelles Eingreifen an

12.2 Smart Heartbeat - Zeitschlitz-Algorithmus

Das Siebenschläfer™-System verwendet ein intelligentes "Smart Heartbeat"-Protokoll zur effizienten Verwaltung der Kommunikation zwischen Displays und Gateways:

12.2.1 Millisekundengenaue Uhren-Synchronisation

Jedes Display synchronisiert seine interne RTC (Echtzeituhr) mit dem Gateway auf Millisekunden-Genauigkeit:

• Das Gateway stellt genaue Zeit via NTP (Network Time Protocol) von Internetquellen bereit
• Displays synchronisieren ihre Uhren während jedes Kommunikationszyklus
• Dies gewährleistet, dass alle Geräte eine gemeinsame Zeiteferenz für koordinierte Weckzeiten teilen

12.2.2 Kollisionsvermeidung bei hunderten Geräten

Bei Installationen mit vielen Displays könnten gleichzeitige Übertragungsversuche Paketkollisionen verursachen. Der Smart Heartbeat-Algorithmus verhindert dies:

• Jedes Display hat einen eindeutigen Geräteschlüssel, der während der Fertigung generiert wurde
• Eine deterministische Hash-Funktion berechnet einen optimalen Zeitschlitz für jedes Gerät
• Displays wachen nur in ihrem zugewiesenen Zeitfenster auf, um nach Updates zu suchen
• Zeitschlitze werden gleichmäßig über den Kommunikationszyklus verteilt

12.3 Verschlüsselung und Sicherheit

Alle Kommunikationen im Siebenschläfer™-System sind Ende-zu-Ende verschlüsselt mit modernen kryptografischen Standards:

12.3.1 Ende-zu-Ende-Verschlüsselung (AES-GCM)

Alle Daten, die zwischen Display, Gateway und Web-Backend übertragen werden, sind mittels AES-GCM (Advanced Encryption Standard in GCM-Modus) mit 256-Bit-Schlüsseln verschlüsselt. Der GCM-Modus bietet nicht nur Vertraulichkeit durch Verschlüsselung, sondern auch:

• Integritätsschutz - Jeder Datenblock wird mit einem Authentifizierungscode (GCM-Tag) versehen, der jede nachträgliche Änderung erkennt und verwirft
• Replay-Schutz - Eindeutige Initialisierungsvektoren (IVs) verhindern, dass abgefangene Nachrichten erneut abgespielt werden können
• Authentizität - Der Empfänger kann verifizieren, dass die Daten tatsächlich vom erwarteten Absender stammen und nicht manipuliert wurden

• Payload-Verschlüsselung - Inhaltsupdates, Layout-Definitionen und Datenquelleninhalt sind AES-GCM-verschlüsselt
• Transport-Sicherheit - Gateway-zu-Webseite-Kommunikation verwendet TLS 1.3
• Funkverschlüsselung - LoRa-Übertragungen zwischen Display und Gateway verwenden AES-GCM mit 256-Bit-Schlüsseln

12.3.2 Digitale Signaturen (Ed25519)

Alle Firmware-Updates und kritische Konfigurationsänderungen sind digital signiert mit Ed25519-Elliptic-Curve-Signaturen:

• Stellt Authentizität von Firmware-Paketen sicher
• Verhindert unbefugte Änderungen an Gerätekongfigurationen
• Das Display überprüft die Signatur, bevor es ein Update anwendet

12.3.3 Key Exchange (RSA/X25519)

Sichere Schlüsselaustauschprotokolle etablieren verschlüsselte Kommunikationskanäle:

• X25519 - Wird für LoRa-Funk-Schlüsselaustausch zwischen Display und Gateway verwendet
• RSA - Wird für Webseiten-API-Authentifizierung und Zertifikatsverwaltung verwendet
• Schlüssel werden mit modernen SHA-basierten Schlüsselerzeugungsfunktionen (HKDF) abgeleitet

12.3.4 Geräte-spezifische Schlüssel (Manufacturing)

Jedes Gerät erhält während der Fertigung einzigartige kryptografische Schlüssel:

• Generiert mittels Hardware-TRNG (True Random Number Generator)
• Jedes Display-Gateway-Paar etabliert einen unabhängigen Verschlüsselungskanal
• Das Kompromittieren eines Geräts beeinträchtigt nicht die Sicherheit anderer

13. Firmware-Updates

Firmware-Updates halten Ihre Geräte sicher, fügen neue Funktionen hinzu und beheben Fehler. Alle Firmware-Updates sind vollautomatisiert — keine manuelle Aktion ist erforderlich. Das Ziel des Siebenschläfer™-Systems ist vollständige Wartungsfreiheit.

13.1 Vollautomatische Firmware-Updates

Sowohl Gateway- als auch Display-Firmware werden automatisch aktualisiert:

• Gateway - Neue Firmware wird direkt vom Web-Backend an das Gateway gesendet und installiert. Das Gateway startet nach der Installation automatisch neu.
• Display - Die Firmware wird über den normalen Kommunikationszyklus an die Displays verteilt. Jedes Display empfängt, überprüft (Ed25519-Signatur) und installiert das Update während seines geplanten Weckzeitpunkts.

13.2 Update-Status überprüfen

Sie können den aktuellen Firmware-Stand jederzeit einsehen:

• Gateway - Drücken Sie die Info-Taste am Gateway selbst, um die aktuelle Firmware-Version anzuzeigen
• Display - Die Firmware-Version ist in der Geräteübersicht auf der Webseite sichtbar

14. Gateway

Das Hase-Gateway verfügt über ein integriertes E-Paper-Display (2,7 Zoll, 176×264 Pixel) zur lokalen Bedienung und Statusanzeige. Die Benutzeroberfläche wird durch zwei physische Tasten gesteuert und bietet einen vollständigen Zugang zu allen wichtigen Gateway-Funktionen ohne externe Werkzeuge.

14.1 Display und Tasten

Das Gateway-Display zeigt verschiedene Bildschirme an, die über zwei Tasten navigiert werden können:

14.2 Bildschirm: Geräteübersicht (Devices Overview)

Der Hauptbildschirm des Gateways zeigt einen Überblick über alle verbundenen Siebenschläfer™-Displays und den Cloud-Verbindungsstatus.

Angezeigte Informationen:

• Cloud-Status - Zeigt offline, wenn keine Verbindung zum Web-Backend besteht
• Liste der Displays - Status jedes registrierten Displays, einschließlich Signalstärke und letztem Kommunikationszeitpunkt

14.3 Bildschirm: Informationen (Info Screen)

Der Informationsbildschirm zeigt detaillierte technische Daten des Gateways an.

Angezeigte Informationen:

• Geräteinformationen - Seriennummer und Kontaktinformationen
• Firmware-Version - Aktuell installierte Firmware-Version des Gateways
• Ethernet-MAC-Adresse - MAC-Adresse der Ethernet-Schnittstelle mit Status (Up/Down)
• WiFi-MAC-Adresse - MAC-Adresse der WiFi-Schnittstelle mit Status (Up/Down)
• IP-Adresse und Subnetzmaske - Aktuelle IPv4-Konfiguration
• IPv6-Adresse - Falls eine IPv6-Verbindung aktiv ist
• Gateway und DNS - Standard-Gateway und DNS-Server

14.4 Bildschirm: Optionen (Options Screen)

Der Optionsbildschirm bietet Zugriff auf Reset-Funktionen des Gateways. Die Auswahl erfolgt durch Drücken der Taste B zum Durchblättern, und die Ausführung durch gleichzeitiges Drücken beider Tasten.

Verfügbare Optionen:

Der Werksreset löscht alle Daten von der SD-Karte, einschließlich gespeicherter Firmware-Images und Protokolldateien. Stellen Sie sicher, dass Sie keine wichtigen lokalen Backups verlieren möchten, bevor Sie diese Option ausführen.

14.5 Bildschirm: Hilfe (Help Screen)

Der Hilfebildschirm zeigt einen QR-Code, der zur Online-Hilfe des Siebenschläfer-Displays führt.

Angezeigte Informationen:

• QR-Code - Verlinkt zu https://www.siebenschläfer-display.eu/ für Dokumentation und Support

14.6 Bildschirm: Gateway registrieren (Register Gateway Screen)

Dieser Bildschirm erscheint nach erfolgreicher Netzwerkverbindung, wenn das Gateway noch nicht beim Web-Backend registriert ist. Er zeigt einen QR-Code zur Registrierung des Gateways.

Angezeigte Informationen:

• QR-Code - Enthält den Registrierungslink

14.7 Bildschirm: WiFi-Einrichtung (WiFi Setup Screen)

Dieser Bildschirm erscheint, wenn keine Ethernet-Verbindung erkannt wird und noch keine WiFi-Konfiguration gespeichert ist.

Navigation:

Ethernet wird als bevorzugte Verbindungsmethode empfohlen, da sie stabiler und zuverlässiger ist. Verwenden Sie WiFi nur, wenn kein Ethernet-Anschluss verfügbar ist.

14.8 Bildschirm: WPS-Einrichtung (WPS Screen)

Dieser Bildschirm erscheint während des aktiven WPS-Einrichtungsprozesses.

Navigation:

Der WPS-Prozess hat ein Zeitfenster von typischerweise zwei Minuten. Stellen Sie sicher, dass Sie die WPS-Taste am Router innerhalb dieses Fensters drücken.

14.9 Bildschirm: SD-Karte fehlt (SD Missing Screen)

Dieser Fehlerbildschirm erscheint, wenn das Gateway beim Start keine SD-Karte erkennt.

Angezeigte Informationen:

• Fehlermeldung - „No SD card detected"

Das Gateway kann ohne SD-Karte nicht betrieben werden. Stellen Sie sicher, dass eine kompatible microSD-Karte (empfohlen: 32 GB) korrekt eingesetzt ist.

14.10 Bildschirmhierarchie und Navigation

Die folgende Abbildung zeigt die Beziehungen zwischen den einzelnen Bildschirmen des Gateways:

Die physische Reset-Taste (MCU) führt auf jedem Bildschirm zu einem direkten Neustart. Die Beschriftung "↓ Reset" verweist auf diese Hardware-Reset-Funktion.

14.11 Reset-Funktionen im Detail

Das Gateway bietet zwei Ebenen von Reset-Operationen, die über den Optionsbildschirm ausgeführt werden können:

14.11.1 WiFi-Einstellungen zurücksetzen

Diese Option löscht ausschließlich die gespeicherten WiFi-Konfigurationsdaten:

• Gespeicherte WPA/WPA2-Kredentials werden entfernt
• EAP-Enterprise-Wifi-Konfiguration wird gelöscht
• Das Gateway startet neu und versucht eine Ethernet-Verbindung
• Falls kein Ethernet verfügbar ist, erscheint der WiFi-Einrichtungsbildschirm

14.11.2 Werksreset

Diese Option setzt das Gateway vollständig auf den Auslieferungszustand zurück:

• Alle Dateien auf der SD-Karte werden gelöscht
• Die Gateway-Konfiguration wird zurückgesetzt
• Das Gerät startet neu und durchläuft den gesamten Einrichtungsprozess von vorne

Der Werksreset ist eine irreversible Operation. Alle lokalen Daten, einschließlich Firmware-Caches und Protokolle, gehen verloren. Verwenden Sie diese Option nur, wenn ein vollständiger Neustart der Konfiguration erforderlich ist.

15.1 Reinigung des Displays und Solarpanels

So reinigen Sie Ihr Siebenschläfer™ Display:

Vermeiden Sie:

• Alkoholbasierte Reiniger oder Lösungsmittel - Können die Entspiegelungsschicht beschädigen


• Scheuernde Materialien - Können die Glasoberfläche zerkratzen


• Übermäßige Feuchtigkeit - Wassereintritt kann interne Elektronik beschädigen

15.2 Entspiegeltes Glas - UV-Schutz und Pflege

Das Frontglas des Displays verfügt über eine Entspiegelungsbeschichtung (AG), die:

• Reflexionen von Deckenbeleuchtung und Fenstern reduziert


• UV-Schutz für das dahinterliegende E-Paper-Panel bietet

16. Open Source Lizenzen

Das Siebenschläfer Display System verwendet folgende Open-Source-Komponenten:

Backend (.NET)

• BouncyCastle.Cryptography – MIT (https://github.com/bcgit/bc-csharp)
• Google.Protobuf – BSD-3-Clause (https://github.com/protocolbuffers/protobuf)
• Grpc.AspNetCore – Apache-2.0 (https://github.com/grpc/grpc-dotnet)
• MailKit – MIT (https://github.com/jstedfast/MailKit)
• ManagementPort – MIT (https://github.com/bernd-herzog/ManagementPort)
• Microsoft.EntityFrameworkCore – MIT (https://github.com/dotnet/efcore)
• Npgsql.EntityFrameworkCore.PostgreSQL – PostgreSQL License (https://github.com/npgsql/npgsql)
• OpenTelemetry.Exporter.OpenTelemetryProtocol – Apache-2.0 (https://github.com/open-telemetry/opentelemetry-dotnet)
• OpenTelemetry.Extensions.Hosting – Apache-2.0 (https://github.com/open-telemetry/opentelemetry-dotnet)
• OpenTelemetry.Instrumentation.AspNetCore – Apache-2.0 (https://github.com/open-telemetry/opentelemetry-dotnet)
• OpenTelemetry.Instrumentation.Http – Apache-2.0 (https://github.com/open-telemetry/opentelemetry-dotnet)
• Polly – BSD-3-Clause (https://github.com/App-vNext/Polly)
• Swashbuckle.AspNetCore – MIT (https://github.com/domaindrivendev/Swashbuckle.AspNetCore)
• System.IdentityModel.Tokens.Jwt – MIT (https://github.com/AzureAD/azure-activedirectory-identitymodel-extensions-for-dotnet)
• TimeZoneConverter – MIT (https://www.nuget.org/packages/TimeZoneConverter)

Firmware (C/C++)

• bsdiff – BSD (https://github.com/mendsley/bsdiff)
• bzip2 – bzip2 License (https://gitlab.com/federicomenaquintero/bzip2)
• eLua – MIT (https://github.com/elua/elua)
• FatFs – FatFs License (https://elm-chan.org/fsw/ff/)
• libjpeg-turbo – IJG/BSD (https://github.com/libjpeg-turbo/libjpeg-turbo)
• LittleFS – BSD-3-Clause (https://github.com/littlefs-project/littlefs)
• LVGL – MIT (https://github.com/lvgl/lvgl)
• luavgl – MIT (https://github.com/XuNeo/luavgl)
• mbedTLS – Apache-2.0 (https://github.com/Mbed-TLS/mbedtls)
• NanoPB – BSD-3-Clause (https://github.com/nanopb/nanopb)
• nlohmann/json – MIT (https://github.com/nlohmann/json)
• UMM_malloc – MIT (https://github.com/rhempel/umm_malloc)

Gateway (ESP-IDF Managed Components)

• espressif__esp_websocket_client – Apache-2.0 (https://components.espressif.com/components/espressif/esp_websocket_client)
• espressif__nghttp (nghttp2) – MIT (https://github.com/nghttp2/nghttp2)
• espressif__sh2lib – MIT (https://components.espressif.com/components/espressif/sh2lib)

Frontend (JavaScript/TypeScript)

• @dnd-kit/core – MIT (https://www.npmjs.com/package/@dnd-kit/core)
• @fluentui/react-components – MIT (https://www.npmjs.com/package/@fluentui/react-components)
• @monaco-editor/react – MIT (https://www.npmjs.com/package/@monaco-editor/react)
• crypto-js – MIT (https://www.npmjs.com/package/crypto-js)
• i18next – MIT (https://www.npmjs.com/package/i18next)
• immer – MIT (https://www.npmjs.com/package/immer)
• js-sha512 – MIT (https://www.npmjs.com/package/js-sha512)
• jwt-decode – MIT (https://www.npmjs.com/package/jwt-decode)
• pngjs – MIT (https://www.npmjs.com/package/pngjs)
• React – MIT (https://www.npmjs.com/package/react)
• react-i18next – MIT (https://www.npmjs.com/package/react-i18next)
• react-router-dom – MIT (https://www.npmjs.com/package/react-router-dom)
• react-select – MIT (https://www.npmjs.com/package/react-select)
• recharts – MIT (https://www.npmjs.com/package/recharts)
• swr – MIT (https://www.npmjs.com/package/swr)
• underscore – MIT (https://www.npmjs.com/package/underscore)
• upng-js – MIT (https://www.npmjs.com/package/upng-js)