15 Juli 2025 –
Prototype Smiley Kiosk ontwikkeling
Vandaag werk ik aan een prototype – proof of concept – voor een Smiley Kiosk. Een smiley kiosk is een interactief paneel waarmee bezoekers eenvoudig hun mening of beleving kunnen geven door op een van de smileyknoppen te drukken. De resultaten zijn direct zichtbaar op een scherm of webpagina als overzicht en statistiek. Dit soort smiley kiosks worden vaak ingezet op locaties waar snel en laagdrempelig klanttevredenheid of beleving gemeten moet worden.
Benodigdheden en Tools
Voor de bouw van dit smiley kiosk prototype gebruik ik:
– Seeed Studio XIAO ESP32S3
– Drukschakelaars: 1x groen, 1x geel, 1x rood
– LiPo 500mAh accu
– Bambu X1 Carbon 3D-printer met zwart en wit PLA
– TinkerCad voor het ontwerp van de behuizing
– USB-C stekker
– KDC-008 NH wipschakelaar
– Arduino IDE
Eisen en functionaliteiten
Het smiley kiosk prototype moet minimaal aan de volgende eisen voldoen:
1. Drie knoppen (goed, gemiddeld, slecht)
2. Een korte bevestigingstoon bij indrukken
3. Mobiel inzetbaar, dus bij voorkeur op accu
4. Direct inzicht in de verdeling van de response
5. In één oogopslag het totaal aantal respondenten zichtbaar
6. Responses blijven bewaard bij stroomuitval
7. Maximaal 500 responses in het geheugen
8. Overzicht van het verloop van responses met tijdsindicatie
9. Met één druk op de knop alle responses verwijderen
Keuze van Hardware
Ik verzamel de basiscomponenten voor de kiosk. Om het systeem autonoom te laten werken kies ik voor de XIAO ESP32S3, een low-power processor met geïntegreerde LiPo-lader. De XIAO ESP32S3 is compact, slechts 21 x 17,5 x 3,5 mm groot. In deep-sleep verbruikt deze processor slechts 25 µA, in normale modus zonder wifi ongeveer 30 mA, en met wifi actief 80 tot 100 mA. Voor de voeding kies ik een 500mAh LiPo-accu. Standaard is het board uitgerust met een TP4054 charge controller en een laadstroom van maximaal 50mA. Het laadproces start automatisch zodra de USB-C wordt aangesloten. Handig is dat het board tegelijk kan laden en gebruikt kan worden (“charge while powered”). Voor de interactie gebruik ik drie momentschakelaars in rood (slecht), geel (neutraal) en groen (goed). Voor de audiofeedback komt er een buzzer die via PWM aangestuurd kan worden voor verschillende tonen. Tot slot voeg ik een tuimelschakelaar toe om eenvoudig de voeding van het board en de LiPo-accu te regelen.
Stapsgewijze programmeren
Voor het programmeren bouw ik de functionaliteit stap voor stap op. Zo kan ik gecontroleerd functies toevoegen en altijd terugvallen op een eerdere, werkende versie. Deze aanpak bevalt mij goed en gebruik ik vrijwel altijd. Het is belangrijk om eerst de juiste pinlayout voor het specifieke board te bepalen. De XIAO-modules van Seeed Studio zijn goed gedocumenteerd, maar lijken sterk op elkaar. Binnen de Arduino IDE is het board vrijwel altijd te vinden en standaard beschikbaar. Wel is het belangrijk de juiste GPIO-poorten te gebruiken en te controleren of bepaalde poorten niet al een vaste functie hebben.
Pin- en knopindeling
Voor deze smiley kiosk implementeer ik drie knoppen op GPIO1, GPIO2 en GPIO3. Een vierde knop reserveer ik op GPIO4 voor een eventuele hardwarematige reset. Voor de audiofeedback gebruik ik GPIO43. Om een betrouwbare registratie van een knopindruk te waarborgen, gebruik ik INPUT_PULLUPs en debounce-logica gebaseerd op de neergaande flank. Zo voorkom ik dat knoppen gaan ‘denderen’ en meervoudig worden geregistreerd bij één indruk. Dit treedt op wanneer een knop wordt ingedrukt en binnen enkele milliseconden meerdere keren als indruk wordt gezien. Mijn plan is om stap voor stap de volgende functionaliteiten te programmeren:
- Knoppeninvoer lezen en verwerken
- Tellers voor feedback bijhouden
- Resultaten opslaan in flash
- Webserver met ASCII-grafiek
- Resetfunctie hardware en web
- Buzzer feedback bij acties
- Entrylog met tijdstempel tonenTellers en variabelen
Voor de tellers reserveer ik enkele variabelen die bijhouden hoe vaak de betreffende smiley is ingedrukt. Met deze variabelen kan ik eenvoudig totalen en gemiddelden berekenen. Ze zijn ook nodig om een realtime grafiek te tonen van de verzamelde feedback.
Webfunctionaliteit en hotspot
Voor de webfunctionaliteit maak ik gebruik van de WebServer.h- en DNSServer.h-library. Ik kies ervoor om een hotspot met captive portal te creëren. Hierdoor kunnen beheerders eenvoudig inloggen op de statistiekomgeving van de smiley kiosk. Zodra je verbinding maakt met het hotspotnetwerk, word je automatisch doorgestuurd naar de statistiekenpagina en kun je real-time de tevredenheid volgen. Om het inlogproces extra eenvoudig te maken, heb ik een wifi-qr-code gemaakt waarmee je met je telefoon direct verbindt met de webserver (192.168.4.1) van de kiosk, eventueel met wachtwoord.
Statistieken en ASCII-staafdiagram
In de beheerinterface krijgt de beheerder een real-time staafgrafiek te zien van de verzamelde antwoorden. In één oogopslag is duidelijk wat de tussenstand is. Het totaal aantal respondenten wordt getoond, samen met de verdeling over goed, neutraal en slecht. Ook zie je automatisch het percentage per categorie.
Entrylog en tijdsanalyse
Om de dynamiek van de antwoorden te analyseren, wordt per respondent bijgehouden wat het gekozen antwoord is en het tijdstip waarop dit is gegeven. Zo kun je mogelijk verbanden leggen tussen het tijdstip van feedback en het type activiteit. De feedback is volledig anoniem, zodat beïnvloeding van andere deelnemers wordt voorkomen. De laatste 100 (configureerbaar tot 800) antwoorden worden opgeslagen, zodat na stroomuitval of een lege accu de data gewoon behouden blijft.
Dataopslag en veiligheid
De smiley kiosk is te resetten vanuit de webinterface, zodat onbevoegde gebruikers of nieuwsgierige bezoekers de data niet zomaar wissen. Elke entry wordt direct opgeslagen in het interne flashgeheugen met de preferences.h-library, een compacte manier om data permanent vast te leggen op de ESP32S3. Iedere entry neemt ongeveer 15 bytes in beslag; met circa 12kB aan opslag is er ruimte voor zo’n 800 antwoorden.
HTML en presentatie
Om de beheerder direct inzicht te geven vanuit de captive portal, wordt de webpagina realtime opgebouwd. Ik heb een functie gemaakt die een ASCII-achtige staafdiagram met Unicode blokjes toont. Daarmee is de verdeling meteen zichtbaar, zonder grafische libraries of afbeeldingen. Dankzij de ‘<pre>’-tag blijft de uitlijning netjes en retro, en zijn de statistieken op ieder apparaat goed leesbaar. De webinterface gebruikt een POST-actie voor de resetknop, wat veiliger is dan GET. In het tabeloverzicht staan de nieuwste antwoorden bovenaan, elk in hun eigen kleur. De pagina wordt automatisch elke seconde ververst, zodat je altijd de actuele stand ziet.
- Snel klanttevredenheid meten on-site
- Gebruikt in winkels of balies
- Geschikt voor scholen en events
- Feedback in kantines of bedrijven
- Kan anoniem gebruik stimuleren
- Makkelijk aanpasbaar voor enquêtes
- Realtime resultaten voor managersSamenvatting prototype
Hiermee is het prototype – proof of concept – van de smiley kiosk compleet. Voor de demo is hij compact uitgevoerd met een afmeting van 70x40x30 mm, voorzien van accu, knoppen, visuele smileys en een wifi-qr-code voor directe toegang tot de statistiekeninterface. Aangezien het een prototype – proof of concept – betreft, zijn uitvoeringsvormen van knoppen, behuizing, geheugenomvang en accuduur uiteraard naar wens aanpasbaar.