Zo breid je met microcontrollers je computer uit met extra functies
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.
In dit artikel bekijken we wat er nodig is voor de communicatie tussen de computer en de microcontroller. Ook schrijven we de software daarvoor, zowel aan de kant van de microcontroller als aan de kant van je computer. Daarvoor nemen we de volgende stappen:
- CircuitPython installeren
- De code-editor Mu installeren
- Protocol vastleggen
- Eigen webinterface maken
- Temperatuursensor installeren en data aan pc laten doorgeven
Lees ook: Tien microcontroller-bordjes vergeleken
Code downloaden In deze workshop worden lange voorbeelden van stukken code gegeven. Omdat overtikken van code erg foutgevoelig is, kun je die code beter downloaden en daarna bekijken of kopiëren. Zie het bestand code-mcusb.txt voor de stukken code die in dit artikel genoemd worden.
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.
Uitbreidingsmogelijkheden Voor de eenvoud hebben we ons voorbeeld maar vier opdrachten laten herkennen. Maar op dezelfde manier kun je een complexer protocol definiëren. Voeg bijvoorbeeld een tweede teken aan de opdrachten toe om een volgnummer voor een led te kiezen. Op deze manier kun je meerdere leds aansturen. Of definieer nog extra tekens in de opdracht om de kleur van een led in te stellen. Zo kun je zelfs meerdere RGB-kleurenleds aansturen. Probeer zelf de code in dit artikel eens uit te breiden, zowel aan de kant van de microcontroller als in de webinterface op de computer.
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.
En wat te denken van een bewegingssensor?
Lees ook: Zo maak je je eigen bewegingssensor10 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.
Andere firmware en pc-software De kant van de microcontroller hebben we in dit artikel met CircuitPython uitgewerkt. Maar je kunt dit nog met allerlei andere ontwikkelomgevingen doen, bijvoorbeeld met Arduino-code. Zo is de Digispark een handig microcontrollerbordje dat via de Arduino-bibliotheek DigiCDC met je computer kan communiceren. Nu is dit bordje niet meer te koop bij de fabrikant zelf, maar op AliExpress vind je nog altijd Chinese klonen.
Helaas heeft het bordje geen ondersteunde drivers voor nieuwe Windows-versies. Gelukkig zijn er voor de software op de computer ook talloze alternatieven voor Web Serial in de browser. Zo kun je in Python een programma schrijven dat via de bibliotheek pySerial met de seriële poort communiceert. Zolang je ervoor zorgt dat beide kanten hetzelfde protocol gebruiken, zijn de verschillende alternatieven uitwisselbaar.
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.
