Der ultimative Drag-and-Drop-LVGL-Editor & GUI-Builder.
Wie PicoPixel funktioniert
Mit PicoPixel gestaltest du LVGL-Oberflächen visuell per Drag-and-Drop, statt ihr Layout von Hand zu programmieren. Von der leeren Arbeitsfläche zur produktionsreifen eingebetteten UI in Minuten — visuell entwerfen, mit einem Live-LVGL-Simulator testen und sauberen C-Code exportieren. Keine Installation erforderlich.
Kostenlos starten!Vom Design zum Gerät in 6 Schritten
Entwirf deine Oberfläche
Öffne PicoPixel in deinem Browser — keine Downloads, keine Installation. Ziehe LVGL-Widgets aus der Palette auf eine pixelgenaue Arbeitsfläche und gestalte sie visuell.
- •Buttons, Labels, Schieberegler, Schalter, Bögen, Diagramme, Dropdowns, Roller, Kontrollkästchen, Textbereiche, Tab-Ansichten, Container und Bilder
- •Stelle die Zielauflösung des Displays passend zu deiner Hardware ein
- •Konfiguriere Farben, Rahmen, Abstände, Schriftarten, Deckkraft, Verläufe und Schatten
- •Verwende Ausrichtungs- und Verteilungswerkzeuge für präzise Widget-Positionierung
- •Organisiere Bildschirme und Ebenen für mehrseitige Oberflächen
Interaktionen verbinden
Verwende den visuellen Event-Editor, um Widget-Aktionen zu verbinden, ohne eine einzige Zeile C-Code zu schreiben. PicoPixel generiert die LVGL-Event-Callbacks automatisch.
- •Tastendruck → zu einem anderen Bildschirm navigieren
- •Schieberegler-Wertänderung → ein Label aktualisieren
- •Kontrollkästchen umschalten → ein Panel anzeigen oder verbergen
- •Dropdown-Auswahl → einen Stil ändern oder eine Aktion auslösen
- •Ziehe Aktionen auf Widgets — kein Callback-Code erforderlich
Vorschau im Live-Simulator
PicoPixel kompiliert LVGL zu WebAssembly und führt es direkt in deinem Browser aus. Die Vorschau ist die echte LVGL-Rendering-Engine — kein Mockup.
- •Sieh genau, wie deine UI auf Hardware gerendert wird
- •Teste Touch-Interaktionen, Scrollen und Animationen
- •Interaktions-Overlays zeigen, was angetippt und gescrollt werden kann
- •Teile einen Simulator-Link mit deinem Team oder Kunden — keine Entwicklungsumgebung nötig
Produktionsreifen Code exportieren
Lade dein Projekt als saubere LVGL-C-Quelldateien herunter. Die Ausgabe verwendet Standard-LVGL-API-Aufrufe ohne proprietäre Abhängigkeiten — füge sie in jedes LVGL-Projekt ein.
- •Widget-Definitionen und Layout-Code
- •Stil-Deklarationen
- •Event-Handler-Bindungen
- •Schriftarten- und Bild-Asset-Referenzen
- •Standard LVGL 8.x API — keine PicoPixel-Laufzeitbibliothek
Integrieren und flashen
Füge die exportierten Dateien zu deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu. Kompilieren, flashen, und die UI auf deinem Gerät stimmt pixelgenau mit dem Simulator überein.
- •Funktioniert mit ESP32, STM32, Arduino, Raspberry Pi Pico und jeder LVGL-kompatiblen Plattform
- •Binde den UI-Header ein und rufe ui_init() nach der Konfiguration deines Display-Treibers auf
- •Für die meisten Setups sind keine Build-System-Änderungen nötig
- •Oder übergib das ZIP einem KI-Programmierassistenten und lass ihn die Integration übernehmen
Zusammenarbeiten und iterieren
Lade Teammitglieder zu deinem Projekt ein. Alle bearbeiten dieselbe Arbeitsfläche in Echtzeit. Verwende die integrierte Versionskontrolle, um Änderungen zu verfolgen und bei Bedarf zurückzusetzen.
- •Gemeinsames Bearbeiten in Echtzeit — live sichtbare Mauszeiger, Feedback, Annotationen
- •Integrierte Versionskontrolle mit detailliertem Änderungsverlauf
- •Rollback zu jedem früheren Zustand und Versionen vergleichen
- •Simulator-Links zur gemeinsamen Prüfung teilen
Warum Drag-and-Drop für LVGL?
Das Erstellen eingebetteter UIs mit LVGL bedeutet traditionell, C-Code Zeile für Zeile zu schreiben — Widgets mit Pixelkoordinaten positionieren, Stile über Funktionsaufrufe anwenden und nach jeder Änderung neu kompilieren. Es funktioniert, aber die Feedback-Schleife ist langsam und der Code ist schwer zu visualisieren.
PicoPixels Drag-and-Drop-Ansatz ersetzt diesen Zyklus durch einen visuellen Editor, in dem du das Ergebnis sofort siehst. Ziehe einen Button auf die Arbeitsfläche, ändere seine Größe und Farbe und füge ein Label hinzu — und der Live-LVGL-Simulator zeigt genau, wie es auf deiner Zielhardware aussehen wird. Wenn du fertig bist, exportiere sauberen C-Code, der auf ESP32, STM32, Arduino und jeder LVGL-kompatiblen Plattform kompiliert.
Der visuelle Workflow ist schneller für Prototyping, einfacher für Teams (Designer und Ingenieure können in Echtzeit zusammenarbeiten) und liefert denselben produktionsreifen LVGL-Code, den du auch von Hand schreiben würdest. Entdecke alle PicoPixel-Funktionen oder lies den detaillierten Vergleich mit anderen LVGL-Editoren.
Häufig gestellte Fragen
Muss ich etwas installieren, um PicoPixel zu nutzen?
Nein. PicoPixel läuft vollständig in deinem Browser. Öffne die Editor-URL, melde dich an und beginne mit dem Design. Es gibt keine Desktop-App, kein Plugin und kein SDK zu installieren.
Welche LVGL-Widgets kann ich im Editor verwenden?
PicoPixel unterstützt die grundlegenden LVGL-Widgets einschließlich Buttons, Labels, Schieberegler, Schalter, Dropdowns, Roller, Bögen, Balken, Diagramme, Bilder, Kontrollkästchen, Textbereiche, Tab-Ansichten, Container und mehr. Wir fügen kontinuierlich Unterstützung für weitere Widgets hinzu.
Wie genau ist der Live-Simulator?
Der Simulator führt die echte LVGL-Rendering-Engine aus, die zu WebAssembly kompiliert wurde — es ist weder ein Mockup noch eine CSS-Nachbildung. Was du in der Vorschau siehst, stimmt pixelgenau mit deiner Zielhardware überein.
Welches Format verwendet der exportierte Code?
PicoPixel exportiert eine ZIP-Datei mit sauberem, menschenlesbarem LVGL-C-Code (.c- und .h-Dateien). Die Ausgabe umfasst Widget-Erstellung, Styling, Layout und Event-Handler-Setup — alles mit Standard-LVGL-API-Aufrufen ohne proprietäre Abhängigkeiten.
Kann ich den exportierten Code mit ESP-IDF, Arduino oder PlatformIO verwenden?
Ja. Der exportierte Code verwendet Standard-LVGL-API-Aufrufe und funktioniert daher mit jedem Build-System, das LVGL unterstützt — einschließlich ESP-IDF, Arduino IDE und PlatformIO. Füge einfach die Dateien zu deinem Projekt hinzu und rufe ui_init() nach der Konfiguration deines Display-Treibers auf. Für plattformspezifische Details siehe unseren ESP32-Leitfaden.
Ist PicoPixel kostenlos?
Ja. PicoPixel ist für die persönliche und private Nutzung kostenlos — keine Kreditkarte erforderlich. Die kommerzielle Nutzung startet ab 17 $/Monat (204 $/Jahr). Es wird immer ein großzügiges kostenloses Angebot geben.
Erstelle deine LVGL-Oberfläche kostenlos
Entwirf Embedded-UIs visuell, zeige sie in einem Live-LVGL-Simulator an und exportiere produktionsreifen C-Code. Keine Installation. Keine Kreditkarte. Öffne PicoPixel im Browser und beginne mit dem Design.
Kostenlos loslegen!