LVGL lernen

Build with
PicoPixel.

Schritt-für-Schritt-Anleitungen zum Web-Editor, zu ESP32-Boards und zum Arbeiten an deinem Projekt.

So verwendest du Pets in PicoPixel thumbnail
ANGEHEFTET · PICOPIXEL

So verwendest du Pets in PicoPixel

Pets sind fertige, animierte Sprites mit mehreren Modi, die du durch selbst festgelegte Bedingungen aktivieren kannst. Hol dir eines aus dem Verzeichnis, füge es deinem Projekt hinzu und verbinde es so, dass es auf alles reagiert, was dein Gerät gerade macht: Daten abrufen, überhitzen, Code prüfen und mehr.

pets · sprites · picopixelAnsehen

12 Alle

So verwendest du PicoPixel-Vorlagen, UI-Kits und vollständige Apps thumbnail
PICOPIXEL

So verwendest du PicoPixel-Vorlagen, UI-Kits und vollständige Apps

Finde PicoPixel-Vorlagen, UI-Kits, Beispiele, Sprites, Widgets und vollständige App-Dateien, öffne, lade, importiere, passe sie an und exportiere sie als LVGL-C-Code für dein Gerät.

templates · ui-kits · full-apps
PicoPixel LVGL MCP Server Setup Guide thumbnail
PICOPIXEL

PicoPixel LVGL MCP Server Setup Guide

Set up the PicoPixel LVGL MCP server for Claude, ChatGPT, Codex, or Cursor. Learn agent settings, reusable components, colors, fonts, and assets.

LVGL MCP · MCP server setup · AI UI design
Mit dem LVGL-Widget für animierte Bilder arbeiten thumbnail
LVGL

Mit dem LVGL-Widget für animierte Bilder arbeiten

So funktioniert das LVGL-Widget für animierte Bilder: Lade eine Sequenz gleich großer Frames hoch, stelle Dauer und Schleife ein, und spiele Frame-für-Frame-Animationen auf deinem Display ab.

lvgl · animated-image · animimg
Was ist ein Sprite? thumbnail
PICOPIXEL

Was ist ein Sprite?

Lerne, was Sprites sind, wie du animierte Widgets mit mehreren Zuständen erstellst und wie du sie projektübergreifend wiederverwenden kannst.

sprite · picopixel
Den Event-Editor verwenden thumbnail
PICOPIXEL

Den Event-Editor verwenden

Mach deine Benutzeroberfläche interaktiv mit PicoPixels Event-Editor: Ziehe eine Verbindung von einem Widget zu einem anderen, wähle einen Auslöser wie einen Klick oder eine Wertänderung, und lege fest, was passiert.

events · interactions · picopixel
Creating LVGL themes thumbnail
PICOPIXEL

Creating LVGL themes

Create light and dark LVGL themes in PicoPixel with reusable color tokens, bind them to widgets, and add a Set Theme event that switches themes at runtime.

themes · color tokens · dark mode
Leitfaden zu Bibliotheken und wiederverwendbaren LVGL-Komponenten in PicoPixel thumbnail
PICOPIXEL

Leitfaden zu Bibliotheken und wiederverwendbaren LVGL-Komponenten in PicoPixel

So funktionieren Bibliotheken in PicoPixel: Das Veröffentlichen einer Datei macht ihre Assets für dein Team wiederverwendbar, nicht öffentlich. Was eine Bibliothek enthält, wie man eine veröffentlicht und verknüpft, wo veröffentlichte Bibliotheken erscheinen und die zwei einzigen Wege, wie Inhalte dein Team verlassen können.

library · components · sharing
Mit Schriftarten arbeiten thumbnail
PICOPIXEL

Mit Schriftarten arbeiten

Erfahre, warum LVGL-Schriftarten konvertiert werden müssen, wie du eine aus einer mitgelieferten oder hochgeladenen Schriftart erstellst, Rechts-nach-links-Schriften wie Arabisch und Hebräisch einrichtest, große CJK-Schriftarten handhabst und nicht mehr benötigte Schriftarten bereinigst.

font · picopixel · lvgl
ESP32 LVGL-Tutorial: Eine Touchscreen-UI erstellen thumbnail
HARDWARE

ESP32 LVGL-Tutorial: Eine Touchscreen-UI erstellen

Erstelle eine Touchscreen-UI für den ESP32 mit LVGL, gestalte sie visuell im Browser, sieh dir eine Live-Vorschau an und exportiere fertigen C-Code zum Flashen. Ein einsteigerfreundlicher Leitfaden.

esp32 · lvgl · ui
So reichst du ein Pet ein thumbnail
PICOPIXEL

So reichst du ein Pet ein

Zwei Wege, um dein Pet zur PicoPixel-Community hinzuzufügen: Füge eine Petdex-URL für den schnellsten Weg ein, oder lade ein Spritesheet und sprite.json auf GitHub hoch. Plus: So generierst du dein eigenes Pet mit KI-Tools.

pets · sprites · petdex
So reichst du eine Vorlage ein thumbnail
PICOPIXEL

So reichst du eine Vorlage ein

Teile eine deiner PicoPixel-Dateien als Community-Vorlage, indem du ein GitHub-Repo mit deiner .picopixel-Datei, Vorschaubildern und einer README-Beschreibung erstellst.

templates · submission · sharing
So meldest du Inhalte thumbnail
PICOPIXEL

So meldest du Inhalte

Ein Pet, eine Vorlage oder andere Community-Inhalte entdeckt, die dort nicht hingehören? Melde sie über das Feedback-Formular – was du angeben solltest, wie du ein Urheberrechtsproblem meldest und was danach passiert.

report · copyright · moderation
Hast du eine Idee für eine Anleitung?
Schreib uns an hello@picopixel.io
hello@picopixel.io