CLOCK-SAT V1: projektowanie interfejsu zegara biurkowego e-ink w Lopaka

Urządzenie

CLOCK-SAT V1 to zegar biurkowy autorstwa Maxime'a Loiseau, choć „zegar biurkowy” naprawdę go nie docenia. 1,02-calowy moduł e-paper unosi się wewnątrz smukłej mosiężnej ramki z małymi skrzydłami ogniw słonecznych, więc całość czyta się jak mały satelita, który zadriftował na twoje biurko. Podaje godzinę, datę oraz wilgotność i temperaturę w pokoju, a potem chowa się w ekran „uśpienia”, gdy zgasną światła.

Dlaczego fajnie go rozebrać na części: wyświetlacz to w całości ręcznie ustawiana grafika pikselowa (każda cyfra, etykieta i ikona), a cały interfejs został zbudowany w Lopaka.

Ekran

To 1,02-calowy panel e-paper: 80x128 pikseli, po jednym bicie, czysta czerń i biel, napędzany przez GxEPD2. E-ink gra według dwóch zasad. Nie ma skali szarości ani przejść, za którymi można by się schować, więc twój układ musi mocno wybrzmieć w czerni i bieli. Ale trzyma obraz przy zerowym poborze mocy i na tym polega cała sztuczka z ekranem nocnym: zegar przestaje się odświeżać, panel dalej pokazuje ostatnią klatkę, a bateria ledwie to zauważa.

CLOCK-SAT ma trzy ekrany:

1. Clock. Duża godzina, linia lokalizacji, blok daty oraz karty wilgotności i temperatury.
2. Sleeping. Ikona księżyca z tekstem „Sleeping until the light come back...”
3. Sleep countdown. „Sleep between two ray of light...” z pozostałym czasem.

Odbudujemy ekran 1 krok po kroku. Pozostałe dwa to ta sama sztuczka z innymi pikselami.

Projektowanie w Lopaka

Oto jedna idea, która ma znaczenie: ekran jest pełen żywych danych (godzina, data, pogoda), więc nie wpisujesz finalnych wartości, tylko umieszczasz pola i podłączasz te zmieniające się do zmiennych. Kliknij element tekstowy, naciśnij przycisk make-variable w inspektorze, a wartość zmieni się w symbol zastępczy, który w wyeksportowanym kodzie stanie się zmienną, gotową, by twój firmware wrzucił prawdziwą liczbę w czasie działania. Traktuj więc każdą przykładową wartość poniżej jako podstawienie.

1. Nowy projekt. Otwórz lopaka.app, utwórz projekt, wybierz GxEPD2 jako bibliotekę i 80 x 128 jako rozmiar wyświetlacza.
2. Godzina. Dodaj dużą etykietę tekstową u góry w czcionce GFX Org_01 (ciężkie pikselowe cyfry; zaimportuj ją w ustawieniach czcionek). Godzina aktualizuje się co minutę, więc zrób z tej wartości zmienną zamiast stałego tekstu.
3. Linia lokalizacji. Dodaj mniejszą etykietę pod godziną dla lokalizacji i przesunięcia, również zmienną.
4. Blok daty. Dodaj wypełniony prostokąt jako kartę daty, dużą liczbę dnia i trzy ułożone etykiety obok niego: miesiąc, dzień tygodnia i rok. Pochodzą z twojego RTC, więc z każdej zrób zmienną.
5. Karty czujników. Dodaj poziomą linię podziału, a potem podziel dół na dwie karty: wilgotność i temperaturę. Każda ma stałą etykietę tytułu i zmienną wartość pod spodem. Pionowa linia między nimi utrzymuje podział w czystości.
6. Ekrany 2 i 3. Dwa kolejne ekrany. Ekran 2 to półksiężyc nad zawiniętą linią tekstu i nie musisz rysować księżyca kropka po kropce: biblioteka ikon Lopaka ma gotowy do wrzucenia. Ekran 3 to ten sam przepis: nagłówek, linia i wartość odliczania (naturalnie zmienna).

Nie ma kolorów do ujarzmienia, więc cała gra to pozycja, rozmiar, czcionka i decydowanie, które wartości są zmiennymi.

Oba ekrany uśpienia to po prostu ikona i trochę tekstu. Te same klocki, inny nastrój:

Kod

Naciśnij Export, wybierz GxEPD2 / Adafruit_GFX, a Lopaka wypluje wywołania rysowania, dołączy czcionkę Org_01 i wyciągnie każdą oznaczoną wartość do osobnej zmiennej, którą możesz ustawić ze swojego firmware. Chcesz prawdziwą, pełną rzecz? Weź ją prosto z projektu: CLOCK-SAT V1 na Lopaka.

Oto prawdziwy eksport, przycięty do czytania. Powtarzający się include czcionki jest zdeduplikowany, a piętnaście identycznych prostokątów paska baterii jest wyciętych, ale każde wywołanie jest dokładnie tym, co wygenerowała Lopaka:

#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();
}

Wrzuć tę funkcję do pętli rysowania GxEPD2, podaj jej żywe wartości, a rzecz, którą przesuwałeś w karcie przeglądarki, pojawi się na panelu.

Wynik

Te same piksele, od przeglądarki do mosiężnej ramki.

Wypróbuj

Tworzenie projektu jest bezpłatne i działa prosto w przeglądarce, bez instalacji, po prostu lopaka.app i pusty obszar rysowania GxEPD2. Chcesz skopiować sam CLOCK-SAT? Jest zaparkowany w galerii (szybka rejestracja cię wpuszcza). I rozejrzyj się, gdy tam będziesz: Lopaka urosła o dużą bibliotekę ikon, animacje i całą masę innych zabawek, odkąd ten mały zegar został zbudowany.

Autorzy

CLOCK-SAT V1 autorstwa Maxime'a Loiseau (@maxime_loiseau_labs, reel). Zaprojektowany w Lopaka, wyeksportowany do GxEPD2.