In dit voorbeeld gebruik je PictoBlox web, met de keuze voor Blocks. Als het goed is heb je de eerste stappen al onderzocht: https://junioriot.nl/juniorblocks/

Blocks Web

Met Blocks kan je nog veel meer dan met Junior Blocks. De blokjes zijn een beetje anders en je kunt nog mooiere programma’s maken.

Deze programma’s kan je ook gebruiken voor de externe boards, zoals de Junior IOT Arduino Nano. Deze gebruiken we graag binnen Junior IOT!

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Blocks’

Je komt nu in de Blocks werkomgeving van PictoBlox.

Het valt je misschien al op dat je rechtsboven de taal kunt veranderen naar Nederlands. Verander dit gerust naar jouw voorkeur! In de uitleg bij onze voorbeelden hieronder houden we de taal nog even op Engels.

De eerste keer: Blocks uitleg op je scherm

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Blocks’
• Rechtsboven klik je op het tandwiel, en kies je de eerste menu optie ‘Getting started with PictoBlox’.

De uitleg neemt je via het scherm mee langs de verschillende onderdelen in het scherm. Om de uitleg het beste te laten werken gebruik je jouw touchpad of muis om de onderdelen aan te wijzen.

• • Stage. Hier worden de opdrachten uitgevoerd. Jouw sprite poppetje staat al op je te wachten.
  • Sprite. Dit poppetje voert straks jouw opdrachten uit. Hier is het een beertje met de naam ‘Tobi’.
  • Blocks. De puzzelstukjes zijn de opdrachten waarmee je een programma maakt.
  • Scripting Area. Hier zet je de blocks om je programma te maken.
  • Proberen: De uitleg vraagt nu om een programma blokje neer te zetten. Nadat je dit doet gaat de uitleg verder.
  • Pallettes. Blauwe blokjes laten je sprite bewegen. Een pallette van een andere kleur heeft weer andere soorten blokjes. Deze helpen je om andere dingen te doen.
  • Events. Het gele pallette heeft ‘events’ blokjes. Dit zijn gebeurtenissen. Je hebt een gebeurtenis nodig om het bijbehorende deel van het programma te starten.

Tip: Als het even niet werkt, dan kan je de pagina in je browser herladen.

Blocks Web lijkt heel erg op Blocks Desktop

Als je de Desktop en de Web versie van Blocks vergelijkt, dan zie je bijna geen verschil. De desktop versie is iets makkelijker met verbinden en kan soms iets meer. In onze voorbeelden zie je zelfs bijna geen verschil tussen de plaatjes van de programma’s die je maakt in Web of in Desktop – we gebruiken de plaatjes soms zelfs door elkaar.

Als je niet helemaal lekker kan werken met de Web versie, dan mag je ook gewoon overstappen naar onze voorbeelden voor Blocks Desktop: https://junioriot.nl/blocks-desktop-arduino-nano/

Blocks oefening, schuivende grombeer

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Blocks’
• Probeer het volgende programma te maken.

Je gebruikt in dit programma de volgende onderdelen:

• • when this sprite clicked
  • start sound [  Grunt  ]
  • Glide (  1  ) secs to [  Random position  ]

Kan je in jouw programma zien wat de beer zou moeten doen? Maakt de beer ook geluiden? Lukt het om jouw beer te laten bewegen?

Blocks voorbeelden ontdekken

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Blocks’
• In het menu kies je File / Examples

Je ziet nu verschillende voorbeelden. We vinden het doolhof een mooi voorbeeld. Dit voorbeeld willen we onderzoeken.

Blocks voorbeeld: Het doolhof

• Open het voorbeeld van het doolhof
• Speel het spel
• Bekijk de code

Kan je uitleggen wat elk stukje programma probeert te doen?

• Verander de code zodat er een geluid komt bij elke stap.

Blocks Web met de gele/witte/roze Arduino Nano

We kunnen deze manier van programmeren ook gebruiken om allerlei hardware te bedienen. Bij Junior IOT doen we dit graag met de Arduino Nano, een heerlijk klein programmeerbordje welke we in meerdere kleuren hebben: Geel, wit, roze en rood. De Arduino Nano past goed op het breadboard om mooi samen te werken met leds, servo’s en andere apparaten. Ze werken erg goed samen met PictoBlox!

• • Onze witte en roze Arduino Nano gebruiken we vanaf 2025. Je sluit ze aan met een USB-C kabel. Deze werken goed met Web- en direct programmeren.
  • Onze gele Arduino Nano hebben we jaren gebruikt. Deze gebruikt een micro-USB kabel. Ze werken goed met Web- en direct programmeren. Soms moet je er nog wel even een nieuwe versie bootloader opzetten, dat kan met PictoBlox Desktop.
  • Onze rode Arduino Nano gebruiken we steeds minder. Deze kan je wel direct programmeren, maar niet via Web.

Op de foto zie je ook de Lolin32, een programmeerbordje waarmee wat meer mogelijk is. Deze kan je als ESP32 ook programmeren met PictoBlox.

Docent: Wat doet de Arduino nu? Indien nodig laad je Met PictoBlox Desktop een nieuwe firmware.

Soms heb je een Arduino waar nog een programma in zit. Je ziet dan bijvoorbeeld een knipperende led. In dat geval wil je een leeg programma laden. Dat doe je met PictoBlox Desktop.

Soms kom je een Arduino tegen waar nog een programma in zit. Je ziet dan bijvoorbeeld een knipperende led als je de Arduino op de USB aansluit. In dat geval wil je een leeg programma laden.

Doe dit alleen als de Arduino knippert of als de Arduino een ander programma laat zien:

• Zet PictoBlox Desktop de in Upload mode
• Kies de Arduino Nano / 328
• Connect
• Zorg dat je helemaal geen programma hebt
• Druk rechtsboven op ‘Upload Firmware’

Of bekijk hoe Duco het voordoet: https://youtu.be/puwgoQAkfpw?si=CW5xWpHlZehucqaw

Als het goed is, is het knipperen daarna gestopt.

Headers solderen aan de Arduino Nano

Je gebruikt de Arduino Nano meestal samen met een breadboard. Zo kan je er makkelijk allerlei extra dingen op aansluiten. Om de Arduino Nano in het breadboard te zetten, moet je er soms nog even headers aan solderen.

   

Meer hulp over headers solderen vind je hier: https://junioriot.nl/headers-op-arduino-nano-solderen/

De gele, roze of witte Arduino Nano aansluiten op PictoBlox Blocks Web

PictoBlox Web gebruikt Stage Mode om de Arduino direct aan te sturen. PictoBlox Stage Mode werkt goed bij de gele, roze en witte Arduino Nano van Junior IOT. Het is dan wel nodig om er de nieuwe firmware of bootloader op te zetten, bijvoorbeeld via PictoBlox Desktop (en dat is heel makkelijk).

LET OP: De rode Arduino Nano heeft een 168 processor. Deze ondersteunt geen direct mode, waardoor we hem niet via Web- of Stage mode kunnen gebruiken. De gele, roze en witte versies hebben een 328P processor, en hier werkt het wel goed mee.

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Blocks’

Je krijgt een mooi leeg werkveld.

Nu willen we gaan werken met boards. In het menu zie je daarvoor de opties ‘Board’ en ‘Connect’.

• Kies in het menu voor ‘Board’

Je krijgt nu een overzichtsscherm.

Je ziet hier dat je met Blocks Web allerlei boards kunt bedienen.

• • Evive
  • Quarky
  • Wizbot
  • Arduino Uno
  • Arduino Mega
  • Arduino Nano
  • ESP32
  • t-Watch
  • micro:bit
  • LEGO EV3
  • LEGO BOOST
  • LEGO WeDo 2.0
  • Go DFA

Let op: PictoBlox kan deze boards vanuit de browser bedienen. Dit werkt op Windows en op Chromebooks voor Chrome, Firefox, Safari en Edge (we moeten nog goed controleren of dit allemaal klopt). Belangrijk is dan wel dat de USB poorten op jouw computer open staan.

Let op: Bij Junior IOT gebruiken de Arduino Nano. Bij de gele Arduino Nano moet je soms nog zorgen dat er de nieuwe bootloader op is gezet. Het is handig als er geen ander programma op de Arduino Nano zit.

Ga nu verder:

• Kies in het menu voor ‘Board’
• Kies Arduino Nano

Het scherm toont nu het werkveld, en scrollt naar de Arduino Nano programmeer blokjes.

De volgende stap is om te verbinden met de Arduino Nano. Sluit deze met de USB kabel aan op de USB poort van je computer.

In het menu op je scherm zie je bij ‘Connect’ de volgende opties.

• Kies in het menu voor ‘Connect’ en dan ‘Serial’

Als je meerdere keuzes hebt, ontdek dan even welke keuze hoort bij je Arduino Nano. Meestal is dat de verbinding met het laagste nummer.

• Kies de regel die hoort bij je Arduino Nano en klik op ‘Connect’

Het plaatje in het menu verandert om aan te geven dat het apparaat verbonden is.

 

Arduino Nano bedienen in Stage Mode – in PictoBlox Web

In Stage mode kan je Arduino Nano opdrachten toevoegen aan je programma. Het programma draait eigenlijk op jouw computer. Zo kan je sommige Arduino programmeer blokken gebruiken.

Led bedienen op de Arduino Nano

In dit voorbeeld maak je een programma waarmee je de beer laat lopen.

We gebruiken de ingebouwde led van de Arduino:

• • De ingebouwde led zit op poort 13

Je bedient de beer met pijltjestoetsen links en rechts op het toetsenbord. Als de beer achteruit gaat geeft deze een waarschuwingsgeluid, en de led gaat aan op de Arduino Nano.

• Sluit de Arduino Nano aan

of:

• Maak in PictoBlox Web dit programma:

• • When [  right arrow  ] key pressed
  • change x by (  10  )
  • set digital pin [  13  ] output as [  LOW  ]

 

• • When [  left arrow  ] key pressed
  • change x by (  -10  )
  • start sound [  Grunt  ]
  • set digital pin [  13  ] output as [  HIGH  ]

 

• Druk op de groene vlag om je programma te starten
• Gebruik de links/rechts pijltjes toetsen om de beer te laten lopen

Lukt het om het ingebouwde ledje aan te laten gaan bij het achteruit lopen?

Poorten vinden op de Arduino Nano

Bij een programmeerbaar bordje heb je vaak heel veel mogelijkheden. Ook bij de Arduino Nano kan je elke aansluiting voor meerdere dingen gebruiken. In de oefeningen hieronder kan je rustig ontdekken hoe dat werkt.

In dit overzicht kan je zien waar de verschillende aansluitingen voor zijn. Aansluiting D2 en D3 vind je bijvoorbeeld links van het zwarte vierkant. Deze aansluitingen kan je in de volgende oefening gebruiken.

Een enkele led bedienen op poort D2-D3

Bij dit voorbeeld is het handig om de Arduino Nano in het breadboard te plaatsen. We willen nu een led toevoegen. We doen dat door deze te verbinden met aansluiting D2 en D3.

Pak een rode led en prik deze naast de Arduino Nano in het breadboard:

• • Rode led, langste pootje bij poort D2
  • Rode led, kortste poortje bij poort D3

Hiermee zit de led in de digitale poort 2 en 3. Op het bordje zie je naast de gaatjes de tekst D2 en D3. Om de led te bedienen moeten we in de software zorgen dat poort 2 aan staat, en poort 3 uit.

• Maak in PictoBlox Web dit programma:

• • When [  right arrow  ] key pressed
  • change x by (  10  )
  • set digital pin [  13  ] output as [  LOW  ]
  • set digital pin [  2  ] output as [  LOW  ]
  • set digital pin [  3  ] output as [  HIGH  ]

 

• • When [  left arrow  ] key pressed
  • change x by (  -10  )
  • set digital pin [  13  ] output as [  HIGH  ]
  • set digital pin [  2  ] output as [  HIGH  ]
  • set digital pin [  3  ] output as [  LOW  ]

 

• Druk op de groene vlag om je programma te starten
• Gebruik de links/rechts pijltjes toetsen om de beer te laten lopen

Lukt het om de rode led aan te laten gaan bij het achteruit lopen?

Een dubbele led bedienen op poort D2-D3

Je ziet dat je in het programma voor het bedienen van de led ook poort D3 aan zet, zodra je poort D2 uit zet. We kunnen er nu een groene led bij doen, en deze monteer je dan omgekeerd.

Pak een groene led en prik deze naast de Arduino Nano in het breadboard:

• • Groene led, langste pootje bij poort D3
  • Groene led, kortste poortje bij poort D2

• Verander niets aan je programma
• Gebruik de links/rechts pijltjes toetsen om de beer te laten lopen

Lukt het om de groene led aan te laten gaan bij het vooruit lopen? Gaat de rode led nog steeds aan bij het achteruit lopen?

Extra: Vier leds bedienen op poort D2-D3 en D5-D6

Kan jij je programma uitbreiden om nog extra leds te bedienen op D5 en D6?

Super Extra: RGB op poort A0-A1-A2-A3

Kan jij een RGB led bedienen? Sluit de vier pootjes van de RGB led aan met de 4 poortjes op A0-A1-A2-A3, en zorg dat het langste pootje op A1 zit. Je programmeert het zo dat A1 altijd ‘HIGH’ of aan is. De andere pootjes zorgen voor licht als ze ‘LOW’ zijn.

Servo bewegen

Bij dit voorbeeld is het handig om de Arduino Nano in het breadboard te plaatsen. Zo kan je de servo goed aansluiten. Je hebt daarvoor nog een paar m-m jumperwires nodig. Gebruik deze aansluitpunten op de Arduino Nano:

• • Bruin –> GND
  • Rood –> 5V
  • Oranje –> D10

Nadat je deze aansluitingen hebt gemaakt, kan je jouw programma maken.

• Pas je programma aan:

• • when [  right arrow  ] key pressed
  • change x by (  10  )
  • set digital pin [  13  ] output as [  LOW  ]
  • set servo on [  10  ] to (  0  ) angle

 

• • when [  left arrow  ] key pressed
  • change x by (  -10  )
  • start sound [  Grunt  ]
  • set digital pin [  13  ] output as [  HIGH  ]
  • set servo on [  10  ] to (  0  ) angle

 

Lukt het je om de servo te laten bewegen?

Een potmeter uitlezen

Neem een potmeter, en plaats deze ‘ergens’ op een ongebruikte plek in het breadboard. Maak de volgende verbindingen:

• • Potmeter linker pootje, aan Arduino GND
  • Potmeter rechter pootje, aan Arduino 5V
  • Potmeter middelste pootje, aan Arduino A0

Nadat je deze aansluitingen hebt gemaakt, kan je jouw programma maken.

• Maak dit programma:

• • when flag clicked
  • forever
    • goto x: (  read analog pin [  A0  ]  )  y: (  0  )

 

• Druk op de groene vlag om je programma te starten
• Draai aan de potmeter om de beer te laten lopen

Lukt het om met de potmeter de beer te laten lopen?

Extra: een LDR lichtsensor uitlezen

Op dezelfde manier kan je ook een lichtsensor uitlezen. We hebben nodig:

• een ‘grote’ weerstand van 100k
• en een LDR lichtgevoelige weerstand.

Maak de volgende verbindingen:

• • Weerstand linker pootje, aan Arduino GND
  • Weerstand rechter pootje, aan Arduino A0
  • LDR linker pootje, aan Arduino A0
  • LDR rechter pootje, aan Arduino 5V

 

Nadat je deze aansluitingen hebt gemaakt, kan je jouw programma maken.

Bij de potmeter merkte je dat bij een groot deel van de meting de beer tegen de zijkant van je scherm stond, ook met de potmeter in de middenstand. Omdat de lichtmeting vooral in de middenstand van de meting zit, rekenen we het meetgetal ook even om. Het programma wordt daarmee iets ingewikkelder.

• Maak dit programma:

• • when flag clicked
  • forever
    • goto x: (  (  ( read analog pin [  A0  ]  ) – (  500  ) / (  2  ) )  y: (  0  )

Lukt het om met de lichtsensor de beer te laten lopen?

Extra: Met de potmeter of de LDR lichtsensor een servo bedienen

Door de bovenstaande voorbeelden te combineren kan je met je de servo bedienen met bijvoorbeeld een potmeter of met je LDR sensor. Probeer dit eens?

 

Super extra in PictoBlox Web: Motors bedienen met een motorcontroller aan de Arduino Nano

We kunnen met PictoBlox ook motors bedienen. Hiervoor hebben we een motorcontroller board nodig, en natuurlijk motors.

Als je ook motors hebt, kan je deze klaarmaken voor leuke experimenten. Kijk eens op: https://junioriot.nl/motors/
Soms moet je de motorcontroller nog even klaarmaken voor het breadboard: https://junioriot.nl/l298n-solderen-breadboard/

Tip voor de docent: Neem bijvoorbeeld de gele motors. De motors kan je voorzien van klittenband (de haakjes zijde) en je kunt de wielen er met een schroefje al op monteren. Het breadboard kan je dan voorzien van klittenband (pluisjes zijde) zodat de motors losjes op hun plek kunnen blijven. Als je de gele motors gebruikt, dan kan je twee motors beter uitlijnen door een stokje in de asjes te steken. Na gebruik halen de deelnemers alles weer uit elkaar.

We willen de bediening van de leds op D2-D3, D5-D6 gebruiken voor de robot bediening.

We hebben nodig:

• • Je Arduino Nano
  • de motor controller, die je hebt klaar gemaakt voor het breadboard
  • twee gele motors, liefst met klittenband eraan. Aan de motors heb je al draden gemaakt.
  • twee wielen, want dat is ook wel handig
  • een breadboard, liefst met klittenband eronder

Maak de verbindingen:

• • Arduino GND aan motorcontroller –
  • Arduino 5V aan motorcontroller +
  • Arduino D2, aan motorcontroller IN1
  • Arduino D3, aan motorcontroller IN2
  • Arduino D5, aan motorcontroller IN3
  • Arduino D6, aan motorcontroller IN4
  • De ene motor aan MOTOR-A (draden omdraaien om andere kant op te laten draaien)
  • De andere motor aan MOTOR-B (draden omdraaien om andere kant op te laten draaien)

Om te kunnen zien of de poorten goed bediend worden, kan je op D2-D3 en op D5-D6 nog een paar ledjes prikken.

Nadat je deze aansluitingen hebt gemaakt, kan je jouw programma maken.

Als je klittenband hebt, dan helpt dit om snel een rommelige robot in elkaar te klitten. Natuurlijk kan je zelf bijvoorbeeld een mooier frame ontwerpen en 3D printen.

• Maak dit programma:

 

• • when [  left arrow  ] key pressed
  • set digital pin [  2  ] output as [  HIGH  ]
  • wait (  0.2  ) seconds
  • set digital pin [  2  ] output as [  LOW  ]

• • when [  right arrow  ] key pressed
  • set digital pin [  3  ] output as [  HIGH  ]
  • wait (  0.2  ) seconds
  • set digital pin [  3  ] output as [  LOW  ]

• • when [  up arrow  ] key pressed
  • set digital pin [  5  ] output as [  HIGH  ]
  • wait (  0.2  ) seconds
  • set digital pin [  5  ] output as [  LOW  ]

• • when [  down arrow  ] key pressed
  • set digital pin [  6  ] output as [  HIGH  ]
  • wait (  0.2  ) seconds
  • set digital pin [  6  ] output as [  LOW  ]

 

• Druk op de groene vlag om je programma te starten
• Druk op de pijltjestoetsen om de robot te laten rijden

Lukt het om met de pijltjestoetsen de robot te laten rijden?

 

 

Arduino Nano programmeren in Web Upload mode – dit kan nu (2025) alleen in PictoBlox Desktop

Aan de bovenkant van je scherm zie je Mode: Stage / Upload

In Upload mode kan je een programma schrijven voor de Arduino Nano, om dit vervolgens helemaal naar de Arduino Nano te sturen. Het programma blijft dan ook werken als je de Arduino Nano niet aan deze computer hebt verbonden.

Het Uploaden werkt goed in PictoBlox Desktop, maar niet in PictoBlox Web.

 

En verder?

Na deze oefeningen kan je verder kijken naar Blocks Desktop met de Arduino Nano: https://junioriot.nl/blocks-desktop-arduino-nano/

 

Een opmerking over licenties

Thuis mag iedereen gewoon deze workshops gebruiken. Als school of organisatie mag je ook gewoon alle oefeningen van deze pagina doen als je de spulletjes van Junior IOT gebruikt. Voor ander gebruik moeten scholen en organisaties toestemming vragen aan Junior IOT voor deze beschrijvingen, en aan PictoBlox voor het gebruik van hun website en software.