Über PicoPixel — der browserbasierte LVGL-Editor
Was ist PicoPixel?
Ein browserbasiertes visuelles Design-Tool, das speziell für eingebettete Benutzeroberflächen mit LVGL entwickelt wurde.
Ziehe Widgets auf die pixelgenaue Arbeitsfläche, gestalte ihr Aussehen, verknüpfe Ereignisse im visuellen Event-Editor und verwalte wiederverwendbare Assets. Anschließend exportierst du produktionsreifen C-Code für deine Zielplattform. Stell es dir als Figma für Embedded-UIs vor.
Alles läuft im Browser — ohne Installation. PicoPixel ist kostenlos nutzbar.
Buttons, Slider, Schalter, Bögen, Diagramme, Dropdowns, Roller, Checkboxen, Textbereiche, Tabviews, Container, Bilder
Interaktionen verbinden, ohne C-Code zu schreiben
WebAssembly-basierte, pixelgenaue Hardware-Vorschau
Live sichtbare Mauszeiger, Anmerkungen, teilbare Simulator-Links
Detaillierter Änderungsverlauf mit Wiederherstellung per Klick
Sauberer LVGL-8.x-Code für ESP32, STM32, RP2040 und mehr
Auf den Schultern von Giganten
Nichts davon würde ohne LVGL und die unglaubliche Arbeit des LVGL-Teams existieren, das die Bibliothek vollständig Open Source gemacht hat. Die Entscheidung des Teams, LVGL frei und zugänglich zu halten, hat Werkzeuge wie PicoPixel überhaupt erst möglich gemacht.
Wir sind allen zutiefst dankbar, die zum LVGL-Ökosystem beitragen: den Core-Maintainern, den Community-Mitgliedern, die Issues melden und Treiber schreiben, und allen Entwicklern, die LVGL für ihre Projekte nutzen. Danke.
Das Frontend von PicoPixel entstand als Fork von Penpot. Wir sind dem Penpot-Team und der Community zutiefst dankbar für das Fundament, das ihre Open-Source-Arbeit geschaffen hat. Wir möchten unsere Version veröffentlichen, sobald PicoPixel eine stabile Version erreicht.
Damit PicoPixel mit LVGL funktioniert, waren umfangreiche Änderungen an der ursprünglichen Codebasis nötig, darunter mehrere spezialisierte Renderer, die aus einer universellen Designplattform einen LVGL-nativen Editor und Simulator machen. Ohne diese tiefgreifende Architekturarbeit wäre PicoPixel auf ein einfaches LVGL-Plugin beschränkt geblieben statt die auf LVGL zugeschnittene Plattform zu werden, die es heute ist.
Das LVGL-Team meldete sich mit herzlichen Worten und Glückwünschen, als PicoPixel gestartet ist.
Das Team begrüßte PicoPixel als Bereicherung des Ökosystems und freute sich darüber, dass weitere Werkzeuge für LVGL entstehen.
Warum wir es entwickelt haben
UIs für Embedded-Geräte zu bauen hieß traditionell, Pixelkoordinaten von Hand zu programmieren und mit Low-Level-Grafikbibliotheken zu ringen: C-Code schreiben, flashen, Display prüfen, anpassen, wieder flashen.
Wir glauben, dass Embedded-Entwickler dieselbe visuelle Designerfahrung verdienen, die Web- und Mobile-Entwickler gewohnt sind. PicoPixel überbrückt diese Lücke mit einem Drag-and-Drop-Editor, einem Live-Simulator, der exakt zeigt, wie deine UI auf Hardware gerendert wird, und einem kollaborativen Workflow, mit dem Teams in Echtzeit gemeinsam gestalten können.
So funktioniert es
Von der Arbeitsfläche zur Hardware in sechs Schritten.
Entwerfen
Ziehe LVGL-Widgets auf eine pixelgenaue Arbeitsfläche und gestalte sie visuell.
Interaktionen verbinden
Verbinde Tastendrücke mit Bildschirmnavigation und Slider-Änderungen mit Label-Updates. Kein C-Code.
Vorschau
Sieh deine UI in einem Live-LVGL-Simulator auf WebAssembly-Basis. Die echte Rendering-Engine, kein Mock-up.
Exportieren
Generiere produktionsreifen LVGL-C-Code (.c- und .h-Dateien) ohne proprietäre Abhängigkeiten.
Flashen
Füge die exportierten Dateien deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu und flashe sie auf Hardware.
Weiterentwickeln
Arbeite mit deinem Team in Echtzeit zusammen und behalte Änderungen mit der integrierten Versionskontrolle im Blick.
Ein paar Worte von Ed
Ich baue derzeit ein digitales Kombiinstrument und verbringe einen guten Teil meiner Zeit zwischen Tokyo und Shenzhen. Wenn du Hardware entwickelst oder gerade in einer der beiden Städte bist, würde ich mich gern auf einen Drink treffen und fachsimpeln.
Vor PicoPixel war ich einige Jahre bei einer der größten Brokerhäuser. Außerdem war ich eine Zeit lang bei einem von Apple übernommenen Startup, wo ich an ein paar Watch-Prototypen gearbeitet habe. Dort entstand der Wunsch, wieder näher an Hardware zu arbeiten, und daraus wurde schließlich dieses Projekt.
Ich freue mich zu hören, woran du arbeitest und welche Verbesserungen du dir für PicoPixel wünschst. Melde dich gern.
Offene Beta
Der aktuelle Stand.
PicoPixel befindet sich in der offenen Beta und wird derzeit von einem einzelnen Entwickler entwickelt und betreut. Das Widget-Angebot wächst stetig, LVGL-v9.x-Unterstützung ist geplant, und regelmäßig erscheinen neue Funktionen, darunter der kürzlich gestartete Animationsmodus mit Keyframes auf einer Zeitleiste.
Während die Infrastruktur skaliert, kann es vorübergehende Einschränkungen geben. Deine Geduld und dein Feedback bedeuten uns sehr viel. Wenn dir etwas auffällt, melde dich jederzeit.
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!