Overzicht
Deze gids loopt door het gebruiken van pets in PicoPixel, van er een kiezen uit de directory tot hem in je eigen project plaatsen en laten reageren op wat je hardware doet.
Hij bouwt direct voort op twee andere gidsen. Wil je het onderliggende concept, lees dan eerst What is a sprite?. Wil je een eigen pet publiceren, zie How to submit a pet. Dit artikel zit ertussenin: de praktische hands-on tutorial voor het gebruiken van een pet die iemand al heeft gebouwd.
Geen eerdere animatie-ervaring nodig. Als je "Add to project" kunt klikken en een widget naar een canvas kunt slepen, kun je je ESP32- of LVGL-project een levend, reagerend personage geven.
Wat zijn pets?
Een pet is een sprite, een enkele widget die meerdere verschillende animaties bevat en je laat wisselen wanneer je wilt. Elke animatie is een mode (ook state of phase genoemd): "Idle," "Run right," "Jumping," enzovoort.
Pets uit Codex- of Petdex-achtige packs worden meestal geleverd met 9 modes uit de doos, bijvoorbeeld Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running en Review. Elke mode is zijn eigen kleine loop van frames, en jij beslist welke afspeelt en wanneer.
Dat is het hele idee: één widget, veel gedragingen, gewisseld door jouw conditions.
Technisch heeft LVGL geen native concept van een sprite met meerdere states; we hebben dit bovenop de LVGL animated image-widget gebouwd zodat alle modes voor je bedraad zijn. Zie What is a sprite? voor de volledige achtergrond.
Waarom een pet gebruiken?
Pets geven je ESP32- of LVGL-project een vonk leven. In plaats van een statisch gezicht of één looping animatie reageert de sprite: hij wisselt modes op basis van wat er echt gebeurt op je apparaat.
De oorspronkelijke inspiratie is een code companion. Stel je een Codex-achtig scherm voor waar een klein personage reageert op je coding session: idle terwijl je nadenkt, "Review" terwijl het een diff leest, "Failed" wanneer een build breekt. De pet spiegelt wat de app doet.
PicoPixel trekt dat verder: elke action of trigger die je kunt uitdrukken, kun je animeren. Een paar voorbeelden:
- Schakel naar Jumping wanneer een temperatuurmeting een drempel overschrijdt.
- Speel Running terwijl je data uit een API haalt en ga terug naar Idle wanneer de response binnenkomt.
- Laat Waving afgaan wanneer een sensor beweging detecteert, of Failed wanneer een request time-out.
Als je project states heeft die het tonen waard zijn, is een pet een snelle, expressieve manier om ze te tonen, zonder animatiecode van jouw kant.
Kies een pet uit de directory
Maak om te beginnen een PicoPixel-account en ga daarna naar de pets directory op picopixel.io/pets.
Blader door de galerij, zoek een personage dat je leuk vindt en open de detailpagina.
Klik op de detailpagina van de pet op Add to project. PicoPixel importeert de pet en zet hem direct in je dashboard: geen setup, geen bestanden gedoe.
Wat je net hebt gekregen
Een pet toevoegen maakt één project met één Sprite-widget, vooraf geladen met elke mode die die pet bevat. Open het en je ziet de sprite op het canvas, met alle modes in het rechterpaneel: Idle, Run right, Run left, Waving, Jumping en de rest, elk met eigen frame count en duration.
Als de Sprite-widget nieuw voor je is, legt de gids What is a sprite? modes, frames en durations in detail uit.
Ga naar de Assets-tab en je vindt dezelfde sprite opgeslagen als herbruikbare component in de local library van het project. Dit is de sleutel om de pet naar je echte projecten te verplaatsen.
Drie manieren om je pet te gebruiken
Het eigen project van de pet is eigenlijk alleen een transportmiddel. Hier zijn drie manieren om hem in het project te krijgen dat je echt wilt bouwen.
1. Kopieer en plak de layer
De snelste optie: selecteer de sprite layer in het petproject, kopieer hem, open een ander project en plak. De sprite komt binnen met alle modes intact. Goed voor eenmalig gebruik; als je deze pet maar op één plek nodig hebt, ben je klaar.
2. Maak van de pet een library (aanbevolen voor hergebruik)
Als je de pet in meerdere workspaces gebruikt, maak dan van het project een library. Een bestand publiceren maakt de assets, inclusief deze sprite, beschikbaar om overal in de workspaces van je team te importeren.
Publiceren:
- Open in het petproject de Assets-tab en kies Add Library.
- Klik op Publish.
Daarna gebruik je hem vanuit een ander project zo:
- Open je nieuwe of bestaande workspace.
- Kies Add Library.
- Link de library van de pet vanuit de lijst Shared libraries, zoals hieronder.
Zodra hij gelinkt is, verschijnt de sprite in de Assets van die workspace. Sleep hem naar het canvas en hij laadt volledig geconfigureerd, met elke mode voor die pet klaar voor gebruik.
Libraries gaan over hergebruik binnen je team, niet over publiceren naar de wereld. Voor precies wat een library bevat, hoe publishing werkt en waar linked libraries verschijnen, zie Guide to libraries and reusable components.
3. Pas de projectproperties aan je hardware aan
Je kunt ook gewoon de properties van het petproject aanpassen (screen size, target board) aan je apparaat en er direct in bouwen. Dit werkt, maar het is niet de aanbevolen route: je verliest de nette scheiding tussen de pet en je echte project, en het project van de pet is ingericht als showcase, niet als template. Gebruik eerst optie 1 of 2.
Bedraad hem: laat de pet reageren
Een pet die alleen Idle speelt doet niet veel. De winst komt uit de event editor, waar je zegt wanneer er van mode gewisseld moet worden.
Het patroon is simpel: wanneer iets gebeurt, schakel naar een mode. Je kiest de trigger, een knopdruk, een waarde die verandert, een timer, en kiest de action Set Sprite Mode, daarna de mode om af te spelen.
In de screenshot hieronder voegden we een event toe op een JUMP!-button: wanneer die wordt geklikt, zet de action de mode van de sprite op Jumping, zodat de pet springt zodra de knop wordt ingedrukt.
Vervang de trigger door wat je project maar blootstelt, een sensorwaarde, het afronden van een API-call, een timer die afgaat, en dezelfde bedrading laat de pet daarop reageren. Voor het volledige overzicht van triggers, sources en actions, zie Using the event editor.
Een paar dingen om te onthouden
Een handvol practices houdt je pet mooi en goed draaiend op echte hardware.
- Verwijder modes die je niet gebruikt. Dit wordt sterk aanbevolen. Elke mode die je houdt is meer frames in geheugen, en ongebruikte modes zijn pure overhead. Terugsnoeien is het belangrijkst op boards met beperkte storage of memory; verwijder elke mode die je niet wilt triggeren.
- Vergeet de events niet. Een pet doet niets vanzelf. Gebruik de event editor om een condition toe te voegen voor elke mode die je wilt afspelen, zoals we de JUMP!-button hierboven bedraad hebben.
- Let op het geheugen van je apparaat. Animated images hebben genoeg RAM nodig om hun frames vast te houden. Wijs je coding assistant naar het
README.md-bestand in de geëxporteerde LVGL-code; dat documenteert dit, of zorg zelf dat je genoeg geheugen voor animated images hebt toegewezen. Als een sprite na het flashen niet verschijnt, is dit bijna altijd waarom.
Sprites kunnen zwaar zijn. Op een kleine microcontroller kan een pet met alle 9 modes en grote frames het geheugen uitputten en simpelweg niet renderen. Strip hem tot de modes die je echt gebruikt en bevestig dat je LVGL-configuratie genoeg RAM voor animated images toewijst.
Waar nu heen
- What is a sprite?, het concept achter pets: modes, frames en durations.
- Using the event editor, elke trigger en action om een pet te laten reageren.
- Guide to libraries and reusable components, publiceer een pet één keer en hergebruik hem overal.
- How to submit a pet, maak en deel je eigen unieke pet met de community.
- Pets gallery, bekijk communitypets en pak er nog een.
