Custom TFT Display UI Builder

Zaprojektuj ekran, który twoje ESP32 powinno pokazywać, a potem zabierz ze sobą kod sterownika.

Zaprojektuj ekran

Działa w przeglądarce. Bezpłatne konto, bez instalacji.

Co dostajesz

Lopaka to wizualny edytor interfejsów wyświetlaczy embedded. Umieszczasz prostokąty, łuki, tekst i zaimportowaną grafikę na obszarze rysowania o rozmiarze twojego panelu, a panel kodu pisze pasujące wywołania biblioteki podczas pracy. Nie ma środowiska wykonawczego do podlinkowania ani frameworka do przyjęcia: wyjście to zwykła funkcja rysowania, którą wklejasz do szkicu, który już masz.

Dla paneli kolorowych celami są TFT_eSPI, M5, Lovyan, ArduinoGFX i AdafruitGFX Color. Monochromatyczne OLED, e-paper, Flipper Zero, ESPHome, MicroPython, CircuitPython i LVGL mają własne platformy, jeśli projekt ich potrzebuje.

• Pełne wybieranie kolorów RGB, pakowane do wartości RGB565, których oczekuje biblioteka
• Wbudowane czcionki Adafruit i GFX oraz wgrane TrueType i BDF konwertowane do GFX
• Narzędzie łuku, które emituje drawSmoothArc i drawArc, do mierników i tarcz
• Obrazy jako bitmapy 1-bitowe dla drawBitmap lub tablice RGB565 dla pushImage
• Klatki animacji z wygenerowanymi pomocnikami odtwarzania
• Właściwości warstw eksportowane jako zmienne, więc odczyt może zmieniać się w czasie działania

Twój kontroler, twoja biblioteka

Znajdź kontroler wydrukowany na module, a potem wybierz platformę w tym samym wierszu i ustaw obszar rysowania na swoją rozdzielczość.

Kontroler wyświetlacza	Typowy obszar rysowania	Platforma Lopaka
ST7789	240×240	TFT_eSPI, M5, Lovyan
ILI9341	240×320	TFT_eSPI, M5, Lovyan
ST7735	128×160	TFT_eSPI, M5, Lovyan
GC9A01	240×240	TFT_eSPI, M5, Lovyan
ILI9488	480×320	TFT_eSPI, M5, Lovyan
Panele napędzane przez Arduino_GFX	320×240	ArduinoGFX
Panele napędzane przez Adafruit GFX	320×240	AdafruitGFX Color
SSD1306, SH1106 (monochromatyczny OLED)	128×64	U8g2

Lopaka celuje w bibliotekę rysowania, a nie w kontroler. Wybierz bibliotekę, przeciwko której twój szkic już się kompiluje, i ustaw obszar rysowania na rozdzielczość, której twój kod używa po setRotation(). Definicje sterownika, piny, częstotliwość SPI i User_Setup.h zostają w twoim projekcie.

Przewodnik TFT_eSPI przeprowadza przez tę konfigurację, zanim zostanie narysowany pierwszy piksel.

Jeśli zaimportowany obraz ma złe kolory, użyj testu kolorów RGB565 i kolejności bajtów, zanim zmienisz konfigurację panelu.

Od projektu do firmware

1. Najpierw spraw, żeby biblioteka wyświetlacza rozmawiała z panelem, na przykładowym kodzie.
2. Utwórz projekt na platformie TFT_eSPI, M5, Lovyan i ustaw obszar rysowania na swoją rozdzielczość.
3. Narysuj ekran: prostokąty, łuki, tekst i zaimportowane obrazy, ułożone w warstwy.
4. Nazwij warstwy, bo nazwy stają się nazwami funkcji, komentarzami i nazwami tablic bitmap.
5. Skopiuj wygenerowaną funkcję rysowania do szkicu i wywołaj ją po tft.init().

Jak wygląda wyjście

Ekran 240×135 o nazwie Main, z obramowaniem, etykietą, dużym odczytem i paskiem, wyeksportowany dla TFT_eSPI.

void drawMain(void) {
    tft.fillScreen(0x0);
    // Panel
    tft.drawRect(0, 0, 240, 135, 0xFFFF);
    // Title
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("CPU LOAD", 10, 12);
    // Reading
    tft.setTextColor(0x7E0);
    tft.setTextSize(3);
    tft.drawString("42%", 10, 40);
    // Bar
    tft.fillRect(10, 100, 101, 14, 0x7E0);

}

Każda linia zaczyna się od tft., więc nazwij obiekt wyświetlacza tft lub aliasuj go raz na M5Stack przez M5GFX& tft = M5.Display;.

Pytania

Z którymi kontrolerami wyświetlaczy to działa?

Z każdym panelem, który twoja biblioteka już napędza. Lopaka generuje wywołania przeciwko API biblioteki, a nie przeciwko kontrolerowi, więc jeśli TFT_eSPI, M5GFX lub LovyanGFX uruchamia twój moduł ST7789, ILI9341, ST7735, GC9A01 lub ILI9488, wygenerowany kod też na nim zadziała. Najpierw udowodnij, że panel działa na przykładowym kodzie biblioteki.

Czy Lopaka konfiguruje za mnie TFT_eSPI?

Nie. Wybór sterownika, piny, częstotliwość SPI i User_Setup.h są twoje. Lopaka rysuje obraz i emituje wywołania rysowania, które zakładają działający obiekt wyświetlacza o nazwie tft.

Co dokładnie dostaję z powrotem?

Funkcję rysowania dla ekranu, który zaprojektowałeś, nazwaną od ekranu, oraz tablice bitmap, dołączenia czcionek i pomocników animacji, których potrzebuje. Zachowujesz własne setup() i loop() i wywołujesz z nich funkcję.

Czy mogę używać własnych czcionek i obrazów?

Tak. Czcionki TrueType i BDF są konwertowane do formatu GFX przy wgrywaniu, a zaimportowana grafika staje się bitmapą 1-bitową lub tablicą RGB565 w zależności od trybu koloru warstwy. Nagłówki czcionek pobierają się z ustawień kodu i siedzą obok szkicu.

Czy wartości mogą zmieniać się w czasie działania?

Tak. Oznacz właściwość warstwy jako zmienną, a Lopaka zadeklaruje ją zamiast na sztywno wpisywać literał, więc temperatura lub procent baterii to zmienna, którą twój firmware przypisuje, a wywołanie rysowania odczytuje.

Czy to jest bezpłatne?

Tak. Projektowanie ekranu i kopiowanie wygenerowanego kodu dla każdej obsługiwanej biblioteki to część bezpłatnego planu Basic. Plus dodaje wyższe limity, import własnych czcionek, pełne biblioteki ikon i animacji oraz eksport plików, ale nic na tej stronie tego nie wymaga.

Zbuduj swój ekran

Utwórz bezpłatne konto, a edytor otworzy się na pustym obszarze rysowania w rozmiarze twojego wyświetlacza.

Zaprojektuj ekran