Flash Bee: Ein Dashboard für ein rundes Display in Lopaka gestalten

Das Gerät

Wir sind auf gokuxs Flash Bee gestoßen und mussten innehalten und auf den Screen starren. Es ist ein tragbarer Blitzdetektor, ein Taschen-Sturmradar in einem klobigen gelben 3D-gedruckten Gehäuse. Clippe ihn auf einer Wanderung an deinen Rucksack, und er lauscht auf das elektromagnetische Knistern, das Blitze abwerfen, bis zu 40 km entfernt, und sagt dir dann, wie weit die Einschläge entfernt sind und ob der Sturm näher kommt oder sich zurückzieht. Kein Internet, keine Wetter-App, nur der Himmel, direkt aus der Luft gelesen.

Unter der Haube steckt ein Seeed Studio XIAO ESP32-C3, der einen AS3935-Blitzsensor ausliest, mit einem runden Farb-Display vorne. Er fängt sowohl Wolke-zu-Boden- als auch Intra-Wolken-Blitze, zählt sie, liest, wie stark jeder einzelne war, und führt eine laufende Historie. Der Teil, über den wir sprechen wollen, ist dieser Screen.

Der Screen

Das Display ist ein rundes GC9A01-Panel: 240x240 Pixel, Vollfarbe, das Round Display for Seeed Studio XIAO. Runde Screens sind ihr eigenes Design-Puzzle. Es gibt keine Ecken, in die du Dinge stecken könntest, also muss sich das gesamte Layout um die Mitte organisieren, und Flash Bee trifft den Look mit einer Instrumenten-Cluster-Anmutung:

1. Einschlagentfernung. Der Heldenwert, genau in der Mitte, groß und fett: Kilometer bis zum nächsten Einschlag.
2. Einschlagenergie-Anzeige. Ein heller Bogen, der den rechten Rand umschließt und sich mit der Stärke des letzten Einschlags füllt.
3. Einschläge und Energie. Zwei Messwerte auf einer Basislinie unter der Mitte, ein Einschlagzähler und eine Energiezahl.
4. Energiehistorie. Ein kleiner Balken-Ticker entlang der Unterseite, der die letzten paar Einschläge zeigt.

Ein schwacher Radar-Sweep und Führungsringe sitzen hinter allem, was das Gefühl von „den Sturm scannen“ verkauft.

Gestalten in Lopaka

Der gesamte Screen wurde in Lopaka zusammengestellt, und ein rundes Dashboard ist ein großartiges Schaufenster dafür. So setzt sich das Layout zusammen:

1. Neues Projekt. Öffne lopaka.app, starte ein Projekt, wähle TFT_eSPI als Bibliothek und 240 x 240 für das runde Display.
2. Zentriere den Helden. Platziere eine große Textbeschriftung in der Mitte für die Entfernung, mit einem kleineren „km“ darunter. Diese Zahl ändert sich ständig, also mache sie zu einer Variablen mit dem Make-Variable-Button im Inspektor.
3. Rahme die Messwerte. Füge zwei kleine Abschnittsbeschriftungen hinzu, STRIKES und ENERGY, jede mit einem variablen Wert darunter. Eine dünne Basislinie zwischen ihnen und der Mitte hält alles ordentlich.
4. Füge die Ringe hinzu. Zeichne ein paar konzentrische Kreise als schwache Führungsringe, um die runde Komposition zu verankern.
5. Lass Platz für die Live-Teile. Der Energiebogen, der Radar-Sweep und die Historienbalken werden aus Sensordaten animiert, also werden sie im Code über das Layout gelegt. Lopaka besitzt den festen Rahmen: Beschriftungen, Ringe, Positionen und die Werte, die du als Variablen markiert hast.

Alles ist gegen die Mitte platziert, was der ganze Trick bei runden Screens ist, und Lopaka zeigt dir die kreisförmigen Grenzen, während du arbeitest, damit nichts Wichtiges unter die Blende rutscht.

Der Code

Beim Export verwandelt Lopaka das Layout in TFT_eSPI-Zeichenaufrufe und gibt jede Variable zurück, damit deine Firmware sie setzen kann. Ein zentraler Messwert wie dieser kommt ungefähr so heraus:

tft.setTextDatum(MC_DATUM);
tft.setTextColor(TFT_YELLOW, TFT_BLACK);
tft.setTextSize(6);
tft.drawString(distance, 120, 90);    // variable: km to nearest strike
tft.setTextSize(3);
tft.drawString("km", 120, 122);

tft.setTextDatum(ML_DATUM);
tft.setTextSize(2);
tft.drawString("STRIKES", 40, 150);
tft.drawString(strikeCount, 40, 168); // variable

Füttere ihn in jedem Frame mit Live-Werten, schiebe sie auf das Panel, und das Layout, das du im Browser arrangiert hast, ist das, was auf dem runden Display erscheint.

Trage ihn

Das ganze Ding lebt in einem robusten 3D-gedruckten Gehäuse mit einer Lanyard-Schlaufe und einem Clip, sodass es an einem Rucksackgurt sitzt, wo du einen Blick darauf werfen kannst. Ein echtes, fertiges Build, kein Breadboard.

Probiere es aus

Willst du dein eigenes rundes Dashboard? Öffne lopaka.app, starte ein TFT_eSPI-Projekt mit 240 x 240 und gestalte direkt auf einer kreisförmigen Zeichenfläche. Es ist kostenlos und läuft in deinem Browser. Lopakas Icon-Bibliothek und Animationen sind für diesen Instrumenten-Look praktisch, und die Galerie ist voll von Screens, die du forken kannst, sobald du dich angemeldet hast.

Credits

Flash Bee von gokux, vollständiges Build mit Teilen und Code auf Instructables. Gebaut auf einem XIAO ESP32-C3 mit einem AS3935-Sensor und einem runden GC9A01-Display.