ESP32 GUI-Builder

Zeichne die Oberfläche für ein ESP32-Display im Browser und nimm den generierten Zeichen-Code direkt in deinen Sketch mit.

Beginne mit dem Gestalten

Läuft im Browser. Kostenloses Konto, keine Installation.

Was der Builder tut

Ein ESP32-LCD-UI von Hand anzulegen bedeutet, Koordinaten zu raten, neu zu kompilieren, auf das Panel zu kneifen und eine Zahl um zwei Pixel anzupassen. Lopaka ersetzt diese Schleife durch eine Zeichenfläche in der Größe deines Displays. Du platzierst Text, Rechtecke, Linien, Kreise und importierte Bilder dort, wo du sie haben willst, und der generierte Code aktualisiert sich, während du arbeitest.

Die Vorschau ist ein simulierter Screen, keine Annäherung auf einem Desktop-Monitor: Eine 1-Bit-Schriftart auf einem 128x64-OLED zeigt die Pixel, die sie tatsächlich zum Leuchten bringen wird, und eine RGB565-Farbe auf einem 320x240-TFT ist der Wert, den dein Board erhält. Nichts wird aus dem Browser geflasht. Lopaka produziert Quellcode, und der Sketch bleibt deiner.

Displays und Bibliotheken

Lopaka zielt auf die Zeichen-Bibliothek, nicht auf das Board, also ist jedes ESP32-Modul, das eine dieser Bibliotheken betreibt, abgedeckt. Wähle die Zeile, die zu dem Panel passt, das du verdrahtet hast.

Display	Typische Controller	Ziel-Bibliothek
Monochromes OLED und LCD	SSD1306, SH1106, SSD1309	U8g2 oder AdafruitGFX Mono
Farb-TFT	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX oder AdafruitGFX Color
E-Paper	Panels, die über GxEPD2 angesteuert werden	GxEPD2
Jedes Display, das in einen Smart-Home-Knoten verdrahtet ist	Was auch immer die ESPHome-Display-Komponente ansteuert	ESPHome
Jedes Display auf einem MicroPython- oder CircuitPython-Board	framebuf- und displayio-Ziele	MicroPython oder CircuitPython

Flipper Zero und LVGL werden ebenfalls unterstützt, und das Größen-Dropdown reicht von 32x8 bis 480x320 mit einer benutzerdefinierten Option für ein Panel, das nicht aufgeführt ist. Wenn du die Bibliothek bei einem bestehenden Design wechselst, bleibt das Layout erhalten und die Farben werden auf das neue Modell abgebildet.

Einen ESP32-Screen gestalten

1. Öffne den Editor, wähle die Ziel-Bibliothek und stelle die Display-Größe ein, die dein Panel meldet.
2. Zeichne den Screen: Text, Rechtecke, Linien, Kreise und importierte Bilder auf einer Zeichenfläche in der Größe des echten Displays.
3. Verschiebe Ebenen Pixel für Pixel und prüfe die Vorschau, die so rendert, wie das Panel es tun wird.
4. Kopiere die generierte Zeichenfunktion in deinen Sketch und flashe sie.

Wie die Ausgabe aussieht

Ein Sensor-Screen auf einem 240x320-TFT, exportiert für TFT_eSPI. Ebenen-Namen werden zu den Kommentaren, sodass die generierte Funktion wie das Design liest.

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);

}

Fragen

Was produziert der ESP32 GUI-Builder eigentlich?

Eine Zeichenfunktion in der Syntax der Bibliothek, die du ausgewählt hast, plus die Deklarationen, die sie braucht: Bitmap-Arrays, Schriftart-Includes und alle Variablen, die du markiert hast. Du fügst sie in deinen Sketch ein und rufst sie auf. Lopaka flasht das Board nie und spricht nicht seriell mit ihm.

In welche Display-Bibliotheken kann ich exportieren?

Lopaka generiert Quellcode für U8g2, TFT_eSPI, AdafruitGFX, ArduinoGFX, ESPHome, GxEPD2, Flipper Zero, MicroPython, CircuitPython, LVGL.

Funktioniert es für ein monochromes OLED genauso wie für ein Farb-TFT?

Ja. Wähle U8g2 oder AdafruitGFX Mono für ein SSD1306- oder SH1106-OLED, dann wird die Zeichenfläche 1-Bit; wähle TFT_eSPI, ArduinoGFX oder AdafruitGFX Color für ein ILI9341- oder ST7789-Panel, dann bekommst du RGB565. Wenn du die Plattform bei einem bestehenden Design wechselst, bleibt die Ebenen-Geometrie erhalten und die Farben werden neu abgebildet.

Kann ich die Auflösung meines eigenen Panels einstellen?

Das Größen-Dropdown deckt die üblichen Panels von 32x8 bis 480x320 ab, und alles, was nicht auf der Liste steht, kann als benutzerdefinierte Breite und Höhe eingegeben werden.

Was ist mit Schriftarten?

Jede Plattform bietet die Schriftarten, die ihre Bibliothek versteht: die BDF-Bibliothek für U8g2, Adafruit- und GFX-Schriftarten für TFT_eSPI, ArduinoGFX und Adafruit GFX. TrueType- und BDF-Dateien, die du hochlädst, werden in das Format konvertiert, das das Ziel braucht.

Ist es kostenlos?

Ja. Einen Screen zu gestalten und Code für jede unterstützte Bibliothek zu generieren, ist Teil des kostenlosen Basic-Tarifs, zusammen mit den Community-Schriftart- und Icon-Bibliotheken.

Baue deine ESP32-Oberfläche

Erstelle ein kostenloses Konto, dann öffnet sich der Editor auf einem leeren Screen in der Größe deines Displays.

Beginne mit dem Gestalten