Met de Kerst krijgen we veel familie op bezoek. En hoewel ik er eigenlijk vanuit ga dat iedereen al lang unlimited 5G op zijn/haar telefoon heeft, dacht ik “laat ik er even voor zorgen dat mensen gemakkelijk op de wifi kunnen”. Ik had kunnen denken “doe maar lekker offline, het is Kerst.” maar dat is niet relevant voor deze blogpost. Het gaat er om dat ik graag een QR-code wilde maken voor het gastnetwerk hier thuis (ik heb een normaal netwerk, een gastnetwerk en een IOT netwerk voor de devices die geen 5Ghz netwerk aankunnen). Ik wist dat dat kon, ik wilde niet alleen een gewone QR-code, maar zo eentje met een afbeelding er in.
En ik kon me gewoon helemaal niet meer herinneren waar ik dat online het beste kon doen. Natuurlijk, Google helpt dan wel. Zou je denken. Het probleem is dat elke zichzelf respecterende website tegenwoordig geld wil verdienen. Dus kwam ik op een paar plekken uit waar ofwel de eisen voor het formaat van de afbeelding blijkbaar dusdanig waren dat het niet lukte, het toevoegen van een afbeelding of een extra tekst tot de premium features behoorde (en ze dus wilden dat ik een betaald account aanmaakte) of dat het een site was die wel een url accepteerde, maar niet de structuur die een wifi-QR zou moeten hebben.
Na 10 minuten had ik er genoeg van en ging naar AI-studio:
Maak een app bestaande uit 1 html pagina (CSS en Javascript toegestaan) waarmee ik een QR code voor een wifi netwerk kan aanmaken (ik vul SSID, en wachtwoord in, verificatiemethode = altijd WPA) en waarbij ik een afbeelding kan uploaden voor de afbeelding die in de QR code wordt gemaakt. Volledig lokaal, netjes met moderne opmaak.
Het resultaat was snel en werkte meteen. Ik kreeg er uitgebreide uitleg bij:
Hoe het werkt:
WiFi Formaat: De app genereert een string volgens de officiële standaard: WIFI:S:Naam;T:WPA;P:Wachtwoord;;. Dit wordt door zowel iPhone als Android herkend.
QR Library: Ik gebruik qr-code-styling. Dit is een moderne bibliotheek die SVG-rendering gebruikt. Het voordeel is dat de QR-code er veel strakker uitziet (met afgeronde hoekjes) dan de oude blokkerige versies.
Logo: Wanneer je een afbeelding uploadt, wordt deze via een FileReader omgezet naar een Base64 string. Deze wordt in het midden van de QR-code geplaatst. De “Error Correction” staat op ‘H’ (High), zodat de code nog steeds scanbaar is, zelfs als het logo een deel van de data overlapt.
Lokaal: Er wordt geen data naar een server gestuurd. Alles gebeurt in het geheugen van je browser.
Design: De styling is gedaan met Tailwind CSS voor een ‘clean’ en modern uiterlijk dat ook op mobiel goed werkt.
Instructies:
Kopieer de bovenstaande code.
Sla het op als index.html.
Open het bestand in je favoriete browser.
Vul de gegevens in, kies eventueel een logo (bijv. een klein PNG-icoontje) en klik op Genereer.
Ik werd nog een beetje gierig en wilde bij nader inzien meer functionaliteit:
Voeg een "oogje" toe bij het wachtwoordveld waarmee tijdelijk het wachtwoord veld leesbaar gemaakt kan worden om te checken of die juist is.
Voeg ook een tekstveld toe met optioneel een boodschap voor onder de QR-code. Standaard is dit "Scan voor wifi-toegang."
Ook dat was geen probleem, de functionaliteit werd toegevoegd en ik had wat ik wilde. In de vorm van een maatwerk ‘app’, in minder tijd dan dat het me gekost had om een alternatief online te vinden. Los dus van de vraag of ik überhaupt een QR-code voor het gastnetwerk tijdens de Kerst moet maken, is er toch gewoon iets ‘mis’ aan het gaan als het huidige aanbod ‘slechter’ (minder aansluitend bij mijn behoefte) is dan het resultaat dat ik krijg met een stukje vibecoding in AI-Studio?
