Benutzerdefinierter TFT-Display-UI-Builder

Gestalte den Screen, den dein ESP32 zeigen sollte, und nimm dann den Treiber-Code mit.

Gestalte einen Screen

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

Was du bekommst

Lopaka ist ein visueller Editor für Embedded-Display-UIs. Du platzierst Rechtecke, Bögen, Text und importierte Grafiken auf einer Zeichenfläche in der Größe deines Panels, und das Code-Panel schreibt die passenden Bibliotheksaufrufe, während du arbeitest. Es gibt keine Runtime zum Verlinken und kein Framework zu übernehmen: Die Ausgabe ist eine einfache Zeichenfunktion, die du in den Sketch einfügst, den du bereits hast.

Für Farb-Panels sind die Ziele TFT_eSPI, M5, Lovyan, ArduinoGFX und AdafruitGFX Color. Monochrome OLEDs, E-Paper, Flipper Zero, ESPHome, MicroPython, CircuitPython und LVGL haben ihre eigenen Plattformen, falls ein Projekt sie braucht.

• Vollständige RGB-Farbauswahl, gepackt in die RGB565-Werte, die die Bibliothek erwartet
• Integrierte Adafruit- und GFX-Schriftarten, plus TrueType- und BDF-Uploads, die in GFX konvertiert werden
• Ein Bogen-Werkzeug, das drawSmoothArc und drawArc ausgibt, für Messinstrumente und Zifferblätter
• Bilder als 1-Bit-Bitmaps für drawBitmap oder RGB565-Arrays für pushImage
• Animations-Frames mit generierten Wiedergabe-Helfern
• Ebenen-Eigenschaften, die als Variablen exportiert werden, sodass sich ein Messwert zur Laufzeit ändern kann

Dein Controller, deine Bibliothek

Finde den Controller, der auf deinem Modul aufgedruckt ist, wähle dann die Plattform in derselben Zeile und stelle die Zeichenfläche auf deine Auflösung ein.

Display-Controller	Typische Zeichenfläche	Lopaka-Plattform
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
Panels, die von Arduino_GFX angesteuert werden	320×240	ArduinoGFX
Panels, die von Adafruit GFX angesteuert werden	320×240	AdafruitGFX Color
SSD1306, SH1106 (monochromes OLED)	128×64	U8g2

Lopaka zielt auf die Zeichen-Bibliothek, nicht auf den Controller. Wähle die Bibliothek, gegen die dein Sketch bereits kompiliert, und stelle die Zeichenfläche auf die Auflösung ein, die dein Code nach setRotation() nutzt. Treiber-Defines, Pins, SPI-Frequenz und User_Setup.h bleiben in deinem Projekt.

Die TFT_eSPI-Anleitung führt durch diese Konfiguration, bevor das erste Pixel gezeichnet wird.

Wenn ein importiertes Bild die falschen Farben hat, nutze den RGB565-Test für Farbe und Byte-Reihenfolge, bevor du dein Panel-Setup änderst.

Vom Design zur Firmware

1. Bringe zuerst die Display-Bibliothek mit einem Standardbeispiel dazu, mit deinem Panel zu sprechen.
2. Erstelle ein Projekt auf der TFT_eSPI, M5, Lovyan-Plattform und stelle die Zeichenfläche auf deine Auflösung ein.
3. Zeichne den Screen: Rechtecke, Bögen, Text und importierte Bilder, in Ebenen arrangiert.
4. Benenne die Ebenen, weil Namen zu Funktionsnamen, Kommentaren und Bitmap-Array-Namen werden.
5. Kopiere die generierte Zeichenfunktion in deinen Sketch und rufe sie nach tft.init() auf.

Wie die Ausgabe aussieht

Ein 240×135-Screen namens Main, mit einem Rahmen, einer Beschriftung, einem großen Messwert und einem Balken, exportiert für 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);

}

Jede Zeile beginnt mit tft., also nenne dein Display-Objekt tft oder aliasiere es einmal auf M5Stack mit M5GFX& tft = M5.Display;.

Fragen

Mit welchen Display-Controllern funktioniert das?

Mit jedem Panel, das deine Bibliothek bereits ansteuert. Lopaka generiert Aufrufe gegen die Bibliotheks-API, nicht gegen einen Controller. Wenn also TFT_eSPI, M5GFX oder LovyanGFX dein ST7789-, ILI9341-, ST7735-, GC9A01- oder ILI9488-Modul betreibt, läuft der generierte Code auch darauf. Beweise zuerst mit einem Standard-Bibliotheksbeispiel, dass das Panel funktioniert.

Konfiguriert Lopaka TFT_eSPI für mich?

Nein. Treiberauswahl, Pins, SPI-Frequenz und User_Setup.h sind deine Sache. Lopaka zeichnet das Bild und gibt Zeichenaufrufe aus, die ein funktionierendes Display-Objekt namens tft voraussetzen.

Was genau bekomme ich zurück?

Eine Zeichenfunktion für den Screen, den du gestaltet hast, benannt nach dem Screen, plus die Bitmap-Arrays, Schriftart-Includes und Animations-Helfer, die sie braucht. Du behältst dein eigenes setup() und loop() und rufst die Funktion daraus auf.

Kann ich meine eigenen Schriftarten und Bilder nutzen?

Ja. TrueType- und BDF-Schriftarten werden beim Hochladen in das GFX-Format konvertiert, und importierte Grafiken werden je nach Farbmodus der Ebene entweder zu einer 1-Bit-Bitmap oder zu einem RGB565-Array. Schriftart-Header lädst du aus den Code-Einstellungen herunter und legst sie neben deinen Sketch.

Können sich Werte zur Laufzeit ändern?

Ja. Markiere eine Ebenen-Eigenschaft als Variable, dann deklariert Lopaka sie, statt das Literal fest zu verdrahten, sodass eine Temperatur oder ein Batterieprozentsatz eine Variable ist, die deine Firmware zuweist und die der Zeichenaufruf liest.

Ist es kostenlos?

Ja. Einen Screen zu gestalten und den generierten Code für jede unterstützte Bibliothek zu kopieren, ist Teil des kostenlosen Basic-Tarifs. Plus fügt höhere Limits, benutzerdefinierten Schriftart-Import, die vollständigen Icon- und Animations-Bibliotheken sowie Datei-Export hinzu, aber nichts auf dieser Seite braucht es.

Baue deinen Screen

Erstelle ein kostenloses Konto, dann öffnet sich der Editor auf einer leeren Zeichenfläche in der Größe deines Displays.

Gestalte einen Screen