Overzicht
Deze handleiding laat zien hoe je een pet kiest, aan je project toevoegt en laat reageren op wat je apparaat doet. Een pet is een kant-en-klaar geanimeerd personage voor je interface.
Wil je eerst weten hoe sprites werken? Lees Wat is een sprite?. Voor het delen van je eigen personage is er Een pet indienen. Hier gaan we aan de slag met een pet die al beschikbaar is.
Je hebt geen ervaring met animaties nodig. Je voegt de pet toe via Add to project en sleept de widget naar je canvas.
Wat zijn pets?
Een pet is een sprite: één widget met meerdere animaties. Elke animatie hoort bij een mode, oftewel een toestand, zoals Idle, Run right of Jumping.
Pets uit Codex- of Petdex-pakketten hebben meestal 9 animatietoestanden: Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running en Review. Elke toestand heeft een eigen herhalende beeldreeks.
Je gebruikt dus één widget en bepaalt zelf wanneer deze van animatie wisselt.
LVGL heeft zelf geen spritewidget met meerdere toestanden. PicoPixel bouwt deze op uit de LVGL Animated Image-widget en regelt de koppelingen tussen de animaties. In Wat is een sprite? lees je meer over die opbouw.
Waarom een pet gebruiken?
Een pet maakt de toestand van je apparaat zichtbaar met een animatie. In plaats van steeds dezelfde beweging af te spelen, kan het personage reageren op wat er gebeurt.
Het idee komt van een personage dat meeleeft met een programmeersessie: Idle terwijl je nadenkt, Review tijdens een codebeoordeling en Failed als het compileren mislukt.
In PicoPixel kun je datzelfde idee gebruiken voor elke gebeurtenis die je project kan doorgeven. Bijvoorbeeld:
- Speel Jumping af als een temperatuurmeting boven een grenswaarde komt.
- Gebruik Running terwijl je gegevens via een API ophaalt en schakel terug naar Idle als het antwoord binnen is.
- Laat de pet zwaaien met Waving als een sensor beweging detecteert, of gebruik Failed als een verzoek verloopt.
Zo geef je de gebruiker herkenbare feedback zonder de animaties zelf te hoeven programmeren.
Een pet kiezen
Maak een PicoPixel-account en open de galerij op picopixel.io/pets.
Kies een personage en open de detailpagina.
Klik op Add to project. PicoPixel importeert de pet en voegt het project toe aan je dashboard. Je hoeft geen bestanden handmatig klaar te zetten.
Wat zit er in het geïmporteerde project?
Het project bevat één Sprite-widget met alle animatietoestanden van de pet. Open het project om de sprite op het canvas te zien. Rechts staan de toestanden, elk met een eigen aantal frames en afspeelduur.
In Wat is een sprite? vind je meer uitleg over toestanden, frames en afspeelduur.
Open Assets. Daar staat de sprite ook als herbruikbare component in de lokale bibliotheek. Daarmee kun je de pet eenvoudig in andere projecten gebruiken.
Drie manieren om je pet te gebruiken
Het geïmporteerde project is vooral bedoeld om de pet beschikbaar te maken. Je kunt er op drie manieren mee verder.
1. De laag kopiëren en plakken
Selecteer de spritelaag, kopieer deze en plak haar in je eigen project. Alle animatietoestanden gaan mee. Dit is de snelste optie als je de pet maar op één plek nodig hebt.
2. De pet als bibliotheek delen
Wil je dezelfde pet in meerdere projecten gebruiken, publiceer het project dan als bibliotheek. De onderdelen worden daarmee beschikbaar voor andere bestanden binnen je team.
Publiceer de bibliotheek als volgt:
- Open Assets in het petproject en kies Add Library.
- Klik op Publish.
Koppel de bibliotheek daarna vanuit een ander project:
- Open je eigen project.
- Kies Add Library.
- Selecteer de petbibliotheek onder Shared libraries en koppel haar aan het bestand.
De sprite verschijnt nu in Assets. Sleep de component naar het canvas; alle animatietoestanden zijn al ingesteld.
Een bibliotheek publiceren deelt haar alleen binnen je team. Lees Bibliotheken en herbruikbare componenten voor uitleg over publiceren, koppelen en bijwerken.
3. Het petproject aanpassen aan je hardware
Je kunt ook de schermgrootte en het doelboard van het petproject aanpassen en daarin verder bouwen. Dat kan, maar optie 1 of 2 heeft de voorkeur: zo blijft de pet los van je eigen interface. Het geïmporteerde project is bedoeld als demonstratie van het personage.
De pet laten reageren
Met de event-editor bepaal je wanneer de pet van animatie wisselt.
Kies een trigger, bijvoorbeeld een knopdruk, gewijzigde waarde of timer. Kies daarna de actie Set Sprite Mode en de animatietoestand die moet worden afgespeeld.
In het voorbeeld hieronder is een Clicked-event gekoppeld aan de knop JUMP!. De actie stelt de sprite in op Jumping, zodat de pet springt als de gebruiker op de knop tikt.
Je kunt op dezelfde manier reageren op een sensorwaarde, een afgeronde API-aanroep of een timer. Je project moet die gebeurtenis wel doorgeven. Lees De event-editor gebruiken voor het overzicht van triggers, bronwidgets en acties.
Tips voor gebruik op hardware
Met deze aandachtspunten houd je het personage bruikbaar op een klein apparaat:
- Verwijder animatietoestanden die je niet gebruikt. Elke toestand bevat frames die geheugen en opslagruimte innemen. Houd alleen de animaties over die je daadwerkelijk wilt afspelen.
- Koppel de events. De pet wisselt niet vanzelf van animatie. Stel voor elke gewenste overgang een trigger en actie in, zoals bij de knop JUMP! hierboven.
- Controleer het beschikbare RAM. De beeldframes moeten in het geheugen passen. In de geëxporteerde
README.mdstaat welke LVGL-instellingen daarvoor nodig zijn. Je kunt die zelf aanpassen of het bestand aan je programmeerassistent geven. Verschijnt de sprite niet na het flashen, controleer dan eerst de geheugentoewijzing.
Een pet met alle 9 animatietoestanden en grote frames kan te veel geheugen vragen voor een kleine microcontroller. Verwijder ongebruikte toestanden en zorg dat LVGL voldoende RAM heeft om de overgebleven animaties weer te geven.
Verder aan de slag
- Wat is een sprite?: meer over toestanden, frames en afspeelduur.
- De event-editor gebruiken: laat een pet reageren op je interface.
- Bibliotheken en herbruikbare componenten: publiceer een pet één keer en gebruik haar in meerdere projecten.
- Een pet indienen: maak en deel je eigen personage.
- Pets-galerij: ontdek meer personages van de community.
