Plattformen
Eine Plattform ist in Lopaka die Zeichenbibliothek oder Laufzeitumgebung, für die der Code erzeugt wird. Die Wahl der Plattform bewirkt dreierlei:
- Sie beschränkt den Editor auf das Farbmodell und die Schriftarten, die die Zielbibliothek versteht.
- Sie steuert den Code-Generator – jede Plattform erzeugt ihre eigene Syntax und ihre eigenen Deklarationen.
- Sie legt fest, welche Code-Einstellungen verfügbar sind (Wrapper-Funktion, Variablendeklarationen, Exportformat für Bilder usw.).
Die Plattform wird beim Erstellen eines Projekts gewählt und lässt sich danach nicht mehr ändern: Die Projekteinstellungen zeigen sie schreibgeschützt an. Wenn du eine andere Bibliothek nutzen willst, erstelle ein neues Projekt mit dieser Plattform.
Plattform wählen
- OLED / monochromes LCD (SSD1306, SH1106, SSD1309) – U8g2 oder AdafruitGFX Mono
- Farb-TFT (ILI9341, ST7789, GC9A01) – TFT_eSPI, ArduinoGFX oder AdafruitGFX Color
- Aufwendige Touch-UI auf ESP32/STM32 – LVGL
- Flipper Zero / One – Flipper-Plattform
- Smart-Home-Gerät mit ESPHome – ESPHome
- E-Paper-Display – GxEPD2
- RP2040 / ESP32 mit MicroPython – MicroPython
- CircuitPython-Board – CircuitPython
- Nur Mockup oder Bildexport – Free Drawing
Plattformvergleich
| Plattform | Ausgabe | Farbmodell | Schriftarten | Bilder |
|---|---|---|---|---|
| U8g2 | C / C++ | Monochrom (1 Bit) | BDF (große Auswahl) | XBMP |
| TFT_eSPI / M5 / Lovyan | C++ | RGB565 | GFX | XBMP, RGB565 |
| AdafruitGFX Color | C++ | RGB565 | GFX | XBMP, RGB565 |
| AdafruitGFX Mono | C++ | Monochrom (1 Bit) | GFX | XBMP |
| ArduinoGFX | C++ | RGB565 | GFX | XBMP, RGB565 |
| LVGL | C | RGB + Alpha | Montserrat (TTF) | RGB565 |
| Flipper Zero / One | C | Monochrom (1 Bit) | 4 feste Schriftarten | XBMP |
| ESPHome | YAML + C++-Lambda | RGB | Google Fonts (TTF) | XBMP |
| MicroPython | Python | Monochrom (1 Bit) | Fest (Petme 8×8) | Roher Puffer |
| CircuitPython | Python | RGB | Terminus (BDF) | Roher Puffer |
| GxEPD2 | C++ | Indizierte Palette | GFX | XBMP |
| Free Drawing | — | RGB | Alle Schriftarten | — |
Zeichenwerkzeuge
Welche Werkzeuge in der Werkzeugleiste erscheinen, hängt von der aktiven Plattform ab. LVGL bekommt einen Widget-basierten Satz; alle anderen Plattformen teilen sich einen Satz von Zeichenprimitiven mit kleinen Unterschieden.
| Werkzeug | U8g2 | TFT_eSPI | AdaGFX | AdaMono | ArduGFX | LVGL | Flipper | ESPHome | µPy | CPy | GxEPD2 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Linie | ✅ | ✅ | ✅ | ✅ | ✅ | — | ✅ | ✅ | ✅ | ✅ | ✅ |
| Rechteck | ✅ | ✅ | ✅ | ✅ | ✅ | — | ✅ | ✅ | ✅ | ✅ | ✅ |
| Kreis | — | — | ✅ | ✅ | — | — | ✅ | ✅ | — | ✅ | ✅ |
| Ellipse | ✅ | ✅ | — | — | ✅ | — | — | — | ✅ | — | — |
| Dreieck | ✅ | ✅ | ✅ | ✅ | ✅ | — | — | ✅ | ✅ | ✅ | ✅ |
| Polygon | ✅ | ✅ | ✅ | ✅ | ✅ | — | ✅ | ✅ | ✅ | ✅ | — |
| Bogen | — | ✅ | — | — | — | — | — | — | — | — | — |
| LVGL-Bogen | — | — | — | — | — | ✅ | — | — | — | — | — |
| Text | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Malen | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Panel | — | — | — | — | — | ✅ | — | — | — | — | — |
| Button | — | — | — | — | — | ✅ | — | — | — | — | — |
| Schieberegler | — | — | — | — | — | ✅ | — | — | — | — | — |
| Schalter | — | — | — | — | — | ✅ | — | — | — | — | — |
| Checkbox | — | — | — | — | — | ✅ | — | — | — | — | — |
| Textbereich | — | — | — | — | — | ✅ | — | — | — | — | — |
Textdrehung
U8g2, Flipper Zero / One, CircuitPython und LVGL unterstützen native Textdrehung um 0°, 90°, 180° oder 270°. Wähle eine Textebene aus und nutze die Drehungs-Buttons im Inspektor.
Plattformen
U8g2
Zielt auf die monochrome Display-Bibliothek U8g2. Erzeugt C++-Code (Arduino) oder C-Code (ESP-IDF).
Eine vollständige Anleitung zu Einrichtung und Einbindung findest du in der U8g2-Anleitung.
Farbe: binär – weiß (1) oder schwarz (0). Ein invertierter Farbmodus ist verfügbar.
Schriftarten: große BDF-Schriftartenbibliothek inklusive. Schriftartnamen werden zu u8g2_font_<name>_tr kompiliert.
Bilder: XBMP-Bitmaps, deklariert als Arrays image_<Name>_bits (U8X8_PROGMEM unter Arduino) oder ausgelagert in eine herunterladbare .h-Asset-Datei.
Animationen: Integrierte monochrome Animationen werden unterstützt.
Vorlagen: Arduino (C++) und ESP-IDF (C) – jeweils mit einer progmem-Option.
Inspektor: Die Farbauswahl ist ausgeblendet – die Farbe ist immer binär (bestimmt durch Füllung und Invertierung, nicht durch ein Farbfeld). Dreiecksebenen folgen dem U8g2-Primitiv und sind immer gefüllt, daher wird für sie keine Füll-Option angezeigt.
Einschränkungen: Kein RGB. Keine eigenen Schriftgrößen – die Schriftgröße ist durch die BDF-Datei vorgegeben.
TFT_eSPI / M5 / Lovyan
Deckt TFT_eSPI, M5Stack GFX und LovyanGFX ab – alle teilen sich dieselbe API.
Eine vollständige Anleitung zu Einrichtung und Einbindung findest du in der TFT_eSPI-Anleitung.
Farbe: volles RGB, gepackt als RGB565 (0xRRGG).
Schriftarten: integrierte Adafruit-Schriftart plus GFX-Schriftarten. Eigene TrueType- (.ttf, .otf, .woff) und BDF-Schriftarten lassen sich hochladen und werden beim Import ins GFX-Format konvertiert.
Bilder: XBMP- (1 Bit) oder RGB565-Pixel-Arrays (image_<Name>_bits / image_<Name>_pixels), inline oder als herunterladbare .h-Asset-Dateien. Transparente Pixel werden mit dem Screen-Hintergrund gefüllt, außer die Option Transparenz des Bildes ist aktiv; dann hält eine 1-Bit-Maske sie durchsichtig (tft.pushMaskedImage).
Bögen: Das Werkzeug Bogen erzeugt Bögen im TFT_eSPI-Stil mit Vorder- und Hintergrundfarbe, einstellbaren Winkeln und Breite sowie optional geglätteten Kanten.
Vorlagen: Arduino (C++) oder ESP-IDF (C++). Die ESP-IDF-Vorlage verzichtet auf PROGMEM, millis() und setup() / loop() und taktet Animationen mit esp_timer_get_time().
Einschränkungen: Nur RGB565 – kein teilweises Alpha: Ein transparentes Pixel ist entweder ganz durchsichtig (mit aktiver Transparenz) oder wird gefüllt. Die y-Position von GFX-Schriftarten wird automatisch angepasst; prüfe die Ausrichtung, wenn du mehrere Schriftarten verwendest.
AdafruitGFX Color
Zielt auf die Adafruit GFX Library auf Farb-Displays.
Farbe: RGB565.
Schriftarten: integrierte Adafruit-Schriftart plus GFX-Schriftarten. Eigene TrueType- (.ttf, .otf, .woff) und BDF-Schriftarten lassen sich hochladen und werden beim Import ins GFX-Format konvertiert.
Bilder: XBMP- oder RGB565-Pixel-Arrays (image_<Name>_bits / image_<Name>_pixels), inline oder als herunterladbare .h-Asset-Dateien. Transparente Pixel werden mit dem Screen-Hintergrund gefüllt, außer die Option Transparenz des Bildes ist aktiv; dann hält eine 1-Bit-Maske sie durchsichtig (drawRGBBitmap mit Maske).
Animationen: Integrierte monochrome Animationen werden unterstützt.
Vorlagen: Arduino (C++) oder ESP-IDF (C++). Die ESP-IDF-Vorlage verzichtet auf PROGMEM, millis() und setup() / loop() und taktet Animationen mit esp_timer_get_time().
Einschränkungen: Doppelte Schriftart-Deklarationen werden nicht zusammengefasst – prüfe die Ausgabe, wenn du dieselbe Schriftart auf vielen Ebenen verwendest.
AdafruitGFX Mono
Wie AdafruitGFX Color, aber für monochrome OLED-/LCD-Displays (SSD1306, SH1106 usw.).
Farbe: binär – 1 (weiß) oder 0 (schwarz). Die Palette ist auf #000000 / #ffffff festgelegt.
Schriftarten: dieselbe GFX-Schriftartenbibliothek wie bei AdafruitGFX Color
Display leeren: ruft clearDisplay() statt fillScreen() auf.
Animationen: Integrierte monochrome Animationen werden unterstützt.
Vorlagen: Arduino (C++) oder ESP-IDF (C++). Die ESP-IDF-Vorlage verzichtet auf PROGMEM, millis() und setup() / loop() und taktet Animationen mit esp_timer_get_time().
Einschränkungen: Kein RGB. Keine Graustufen.
ArduinoGFX
Zielt auf Arduino_GFX.
Farbe: RGB565 mit High-Byte-First-Kodierung (abweichend von Adafruits Low-Byte-Reihenfolge).
Schriftarten: integrierte Adafruit-Schriftart plus GFX-Schriftarten mit eigenem Skalierungsfaktor. Eigene TrueType- (.ttf, .otf, .woff) und BDF-Schriftarten lassen sich hochladen und werden beim Import ins GFX-Format konvertiert.
Bilder: XBMP- oder RGB565-Pixel-Arrays (image_<Name>_bits / image_<Name>_pixels), inline oder als herunterladbare .h-Asset-Dateien. Transparente Pixel werden mit dem Screen-Hintergrund gefüllt, außer die Option Transparenz des Bildes ist aktiv; dann hält eine 1-Bit-Maske sie durchsichtig (draw16bitRGBBitmapWithMask).
Vorlagen: Arduino (C++) oder ESP-IDF (C++). Die ESP-IDF-Vorlage verzichtet auf PROGMEM, millis() und setup() / loop() und taktet Animationen mit esp_timer_get_time().
Einschränkungen: Dieselben RGB565-Einschränkungen wie bei TFT_eSPI. Wegen der unterschiedlichen Byte-Reihenfolge entstehen falsche Farben, wenn du Bitmaps zwischen ArduinoGFX und Adafruit kopierst.
LVGL
Zielt auf LVGL – eine funktionsreiche Embedded-GUI-Bibliothek.
Farbe: volles RGB. RGB-Bilder behalten ihre transparenten Pixel über eine Alpha-Ebene (RGB565A8), wenn die Option Transparenz des Bildes aktiv ist. Farben werden als lv_color_hex(0xRRGGBB) kodiert.
Schriftarten: Montserrat TTF in beliebigen Größen.
Widgets: Unterstützt zusätzlich zu den Grundformen Panels, Buttons, Schieberegler, Schalter, Checkboxen, Textbereiche und LVGL-Bogen-Widgets. Die Widget-Standardwerte (Radius, Rahmen, Hintergrundfarbe) entsprechen den Standardwerten von LVGL v9.
Renderer: Der Editor rendert die Zeichenfläche geglättet (Anti-Aliasing), um der Ausgabe von LVGL nahezukommen.
Bilder: RGB565-Bilddeskriptoren (lv_image_dsc_t), kompatibel mit v9, herunterladbar als <Name>.c-Asset-Datei.
Einschränkungen:
- In der Schriftartauswahl ist nur Montserrat verfügbar
- Eigene Widgets werden nicht unterstützt – jede Ebene entspricht genau einem
lv_obj_create-Aufruf - Der erzeugte Code zielt auf die C-API von LVGL (v9)
Flipper Zero / One
Zielt auf die GUI-Canvas-API von Flipper Zero und Flipper One (canvas_draw_*).
Farbe: monochrom. Standardmäßig zeichnet der Editor schwarz auf orangefarbenem Hintergrund.
Schriftarten: nur vier feste Schriftarten – FontPrimary (Helvetica 8 bold), FontSecondary (Haxrcorp 4089), FontKeyboard (ProFont 11), FontBigNumbers (ProFont 22). Keine eigenen Schriftgrößen.
Display-Voreinstellungen: Zero Horizontal (128×64), Zero Vertical (64×128), One Horizontal (256×144), One Vertical (144×256).
Bilder: XBMP-Bitmaps (image_<Name>_bits), inline oder als eigenständige, herunterladbare .h-Asset-Datei mit uint8_t-Arrays.
Animationen: Integrierte und importierte monochrome Animationen werden unterstützt. Die erzeugte Ausgabe enthält Hilfsfunktionen für die Wiedergabe und herunterladbare C-Header mit den XBM-Frames.
Einschränkungen:
- Monochrom
- Keine eigenen Schriftarten
ESPHome
Zielt auf das Lambda der ESPHome-Display-Komponente.
Eine vollständige Anleitung vom Design bis zum Flashen findest du in der ESPHome-Anleitung.
Ausgabe: YAML mit eingebetteten C++-Lambdas. Der Ace-Editor nutzt YAML-Syntaxhervorhebung.
Farbe: volles RGB, kodiert als Color(R, G, B).
Schriftarten: Google Fonts über gfonts:// und andere TTF-Schriftarten. Schriftart-Deklarationen kommen in den YAML-Schlüssel font: auf oberster Ebene.
Bilder: herunterladbare PNG-Assets (<Name>.png), auf die das YAML als images/<Name>.png verweist und die als BINARY-Bilder deklariert sind. Lege die PNG-Dateien in einen Ordner images/ neben dem YAML.
Keine abgerundeten Ecken: Die Display-API von ESPHome hat kein Primitiv für abgerundete Rechtecke.
Einschränkungen: Nur XBMP – kein Export von RGB-Bitmaps. Die Blöcke font: und image: müssen auf der obersten Ebene des YAML stehen, nicht im lambda:-String.
MicroPython
Zielt auf das MicroPython-Modul framebuf auf RP2040, ESP32 und ähnlichen Boards.
Treiber: Der erzeugte Code erwartet den Treiber PerfecXX MicroPython-SSD1306, dessen Objekt display seinen Framebuffer als display.framebuf bereitstellt und display.polygon ergänzt. Ellipsen werden mit display.framebuf.ellipse(...) gezeichnet, sodass die Vorschau im Editor pixelgenau dem Gerät entspricht. Das Standard-ssd1306.py aus micropython-lib hat kein display.framebuf und scheitert an Ellipsen, Dreiecken und Polygonen.
Ausgabe: Python. Der Ace-Editor nutzt Python-Syntaxhervorhebung.
Farbe: monochrom – 1 (weiß) oder 0 (schwarz). Die Palette ist auf Schwarz und Weiß festgelegt.
Schriftarten: eine einzige integrierte Schriftart (Petme 8×8). Die Schriftartauswahl ist nicht verfügbar.
Bilder: rohe bytearray-Puffer (gepackt mit 1 Bit, zeilenweise) oder ein herunterladbares .pbm-Asset (image_<Name>_bits.pbm), das Bilddateien einbinden beim Start lädt.
Einschränkungen:
- Monochrom
- Nur die integrierte Schriftart Petme 8×8 ist verfügbar
- Abgerundete Ecken werden nicht unterstützt
- Weniger Zeichenprimitive als auf anderen Plattformen
- Dreiecke werden nur als Umriss gezeichnet
CircuitPython
Zielt auf den CircuitPython-Stack aus displayio und vectorio.
Ausgabe: Python. Der Ace-Editor nutzt Python-Syntaxhervorhebung.
Farbe: RGB, kodiert als 24-Bit-Hexwert (0xRRGGBB).
Schriftarten: BDF-Schriftart Terminus inklusive. Die Schriftartauswahl wird in der Oberfläche nicht angezeigt – die Schriftart ist fest.
Bilder: displayio.OnDiskBitmap-Assets (image_<Name>_bits.bmp), die aus dem Dateisystem des Geräts geladen werden.
Einschränkungen:
- Die Schriftart ist fest auf Terminus BDF eingestellt
- Die Bildpixel stecken in den heruntergeladenen
.bmp-Dateien – kopiere sie neben deinen Code
GxEPD2
Zielt auf die E-Paper-Display-Bibliothek GxEPD2. Erweitert AdafruitGFX.
Farbe: indizierte Palette aus 9 benannten Konstanten – GxEPD_BLACK, GxEPD_WHITE, GxEPD_DARKGREY, GxEPD_LIGHTGREY, GxEPD_RED, GxEPD_YELLOW, GxEPD_BLUE, GxEPD_GREEN, GxEPD_ORANGE. Farben außerhalb dieser Palette werden zu GxEPD_BLACK.
Schriftarten: integrierte Adafruit-Schriftart plus GFX-Schriftarten (von der Adafruit-Plattform übernommen). Eigene TrueType- (.ttf, .otf, .woff) und BDF-Schriftarten lassen sich hochladen und werden beim Import ins GFX-Format konvertiert.
Bilder: nur XBMP, herunterladbar als .h-Asset-Datei.
Hintergrund: hellgrauer Editor-Hintergrund (#f8f8f8), der dem Weiß von E-Paper nahekommt.
Einschränkungen: Die Palette ist fest – keine beliebigen Hex-Farben. Teilaktualisierung und Aktualisierungsmodi werden im Editor nicht nachgebildet.
Free Drawing
Ein reiner Design-Modus ohne Code-Export. Praktisch für Mockups und um Designs zu teilen, ohne eine bestimmte Bibliothek anzusteuern.
Farbe: volles RGB.
Schriftarten: Alle TTF-, BDF- und GFX-Schriftarten sind verfügbar.
Code: keine Ausgabe. Der Code-Bereich bleibt leer.
Einschränkungen: Nicht für die Code-Generierung nutzbar. Kein Import.