Skip to main content
search
0

De eerste stapjes met echt programmeren doen we graag met visuele blokjes. We zien dat dit veel makkelijker gaat dan het traditionele coderen met tekst. Bij het blokjesprogrammeren hoef je je geen zorgen te maken over syntax en functienamen. Het programma puzzel je bij elkaar met onderdelen die al klaarstaan op je scherm.

In dit voorbeeld laten we PictoBlox zien. Dit is een aantrekkelijke en toegankelijke omgeving op basis van Scratch 3.0 en Google Blockly. PictoBlox heeft daarbij extra uitbreidingen die we bij Junior IOT graag gebruiken. PictoBlox kan je gebruiken vanuit de browser of als geïnstalleerd programma. Als je PictoBlox installeert op je computer kan je ook goed werken met externe boards zoals de Junior IOT Arduino Nano.

PictoBlox Web vanuit de browser

Het scherm geeft meerdere mogelijkheden.

  • Block Coding / Junior Blocks
  • Block Coding / Bocks
  • Python Coding / Py Editor
  • Python Coding / Py Notebook
  • Coming Soon / Machine Learning Environment
  • Coming Soon / 3D and XR Studio

Je hoeft geen account te maken om deze omgeving te gebruiken. Maar een account kan handig zijn om de dingen te bewaren die je hebt gemaakt. Af en toe vraagt het scherm of je een account wilt maken.

Junior Blocks (vanaf 4 jaar)

Met Junior Blocks kan je leuke spellen maken.

De eerste keer: Junior Blocks uitleg op je scherm

De eerste keer dat je op deze website komt, kan je kiezen voor extra uitleg. De uitleg werkt het beste als je de onderdelen aanklikt met je muispointer of via je touchpad. Je kunt ook voor ‘skip’ kiezen en de notities hieronder doorlezen.

Je kunt deze optie ook activeren, door in je werkscherm rechtsboven te klikken op het tandwiel, en in het menu de eerste optie te kiezen.

De uitleg vertelt over de onderdelen op je scherm:

    • 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 blauw pijltje naar rechts neer te zetten. Daaraan pak je ook een blauw pijltje naar boven. Klik deze aan het eerste blauwe blokje. Daarna 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.

Een eerste Junior Blocks oefening: Tobi gaat wandelen

Je start met een leeg werkveld.

  • Bij de blauwe blokjes kies je een pijl naar rechts. Zet deze op je werkveld.
  • Kies ook een pijl omhoog. Maak deze vast aan het eerste blokje.

Je hebt nu twee stappen in je programma. Je hebt alleen nog een geel blokje nodig. Met een geel blokje vertel je wanneer deze stappen moeten beginnen.

  • Klik op het gele rondje om de gele blokjes te zien.
  • Kies het gele blokje met het groene vlaggetje.

  • Het gele blokje met het groene vlaggetje plak je vooraan aan je programma.

Ik denk dat je eerste programma zo klaar is. Met de groene start vlag aan de onderkant van je scherm kan je jouw programma starten.

  • Druk op de groene start vlag.

Lukt het om jouw sprite poppetje te laten wandelen?

Jouw Sprite poppetje aanpassen in Junior Blocks

Op je scherm zie je een plek waar je jouw sprite poppetje kunt aanpassen.

  • Klik op het kwastje bij jouw sprite poppetje

Je komt nu in de Sprite Editor.

Ik vind het leuk als mijn poppetje een geel shirt aan heeft.

  • Verander je poppetje
  • Misschien lukt het ook om letters op het shirt van je poppetje te maken

  • Druk op de knop ‘Back’ om terug te gaan naar je programma

Je kunt meerdere poppetjes hebben. Bij elk poppetje kan je een programma maken.

De achtergrond van een scene aanpassen in Junior Blocks

Je ziet op je scherm een plek met de achtergronden.

  • Klik op het rondje bij jouw achtergrond

Je komt op de plek waar je jouw achtergrond kunt kiezen en aanpassen. Je kunt met de upload knop rechts onder zelfs een eigen plaatje kiezen.

  • Kies een mooie achtergrond.

Ik heb een plaatje gekozen van Junior IOT. Pssst, jij kunt hetzelfde plaatje gebruiken door dit in te vullen: https://junioriot.nl/app/uploads/2020/01/WhatsApp-Image-2020-03-13-at-19.10.09-5.jpeg

  • Maak je programma nog wat langer, om jouw sprite poppetje nog meer te laten wandelen.
  • Probeer om jouw poppetje op een mooie plek te krijgen.

Veel plezier!

De achtergrond hoort bij een scene. Dat is een plek waar je poppetje iets kan doen. Je kunt meerdere scenes hebben, met elk weer nieuwe poppetjes

Tip: Je project opslaan en weer terughalen

Grotere projecten wil je graag opslaan. Maar dat hoeft niet.

  • Geef bovenin je scherm je project een naam. Kies een naam waarmee je weet dat het van jou is, en welk project je hebt gemaakt.
  • Druk op het ‘Save’ plaatje.

Er komt nu een download. Deze heeft de naam van je project, en heeft de extensie sb3. Deze download kan je weer inladen via het menu: File/Load from your computer. Let op: iedere keer als je jouw programma aanpast, moet je het opnieuw downloaden en bewaren.

Psst… mijn project download kan je hier vinden: Junior IOT wandelt in de werkplaats

Tips: Omschakelen naar Nederlands

Bij het rondklikken door de website zien we soms in de bovenbalk een wereldbol. Daarmee kan je een taal kiezen. Je kunt deze vinden als je bij het laden van de website kiest voor ‘Blocks’.

Omdat we nog niet goed kunnen uitleggen hoe je dit goed instelt bij ‘Junior Blocks’ laten we de plaatjes nu nog in het engels staan.

Maak een Junior Blocks wandelspelletje

Je kunt makkelijk andere blokken toevoegen. Maak bijvoorbeeld het volgende spel.

Met dit spel kan je met de pijltjestoetsen op je toetsenbord jouw poppetje laten lopen. Als je het poppetje aanklikt doet het zelfs twee dingen tegelijk: geluid maken en huppelen. De roze opdrachten zorgen ervoor dat er allerlei tonen worden gespeeld.

Psst, dit is mijn project download: Wandelen met geluiden

Junior Blocks voorbeeld: Catch The Fruit

Via het menu File / Examples kom je in een overzicht met verschillende voorbeelden.

  • Open het eerste voorbeeld ‘Catch the Fruit’

  • Druk rechts onder op de groene vlag om het spel te starten.
  • Gebruik op je toetsenbord de pijltjes naar links en naar rechts om het poppetje te laten wandelen.

Lukt het je om de appels op te vangen? Speel er even mee om te ontdekken wat er allemaal kan gebeuren.

Uitzoeken hoe het werkt: Catch the Fruit

We kunnen samen eens onderzoeken hoe het werkt.

  • Ontdek nu eerst hoeveel dingen je op het scherm ziet. Kijk zonder ze aan te raken:
    • In het programma gebied zie je twee stukjes programma. Deze horen bij de pijltjestoetsen op het toetsenbord.
    • Bij het sprite poppetjes zie je twee dingetjes. Daar staat een poppetje en een appel.
    • Bij de achtergronden zie je twee achtergronden. Een gele woestijn en ook een blauwige achtergrond. Dat zijn twee scenes waar iets kan gebeuren.

Onderzoek wat het poppetje kan doen

Je ziet in het plaatje hieronder dat het poppetje is gekozen. Je ziet twee kleine stukjes programma. Deze vertellen het poppetje om een stap naar links of naar rechts te maken. Aan de gele blokjes zie je dat het programma hoort bij de pijltjestoetsen op het toetsenbord. Dat lijkt helemaal niet zo moeilijk!

Bekijk wat de appel kan doen

  • Klik nu op het scherm de appel aan.

Je ziet nu andere stukjes programma. Deze horen bij de appel. De gele blokjes geven aan wanneer iets gebeurt. Wat zien we ongeveer:

    • Groene vlag. Dit gebeurt als het programma start. De appel begint dan ergens bovenaan te vallen. Er zit ook een geluidje bij. De appel blijft eigenlijk altijd vallen.
    • Poppetje. Dit gebeurt als de appel bij het poppetje komt. De appel begint dan weer ergens bovenaan te vallen. Hier zit ook een geluidje bij.
    • Zijkant. Dit gebeurt als de appel op de vloer komt. Dan springt het spel naar het eindscherm.

Ontdek wat er gebeurt in het eindscherm

Klik nu eens op het blauwige achtergrond plaatje.

Je ziet dat hier maar één poppetje bestaat. Dat is een blauwe knop. Als je deze aanraakt, zorgt het programma ervoor dat je weer naar de woestijn gaat. Daar begint het spel dan weer opnieuw.

Probeer het spel nu zelf aan te passen: Catch the Fruit, maar dan met een banaan

Probeer nu het spel te veranderen. Maak van de appel eens een banaan?

Nadat je de appel hebt veranderd, kan je het spel weer spelen. Om het spel te starten moet je het beginscherm aanklikken. Daarna druk je op de groene vlag.

 

 

Blocks (vanaf 7 jaar)

Met Blocks kan je nog veel meer (in plaats van Junior Blocks). De blokjes zien er een beetje anders uit. Zo kan je 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!

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 oefening, schuivende grombeer

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

Blocks voorbeelden

  • 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.

Blocks voorbeeld: Het doolhof

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

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

(Test) Arduino Nano aansluiten op PictoBlox Blocks Web (let op: dit gaat nog niet helemaal werken)

LET OP: we zien nog niet dat het uploaden vanuit de browser werkt. Gebruik voorlopig de desktop versie. We beschrijven dat iets verder hieronder.

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 overzichtscherm.

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

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 klopt).
Belangrijk is dan wel dat de USB poorten open staan van de computer die je nu gebruikt.

  • Kies Arduino Nano

De volgende stap is om te verbinden met de Arduino Nano. Sluit deze aan op de USB poort van je computer. In het menu op je scherm zie je het volgende plaatje.

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

  • Kies de regel met het laagste nummer en klik op ‘Connect’

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

  • Klik op ‘Upload’

PictoBlox geeft je nu de mogelijkheden om een programma te schrijven voor de Arduino Nano.

  • Kies de blokjes en maak onderstaand programma

PictoBlox toont naast het programma de c++ code welke naar de Arduino Nano gestuurd kan worden.

LET OP: We zien nog geen upload knop in de browser om de code op de Arduino Nano te zetten.

PictoBlox desktop

Om niet afhankelijk te zijn van de connecties vanuit de browser, kiezen we ervoor om PictoBlox op de computer te installeren.

PictoBlox desktop programma installeren op de computer

Downloaden:

Installeren:

  • Gebruik de installer om PictoBlox op de computer te installeren.
  • Indien bij de install ook een installatie van CH341SER.INF komt, voltooi deze dan ook

Daarna opent het programma. hierin kan je dezelfde opdrachten uitvoeren als in de Web versie.

PictoBlox desktop programma openen

  • Klik op het PictoBlox plaatje op je desktop om het PictoBlox programma op te starten

  • Klik op ‘Blocks’

Je krijgt een mooi leeg werkveld.

PictoBlox desktop verbinden met de Junior IOT Arduino Nano

In het menu zie je de opties ‘Board’ en ‘Connect’ om te werken met een extern board.

  • Kies in het menu voor ‘Board’

Je krijgt nu een overzicht van allerlei boards.

Je ziet hier dat je met Blocks op de desktop de volgende boards kunt bedienen:

    • Evive
    • Quarky
    • Wizbot
    • Arduino Uno
    • Arduino Mega
    • Arduino Nano
    • ESP32
    • T-Watch
    • Boffin
    • micro:bit
    • AV/VR Controller
    • TECbits
    • LEGO EV3
    • LEGO BOOST
    • LEGO WeDo 2.0
    • Go DFA

PictoBlox desktop kan via de keuze ‘Blox’ al deze boards bedienen. Belangrijk is dan wel dat de USB poorten open staan van de computer die je nu gebruikt.

  • Kies Arduino Nano

Na het kiezen van de Arduino Nano volgt een extra keuze:

  • Voor de rode Junior IOT Arduino Nano kies je nu de Atmega 168

  • Kies de COM poort waar je board op aangesloten is. Meestal is dit de poort waar wch.cn naast staat. Klik op de knop ‘Connect’

Je Arduino Nano is nu verbonden. Het kan gebeuren dat je een aantal van deze stappen af en toe opnieuw moet doen om te verbinden.

PictoBlox Blocks in ‘Stage Mode’- Arduino Blink

  • Klik op het PictoBlox plaatje op je desktop om het PictoBlox programma op te starten
  • Klik op ‘Blocks’
  • Sluit je Arduino Nano aan op de computer en verbind deze in PictoBlox Blocks

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

  • Laat de Mode staan op ‘Stage’

PictoBlox geeft je nu de mogelijkheden om een programma te schrijven voor de Arduino Nano.

  • Kies de blokjes en maak het programma volgens deze afbeelding
  • Kijk naar het programma. Je ziet de wachttijden: 1 seconde, 1 seconde, 0.2 seconde en nog een keer 0,2 seconde

Psst, dit is mijn programma: Blink Arduino Nano in Stage Mode

  • Druk op de groene vlag

Je ziet nu dat het lichtje op de Arduino Nano knippert.

  • Verander de wachttijden naar bijvoorbeeld: 5 seconden, 5 seconden, 0.2 seconde en nog een keer 0,2 seconde

(deze oefening werkt nog niet) PictoBlox Blocks in ‘Stage Mode’- Arduino Blink met wandeling

Deze oefening werkt nog niet helemaal. 

  • Klik op het PictoBlox plaatje op je desktop om het PictoBlox programma op te starten
  • Klik op ‘Blocks’
  • Sluit je Arduino Nano aan op de computer en verbind deze in PictoBlox Blocks

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

  • Laat de Mode staan op ‘Stage’

PictoBlox geeft je nu de mogelijkheden om een programma te schrijven voor de Arduino Nano.

  • Kies de blokjes en maak het programma volgens deze afbeelding

Dit is de bedoeling: Met pijltje links en rechts op je toetsenbord kan je nu de beer bewegen. Als je op de spatiebalk drukt, zie je de Arduino Nano even knipperen.

Dit is het probleem: We zien niet dat de Arduino reageert. We zien wel dat het originele Arduino programma blijft doorlopen. We denken dat bij deze manier van programmeren de opdracht niet doorkomt om poort 13 op de arduino in output mode te zetten.

PictoBlox Blocks in ‘Upload mode’ – Arduino Blink

  • Klik op het PictoBlox plaatje op je desktop om het PictoBlox programma op te starten
  • Klik op ‘Blocks’
  • Sluit je Arduino Nano aan op de computer en verbind deze in PictoBlox Blocks

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

  • Klik op ‘Upload’

PictoBlox geeft je nu de mogelijkheden om een programma te schrijven voor de Arduino Nano.

Bouw het programma:

Psst, dit is mijn programma: Blink Arduino Nano

  • Klik op ‘Upload’

Kan je op de Arduino Nano zien da de led knippert? Kan je zelf de wachttijd aanpassen om de knipper te veranderen?

PictoBlox Blocks in ‘Upload mode’ – Arduino Blink

  • Klik op het PictoBlox plaatje op je desktop om het PictoBlox programma op te starten
  • Klik op ‘Blocks’
  • Sluit je Arduino Nano aan op de computer en verbind deze in PictoBlox Blocks

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

  • Klik op ‘Upload’

PictoBlox geeft je nu de mogelijkheden om een programma te schrijven voor de Arduino Nano.

Bouw het programma:

De Arduino Nano heeft wat extra leds nodig.

  • Pak een gekleurde led. Deze led komt bij poort D2 en poort D3. Doe het langste pootje bij D2.
  • Pak een andere kleur led. Deze komt ook bij poort D2 en poort D3. Zorg ervoor dat het langste pootje nu bij D3 zit.

Daarna kan je het programma naar de Arduino sturen.

  • Klik op ‘Upload’

Kan je op de Arduino Nano zien da de led knippert? Kan je zelf de wachttijd aanpassen om de knipper te veranderen?

Als je verder wilt:

  • Doe ook twee leds bij poort D5 en D6.
  • Voeg extra blokjes toe aan je programma om deze leds ook te laten knipperen.

Als je daarna nog tijd over hebt:

  • Doe ook twee leds bij poort D8 en D9.
  • Voeg extra blokjes toe om deze leds ook te laten knipperen.

 

Close Menu