ID.nl logo
Maak een smarthome-dashboard met UIFlow
Huis

Maak een smarthome-dashboard met UIFlow

M5Stack ontwikkelt ESP32-microcontrollerbordjes met behuizing en scherm die je zo in je woonkamer zou kunnen zetten. Het zijn de ideale producten om een dashboard voor je smarthome van te maken. Met UIFlow is dat ook vrij eenvoudig te programmeren, op een grafische manier. Zo hoef je geen kaas gegeten te hebben van programmeercode.

UIFlow is een grafische ontwikkelomgeving voor de producten van M5Stack, ESP32-microcontrollerbordjes met behuizing en scherm. Met UIFlow kun je op een visuele manier een programma opbouwen door blokjes te verslepen, zonder dat je een letter programmeercode hoeft te schrijven. Ook de grafische interface op het scherm kun je zo eenvoudig met drag-and-drop instellen. Op deze manier maken we in deze masterclass een dashboard voor je smarthome.

Hardwarekeuze

UIFlow ondersteunt alleen de hardware van M5Stack, maar gen willekeurig ESP32-microcontrollerbordjes. Het voordeel is dat de drivers van hun eigen producten allemaal ingebouwd zijn. Voor onze toepassing van een smarthome-dashboard kies je een van de M5Stack-producten met ingebouwd scherm.

Ga je voor een klassiek tft-scherm, dan kom je uit bij de M5Stack Core2 of de voorganger M5Stack Core. De Core2 heeft een aanraakscherm, zodat je je slimme producten ook eenvoudig kunt bedienen via het scherm. De Core heeft geen aanraakscherm, maar wel drie fysieke knoppen onder het scherm, waarmee je ook acties in je smarthome kunt aansturen.

Gaat je voorkeur uit naar een e-ink-scherm, dan heeft M5Stack de Core Ink (1,54 inch) en de M5Paper (4,7 inch). Dit laatste product heeft een aanraakscherm met een hoge resolutie van 960 bij 540 pixels, terwijl de Core Ink aan te sturen is via een knop aan de zijkant. Beide e-ink-apparaten zijn voorzien van een batterij en een magneet. Daardoor kun je ze eenvoudig tegen je koelkast of een ander metalen voorwerp bevestigen.

De M5Stack Core Ink is het ideale apparaatje voor een smarthome-dashboard.

UIFlow-firmware installeren

We gaan aan de slag met de Core Ink om de binnen- en buitentemperatuur van ons huis op het e-paperscherm te tonen. Die lezen we via MQTT in. Onder Windows en macOS moet je eerst nog een driver downloaden voor de USB-naar-UART-chip van het apparaatje. Afhankelijk van het model is dat de CP210x of de CH910x. De drivers zijn ook in de downloadsectie van de website van M5Stack te vinden. De Linux-kernel heeft die drivers al ingebouwd.

Na de installatie van de driver (voor de Core Ink is dat de CP2104) heb je ook nog de software nodig om de UIFlow-firmware op je apparaatje te installeren. Dat is M5Burner, en ook deze software vind je op de downloadpagina van M5Stack, zowel voor Windows als macOS en Linux. In M5Burner kies je links je apparaat en rechts klik je bij UIFlow op Download.

Verbind nu je Core Ink via de usb-kabel met je computer en klik op Burn om de firmware naar je apparaat te schrijven. In het volgende venster vul je de SSID en het wachtwoord in van het wifi-netwerk waarmee je het apparaat wilt verbinden, en klik je op Next. Daarna kies je de juiste seriële poort en snelheid, en klik je op Start.

Download de seriële drivers en M5Burner van de website van M5Stack.

UIFlow verkennen

Wanneer de firmware op je apparaatje staat, verbindt het met je wifi-netwerk en toont het een API-sleutel. Bezoek nu de website van UIFlow, vul daar de API-sleutel van je apparaat in en klik op het model Core Ink. Bevestig met OK. Daarna krijg je links een voorstelling van je Core Ink te zien, in het midden een balk met blokjes in allerlei categorieën, en rechts je ‘code’ in Blockly, die initieel alleen uit een blokje Setup bestaat.

Als eerste test kun je een tekst op het scherm van je Core Ink tonen. Sleep uit de zijbalk helemaal links een Label naar het midden van het scherm van je Core Ink. Klik in het midden op UI, op Label en dan op Label label0 show "Hello M5". Dat blokje verschijnt dan op het canvas rechts. Klik het vast onder het blokje Setup. Klik dan onder UI op Screen, vervolgens op Set screen show en klik dit vast onder het vorige blokje. Klik dan helemaal onderaan op Run. Je code wordt nu op de Core Ink uitgevoerd.

En als je op Download klikt, wordt de code definitief als firmware op het bordje geschreven, zodat die na een herstart ook nog blijft draaien. Om je code dan te laten starten in plaats van de UIFlow-programmeermodus, moet je eerst in M5Burner bij UIFlow op Configurate klikken, je poort kiezen en dan bij Start Mode voor App Mode kiezen en op Save klikken. Wil je daarna je apparaatje weer programmeren, zet dit dan terug op Internet Mode.

Toon een tekst op het scherm met ‘programmeercode’ die je gewoon als LEGO-blokjes bij elkaar klikt.

Verbinden met MQTT

Om van de Core Ink een dashboard voor je smarthome te maken, hebben we een manier nodig om aan de data van bijvoorbeeld sensoren te komen. Dat doen we met MQTT. We gaan er hier vanuit dat je al een MQTT-broker zoals Mosquitto hebt draaien op een Raspberry Pi, bijvoorbeeld als add-on in Home Assistant. Houd de gegevens van je MQTT-broker bij de hand.

Klik in UIFlow op Advanced / MQTT en dan op het blok dat begint met set client id. Vul een unieke client ID in en dan de gegevens voor de server, zoals de hostname, het poortnummer, de gebruikersnaam en het wachtwoord. Verwijder het blokje van het label door erop te klikken en op Delete te drukken. Klik het MQTT-blok dan onder de Setup vast, voeg daaronder nog een blokje mqtt start toe en daaronder Set screen show. Als je deze code op je Core Ink draait, zou je in de logs van Mosquitto iets moeten zien als:

"New client connected from 192.168.0.215:58048 as Core Ink (p2, c1, k300, u'home')."

MQTT-onderwerp

We willen nu dat de Core Ink een sensorwaarde toont die binnenkomt op een specifiek MQTT-onderwerp. Dat doe je door een blokje Advanced / MQTT / mqtt subscribe toe te voegen. Dit klik je niet aan de rest van je blokjes vast, maar staat los daarvan. Vul het MQTT-onderwerp tussen de aanhalingstekens in.

Binnen dit blokje vind je de gegevens die op het gegeven MQTT-onderwerp worden ontvangen in de variabele topic_data. We gaan die waarde eerst in een variabele steken. Klik op Variables / Create variable, noem die bijvoorbeeld buitentemperatuur en klik op OK. Sleep Set buitentemperatuur to in het MQTT-blokje en plak daarachter het blokje Advanced / MQTT / get topic_data.

Temperatuur tonen

Dan rest ons nu nog om de temperatuur te tonen in een label. Omdat we met een e-ink-scherm werken mogen we het scherm niet te snel na elkaar verversen. Dat is de reden waarom we niet in het blok mqtt subscribe onmiddellijk de temperatuur op het scherm tonen, want sommige sensoren sturen elke seconde een nieuwe waarde via MQTT.

Daarom maken we een lus aan die elke minuut het label aanpast. Sleep de lus uit Event / Loop achter mqtt start en verwijder het blokje Set screen show dat er eerst stond. Voeg in de lus het blokje UI / Label / Label show toe. Vervang het blokje met de standaardtekst "Hello M5" door het blokje Variables / buitentemperatuur. Voeg dan het blokje Screen / Set screen show onder het label toe en daaronder Timer / Wait 1 s. Vervang de 1 door 60 voor een update elke minuut.

Update het scherm elke minuut met de buitentemperatuur.

Meerdere interface-elementen

We zijn begonnen met één label, maar we willen uiteraard meerdere sensorwaardes tonen. Gelukkig kun je de interface eenvoudig uitbreiden. Sleep uit de linkerzijbalk een Title, drie keer een Label en één keer een Line naar het scherm van de Core Ink. Je hebt nu vier labels: twee voor sensorwaardes en twee voor een begeleidende tekst. Met de lijn delen we het scherm op in twee vakken.

Sleep naar elke hoek van het scherm (linksboven, rechtsboven, linksonder en rechtsonder) een label. De exacte locatie pas je dadelijk aan. Klik dan op de lijn. Vul achtereenvolgens voor X1, Y1, X2 en Y2 de coördinaten 0, 110, 200 en 110 in. Dat levert een horizontale lijn op die ongeveer het midden van het scherm van 200 bij 200 pixels doorkruist. Klik op het kruisje om de eigenschappen van de lijn te verlaten.

Positioneer de lijn in het midden van het scherm.

Tekst aanpassen

Klik op elk van de labels om hun eigenschappen aan te passen. Het label linksboven geef je de tekst Buiten en lettertype DejaVuSans 18. Het label rechtsboven geef je hetzelfde lettertype. Het label linksonder geef je de tekst Binnen en ook hetzelfde lettertype. Dit lettertype ken je ook aan het label rechtsonder toe. De tekst van de labels rechtsboven en rechtsonder maakt niet uit: die gaat ons programma vervangen door de sensorwaardes. Ook bij de titel laten we de tekst door het programma aanpassen.

Laten we eerst de tekst van de titel aanpassen naar de huidige tijd. Daarvoor ga je naar Advanced / NTP en sleep je het blokje getiteld Init ntptime with host "cn.pool.ntp.org" and timezone 8 naar je canvas. Plaats het tussen Setup en de initialisatie van MQTT. Verander de host naar een server die zich dichterbij bevindt, zoals nl.pool.ntp.org, en verander de tijdzone naar 2. Sleep dan uit UI / Title het blokje Title title0 show "Title" en vervang de aanduiding "Title" door het blokje Get date format with "-" and time format with ":" uit Advanced / NTP. Sleep dan dit titelblokje binnen je lus, vóór het blokje dat je label toont.

Met een titel, labels en lijn bouw je eenvoudig je gebruikersinterface op.

JSON inlezen

Als je nu nog de buitentemperatuur op het juiste label toont en deze code op je Core Ink draait, krijg je in de titelbalk de huidige datum en tijd te zien, en in het bovenste gedeelte de buitentemperatuur. Nu kunnen we in het onderste gedeelte nog een andere temperatuur tonen als we daarvoor een extra variabele aanmaken die we in een ander mqtt-subscribe-blok een waarde geven. Dat blok kan ook complexer zijn, bijvoorbeeld als de MQTT-boodschap in JSON-formaat is (zie ook het kader ‘JSON’).

Maak daarvoor twee variabelen aan: één om de JSON-string in op te slaan (binnenjson), en één om de binnentemperatuur in op te slaan (binnentemperatuur). Voeg dan in een nieuw blok mqtt subscribe met het juiste MQTT-onderwerp het blok Variables / Set binnenjson to toe en vul het ontbrekende slot met JSON / loads json. In het ontbrekende slot van dit laatste plaats je Advanced / MQTT / get topic_data. Op deze manier lees je de MQTT-boodschap als JSON-structuur in en zet je die om naar een ‘map’ die je aan de variabele binnenjson toekent.

Waardes uit JSON halen

Voeg na dit blok dat de JSON-structuur inleest een blok Variables / set binnentemperatuur to toe en vul het ontbrekende slot met Map / get key … in map …. Na get key voeg je Text / " " toe en daar vul je de sleutel in waarin de temperatuurwaarde zit, zoals tempc. Na in map voeg je Variables / binnenjson toe.

Deze opdracht haalt dus de waarde van de sleutel tempc uit de map die de JSON-structuur bevat en kent deze toe aan de variabele met de binnentemperatuur. Als je nu in je lus ook de binnentemperatuur aan het juiste label toekent, zal je apparaatje elke minuut niet alleen de buitentemperatuur maar ook de binnentemperatuur updaten. Vergeet overigens niet je code op te slaan met het icoontje bovenaan rechts, zodat je hem later opnieuw kunt inladen en aanpassen.

Onze volledige UIFlow-code bestaat uit deze blokken.

JSON

JSON (JavaScript Object Notation) is een dataformaat dat zowel voor software als voor mensen eenvoudig is om aan te maken en te lezen. Er zijn twee basiscomponenten in JSON. De eerste is de collectie van paren naam/waarde. Zo’n JSON-code ziet er bijvoorbeeld als volgt uit: {"id":"16:2A:04:CE:19:72","rssi":-52}. Die heeft dus de naam id met waarde 16:2A:04:CE:19:72 en de naam rssi met waarde -52. De tweede basiscomponent is de lijst van waardes. Een waarde in een collectie kan immers ook een lijst van waardes zijn, die tussen rechte haken staat. Zo heeft het volgende voorbeeld de naam identifiers als waarde een lijst met drie strings: {"identifiers":["56847C365278","41CED86E4798","216B02CA25A5"]} Wil je meer weten over de exacte regels voor JSON-data, bekijk dan de website van JSON (www.json.org).

Meer blokjes

In deze masterclass hebben we maar een beperkt aantal blokjes geïntroduceerd om een eenvoudig dashboard voor je smarthome te maken. Maar UIFlow heeft nog veel meer types blokjes met allerlei mogelijkheden. Zo vind je onder Event de mogelijkheid om op het drukken op de knoppen van je Core Ink te reageren. Zo zou je een bericht naar je MQTT-broker kunnen verzenden (Advanced / MQTT / publish topic) als je de knop aan de zijkant naar boven of onder drukt.

En in de categorie Hardware krijg je dan weer toegang tot allerlei hardwarefunctionaliteit. Je spreekt hier de luidspreker aan, leds, batterij, GPIO-pinnen, UART, I²C, wifi enzovoort, afhankelijk van het model van je M5Stack-apparaat. En als je units en hats op je apparaat hebt aangesloten, vind je die functionaliteit in de gelijknamige categorieën.

De Core Ink heeft talloze hardwarematige uitbreidingsmogelijkheden die ook met UIFlow aan te sturen zijn.

Programmeren in blokjes

Onder Advanced vind je ook de mogelijkheid om een http-aanvraag te doen. Je geeft daarbij een methode, url, headers en data op en vult de blokjes in die bepalen wat er gebeurt bij het slagen of falen van de aanvraag. Je kunt ook meer low-level netwerkcommunicatie uitvoeren door een UDP-server of UDP-client op te zetten.

Ook van de echte programmeerconcepten hebben we nog niet veel getoond. Er zijn allerlei blokjes voor wiskundige berekeningen, diverse soorten lussen en vergelijkingen. Je kunt ook teksten manipuleren en met lijsten werken. En je kunt zelfs een functie in een afzonderlijk blok definiëren, die je dan in andere blokjes kunt oproepen. Blockly geeft je dus krachtige grafische programmeermogelijkheden.

MicroPython

Ook krachtig aan UIFlow is dat je Blockly-code onderliggend in MicroPython wordt omgezet, een lichtgewichtversie van de programmeertaal Python voor microcontrollers. Als je bovenaan op Python klikt, krijg je de MicroPython-code te zien die overeenkomt met je blokkenconstructie in Blockly. Klik je daarna op Blockly, dan krijg je weer je blokken te zien.

Tip: bestel ook de cursus Programmeren in Python!

Soms zul je misschien ook externe hardware willen aansturen die niet door UIFlow wordt ondersteund, of andere functionaliteit gebruiken die niet is voorzien. Dan kun je in Blockly onder Advanced / Execute een blokje Execute code toevoegen. Hierin typ je dan MicroPython-code. Die wordt dan rechtstreeks op die plaats uitgevoerd, wat je ook zult zien als je de Python-versie van je programma bekijkt.

Achter je Blockly-programma van UIFlow schuilt MicroPython-code.

Meer inzicht in het energieverbruik van je slimme huis? Bestel dan een energiemeter bij Bol.com.

▼ Volgende artikel
☔ Op de fiets door het herfstweer? Zo kies je de beste regenkleding
© yossarian6 - stock.adobe.com
Gezond leven

☔ Op de fiets door het herfstweer? Zo kies je de beste regenkleding

Kijk naar buiten en het is meteen duidelijk: de herfst is begonnen. Moet jij ook op de fiets door de regen? Je houdt het droog met goede regenkleding. Van poncho tot pak: zo valt je fietstocht niet in het water!

Dit artikel in het kort:

🌧️ Waar gebruik jij je fiets voor? (want dat maakt uit)
🌧️ Verschillende soorten regenkleding
🌧️ Waterdichtheid, ademend vermogen, gebruikt materiaal en maat
🌧️ De invloed van het seizoen
🌧️ Bekende merken

Lees ook: Je regenjas wassen én waterdicht houden: natuurlijk kan dat!

Waar gebruik jij je fiets voor?

Welke regenkleding het best bij je past, hangt af van hoe je fietst. Leg je vaak flinke afstanden af, dan telt vooral comfort. Kies dan voor ademende materialen die soepel meebewegen en niet knellen. Gebruik je je (elektrische) fiets vooral voor het woon-werkverkeer of om naar school te gaan, dan is gemak belangrijker: regenkleding die je snel kunt aantrekken en weer uitdoen is dan ideaal.

Verschillende soorten regenkleding

Daarna kun je kijken welk type regenkleding het best bij je past. Een compleet regenpak met jas en broek is handig als je vaak fietst en goed beschermd wilt zijn. Toch vinden veel mensen vooral het aantrekken van de broek onhandig. In dat geval is een losse regenjas of een regenponcho een praktischer optie. Houd er wel rekening mee dat je benen dan bij stevige regen sneller nat worden. Misschien zijn regenchaps wat voor jou: hiermee bedek je alleen de voorkant van je bovenbenen. Ook slim: alvast nadenken over regenschoenen. Wanneer je echt een hekel hebt aan natte voeten, zijn overschoenen een welkome aanvulling op je regenoutfit!

Traditioneel regenpak

De klassieker onder de regenkleding is natuurlijk het regenpak. Dat bestaat uit een jas en een broek en is meestal gemaakt van waterdicht materiaal zoals PVC of nylon. Het voordeel is dat je praktisch helemaal bedekt bent, van je nek tot je enkels. Het nadeel? Vooral goedkope regenpakken kunnen wat minder ademend zijn, waardoor je bezweet kunt aankomen.

Losse regenjas

Een losse regenjas is handig wanneer je al een waterdichte broek hebt (of natuurlijk wanneer je het niet erg vindt als je benen natregenen). Regenjassen zijn vaak stijlvoller en kunnen bij slecht weer ook als gewone jas gedragen worden (iets wat je met een traditioneel regenpak niet zo snel zult doen). Let op details: getapete naden en een hoge kraag zorgen dat je beter beschermd bent tegen de regen.

Regencape/regenponcho

Hoef je maar een kort stukje te fietsen? Dan is een regencape of - poncho ideaal: gewoon een kwestie van omslaan of over je hoofd aantrekken. Met een cape of poncho heb je veel bewegingsvrijheid, maar bij harde wind kunnen ze een beetje onhandig zijn. Er zijn ook regencapes die bijvoorbeeld elastieken aan de mouwen hebben die je aan het stuur kunt vastmaken, of een extra koord om je middel waardoor de cape minder wappert en klappert in de wind.

Regenoverschoenen

Niets zo vervelend als helemaal droog blijven dankzij een goed regenpak, maar aankomen met doorweekte schoenen. Regenoverschoenen zijn dé oplossing. Ze zijn gemaakt van waterdicht materiaal en je schuift ze makkelijk over je normale schoenen heen.

TypeVoordelenNadelen
RegenpakVolledig beschermdMinder ademend
RegenjasStijlvol, veelzijdigBenen blijven onbedekt
Cape/ponchoMakkelijk aan-/uitdoen Windgevoelig
OverschoenenDroge voetenExtra aankoop

©iuricazac - stock.adobe.com

Waar moet je op letten bij het kiezen van regenkleding?

➜ Waterdichtheid

Dit is natuurlijk het allerbelangrijkste om op te letten! Om te weten hoe goed een regenjas je droog kan houden, kijk je naar de waterkolomwaarde op het etiket. Hoe hoger de waarde, hoe beter de waterdichtheid. Een waarde van 10.000 mm of meer is uitstekend. In de tabel hieronder zie je hoe goed verschillende waterkolomwaarden je beschermen.

➜ Ademend vermogen

Je wilt droog blijven, maar je wilt ook dat je eigen zweet niet blijft hangen in je regenpak. Materialen zoals Gore-Tex zijn waterdicht maar toch ademend.

➜ Materiaal

Het materiaal is ook iets om rekening mee te houden. Polyester is licht en ademend maar minder duurzaam. PVC is zwaarder maar gaat langer mee. Kies wat bij jou en je fietsgedrag past.

➜ Prijs-kwaliteitverhouding

Goedkoop is vaak duurkoop, vooral als je dagelijks fietst. Investeer in kwalitatief goede regenkleding die jaren meegaat.

De juiste maat kiezen

Bij het kiezen van de juiste maat is het belangrijk om rekening te houden met de kleding die je eronder draagt. Pas verschillende maten en draag de kleding die je normaal tijdens het fietsen draagt. Bepaal of je genoeg bewegingsvrijheid overhoudt. Een regenjas die zó strak om je armen zit dat je niet goed meer richting kunt aangeven, dat moet je natuurlijk niet willen.

Tabel: waterdichtheid

Waterdichtheid van regenkleding wordt gemeten in millimeters waterkolom (mm). Dit geeft aan hoe hoog een kolom water kan zijn voordat deze door de stof heen dringt. Voor regenkleding voor de fiets is minimaal 5.000 tot 10.000 mm aan te raden.

Aantal mm:Waterdichtheid:Beschermt tegen:
0 - 1.500SpatwaterdichtLichte regen en spatten
1.500 - 5.000WaterdichtMatige tot zware regen
5.000 - 10.000WaterdichtBijna alle regen, wel wat vochtdoorslag mogelijk
10.000 - 20.000Hoogwaardig waterdichtZware stortbuien
20.000+Extreem waterdichtExtreme omstandigheden

➜ Zomer of winter?

Wat voor regenkleding je kiest, hangt ook af van het seizoen en van wat je allemaal op de fiets doet.

Zomer

In de zomer is lichte, ademende kleding het prettigst. Ga voor materialen die waterdicht én ventilerend zijn, zoals Gore-Tex. Dat houdt regen buiten maar laat vocht van binnen ontsnappen. Zo blijf je droog van de regen én raak je overtollige warmte kwijt tijdens het fietsen. Ideaal dus voor warme, wisselvallige dagen waarop je actief bent.

Winter

In de winter draait het juist om warmte. Een regenjas met thermische voering houdt je niet alleen droog, maar ook behaaglijk. Veel modellen hebben een uitneembare voering, zodat je dezelfde jas ook in het voor- en najaar kunt dragen. Houd wel rekening met een hogere prijs, maar daar krijg je meer comfort en veelzijdigheid voor terug.

Testen voor gebruik

Wil je zeker weten dat je droog overkomt? Het klinkt gek, maar spuit jezelf nat met een tuinslang om te testen hoe waterdicht de kleding echt is. Zo kom je niet voor verrassingen te staan.

Welk merk fietskleding moet je kiezen?

In Nederland zijn er verschillende bekende merken die regenkleding van hoge kwaliteit aanbieden. Dit zijn enkele van de meest populaire:

1: Agu

Dit Nederlandse merk is vooral bekend onder fietsers en biedt een breed scala aan regenkleding, van jassen tot broeken en overschoenen.

2: Rains

Dit Deense merk is ook populair in Nederland en staat bekend om zijn minimalistische en stijlvolle regenjassen.

3: Mac in a Sac

Dit merk biedt lichtgewicht en opvouwbare regenkleding die gemakkelijk op te bergen is.

4: Vaude

Dit Duitse merk is populair onder outdoorliefhebbers en biedt duurzame en milieuvriendelijke regenkleding.

5: Columbia

Dit Amerikaanse merk is ook in Nederland verkrijgbaar en biedt een breed scala aan regenkleding, vaak gemaakt van hun gepatenteerde Omni-Tech-materiaal dat zowel waterdicht als ademend is.

©Martin - stock.adobe.com

✅ Checklist regenkleding kopen

☐ Bepaal je behoeften: dagelijks gebruik, lange ritten, woon-werkverkeer.
☐ Kies het type regenkleding: regenpak, losse jas, cape/poncho, overschoenen.
☐ Controleer de waterdichtheid: zoek naar de waterkolomwaarde.
☐ Let op het ademend vermogen: materialen zoals Gore-Tex zijn ideaal.
☐ denk om het seizoen: licht en ademend voor de zomer, geïsoleerd voor de winter.
☐ Check de prijs-kwaliteitverhouding: goedkoop is niet altijd beter.
☐ Pas verschillende maten: houd rekening met de kleding die je eronder draagt.
☐ Test de kleding indien mogelijk: gebruik een tuinslang of lees online reviews.
☐ Lees het waslabel: sommige kledingstukken hebben speciale zorg nodig.
☐ Overweeg extra's: zoals reflecterende strips voor veiligheid.

▼ Volgende artikel
AI-agents: zo laat je slimme digitale assistenten zelfstandig taken uitvoeren
© Anwar - stock.adobe.com
Huis

AI-agents: zo laat je slimme digitale assistenten zelfstandig taken uitvoeren

We vinden het intussen al bijna normaal dat generatieve AI-modellen leuke tekeningen kunnen maken en teksten kunnen schrijven. Maar de AI-evolutie staat niet stil: er verschijnen steeds krachtigere AI-agents op die zelfstandig ook diverse taken kunnen aanpakken. Hoe je ze zelf gebruikt of bouwt, lees je in dit artikel.

In het kort

We leggen uit wat AI-agents precies zijn, hoe ze werken en waarin ze verschillen van gewone AI-assistenten. Je ziet voorbeelden van praktische agents die reizen plannen, data analyseren of documenten samenvatten. We bekijken toegankelijke platforms zoals Manus en AgentGPT, maar ook verzamelingen van kant-en-klare agents en tools om zelf een agent te bouwen. Tot slot krijg je inzicht in de voordelen, valkuilen en toekomstige ontwikkelingen van deze technologie.

Lees ook: Chat je met een mens of een AI-bot? 9 manieren om het te testen

Het begrip 'AI-agent' komt misschien wat verwarrend over omdat 'agent' vaak met ordehandhaving of spionage wordt geassocieerd, maar hier betekent het iets heel anders. In de informatica verwijst de term naar een entiteit die namens iemand anders handelt, afgeleid van het Latijnse agere (handelen). Je kunt het vergelijken met een reisagent die taken uitvoert in opdracht van zijn klant.

Een agent is hier een systeem dat autonoom handelt, vaak in opdracht van een gebruiker, om bepaalde en soms complexe taken uit te voeren. Zo zou je een robotstofzuiger een fysieke agent kunnen noemen: hij ziet obstakels, beslist waar hij rijdt en voert deze actie uit. Een e-mailbot is een virtuele agent: hij leest je mails, classificeert ze en beantwoordt bepaalde mails automatisch.

Een AI-agent gaat nog een stap verder en gebruikt kunstmatige intelligentie om beslissingen te nemen – iets wat sommige robotstofzuigers of e-mailbots inmiddels trouwens ook wel doen. Hiervoor gebruikt men ook wel de term 'agentic AI'.

©iRobot

Een robotstofzuiger kun je een fysieke agent noemen.

Werking

Voordat we een paar voorbeelden van een AI-agent bekijken en ook zelf samenstellen, leggen we kort uit hoe zo'n agent werkt. In een eerste fase neemt de agent zijn omgeving waar. Dat kan via visuele input van afbeeldingen of camera's, geluidsdata van een microfoon of spraakopname, numerieke data uit logs of sensors, of via tekst zoals prompts, mail- of chatberichten.

De agent probeert vervolgens deze ruwe invoer te interpreteren. Bij tekst bijvoorbeeld gebeurt dit doorgaans met een groot taalmodel (Large Language Model, kortweg LLM), een deep-learning-systeem dat natuurlijke taal begrijpt en genereert, zoals ChatGPT, Claude of Gemini. Dankzij zo'n LLM kan de agent doelen begrijpen en indien nodig ook opsplitsen in subtaken. Als een taak beperkt blijft tot tekstgeneratie, zoals het beantwoorden van een bericht, volstaat het LLM. Maar vaak zijn er ook externe tools nodig (zogeheten tool calling) om aanvullende of realtime gegevens op te halen of (sub)taken uit te voeren, bijvoorbeeld via API's, zoals voor weerinformatie, databases of andere AI-modellen.

Met een efficiënt geheugensysteem kan de agent tijdens het uitvoeren van taken de resultaten bijhouden, feedback verwerken en daaruit nieuwe subtaken afleiden. Hij kan deze informatie ook bewaren, wat ook bij latere interacties voor meer consistentie zorgt.

Voor- en nadelen

Geoptimaliseerde AI-agents bieden duidelijke voordelen. Ze verhogen vaak de productiviteit doordat ze repetitieve en tijdrovende taken kunnen overnemen. Daarnaast verwerken ze in korte tijd enorme hoeveelheden data en kunnen ze meerdere (sub)taken tegelijk uitvoeren. AI-agents leveren doorgaans nauwkeurige en consistente resultaten en zijn goed schaalbaar. Mits goed geïntegreerd in de workflow, kunnen ze dus flink wat tijd en kosten besparen.

Tegelijk zijn er wel wat dingen waar je op moet letten. AI-agents zijn namelijk vaak afhankelijk van grote hoeveelheden data, waaronder soms privacygevoelige of bedrijfsinformatie. Houd bijvoorbeeld in een bedrijfscontext dus rekening met richtlijnen als de AVG (Algemene Verordening Gegevensbescherming). En omdat veel agents werken met LLM's die getraind zijn op grote hoeveelheden tekst waarin ook vooroordelen en stereotypen voorkomen, kunnen zulke vertekeningen onbewust doorsijpelen in de resultaten en leiden tot discriminerende uitkomsten. Tot slot vraagt het ontwikkelen en trainen van zulke (bedrijfs)systemen de nodige tijd en rekenkracht.

Voor je het goed beseft, kunnen AI-agents ook privacygevoelige data verwerken en is de AVG van kracht.

Van assistent tot agent

Agentic AI is momenteel een actueel onderwerp, waardoor producenten hun AI-oplossingen soms als AI-agents presenteren, terwijl het om eenvoudige(re) AI-assistenten gaat. Dit geldt bijvoorbeeld voor de browserextensie HARPA AI. Na installatie kun je via een knop taken laten uitvoeren op basis van de actuele webpagina en eventueel geüploade afbeeldingen of pdf's. Denk aan uitleg geven, vragen beantwoorden, de pagina samenvatten of herschrijven, data uitlichten en meer.

Handig, maar het is geen autonome agent. HARPA AI voert namelijk alleen taken uit die jij expliciet opgeeft, zonder zelf subdoelen te stellen of complexe workflows te volgen. Er is evenmin sprake van zelfevaluatie of contextopbouw over meerdere stappen. HARPA AI biedt ook een browser-functie (bijvoorbeeld via de opdrachtprompt met een API-sleutel) die enige automatisering en externe aansturing mogelijk maakt, maar dat maakt het nog geen volwaardige AI-agent.

Het onderscheid tussen beide begrippen is evenwel niet altijd duidelijk, vooral niet wanneer de operaties voornamelijk in een 'black box' worden uitgevoerd.

Manus

AI-agents kunnen dus goed bruikbaar zijn in bedrijfsomgevingen, maar ook daarbuiten kun je er je voordeel mee doen. Ga bijvoorbeeld naar www.manus.im (van Chinese origine) en klik op Use cases voor een reeks praktijkvoorbeelden, ingedeeld in rubrieken als Life, Data Analysis en Education. Zo kan deze algemene AI-agent je bijvoorbeeld helpen bij het opstellen van een cursus of het plannen van een reis. Het voorbeeld Trip to Japan in april (in de rubriek Featured) laat dit duidelijk zien. Klik hierop om het volledige proces te kunnen volgen: links de uitvoer, rechts het scherm van de agent. Je kunt ook altijd klikken op Skip to results of Watch again.

Wil je Manus ook zelf proberen, dan kun je met een gratis proefversie met duizend credits aan de slag, na goedkeuring van je aanvraag (de betaalde versie start vanaf 19 dollar per maand, dat is ongeveer 20 euro inclusief btw). We merkten dat zo'n goedkeuring sneller verloopt via de mobiele Manus-app.

Voor de eindgebruiker is het hele proces vrij eenvoudig. Zoals bij een gewone AI-chatbot geef je eerst een uitgebreide prompt met je opdracht. Daarna gaat Manus aan de slag en zie je stap voor stap hoe de taak wordt aangepakt. Je kunt dit proces ook in realtime bijsturen met extra informatie of instructies. Is de hoofdtaak voltooid, dan krijg je een melding, tenzij je credits eerder op zijn of de agent vastloopt op bijvoorbeeld een niet-bereikbare webpagina.

Op onze vraag heeft Manus een veertiendaagse gezinsreis naar Namibië uitgewerkt.

AI-reis naar tevredenheid uitgewerkt?

🧳Dan hoef je zelf alleen nog maar je koffers te pakken!

AgentGPT

Ook met AgentGPT kun je op een toegankelijke manier toe, ook gratis, een AI-agent in je browser gebruiken. Het platform is een gebruiksvriendelijke webinterface (geïnspireerd op Auto-GPT), waarmee je een opdracht kunt lanceren voor een autonome agent die meerdere stappen zelf bedenkt en uitvoert.

Je hoeft enkel een naam voor je agent in te vullen en bij Doel een duidelijke opdracht te schrijven, zoals 'Plan een veertiendaagse rondreis met 4x4 in Namibië' of 'Voer een onderzoek uit naar de duurzaamste bouwmaterialen in Nederland'.

Controleer bij Tools of de benodigde functies zijn ingeschakeld: Image (voor AI-beelden), Search (voor online opzoekwerk), Code (voor scripting) en Connect Your Data. Deze laatste biedt via een account bij SID, een vorm van Retrieval Augmented Generation (RAG), waarbij eigen gegevens van bijvoorbeeld Google Drive of Gmail kunnen worden verwerkt en doorzocht.

Bevestig met de blauwe afspeelknop en de agent gaat meteen aan de slag. Je kunt de deeltaken volgen, pauzeren en via een prompt het proces bijsturen. De kans bestaat dat de agent niet alle stappen voltooit met een gratis account, maar via Summarize kun je wel alvast een tussentijds resultaat bekijken. Voor een uitgebreider abonnement betaal je 40 dollar per maand (ongeveer 43 euro inclusief btw). Bij Settings kun je eventueel ook een OpenAI API-sleutel invoeren als je er een hebt.

AgentGPT kan ook eigen data onderzoeken (hier Google Drive documenten via sid.ai)

Agent-bibliotheken

Op de webpagina van het hierboven vermelde AgentGPT kun je ook uit twintig sjablonen kiezen. Dit zijn kant-en-klare agenten, met prompts gericht op een bepaald taaktype, zoals rapportanalyse, reisplanning of marketing strategieën. Maar er bestaan intussen ook diensten met een bibliotheek AI-agents, zoals Agent.AI. Je kunt zoeken op naam of op tags, binnen categorieën zoals Social, Customer Service, Image en Lifestyle. Filter je op Image, dan krijg je agents zoals Logo Creator, Youtube Thumbnail Generator en MindmapGenerator.

We nemen even Mindmap Generator als voorbeeld. Klik hier op Goagent en geef een geschikte prompt, bijvoorbeeld een onderwerp voor je mindmap. Bevestig met Go en de agent gaat aan de slag. Daarna kies je tussen Fully automatic (waarbij je alles aan de agent overlaat) of Interactive (waarbij je stap voor stap het voorlopige ontwerp kunt aanpassen of uitbreiden).

Ook bij MindStudio vind je een ruime collectie AI-agents, verdeeld in rubrieken zoals Research, Analyze Content, For Creators, For Students en YouTube. Na aanmelding kun je ze vanaf het platform uitvoeren via de knop Run (Pro Agents enkel na betaling) of via een Chromium-browserextensie, zodat de agent direct met een specifieke webpagina kan werken.

Houd er rekening mee dat het onderscheid tussen een slimme AI-assistent en een autonome AI-agent ook hier niet altijd duidelijk is.

Op Agent.AI vind je veel agents (of minstens assistenten), waaronder deze eenvoudige mindmap-generator.

Agentic AI-browsers

We hebben geen glazen bol, maar we zijn ervan overtuigd dat agentic AI zich dit jaar sterk zal doorzetten. De vraag naar autonomere AI-systemen groeit, de technologische basis met modellen als GPT-4.x en Claude 4.x is al aanwezig en de tool-calling-functionaliteit breidt snel uit.

Die evolutie zal zich vermoedelijk ook voortzetten binnen browsers, zoals blijkt uit Opera Browser Operator. Deze AI-agent is netjes geïntegreerd in de Opera-browser en maakt het mogelijk om bijvoorbeeld producten te bestellen, een reis te plannen, tickets te boeken of studiemateriaal te verzamelen zonder dat je zelf iets hoeft te doen (wat overigens wel mogelijk blijft). Op het moment van schrijven is deze functie helaas nog een preview, maar mogelijk zit die functie al in Opera's ontwikkelaarseditie tegen de tijd dat je dit leest.

Een andere vroege ontwikkeling is Anchor Browser, voorlopig alleen beschikbaar als cloud-hosted platform. Na aanmelding krijg je toegang tot een interactieve omgeving waar je AI-gestuurde browserflows kunt opstellen en testen. Bovenaan kies je eerst een taakstructuur, zoals AI Form Filling of Web Research.

Zelf bouwen met MindStudio

Zowel Agent.AI als MindStudio laten je niet alleen bestaande agents gebruiken, maar bieden ook tools om zelf een AI-agent te bouwen. We laten kort zien hoe je dit aanpakt in MindStudio, bijvoorbeeld voor een agent die een webpagina, pdf of YouTube-video samenvat (bij deze laatste door zelf het bijbehorende transcript op te halen).

Ga naar https://app.mindstudio.ai en open links het onderdeel Build. Klik rechtsboven op Create New Agent en zorg dat het tabblad Automations actief is. Klik op het blauwe Start-blok; rechts verschijnen dan enkele configuratie-opties. Wil je de agent beschikbaar maken in de browserextensie van Agent.AI, klik dan bij Run Mode op het pijlknopje en kies Browser Extension. Er verschijnen nu data zoals url, metadata en pageContent, die beschikbaar komen voor de agent.

Klik rechts van het Start-blok op de knop met het plusje om een AI-module toe te voegen. Voor ons voorbeeld kies je Generate Text, een van de meest gebruikte modules. Andere opties zijn Generate Image, User Input, Scrape URL of je klikt op View All Blocks voor alle beschikbare modules. Na selectie van Generate Text zie je rechts bij ModelSettings dat standaard Claude 3.5 Haiku gebruikt wordt. Je kunt ook kiezen uit andere ondersteunde LLM's, waaronder enkele gratis modellen.

Bouw je eigen agent met AI-modules in MindStudio.

Verder uitwerken

Met de LLM geselecteerd kun je rechts nog extra instellingen aanpassen via parameters als Temperature (hoe lager, hoe voorspelbaarder het antwoord), Max Response Size (hoe lager, hoe beknopter het antwoord) en andere. Bovenaan staat het promptvenster waar je een duidelijke instructie voor de LLM geeft, bijvoorbeeld: 'Vertel me alles wat ik moet weten over deze webpagina.'

Om de inhoud van de webpagina door te geven, gebruik je de eerder vermelde variabele pageContent (je kunt deze variabele eerst kopiëren naar het klembord) die je onder je prompt met {{pageContent}} aanroept.

Klik linksboven op Untitled AI Agent en geef je agent een naam. Je kunt ook een korte omschrijving toevoegen en een pictogram kiezen. Klik vervolgens rechtsboven op Preview / Open Draft Agent. Je test je agent door een url in te vullen, op Load Site te klikken en daarna op Run Agent.

Wil je de agent publiceren (en aan de browserextensie koppelen via het knopje met de drie puntjes), dan heb je wel een Pro-versie nodig. Deze kost 12 dollar per maand (ongeveer 13 euro inclusief btw) voor onbeperkte agents, exclusief eventuele kosten voor API-calls van betaalde AI-modellen.

Je agent is klaar: nog snel even proefdraaien.

Automatische prompt

Je kunt ook een bestaande agent dupliceren en deze via Edit snel aanpassen voor een ander doel. Daarnaast is het mogelijk om de prompt automatisch te laten genereren. Klik hiervoor rechtsonder het promptvenster op het bijbehorende knopje en kies Generate. Typ bijvoorbeeld 'Vat deze webpagina uitgebreid en overzichtelijk samen' of 'Analyseer deze X-berichtreeks' en klik opnieuw op Generate. Even later verschijnt een veel uitgebreidere (standaard Engelstalige) prompt, waarbij de opdracht wordt opgesplitst in subtaken, zodat je agent gestructureerder te werk kan gaan. Vergeet ook hier niet de variabele {{pageContent}} toe te voegen.

Op vergelijkbare manier kun je nog veel andere agents maken. Experimenteer gerust met alle beschikbare opties en mogelijkheden.

Je kunt automatisch een uitgebreide prompt laten genereren voor je agent.

Grondig zoeken

Steeds meer generatieve AI-modellen bieden met wat vaak deepsearch wordt genoemd een geavanceerde zoekfunctie aan om diepgaande informatie van internet en andere bronnen op te halen en te analyseren. Daardoor kunnen ze ook meerdere redeneringsstappen uitvoeren en zo tot een nauwkeuriger en uitgebreider antwoord komen.

Zo'n functie vind je onder meer bij ChatGPT (Diepgaand onderzoeken), Gemini (Deep Research) en Grok (DeepSearch en de nog uitgebreidere DeeperSearch). Je kunt deze functies zien als een vorm van agentic AI, omdat ze autonoom complexe taken uitvoeren die normaal menselijke tussenkomst vragen. Afhankelijk van je opdracht (en andere parameters) kan het zoekwerk makkelijk tien minuten of langer duren. Met een gratis account is deze functionaliteit helaas wel beperkt bruikbaar, zeker bij ChatGPT. ChatGPT heeft overigens ook al Operator, een agent die een browser kan gebruiken, maar alleen nog beschikbaar is voor Pro-gebruikers in de VS.