Wil je je computer uitbreiden met zelfgemaakte hardware zoals extra waarschuwingsledjes of sensoren, dan kan dat eenvoudig met een microcontroller. Die sluit je via usb aan, waarna je de software op je computer met de microcontroller laat communiceren om de leds in en uit te schakelen of de sensordata uit te lezen. In dit artikel tonen we je hoe dat gaat en bouwen we een webinterface voor de seriële communicatie.

Op microcontrollerbordjes zoals een Arduino, Raspberry Pi Pico of ESP32 kun je allerlei leds, knoppen en sensoren aansluiten. Veel van die bordjes hebben een ingebouwde wifi-chip, waardoor je ze op afstand kunt aansturen. Maar soms is wifi niet mogelijk, te lastig of gewoon helemaal niet nodig.

Gelukkig zijn de meeste microcontrollerbordjes uitgerust met een usb-aansluiting en die kunnen we ook gebruiken om vanaf je computer opdrachten naar de microcontroller te sturen of informatie zoals sensordata terug te krijgen.

01 USB CDC

Voor de communicatie tussen microcontroller en computer gebruiken we een seriële interface via USB CDC. Onder Windows is het apparaat dan zichtbaar als een COM-poort, onder Linux als een apparaat zoals /dev/ttyACM0 en onder macOS /dev/cu.usbmodem<ennogiets>. Software op je computer kan dan met de microcontroller communiceren via deze COM-poort of het juiste apparaatbestand.

In de microcontroller moeten we dus een seriële verbinding via USB CDC opzetten. In dit artikel doen we dat met CircuitPython, dat honderden microcontrollerbordjes ondersteunt. Kies wel een bordje met ondersteuning voor USB CDC.

Wij hebben dit met succes getest met de Raspberry Pi Pico (W), Arduino Nano RP2040 Connect, Seeed Studio XIAO SAMD21 en Seeed Studio XIAO nRF52840. In de rest van dit artikel gaan we uit van een Raspberry Pi Pico. Voor de andere bordjes moet je de CircuitPython-code mogelijk lichtjes aanpassen of de firmware op een andere manier installeren.

Zoek in de documentatie van CircuitPython op of je microcontrollerbordje USB CDC ondersteunt.

02 CircuitPython installeren

Download de CircuitPython-firmware voor de Raspberry Pi Pico. Op het moment van schrijven was dat versie 8.2.2. Er is een Nederlandse versie beschikbaar, maar de taal maakt niet zoveel uit. Je ziet dat op de downloadpagina in de lijst met ingebouwde modules usb_cdc staat. Dat bevestigt dat we op dit bordje USB CDC kunnen gebruiken.

Het gedownloade firmwarebestand heeft de extensie .uf2. Houd op de Raspberry Pi Pico de witte knop BOOTSEL ingedrukt, sluit het bordje via een micro-usb-kabel op je computer aan en laat de knop dan los. De interne opslag van het bordje verschijnt nu als een usb-schijf met de naam RPI-RP2 op je computer. Sleep dan het .uf2-bestand naar die schijf. Na het kopiëren verschijnt de schijf onder een andere naam: CIRCUITPY.

Download het firmwarebestand van CircuitPython voor de Raspberry Pi Pico.

03 Mu

De eenvoudigste manier om je bordje in CircuitPython te programmeren is met de code-editor Mu, die zowel voor Windows als voor macOS en Linux bestaat. Start Mu op, klik links bovenaan op Mode en kies CircuitPython uit de lijst. Klik dan op OK. Normaal wordt nu je aangesloten bordje herkend met onderaan de boodschap Detected new CircuitPython device.

In het grote tekstveld kun je nu je code typen die je op je bordje wilt uitvoeren. Om te testen of de hardware werkt, typ je daarin de volgende code die de ingebouwde led doet knipperen:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Klik bovenaan op Save, selecteer code.py en bevestig dat je dit bestand wilt overschrijven. Daarna zie je de ingebouwde led van de Raspberry Pi Pico knipperen. Hiermee weet je dat het bordje werkt.

In de code-editor Mu kunnen we CircuitPython-code schrijven en op de Raspberry Pi Pico installeren.

04 Afspraken maken

Voordat we nu de Pico gaan programmeren, moeten we een protocol vastleggen voor de communicatie tussen computer en microcontroller. Zo’n protocol is eigenlijk een lijst van afspraken. Welke communicatie verwacht de Pico en wat doet de microcontroller dan? Voor ons voorbeeld houden we het protocol eenvoudig. Elke opdracht die we aan de microcontroller geven, bestaat uit één teken dat bepaalt wat er met de ingebouwde led moet gebeuren:

0 - Schakel led uit

1 - Schakel led aan

2 - Schakel led om

3 - Knipper de led kort

Met de opdracht 2 schakelt de microcontroller de led dus aan als hij uit is en uit als hij aan is. Met opdracht 3 doet de microcontroller hetzelfde, maar schakelt hij de led na een korte pauze terug naar de originele toestand.

We verwachten ook dat de microcontroller na het uitvoeren van elke opdracht de toestand van de led daarna communiceert naar de computer:

0 - Led is uit

1 - Led is aan

Tot slot is het nog belangrijk om te weten dat we hier spreken over tekens (letters of in dit geval cijfers), maar dat seriële communicatie met bytes werkt. Zowel aan de kant van de computer als aan de kant van de microcontroller moeten de juiste tekens dus nog worden omgezet naar de overeenkomende bytes.

05 Wachten op opdrachten

Nu we weten aan welke afspraken de microcontroller zich moet houden, kunnen we de CircuitPython-code hiervoor programmeren. Maak in Mu eerst een nieuw bestand aan en plaats daarin de volgende code om dataoverdracht via USB CDC mogelijk te maken:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Sla dit bestand op onder de naam boot.py. Dit bestand wordt door CircuitPython vlak na het opstarten van de microcontroller uitgevoerd.

Vervang dan de huidige code in code.py door de volgende:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We controleren dus in een oneindige lus (while True) of er invoer op de seriële interface is van de computer. Zo ja, dan lezen we met serial.read(1) één byte in. We vergelijken dit dan met de waardes uit ons protocol. Omdat het om bytes gaat, moeten we de tekens naar bytes omzetten. Daarom vergelijken we bijvoorbeeld met b"0". We stellen dan telkens de juiste waarde van de led in. Met led.value = not led.value schakelen we de led om. En uiteindelijk schrijven we met serial.write de waarde van de led naar de seriële interface, waar de computer die kan uitlezen. Sla dit bestand op onder de naam code.py. De Pico wacht nu op opdrachten.

06 Opdrachten geven

Als je goed hebt opgelet, heb je gezien dat bij het aansluiten van je Pico er een COM-poort in Windows is verschenen en bij het programma uit paragraaf 5 zelfs twee. Dat kun je ook zien in het Apparaatbeheer van Windows. De COM-poort met het hoogste volgnummer is de seriële interface die we nodig hebben om opdrachten aan de Pico te geven.

Hoe geven we nu die opdrachten? Een eenvoudige manier is door in de browser Chrome of Edge de website www.serialterminal.com te bezoeken. Die maakt gebruik van de standaard Web Serial. Klik linksboven op Connect. Je browser toont dan een lijst met seriële interfaces. Selecteer de juiste uit de lijst (er staat de naam Pico bij) en klik dan op Verbinding maken.

Vink de opties send with /r, send with /n en echo uit. Voer dan in het tekstveld de opdrachten uit paragraaf 4 in. Typ bijvoorbeeld 1 in en klik rechts op Send. De led op je Pico gaat nu aan, omdat de code uit paragraaf 5 het teken 1 ziet en daarop reageert. Typ dan bijvoorbeeld 2 in. De led schakelt nu om en gaat dus uit. Je ziet in het grote tekstveld onderaan ook de uitvoer van de microcontroller: 1 als de led aan is en 0 als die uit is.

Op de website www.serialterminal.com kun je de seriële communicatie testen.

07 Webinterface

Nu we weten dat de seriële communicatie werkt, kunnen we een handigere interface maken om de led aan te sturen. Dat kan bijvoorbeeld met dezelfde Web Serial-technologie van de website www.serialterminal.com. We maken daarvoor eerst een eenvoudige html-pagina aan:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We maken dus een aantal knoppen: Connect om te verbinden; OFF, ON en TOGGLE om de led uit, aan en om te schakelen; en tot slot FLASH om de led te laten knipperen. Tot slot tonen we ook een icoontje van een gloeilamp (in de vorm van een emoji) voor de status van de lamp.

Met deze webinterface sturen we de led op de Raspberry Pi Pico aan.

08 JavaScript-code

In de webpagina hebben we het bestand usb-led.js als script ingeladen. Hierin komt dan de code om via de Web Serial-API opdrachten naar de aangesloten microcontroller te sturen:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

De functie readState leest een byte uit de seriële interface en toont de gloeilamp als dit het teken 1 voorstelt en verbergt de gloeilamp als dit het teken 0 voorstelt. De functie writeCommand schrijft een opdracht naar de seriële interface en leest dan de toestand van de led.

De code erna wordt uitgevoerd nadat de DOM (Document Object Model) volledig is geladen. Dan koppelt die ‘event listeners’ aan alle knoppen. Klik je op Connect, dan wordt de poort gekozen via de Web Serial-API. Een klik op de andere knoppen roept de functie writeCommand aan met de overeenkomende opdracht.

Als je nu de html-pagina in Chrome opent en je Pico is aangesloten, klik dan op Connect. Verbind met de juiste poort en probeer de verschillende knoppen uit om de led van de Pico aan te sturen.

Geef de webpagina toegang tot je microcontroller via Web Serial.

09 Temperatuursensor

Op dezelfde manier kunnen we een temperatuursensor op de Raspberry Pi Pico aansluiten en die via usb zijn sensorwaardes aan de computer laten doorgeven. Voor de temperatuursensor kiezen we de populaire BME280 van Bosch in de uitvoering van Adafruit. Er bestaan ook goedkopere versies van Chinese fabrikanten. Controleer dan dat het om een I²C-versie gaat die op 3,3 V werkt.

Verwijder de usb-kabel van de Pico en prik het bordje op een breadboard. Sluit SDA (bij Adafruit SDI) aan op pin 1 (GP0) van de Pico; SCL (bij Adafruit SCK) op pin 2 (GP1); VCC (bij Adafruit Vin) op 3,3 V; en GND op GND. Twijfel je over de juiste pinnen bij de Raspberry Pi Pico? Bekijk ze dan op https://pico.pinout.xyz. Sluit daarna de Pico weer aan via usb.

Download nu de bundel met Adafruit-bibliotheken voor CircuitPython 8.x. Pak het zip-bestand uit, ga daarin naar de directory lib en kopieer de mappen adafruit_bme280 en adafruit_bus_device naar de directory lib van je CIRCUITPY-station. Hiermee installeer je de CircuitPython-driver voor de BME280.

Sluit de BME280-temperatuursensor op de Raspberry Pi Pico aan.

10 Metingen doorsturen

Verander dan in Mu Editor de code in code.py in de onderstaande code, die continu de temperatuur en luchtvochtigheid van de sensor uitleest en die via de seriële interface doorstuurt:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Eerst zetten we de I²C-bus op, waarbij we GPIO-pin 1 (GP1) als SCL definiëren en GPIO-pin 0 (GP0) als SDA. Daarna initialiseren we de driver voor de Adafruit BME280 en vragen we de dataverbinding voor de seriële interface op. Tot slot starten we in een oneindige lus het uitlezen van de temperatuur, ronden we die af op één cijfer na de komma en schrijven die naar de seriële interface, met telkens een seconde pauze tussen twee opeenvolgende metingen. Als je dit opslaat in code.py en dan op www.serialterminal.com in Chrome met je Pico verbindt, zie je de temperatuurmetingen over je scherm rollen. Dankzij de aanduiding "\n" (een newline) komt elke meting op een nieuwe regel.

11 Webinterface

Hoe tonen we die sensorwaardes nu in een webinterface? Een eenvoudige html-pagina zou er zo uitzien:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Deze bevat alleen een knop om de seriële verbinding op te zetten en een span-element dat de temperatuur toont. Het bijbehorende JavaScript-bestand usb-bme280.js is ook eenvoudig:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We wachten hier dus tot de DOM is geladen en voegen dan een ‘event listener’ toe aan de verbindingsknop. Zodra je daarop klikt en de seriële verbinding is opgezet, blijft de code continu een tekststroom inlezen. Elke keer dat er een regel tekst binnenkomt, wordt die toegekend aan het span-element met de ID temperature. En zo wordt de temperatuur continu bijgewerkt op de webpagina.

Uiteraard kun je dit nog verder uitwerken. Je kunt bijvoorbeeld ook de luchtvochtigheid van de sensor uitlezen en in een ander blokje tekst tonen op de webpagina. En met een stylesheet is de lay-out natuurlijk veel mooier te maken. Dit laten we allemaal als oefeningen over aan jou.

De webpagina wordt continu bijgewerkt met de temperatuur van de sensor.

O nee! Heb je net de vaatwasser met veel pijn en moeite ingeruimd, blijkt dat het vaatwasmiddel op is. Een blik op je horloge vertelt je dat de supermarkt ook net dicht is. Net nu je morgen een feestje hebt en de schone vaat dus meer dan nodig is! Geen zorgen, je hoeft niet alles eruit te halen en met de hand af te wassen. Er zijn alternatieven die jouw vaat net zo blinkend schoonmaken als vaatwasmiddel.

Afwasmiddel

Heb je nog wel een fles afwasmiddel op het aanrecht staan? Doe een drupje (of een paar druppels) in het doseerbakje van de vaatwasser. Opgepast: gebruik absoluut niet te veel, anders heb je binnen de kortste keren een schuimparty in de keuken. Te veel afwasmiddel zorgt voor een enorme hoeveelheid schuim dat uit de vaatwasmachine lekt. Met slechts een paar druppels tot maximaal een theelepeltje krijg je de vaat weer stralend schoon. Doe het niet te vaak; het is slechts een tijdelijke oplossing. Het middel kan op lange termijn schade aanbrengen aan je vaatwasser.

Baking soda en azijn

Een andere manier om je vuile vaat toch schoon te krijgen, is door baking soda en azijn te gebruiken. Beide middeltjes hebben de meeste mensen wel in huis. Je hebt een half kopje bakpoeder nodig. Vul hiermee het doseerbakje. Het reservoir voor glansspoelmiddel vul je met azijn. Deze middelen breken het vet af en verwijderen viezigheid. De azijn zorgt bovendien voor een mooie glans van je vaat.

©africa-studio.com

Boorzuurpoeder (Borax)

We schreven al eerder een artikel wat je allemaal met boorzuurpoeder kunt doen. Wist je dat je het ook als vaatwasmiddel kunt gebruiken? Het mineraal breekt niet alleen het vuil af, maar maakt het kalkrijke water ook nog eens zachter. Gooi een kwart kopje boorzuurpoeder in het doseerbakje, samen met een kwart kopje bakpoeder. Vaatwasser aan en de middeltjes doen de rest.

Witte azijn

Witte azijn ontkalkt en maakt schoon. Daarom kun je het ook gebruiken als vervanger voor je vaatwastabletten of vaatwaspoeder. Je doet één kopje in het doseerbakje en zet de vaatwasser op het gewone programma aan. De truc met dit middel is wel dat de vaat niet zwaar vervuild is. Witte azijn maakt namelijk wel schoon, maar met hardnekkige vlekken heb je sterker geschut nodig. Baking soda bijvoorbeeld.

©Sabrina

Zelf vaatwasmiddel maken

Überhaupt geen zin om nieuwe vaatwastabletten in de supermarkt te kopen? Maak dan zelf vaatwastabletten of -poeder. De vaatwastabletten maak je door een kwart kopje zout, één kopje bakpoeder en maximaal twee eetlepels citroenzuur te mengen. Doe er nog een kwart kopje water bij en meng goed. Doe het mengsel in ijsblokvormpjes en laat het een hele dag en nacht drogen. Daarna is het middel klaar voor gebruik!

Of maak zelf vaatwaspoeder door een kopje baking soda en een kopje citroenzuur te mixen. Daarna bewaar je het mengsel in een luchtdichte weckpot, buiten bereik van kinderen. Voor een schone vaat heb je maar een paar eetlepels nodig.

Wie regelmatig reist of naar zijn werk pendelt, vertrouwt waarschijnlijk op Google Maps. Niet voor niets hebben veel mensen het navigatiesysteem van hun auto verruild voor deze gratis app. De app beschikt over een set tools om je trip vlot te laten verlopen. Zo kun je bijvoorbeeld heel eenvoudig de verkeersdrukte volgen.

De laag Verkeer

Open Google Maps op je smartphone en geef het vertrekpunt en de bestemming in. Daarna tik je onderaan op Route. Boven de kaart kies je de manier hoe je je verplaatst: auto, tram, metro, te voet of per fiets. Onderaan de kaart lees je alvast de afstand en de reistijd. Tik daarna op het pictogram Lagen in de rechterbovenhoek van het scherm. In de groep Kaartgegevens selecteer je Verkeer. Hierdoor wordt de verkeerslaag over de Google Maps-kaart gelegd. Verlaat het gedeelte Lagen door op het kruisje in de rechterbovenhoek te tikken.

Op de kaart worden de wegen ingekleurd op basis van de actuele verkeersdichtheid. Groen betekent dat je op een normaal tempo kunt rijden. Oranje staat voor langzaam rijdend verkeer en rood betekent dat het verkeer stilstaat. Niet tevreden met de route die Google Maps heeft geselecteerd? Bekijk dan alle alternatieve routes die als grijze lijnen op het scherm worden weergegeven. Tik op een van de opties om een ​​alternatieve route te selecteren.

De verkeersdrukte wordt met kleuren weergegeven.

Live verkeer

Op de computer open je de webbrowser en surf je naar Google Maps. Weer zoek je de bestemming, zodat Maps de route tevoorschijn kan halen. Daarna beweeg je de muisaanwijzer over het pictogram Lagen linksonder. Klik op de laag met het label Verkeer. Opnieuw zal Google de wegen inkleuren volgens verkeersdrukte. Je kunt de weergave Live verkeer in- en uitschakelen door op de schakelaar in het onderste deel van het scherm te klikken.

Op de computer kun je de weergave Live verkeer in- en uitschakelen.

Meldingen ontvangen

Het is mogelijk om van Google Maps meldingen te ontvangen wanneer er drukte ontstaat in de buurt van een locatie die je in Maps hebt opgeslagen. Hiervoor tik je rechtsboven op het pictogram van je Google-account. Daarna kies je Instellingen en dan Meldingen. Op de iPhone controleer je of het schuifje bij Plaatsen en evenementen aanstaat. Op een Android-apparaat tik je bij Navigeren / Verkeer bij nabije evenementen op Aan of Alleen in de app.

Wil je verkeersupdates ontvangen over plaatsen die je hebt opgeslagen?