CLOCK-SAT V1: Design einer E-Ink-Schreibtischuhr-UI in Lopaka

Das Gerät

CLOCK-SAT V1 ist eine Schreibtischuhr von Maxime Loiseau, wobei „Schreibtischuhr“ ihr wirklich nicht gerecht wird. Ein 1,02-Zoll-E-Paper-Modul schwebt in einem schlanken Messing-Drahtrahmen mit kleinen Solarzellen-Flügeln, sodass das Ganze wie ein winziger Satellit wirkt, der auf deinen Schreibtisch gedriftet ist. Sie zeigt die Zeit, das Datum und die Luftfeuchtigkeit und Temperatur des Raums an und zieht sich dann auf einen „Schlaf“-Screen zurück, sobald das Licht ausgeht.

Warum es Spaß macht, sie auseinanderzunehmen: Das Display ist komplett von Hand platzierte Pixel Art (jede Ziffer, jede Beschriftung und jedes Icon), und die gesamte UI wurde in Lopaka gebaut.

Der Screen

Es ist ein 1,02-Zoll-E-Paper-Panel: 80x128 Pixel, ein Bit pro Pixel, reines Schwarz und Weiß, angesteuert von GxEPD2. E-Ink spielt nach zwei Regeln. Es gibt keine Graustufen oder Überblendungen, hinter denen du dich verstecken könntest, also muss dein Layout in Schwarz und Weiß hart landen. Aber es hält ein Bild bei null Strom, und das ist der ganze Trick hinter dem Nacht-Screen: Die Uhr hört auf zu aktualisieren, das Panel zeigt weiterhin das letzte Frame, und die Batterie merkt es kaum.

CLOCK-SAT hat drei Screens:

1. Clock. Große Zeit, eine Ortszeile, ein Datumsblock und Karten für Luftfeuchtigkeit/Temperatur.
2. Sleeping. Ein Mond-Icon mit „Sleeping until the light come back...“
3. Sleep countdown. „Sleep between two ray of light...“ mit einer verbleibenden Zeit.

Wir bauen Screen 1 Schritt für Schritt nach. Die anderen beiden sind derselbe Trick mit anderen Pixeln.

Gestalten in Lopaka

Hier ist die eine Idee, die zählt: Der Screen ist voller Live-Daten (Zeit, Datum, Wetter), also tippst du keine finalen Werte ein, sondern platzierst Felder und verdrahtest die sich ändernden mit Variablen. Klicke auf ein Textelement, drücke den make-variable-Button im Inspektor, und der Wert verwandelt sich in einen Platzhalter, der im exportierten Code zu einer Variablen wird, bereit, damit deine Firmware zur Laufzeit die echte Zahl einsetzt. Behandle also jeden Beispielwert unten als Stellvertreter.

1. Neues Projekt. Öffne lopaka.app, erstelle ein Projekt, wähle GxEPD2 als Bibliothek und 80 x 128 als Display-Größe.
2. Zeit. Füge oben eine große Textbeschriftung in der Org_01 GFX-Schriftart hinzu (die schweren Pixel-Ziffern; importiere sie in den Schriftart-Einstellungen). Die Zeit aktualisiert sich jede Minute, also mache diesen Wert zu einer Variablen statt zu festem Text.
3. Ortszeile. Füge eine kleinere Beschriftung unter der Zeit für Ort und Offset hinzu, ebenfalls eine Variable.
4. Datumsblock. Füge ein gefülltes Rechteck als Datumskarte hinzu, eine große Tageszahl und drei gestapelte Beschriftungen daneben: Monat, Wochentag und Jahr. Diese stammen von deiner RTC, also mache jede davon zu einer Variablen.
5. Sensorkarten. Füge eine horizontale Trennlinie hinzu und teile dann den unteren Bereich in zwei Karten, Luftfeuchtigkeit und Temperatur. Jede hat eine feste Titelbeschriftung und einen variablen Wert darunter. Eine vertikale Linie dazwischen hält die Trennung sauber.
6. Screen 2 und 3. Zwei weitere Screens. Screen 2 ist eine Mondsichel über einer umbrochenen Textzeile, und du musst den Mond nicht Punkt für Punkt zeichnen: Lopakas Icon-Bibliothek hat einen bereit zum Einfügen. Screen 3 ist dasselbe Rezept: eine Überschrift, eine Linie und ein Countdown-Wert (natürlich eine Variable).

Keine Farben zu handhaben, also dreht sich das ganze Spiel um Position, Größe, Schriftart und die Entscheidung, welche Werte Variablen sind.

Beide Schlaf-Screens sind nur ein Icon und etwas Text. Dieselben Bausteine, andere Stimmung:

Der Code

Drücke Export, wähle GxEPD2 / Adafruit_GFX, und Lopaka spuckt die Zeichenaufrufe aus, bündelt die Org_01-Schriftart und zieht jeden Wert, den du markiert hast, in seine eigene Variable, die du von deiner Firmware aus setzen kannst. Willst du das echte, vollständige Ding? Hol es dir direkt aus dem Projekt: CLOCK-SAT V1 on Lopaka.

Hier ist der echte Export, zum Lesen gekürzt. Der wiederholte Schriftart-Include ist dedupliziert und die fünfzehn identischen Batteriebalken-Rechtecke sind gekürzt, aber jeder Aufruf ist genau das, was Lopaka generiert hat:

#include "Org_01.h"

// pixel-art bitmaps
static const unsigned char PROGMEM image_POINT_DEGR__bits[] = {0xe0,0xa0,0xe0};
static const unsigned char PROGMEM image_STATUT_CHARGE_bits[] = {0x10,0x38,0x7c,0xfe,0x38,0x38,0x38,0x38,0x38};

// the values you marked as variables; your firmware sets these
const char* CHARGE___text  = "78%";
const char* Clock_2_text   = "Delhi-12:25";
const char* Date_text      = "08";
const char* Day_text       = "Saturday";
const char* Hours_text     = "20";
const char* Minutes_text   = "34";
const char* Month_text     = "MAY";
const char* Num_humid_text = "56";
const char* Num_temp_text  = "23";
const char* Year_text      = "2026";

void drawScreen_1(void) {
    display.fillScreen(GxEPD_WHITE);

    // hours : minutes, in the Org_01 pixel font
    display.setTextColor(GxEPD_BLACK);
    display.setTextSize(3);
    display.setFont(&Org_01);
    display.setCursor(3, 35);  display.print(Hours_text);
    display.setCursor(39, 35); display.print(":");
    display.setCursor(45, 35); display.print(Minutes_text);

    // location line + date card + sensor cards
    display.setTextSize(1);
    display.setCursor(17, 49); display.print(Clock_2_text);
    display.fillRect(3, 58, 29, 26, GxEPD_BLACK);
    display.setTextColor(GxEPD_WHITE);
    display.setTextSize(2);  display.setFont();
    display.setCursor(7, 78); display.print(Date_text);
    // ...month, weekday, year, Humid/Temp values, battery bar...

    display.display();
}

Füge diese Funktion in deine GxEPD2-Zeichenschleife ein, übergib ihr deine Live-Werte, und das Ding, das du in einem Browser-Tab herumgeschoben hast, erscheint auf dem Panel.

Ergebnis

Dieselben Pixel, vom Browser bis zum Messingrahmen.

Probiere es aus

Ein Projekt zu erstellen ist kostenlos und läuft direkt in deinem Browser, keine Installation, nur lopaka.app und eine leere GxEPD2-Zeichenfläche. Willst du CLOCK-SAT selbst forken? Es ist in der gallery geparkt (eine schnelle Anmeldung bringt dich hinein). Und schau dich um, während du dort bist: Lopaka hat seit dem Bau dieser kleinen Uhr eine große Icon-Bibliothek, Animationen und einen ganzen Haufen anderer Spielzeuge dazubekommen.

Credits

CLOCK-SAT V1 von Maxime Loiseau (@maxime_loiseau_labs, reel). Gestaltet in Lopaka, exportiert nach GxEPD2.