Overzicht
PicoPixel is de ultieme editor voor LVGL: een Figma-achtige workspace om embedded UI's visueel te bouwen, met herbruikbare components, libraries, assets en samenwerkingstools rond de manier waarop LVGL-projecten echt worden geleverd.
Zodra je een UI in PicoPixel bouwt, kun je C-code exporteren en die code gebruiken op vrijwel elk apparaat dat LVGL kan draaien. PicoPixel ondersteunt momenteel LVGL 8.x, en LVGL 9 support is gepland.
Templates, UI-kits, examples, sprites, widgets en full apps zijn startpunten voor die workflow. Sommige zijn gebouwd door het PicoPixel development team, en andere door gebruikers en de bredere community. Als je iets nuttigs wilt delen, zie How to submit a template.
Wat een template echt is
Een PicoPixel-template is gewoon een .picopixel-bestand. Er zit niets magisch achter: het is hetzelfde soort bestand dat je uit je eigen workspace kunt exporteren.
Dat betekent dat een template screens, LVGL widgets, reusable components, colors, fonts, images, animated images, sprites en andere assets kan bevatten. Wanneer je het opent of importeert, zit je niet vast aan het originele design. Je kunt het bewerken, uitkleden, onderdelen naar een ander bestand kopiëren, publiceren als team library of exporteren als LVGL C-code.
Het belangrijke idee is dit: een template is niet alleen een screenshot. Het is een bewerkbaar PicoPixel-projectbestand dat onderdeel kan worden van je eigen LVGL-workflow.
Waar je templates vindt
De belangrijkste plek om te bladeren is de PicoPixel templates gallery. Je kunt de galerij filteren op projecttype, een detailpagina openen, bekijken wat erbij zit en kiezen hoe je het bestand naar PicoPixel brengt.
Je kunt dezelfde collectie bestanden ook via GitHub bereiken:
GitHub is handig als je liever bestanden direct downloadt, projectgeschiedenis bekijkt of .picopixel-bestanden naast andere projectassets bewaart.
Kies het juiste startpunt
De galerij bevat verschillende soorten bestanden. Kies op basis van wat je wilt lenen.
- Full App, een compleet appproject. In de toekomst kunnen meer full app-items een firmware binary bevatten zodat je hardware makkelijker kunt flashen. Richt je nu op het openen van het UI-bestand, aanpassen en exporteren van de UI-code voor je eigen firmware.
- Example, een gericht referentieproject dat één workflow, widget, layout of interactiepatroon demonstreert.
- UI Kit, een herbruikbare set components, styles, screens en assets die je over meerdere producten kunt aanpassen.
- Template, een kant-en-klaar scherm of projectlayout dat je naar je eigen interface kunt aanpassen.
- Sprite, een herbruikbare geanimeerde LVGL-widget met meerdere states. Zie What is a sprite? voor hoe sprites in PicoPixel werken.
- Animated Image, een bestand of voorbeeld rond LVGL animated image-frames. Zie Working with the LVGL Animated Image Widget voor de details.
- Widget, een aangepaste LVGL-widget of component die je in een grotere UI kunt plaatsen.
Als je niet weet waar je moet beginnen, gebruik een example wanneer je gedrag wilt leren, een UI kit wanneer je herbruikbare bouwblokken wilt, en een template wanneer je een scherm wilt dat al dicht bij je doel zit.
Een bestand openen of importeren
Klik in de templates gallery op een project dat nuttig lijkt. Je komt op een detailpagina met preview, metadata, gallery images en actieknoppen.
Er zijn drie gebruikelijke manieren om het bestand aan je PicoPixel-workspace toe te voegen.
- Klik op Open in PicoPixel. Dit is de snelste route wanneer je wilt dat PicoPixel het bestand direct in de editor opent.
- Klik op Download .picopixel. Dit bewaart het bestand lokaal zodat je het later kunt importeren, als backup kunt houden of met je firmwareproject kunt delen.
- Download het
.picopixel-bestand van GitHub en sleep het daarna naar PicoPixel of importeer het vanuit de editor.
Zodra het bestand in PicoPixel zit, gedraagt het zich als elk ander PicoPixel-project. Hernoem het, dupliceer het, bewerk screens, vervang assets, verander fonts, tune colors en exporteer wanneer het klaar is.
Hergebruik wat erin zit
Nadat een template is geïmporteerd, ligt de wereld aan je voeten. Je kunt het hele bestand als startproject gebruiken, of het behandelen als een library met onderdelen.
Veel bestanden bevatten assets die je kunt hergebruiken, zoals images, colors, fonts, animated image frame sets en components. Open de Assets-tab om te zien wat met het bestand is meegekomen.
Als het bestand herbruikbare LVGL widgets of components bevat, kun je het veranderen in een team library en vanuit andere bestanden linken. Dat is vooral nuttig voor UI-kits en widget packs: houd het bronbestand als hoofd-library en trek de components in elke product-UI.
Lees voor de volledige workflow Guide to libraries and reusable LVGL components in PicoPixel. Die legt local libraries, published team libraries, linked libraries en hoe component updates tussen bestanden bewegen uit.
Exporteren naar een apparaat
Wanneer je UI klaar is, exporteer je de LVGL C-code uit PicoPixel en integreer je die met de firmware voor je board. De geëxporteerde UI kan draaien op vrijwel elk apparaat dat LVGL ondersteunt, zolang je firmware en LVGL-configuratie zijn ingesteld voor de widgets en assets die je gebruikt.
Let op geheugen. Grote images, animated image frames, sprites, grote fonts en complexe fullscreen layouts kunnen meer RAM en flash vragen dan een klein board standaard beschikbaar heeft. Als iets er goed uitziet in PicoPixel maar niet verschijnt na het flashen, controleer dan je LVGL-configuratie, afbeeldingsgroottes, kleurdiepte, heap allocation en display buffer setup.
Templates zijn startpunten, geen hardwaregaranties. Bevestig altijd dat je board genoeg RAM en flash heeft voor de UI die je exporteert, vooral bij animated images, sprites, grote fonts of veel image assets.
Delen en toestemmingen
Communitytemplates worden gemaakt door zowel het PicoPixel-team als gebruikers. Als je je eigen bestand wilt delen, volg How to submit a template zodat het PicoPixel-team het bestandspad, credits, beschrijving en toestemmingen heeft die nodig zijn om het te beoordelen.
Bekijk voor inzendingen en imports de Terms en Privacy Policy. Dien alleen content in die je bezit of waarvoor je een licentie hebt om te delen, inclusief images, icons, fonts, screenshots en brand assets.
Als je een openbaar template of ander community-item ziet dat er niet hoort te staan, zie How to report content.
Waar nu heen
- Templates gallery, bekijk beschikbare
.picopixel-bestanden - How to submit a template, deel je eigen PicoPixel-bestand met de community
- Guide to libraries and reusable LVGL components in PicoPixel, hergebruik geïmporteerde components in bestanden
- What is a sprite?, leer hoe geanimeerde widgets met meerdere states werken
- Working with the LVGL Animated Image Widget, begrijp frame-gebaseerde LVGL-animaties
