Der visuelle Drag-and-Drop-LVGL-Editor.

Wie PicoPixel funktioniert

PicoPixel verwandelt die LVGL-Entwicklung von einem Code-first-Prozess in einen visuellen Drag-and-Drop-Workflow. Vom leeren Canvas zur produktionsreifen eingebetteten UI in Minuten — visuell entwerfen, mit einem Live-LVGL-Simulator vorschauen und sauberen C code exportieren. Keine Installation erforderlich.

Kostenlos starten!

Vom Design zum Gerät in 6 Schritten

01

Entwerfen Sie Ihre Oberfläche

Öffnen Sie PicoPixel in Ihrem Browser — keine Downloads, keine Installation. Ziehen Sie LVGL-Widgets aus der Palette auf einen pixelgenauen Canvas und gestalten Sie sie visuell.

  • • Buttons, Labels, Schieberegler, Schalter, Bögen, Diagramme, Dropdowns, Roller, Kontrollkästchen, Textbereiche, Tab-Ansichten, Container und Bilder
  • • Stellen Sie die Zielauflösung des Displays passend zu Ihrer Hardware ein
  • • Konfigurieren Sie Farben, Rahmen, Abstände, Schriftarten, Deckkraft, Verläufe und Schatten
  • • Verwenden Sie Ausrichtungs- und Verteilungswerkzeuge für präzise Widget-Positionierung
  • • Organisieren Sie Bildschirme und Ebenen für mehrseitige Oberflächen
02

Interaktionen verbinden

Verwenden Sie 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
  • • Ziehen Sie Aktionen auf Widgets — kein Callback-Code erforderlich
03

Vorschau im Live-Simulator

PicoPixel kompiliert LVGL zu WebAssembly und führt es direkt in Ihrem Browser aus. Die Vorschau ist die echte LVGL-Rendering-Engine — kein Mockup.

  • • Sehen Sie genau, wie Ihre UI auf Hardware gerendert wird
  • • Testen Sie Touch-Interaktionen, Scrollen und Animationen
  • • Interaktions-Overlays zeigen, was angetippt und gescrollt werden kann
  • • Teilen Sie einen Simulator-Link mit Ihrem Team oder Kunden — keine Entwicklungsumgebung nötig
04

Produktionsreifen Code exportieren

Laden Sie Ihr Projekt als saubere LVGL-C-Quelldateien herunter. Die Ausgabe verwendet Standard-LVGL-API-Aufrufe ohne proprietäre Abhängigkeiten — fügen Sie 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
05

Integrieren und flashen

Fügen Sie die exportierten Dateien zu Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu. Kompilieren, flashen, und die UI auf Ihrem Gerät stimmt pixelgenau mit dem Simulator überein.

  • • Funktioniert mit ESP32, STM32, Arduino, Raspberry Pi Pico und jeder LVGL-kompatiblen Plattform
  • • Binden Sie den UI-Header ein und rufen Sie ui_init() nach der Konfiguration Ihres Display-Treibers auf
  • • Für die meisten Setups sind keine Build-System-Änderungen nötig
  • • Oder übergeben Sie das ZIP einem AI-Code-Assistenten und lassen Sie ihn die Integration übernehmen
06

Zusammenarbeiten und iterieren

Laden Sie Teammitglieder zu Ihrem Projekt ein. Alle bearbeiten denselben Canvas in Echtzeit. Verwenden Sie die integrierte Versionskontrolle, um Änderungen zu verfolgen und bei Bedarf zurückzusetzen.

  • • Kollaboratives Echtzeit-Editing — Live-Cursor, Feedback, Annotationen
  • • Integrierte Versionskontrolle mit granularer Sitzungshistorie
  • • Rollback zu jedem früheren Zustand und Versionen vergleichen
  • • Simulator-Links für Stakeholder-Reviews 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 Sie das Ergebnis sofort sehen. Ziehen Sie einen Button auf den Canvas, ändern Sie seine Größe, Farbe, fügen Sie ein Label hinzu — und der Live-LVGL-Simulator zeigt genau, wie es auf Ihrer Zielhardware aussehen wird. Wenn Sie fertig sind, exportieren Sie 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 produziert den gleichen produktionsqualitätigen LVGL-Code, den Sie von Hand schreiben würden. Sehen Sie alle PicoPixel-Funktionen oder lesen Sie 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 Ihrem Browser. Öffnen Sie die Editor-URL, melden Sie sich an und beginnen Sie 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 den Kern-LVGL-Widget-Satz 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 kein Mockup oder CSS-Annäherung. Was Sie in der Vorschau sehen, stimmt pixelgenau mit Ihrer 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ügen Sie einfach die Dateien zu Ihrem Projekt hinzu und rufen Sie ui_init() nach der Konfiguration Ihres Display-Treibers auf. Für plattformspezifische Details siehe unseren ESP32-Leitfaden.

Ist PicoPixel kostenlos?

Ja. PicoPixel ist kostenlos — auch für kommerzielle Projekte. Keine Kreditkarte erforderlich. Mit dem Wachstum der Plattform und der Zunahme der Nutzer können kostenpflichtige Pläne eingeführt werden, um Speicher- und Servicekosten zu decken. Es wird immer ein kostenloses Angebot geben.

Entwerfen Sie Ihre erste LVGL-Oberfläche — kostenlos

Öffnen Sie PicoPixel in Ihrem Browser, ziehen Sie LVGL-Widgets auf den Canvas und exportieren Sie produktionsreifen C code in Minuten. Keine Installation. Keine Kreditkarte.

Kostenlos starten!

Kostenlos nutzbar — auch für kommerzielle Projekte. FAQ lesen · Kontakt aufnehmen