Overzicht
PicoPixel is een visuele editor voor LVGL-interfaces. De werkruimte doet denken aan Figma en biedt herbruikbare componenten, bibliotheken, assets en samenwerking met je team.
Je ontwerp kun je exporteren als C-code voor vrijwel elk apparaat dat LVGL ondersteunt. PicoPixel ondersteunt momenteel LVGL 8.x; ondersteuning voor LVGL 9 staat gepland.
Met een sjabloon, UI-kit, voorbeeld, sprite, widget of complete app hoef je niet vanaf nul te beginnen. De bestanden zijn gemaakt door het PicoPixel-team en de community. Wil je zelf iets bijdragen? Lees Een sjabloon indienen.
Wat is een sjabloon?
Een PicoPixel-sjabloon is een gewoon .picopixel-bestand, hetzelfde bestandstype dat je vanuit je eigen werkruimte exporteert.
Het kan schermen, LVGL-widgets, herbruikbare componenten, kleuren, lettertypen, afbeeldingen, animaties, sprites en andere assets bevatten. Na het openen kun je alles aanpassen: onderdelen verwijderen, naar een ander bestand kopiëren, als teambibliotheek publiceren of als LVGL C-code exporteren.
Een sjabloon is een bewerkbaar project, geen schermafbeelding. Je kunt het hele ontwerp gebruiken of alleen de onderdelen overnemen die je nodig hebt.
Waar vind je sjablonen?
Begin in de PicoPixel-sjabloongalerij. Filter op projecttype, open een detailpagina en bekijk wat het project bevat. Daar kies je ook hoe je het bestand in PicoPixel wilt openen.
Dezelfde bestanden staan op GitHub:
Dat is handig als je bestanden rechtstreeks wilt downloaden, eerdere wijzigingen wilt bekijken of de .picopixel-bestanden bij de rest van je project wilt bewaren.
Kies het juiste startpunt
Kies het type bestand dat past bij wat je wilt bouwen:
- Full App: een compleet appproject. In de toekomst kunnen sommige projecten ook firmware bevatten die je direct kunt flashen. Voorlopig open je het UI-bestand, pas je het aan en exporteer je de code voor je eigen firmware.
- Example: een gericht voorbeeld van een widget, indeling, interactie of werkwijze.
- UI Kit: een verzameling componenten, stijlen, schermen en assets die je voor verschillende producten kunt aanpassen.
- Template: een kant-en-klaar scherm of project dat je als basis voor je eigen interface gebruikt.
- Sprite: een herbruikbare, geanimeerde LVGL-widget met meerdere toestanden. Lees Wat is een sprite? voor uitleg.
- Animated Image: een project of voorbeeld met beeldreeksen voor animaties. Zie Werken met de LVGL Animated Image-widget.
- Widget: een aangepaste LVGL-widget of component om in een grotere interface te gebruiken.
Wil je begrijpen hoe iets werkt, kies dan een Example. Zoek je herbruikbare bouwstenen, begin met een UI Kit. Een Template is handig als de indeling al dicht bij je gewenste resultaat ligt.
Een bestand openen of importeren
Open een project in de sjabloongalerij. De detailpagina toont voorbeelden, projectgegevens, extra afbeeldingen en knoppen om het bestand te openen of downloaden.
Je kunt het bestand op drie manieren aan je werkruimte toevoegen:
- Klik op Open in PicoPixel om het direct in de editor te openen.
- Klik op Download .picopixel om het lokaal te bewaren. Je kunt het later importeren, als reservekopie bewaren of bij je firmwareproject voegen.
- Download het
.picopixel-bestand van GitHub en sleep het naar PicoPixel of importeer het vanuit de editor.
Daarna werkt het als ieder ander PicoPixel-project. Geef het een andere naam, maak een kopie, bewerk de schermen, vervang afbeeldingen, pas lettertypen en kleuren aan en exporteer het resultaat.
Onderdelen hergebruiken
Gebruik het hele geïmporteerde project als uitgangspunt of neem alleen de onderdelen over die je nodig hebt.
Open Assets om de meegeleverde afbeeldingen, kleuren, lettertypen, beeldreeksen en componenten te bekijken.
Bevat het bestand herbruikbare widgets of componenten, publiceer het dan als teambibliotheek. Andere bestanden kunnen die bibliotheek koppelen. Zo houd je de oorspronkelijke UI-kit op één plek en gebruik je dezelfde componenten in meerdere projecten.
Lees Bibliotheken en herbruikbare LVGL-componenten in PicoPixel voor uitleg over lokale bibliotheken, publiceren binnen je team, koppelen aan andere bestanden en het toepassen van updates.
Exporteren naar een apparaat
Exporteer je voltooide ontwerp als LVGL C-code en voeg het toe aan de firmware van je board. De code werkt op vrijwel elk apparaat met LVGL, mits de firmware en LVGL-instellingen de gebruikte widgets en assets ondersteunen.
Let op het geheugenverbruik. Grote afbeeldingen, animaties, sprites, uitgebreide lettertypen en complexe schermen kunnen veel RAM en flashgeheugen vragen. Werkt het ontwerp in PicoPixel, maar verschijnt het niet na het flashen? Controleer dan de LVGL-configuratie, afbeeldingsafmetingen, kleurdiepte, heapgrootte en displaybuffers.
Een sjabloon geeft je een startpunt. Controleer altijd of jouw board genoeg RAM en flashgeheugen heeft voor het ontwerp, vooral bij veel afbeeldingen, animaties, sprites en grote lettertypen.
Delen en gebruiksrechten
Communitysjablonen komen van het PicoPixel-team en van gebruikers. Wil je je eigen bestand delen, volg dan Een sjabloon indienen. Zo ontvangt het team het juiste bestand, de beschrijving, de naamsvermelding en de benodigde toestemming.
Lees bij het indienen of importeren de gebruiksvoorwaarden en het privacybeleid. Deel alleen materiaal waarvan je de eigenaar bent of waarvoor je de benodigde rechten hebt. Dat geldt ook voor afbeeldingen, iconen, lettertypen, schermafbeeldingen en merkmateriaal.
Zie je een openbaar sjabloon of ander community-item dat er niet hoort te staan? Lees Content melden.
Verder aan de slag
- Sjabloongalerij: bekijk de beschikbare
.picopixel-bestanden. - Een sjabloon indienen: deel je eigen project met de community.
- Bibliotheken en herbruikbare LVGL-componenten: gebruik dezelfde componenten in meerdere bestanden.
- Wat is een sprite?: maak animaties met verschillende toestanden.
- Werken met de LVGL Animated Image-widget: leer hoe animaties met beeldreeksen werken.
