Ü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 per Drag-and-Drop auf eine pixelgenaue Leinwand, style sie visuell, verbinde Event-Handler mit einem visuellen Events-Editor, verwalte wiederverwendbare Assets und exportiere 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-Cursor, Anmerkungen, teilbare Simulator-Links
Granulare Sitzungshistorie mit Rollback 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. Ihre Entscheidung, 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 jedem Entwickler, der sich entscheidet, damit zu bauen. Danke.
Das LVGL-Team meldete sich mit ausschließlich freundlichen Worten und Glückwünschen, als PicoPixel gestartet ist.
Sie begrüßten das Projekt als positive Ergänzung des Ökosystems und zeigten echte Begeisterung darüber, dass mehr Tooling rund um LVGL entsteht.
Wir erhielten kürzlich eine unangenehme E-Mail von einer Person aus ihrem Team.
Wir geben den Inhalt hier nicht wieder, fanden den Kontrast aber erwähnenswert, wie unterschiedlich Menschen in der Community auf das Projekt reagiert haben.
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 Ihre UI auf Hardware gerendert wird, und einem kollaborativen Workflow, mit dem Teams in Echtzeit gemeinsam gestalten können.
So funktioniert es
Von der Leinwand zur Hardware in sechs Schritten.
Entwerfen
Ziehen Sie LVGL-Widgets auf eine pixelgenaue Leinwand und gestalten Sie sie visuell.
Interaktionen verbinden
Verbinden Sie Tastendrücke mit Bildschirmnavigation und Slider-Änderungen mit Label-Updates. Kein C-Code.
Vorschau
Sehen Sie Ihre UI in einem Live-LVGL-Simulator auf WebAssembly-Basis. Die echte Rendering-Engine, kein Mock-up.
Exportieren
Generieren Sie produktionsreifen LVGL-C-Code (.c- und .h-Dateien) ohne proprietäre Abhängigkeiten.
Flashen
Fügen Sie die exportierten Dateien Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu und flashen Sie sie auf Hardware.
Iterieren
Arbeiten Sie mit Ihrem Team in Echtzeit über die integrierte Versionskontrolle zusammen.
Eine Notiz von Ed
Ich baue derzeit ein Instrumenten-Display-Cluster und verbringe einen guten Teil meiner Zeit zwischen Tokyo und Shenzhen. Wenn Sie Hardware bauen oder zufällig in einer der beiden Städte sind, würde ich mich gern auf einen Drink treffen und fachsimpeln.
Vor PicoPixel war ich einige Jahre bei einer der größten Brokerage-Firmen. 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 würde gern hören, woran Sie bauen und welche Änderungen Sie sich für PicoPixel wünschen. Melden Sie sich gern.
Offene Beta
Ehrlich darüber, wo wir stehen.
PicoPixel befindet sich in der offenen Beta und wird derzeit von einem Solo-Entwickler gebaut und gepflegt. Das Widget-Set wächst aktiv, LVGL-v9.x-Unterstützung ist geplant, und regelmäßig erscheinen neue Funktionen, darunter der kürzlich gestartete Animationsmodus mit Timeline-basiertem Keyframing.
Während die Infrastruktur skaliert, kann es vorübergehende Einschränkungen geben. Ihre Geduld und Ihr Feedback bedeuten uns sehr viel. Wenn Ihnen etwas auffällt, melden Sie sich jederzeit.
Erstellen Sie Ihre LVGL-Oberfläche kostenlos
Entwerfen Sie Embedded-UIs visuell, zeigen Sie sie in einem Live-LVGL-Simulator an und exportieren Sie produktionsreifen C-Code. Keine Installation. Keine Kreditkarte. Öffnen Sie PicoPixel im Browser und beginnen Sie mit dem Design.
Loslegen. Es ist kostenlos!