ESP32 GUI Builder

Narysuj interfejs dla wyświetlacza ESP32 w przeglądarce i zabierz wygenerowany kod rysowania prosto do szkicu.

Zacznij projektować

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

Co robi kreator

Układanie interfejsu LCD ESP32 ręcznie oznacza zgadywanie współrzędnych, rekompilację, mrużenie oczu na panel i poprawianie liczby o dwa piksele. Lopaka zastępuje tę pętlę obszarem rysowania o rozmiarze twojego wyświetlacza. Umieszczasz tekst, prostokąty, linie, koła i zaimportowane obrazy tam, gdzie chcesz, a wygenerowany kod aktualizuje się podczas pracy.

Podgląd to symulowany ekran, a nie przybliżenie na monitorze biurkowym: czcionka 1-bitowa na OLED 128x64 pokazuje piksele, które naprawdę zaświeci, a kolor RGB565 na TFT 320x240 to wartość, którą otrzyma twoja płytka. Nic nie jest wgrywane z przeglądarki. Lopaka produkuje kod źródłowy, a szkic pozostaje twój.

Wyświetlacze i biblioteki

Lopaka celuje w bibliotekę rysowania, a nie w płytkę, więc każdy moduł ESP32, który uruchamia jedną z tych bibliotek, jest objęty. Wybierz wiersz, który pasuje do panelu, który podłączyłeś.

Wyświetlacz	Typowe kontrolery	Biblioteka docelowa
Monochromatyczny OLED i LCD	SSD1306, SH1106, SSD1309	U8g2 lub AdafruitGFX Mono
Kolorowy TFT	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX lub AdafruitGFX Color
E-paper	Panele napędzane przez GxEPD2	GxEPD2
Dowolny wyświetlacz wpięty w węzeł smart home	Cokolwiek napędza komponent wyświetlacza ESPHome	ESPHome
Dowolny wyświetlacz na płytce MicroPython lub CircuitPython	cele framebuf i displayio	MicroPython lub CircuitPython

Flipper Zero i LVGL też są obsługiwane, a lista rozmiarów działa od 32x8 do 480x320 z opcją własną dla panelu, którego nie ma na liście. Przełączenie biblioteki w istniejącym projekcie zachowuje układ i przemapowuje kolory do nowego modelu.

Projektowanie ekranu ESP32

1. Otwórz edytor, wybierz bibliotekę docelową i ustaw rozmiar wyświetlacza, który raportuje twój panel.
2. Narysuj ekran: tekst, prostokąty, linie, koła i zaimportowane obrazy na obszarze rysowania o rozmiarze prawdziwego wyświetlacza.
3. Przesuwaj warstwy piksel po pikselu i sprawdzaj podgląd, który renderuje tak, jak zrobi to panel.
4. Skopiuj wygenerowaną funkcję rysowania do szkicu i wgraj ją.

Jak wygląda wyjście

Ekran czujnika na TFT 240x320, wyeksportowany dla TFT_eSPI. Nazwy warstw stają się komentarzami, więc wygenerowana funkcja czyta się jak projekt.

void draw(void) {
    tft.fillScreen(0x0);
    // header
    tft.fillRect(0, 0, 240, 28, 0x1B7D);
    // room
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("LIVING ROOM", 8, 20);
    // temperature
    tft.setTextSize(4);
    tft.drawString("21.4", 8, 84);
    // humidity
    tft.setTextColor(0x8CB3);
    tft.setTextSize(1);
    tft.drawString("HUMIDITY 48%", 8, 116);
    // divider
    tft.drawLine(8, 130, 232, 130, 0x8CB3);
    // status
    tft.drawRoundRect(8, 144, 224, 40, 4, 0x3DCA);

}

Pytania

Co właściwie produkuje kreator GUI ESP32?

Funkcję rysowania w składni wybranej biblioteki oraz deklaracje, których potrzebuje: tablice bitmap, dołączenia czcionek i wszystkie oznaczone zmienne. Wklejasz ją do szkicu i ją wywołujesz. Lopaka nigdy nie wgrywa na płytkę ani nie rozmawia z nią przez port szeregowy.

Do których bibliotek wyświetlaczy mogę eksportować?

Lopaka generuje kod źródłowy dla U8g2, TFT_eSPI, AdafruitGFX, ArduinoGFX, ESPHome, GxEPD2, Flipper Zero, MicroPython, CircuitPython, LVGL.

Czy działa zarówno dla monochromatycznego OLED, jak i kolorowego TFT?

Tak. Wybierz U8g2 lub AdafruitGFX Mono dla OLED SSD1306 lub SH1106, a obszar rysowania stanie się 1-bitowy; wybierz TFT_eSPI, ArduinoGFX lub AdafruitGFX Color dla panelu ILI9341 lub ST7789, a dostaniesz RGB565. Przełączenie platformy w istniejącym projekcie zachowuje geometrię warstw i przemapowuje kolory.

Czy mogę ustawić rozdzielczość własnego panelu?

Lista rozmiarów obejmuje popularne panele od 32x8 do 480x320, a wszystko, czego nie ma na liście, można wpisać jako własną szerokość i wysokość.

A co z czcionkami?

Każda platforma oferuje czcionki, które rozumie jej biblioteka: bibliotekę BDF dla U8g2, czcionki Adafruit i GFX dla TFT_eSPI, ArduinoGFX i Adafruit GFX. Wgrane pliki TrueType i BDF są konwertowane do formatu, którego potrzebuje cel.

Czy to jest bezpłatne?

Tak. Projektowanie ekranu i generowanie kodu dla każdej obsługiwanej biblioteki to część bezpłatnego planu Basic, wraz ze społecznościowymi bibliotekami czcionek i ikon.

Zbuduj swój interfejs ESP32

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

Zacznij projektować