EasyLVGL

Oberflächen für LVGL zeichnen statt tippen – direkt in VS Code.

EasyLVGL ist ein grafischer Editor für mehrseitige LVGL-Oberflächen – ohne zusätzliches Programm neben VS Code: Sie gestalten Seiten, Widgets, Abläufe und Animationen im Editor und erzeugen daraus mit einem Klick fertigen C-Code für LVGL 8.3/8.4 und 9.x, der ohne Nacharbeit in Ihrem Firmware-Projekt kompiliert – ESP32 (ESP-IDF oder Arduino/PlatformIO), STM32, PIC32/MPLAB Harmony oder generisch.

• Alles in einer Datei: Ein Projekt ist eine .lvgl-Datei im JSON-Format – versionierbar und im Team zusammenführbar.
• Sofort lauffähig: generierter Code kompiliert ohne Anpassung; das Hauptprogramm braucht nur ui.h und ui_init().
• Vom Entwurf bis aufs Gerät: Generieren, Bauen und Flashen mit einem Button.
• Umsteigen leicht gemacht: Oberflächen aus anderen Quellen (*.spj, *.eez-project, LVGL-JSON) lassen sich importieren.

👉 Ausführliche Anleitung: Button ? Hilfe im Designer, das Fragezeichen in der Seitenleiste oder der Befehl „EasyLVGL: Hilfe“ öffnen das vollständige Handbuch (docs/HILFE.md in der Erweiterung).

Funktionen

Seitenleiste (Aktivitätsleiste links)

Das Symbol EasyLVGL in der linken Aktivitätsleiste öffnet die Projektübersicht: alle .lvgl-Projekte im Workspace mit Zielverzeichnis (Klick = ändern), Display, Seiten mit vollständigem Widget-Baum, User-Widgets, Variablen, Bildern und Flow-Knoten. Ein Klick öffnet im Designer direkt die passende Einstellung: Seite → Seiten-Einstellungen, Widget → ausgewählt mit Eigenschaften im Inspektor, User-Widget → Definition, Variable/Bild → hervorgehoben im unteren Panel, Display → Projekteinstellungen, Flow-Knoten → Flow-Editor. Inline-Buttons: Code generieren, Generieren & Bauen und Generieren, Bauen & Übertragen; Rechtsklick: Im Designer / als JSON öffnen, Zielverzeichnis wählen. Oben: + neues UI-Projekt, ⤓ Projekt aus einer anderen Quelle importieren, ↻ aktualisieren. Die Seitenleiste zeigt immer den aktuellen Stand des Designers – auch ungespeicherte Änderungen (Kennzeichnung „● ungespeichert“).

Zielverzeichnis

Der Ordner für den generierten C-Code ist pro Projekt frei wählbar (relativ zur .lvgl-Datei oder absolut):

• Button 📁 Ziel: …/ in der Werkzeugleiste des Editors (öffnet die Ordnerauswahl),
• Ordner-Symbol in der Editor-Titelleiste bzw. Befehl „EasyLVGL: Zielverzeichnis für generierten Code wählen“,
• ⚙ Einstellungen → Zielverzeichnis (Feld + „Wählen…“),
• VS-Code-Einstellung easylvgl.defaultOutputDir als Vorgabe für neue Projekte (leer = automatisch main/ui, src/ui, Core/Src/ui …).

Existiert der Ordner beim Generieren noch nicht, fragt der Designer nach („Hier erzeugen“ / „Anderes Verzeichnis wählen…“).

Installation

code --install-extension easylvgl-1.1.1.vsix

oder in VS Code: Erweiterungen → … → Aus VSIX installieren…. Danach VS Code neu laden; .lvgl-Dateien öffnen sich automatisch im Designer.

Schnellstart

1. Befehl „EasyLVGL: Neues UI-Projekt anlegen“ (oder Rechtsklick auf einen Ordner). Zielcontroller, Ausgabeordner und LVGL-Version werden aus dem Projekt erkannt (platformio.ini, ESP-IDF-CMakeLists.txt, .ioc, MPLAB X).
2. In der .lvgl-Datei Seiten und Widgets gestalten, unter ⚙ Einstellungen Zielverzeichnis, LVGL-Version, Controller, Display und Theme prüfen.
3. ⟨/⟩ Code generieren → Dateien landen im Zielverzeichnis.
4. Im Tab Main-Code die Snippets ins Hauptprogramm kopieren (mindestens #include "ui/ui.h" und ui_init() nach der LVGL-/Display-Initialisierung).

Erzeugte Dateien

Nicht mehr benötigte, früher generierte Dateien (z.B. nach Umbenennen einer Seite) werden automatisch entfernt. Andere Dateien im Ordner bleiben unberührt.

Hinweise

• Umlaute / Sonderzeichen: Die in LVGL eingebauten Montserrat-Fonts enthalten nur ASCII, ° und die LVGL-Symbole. Für „ä, ö, ü, ß“ einen eigenen Font mit lv_font_conv / Font-Converter erzeugen, die .c-Datei ins Projekt legen und unter Einstellungen → Eigene Fonts als name:größe eintragen. Der Generator warnt bei fehlenden Zeichen.
• PlatformIO: Vor dem Bauen prüft der Designer, ob jede [env:…] in platformio.ini LVGL als lib_deps einbindet (sonst: „lvgl.h: No such file or directory“), und trägt lvgl/lvgl@^8.4.0 bzw. @^9.2.2 auf Wunsch automatisch ein.
• Threads: ui_set_*() nur aus dem LVGL-Kontext bzw. mit gehaltenem LVGL-Lock aufrufen (ESP-IDF: lvgl_port_lock()). Externe Variablen werden automatisch alle n ms abgefragt – dafür ist kein Lock nötig.
• Lottie: LVGL 9 braucht in lv_conf.h LV_USE_LOTTIE, LV_USE_VECTOR_GRAPHIC, LV_USE_MATRIX, LV_USE_FLOAT, LV_USE_CANVAS und LV_USE_THORVG_INTERNAL (ThorVG ist C++ – ESP-IDF/PlatformIO übersetzen das automatisch). Renderpuffer = Breite × Höhe × 4 Byte RAM. LVGL 8 nutzt lv_rlottie und benötigt die externe Bibliothek rlottie. Im Editor wird ein Platzhalter angezeigt.
• LVGL 8 + 16 Bit: Bilder werden passend zu LV_COLOR_DEPTH / LV_COLOR_16_SWAP erzeugt; ein #error meldet eine abweichende Konfiguration.
• Nach dem Installieren einer neuen Version meldet sich die Erweiterung mit „Designer-Tab(s) nicht mehr verbunden – Neu öffnen?“ (Befehl: „EasyLVGL: Nicht verbundene Designer-Tabs neu öffnen“). Sonst offene Designer-Tabs selbst schließen und neu öffnen (oder „Developer: Reload Window“): VS Code startet dabei die Extension neu, bereits offene Tabs sind danach von ihr getrennt. Der Designer erkennt das und zeigt einen roten Hinweis mit „Projektstand kopieren“, damit keine Änderungen verloren gehen.
• Undo/Redo läuft über das VS-Code-Dokument (Strg+Z / Strg+Y); die .lvgl-Datei ist JSON und versionierbar.

Entwicklung

npm install
npm run compile        # TypeScript -> out/
npm run package        # VSIX erzeugen und für den Marketplace prüfen
npm run check          # nur die Marketplace-Prüfung

F5 in VS Code startet eine Extension-Development-Instanz. Tests (test/):