Erste Schritte
Diese Seite führt dich einmal durch alles: vom installierten Designer bis zu einem Screen mit Tankanzeige, Batterie, Lichtschalter und Dimmer, der auf einem Display im Van läuft. MQTT-Kenntnisse brauchst du dafür nicht, die Bausteine erledigen das.
Als Beispiel dient der Waveshare 4.3B. Mit einem anderen Board oder einem Android-Handy geht es genauso, nur das Einrichten des Geräts sieht etwas anders aus.
1. Designer installieren
Installiere den Designer auf deinem Pekaway-System, wie unter Auf Pekaway beschrieben, und öffne ihn im Browser unter http://<IP-deines-Pekaway-Systems>:3000.
Das Installationsskript richtet auch die VanPi-Brücke ein. Sie legt die Werte deines Vans auf den Broker.
2. Das Board vorbereiten
Ein neues Board bespielst du einmal über USB mit dem Flasher. Du brauchst dafür Chrome oder Edge auf einem Computer, die Einzelheiten stehen unter Firmware flashen.
Danach zeigt das Board einen QR-Code und öffnet ein eigenes WLAN, beim 4.3B heisst es waveshare-touch-lcd-4v3b-setup, das Passwort ist schaltli12345. Scanne den QR-Code mit dem Handy, dann verbindet es sich mit diesem WLAN und öffnet die Einrichtungsseite von selbst.
- Wähle im Tab WiFi Setup das WLAN im Van, gib das Passwort ein und tippe auf Save WiFi Settings.
- Trag im Tab MQTT Connection unter Host die IP-Adresse deines Pekaway-Systems ein, Port bleibt bei 1883. Tippe auf Save MQTT Settings.
- Tippe unten auf Finish and restart. Das Board behält deine Einstellungen, verlässt den Einrichtungsmodus und startet neu.
Mehr zu den Einstellungen, etwa wann das Display ausgeht, steht unter WLAN und MQTT einrichten. Das Board verbindet sich jetzt mit deinem WLAN und meldet sich beim Broker an. Es zeigt noch kein Projekt, das kommt im nächsten Schritt.
3. Ein Projekt anlegen
Klick auf der Startseite des Designers auf New Project.... Der Dialog zeigt alle Geräte, für die du ein Projekt anlegen kannst. Unter Server DDFs stehen die Geräte, die der Designer mitbringt, unter Announced Devices die, die sich gerade beim Broker melden. Dein Board findest du an beiden Stellen.
Klicke doppelt auf die Karte des Waveshare 4.3B, gib dem Projekt einen Namen, etwa «Van», und klick auf Create Project. Der Editor öffnet sich mit einem leeren Screen in der Grösse des Displays, 800 × 480 Pixel. Das Projekt ist damit schon gespeichert. Spätere Änderungen speicherst du mit Strg+S.
4. Bausteine auf den Screen setzen
Bausteine sind fertige Elemente, die schon wissen, woher ihre Werte kommen. Ganz rechts in der Werkzeugleiste öffnet Block die Auswahl: alles, was auf dem Broker angekündigt ist, mit seinem Namen.
Wähle «Frischwasser». Der Dialog zeigt, woher der Wert kommt und was dein Tank gerade meldet. Unter Look wählst du die Form, etwa einen Balken. Klick auf Insert und zieh oben auf dem Screen ein Rechteck auf, über die ganze Breite. Der Baustein wird eine kleine Tabelle: der Name in der linken Spalte, die Anzeige in der rechten. Mehr dazu unter Tabellen.
Setz die Batterie, das Licht und den Leselicht-Dimmer darunter, jedes mit einem Klick auf das + unter der Tabelle. Fährst du über das +, wird die untere Linie der Tabelle dick, dort kommt der Baustein hin. Der Dimmer kommt mit Ein-Aus und Regler. Den Ein-Aus kannst du löschen, der Regler auf 0 schaltet ebenfalls aus. Dann sieht dein Screen etwa so aus:
Die Zahlen im Editor sind Beispielwerte, damit du siehst, wie die Anzeige wirkt. Die echten Werte kommen erst in der Vorschau oder auf dem Gerät.
5. In der Vorschau prüfen
Klicke oben rechts auf Preview. Die Vorschau verbindet sich mit dem Broker und zeigt die echten Werte deines Vans. Rechts stehen unter MQTT Topic Values alle Werte, die der Screen gerade liest.
In der Live-Vorschau wird wirklich geschaltet
Tippst du in der Vorschau auf den Schalter, geht das Licht im Van tatsächlich an oder aus. Zum gefahrlosen Ausprobieren wechsle oben in der Liste auf Simulation.
Exit Preview bringt dich zurück in den Editor.
6. Aufs Board übertragen
Öffne File › Deploy to Device. Der Dialog zeigt alle Boards dieses Typs, die sich beim Broker gemeldet haben. Sie heissen nach Gerätetyp und einer Kennung, etwa waveshare-touch-lcd-4v3b-0a1b2c3d4e5f. Wähle deines aus.
Unter Firmware siehst du, welche Firmware das Board hat und ob der Designer eine neuere mitbringt. Stimmen beide überein, steht dort Up to date with the release.
Klicke auf Deploy. Das Board lädt das Projekt herunter, prüft es und startet neu. Der Dialog zeigt jeden Schritt. Bei Rebooting ist die Übertragung durch.
Nach dem Neustart zeigt das Board deinen Screen, mit den Werten deines Vans. Tippst du auf den Schalter, geht das Licht an.
Wie es weitergeht
- Ohne Board kannst du Screens auch nur in der Vorschau ausprobieren.
- Ein altes Android-Handy wird mit der Schaltli-App zum zweiten Bedienteil.
- Jede Änderung überträgst du genauso: im Designer ändern, dann wieder Deploy to Device.