Author: Jeroen

Hack de Kerstverlichting

(disclaimer 😁 dit artikel is zwaar geïnspireerd door skillsdojo.nl)

Wat heb je nodig

  • micro:bit met USB-kabel en batterijhouder
  • kerstverlichting met 2 krokodilklemmen aan het einde
  • piëzo-toetertje
  • weerstandje van 10 kΩ (spreek uit: tien kilo-ohm)
  • LDR (afkorting van Light Dependent Resistor oftewel een lichtsensor)
  • 6 snoertjes met krokodilklemmen
  • kopertape (of aluminiumfolie en lijm)
  • 3 Paperbits (hier te downloaden)
  • kerstboom van karton (lasergesneden of uitgeknipt volgens dit sjabloon) of helemaal zelfverzonnen en zelfgemaakt van bijv. hout of LEGO
  • schaar en plakband

Stap 1: test het geluid

  • Maak de Paperbits GND en Piëzo-Toeter door deze uit te knippen en kopertape (of strookjes aluminiumfolie met lijm) te plakken op de lichtbruine strookjes op de Paperbit (zie voorbeeld en foto hieronder).
  • Sluit alles precies aan zoals op deze foto staat:

  • Klik op de onderstaande knop om de programmeeromgeving te openen:
    Microsoft MakeCode for microbit editor
  • Klik op de grote plus (+) om een nieuw project te maken. Geef het project de naam Toetertest en druk op [Create].
  • Maak met programmablokken het volgende programma. De groene pijltjes geven aan waar de diverse blokken te vinden zijn.

  • Upload het programma naar de micro:bit, druk op knop [A] en luister of je muziektonen hoort. Zo ja, dan heb je alles goed aangesloten. Hoor je niks, controleer alle verbindingen nog eens goed…

Stap 2: test de kerstlampjes

  • Sluit nu de twee krokodilklemmen van de kerstverlichting aan zoals op deze foto te zien is:

  • Klik in de programmeeromgeving links bovenin op [Start]. Geen zorgen, je eerste programma blijft bewaard. Klik weer op de grote plus (+) om een nieuw project te maken. Geef het project de naam Lampjestest en druk op [Create].
  • Om de lampjes en aansluitingen te testen gaan we een lichtschakelaar maken van de micro:bit. Maak met programmablokken het volgende programma. De groene pijltjes geven aan waar de diverse blokken te vinden zijn.

  • Upload het programma naar de micro:bit, druk op knop [A] en kijk of de lichtjes aangaan en druk knop [B] om ze uit te schakelen. Lukt dit, dan heb je alles goed gedaan. Gaan de lampjes niet aan, niks aan de hand. Wissel de twee krokodilklemmen van de lichtjes van plek en druk nog eens op knop [A]. Nog steeds geen licht? Controleer je programma en alle verbindingen nog een keer…

Stap 3: test de lichtsensor

  • Maak de Paperbit LDR (LDR is een afkorting van Light Dependent Resistor oftewel een lichtsensor) door deze uit te knippen en kopertape (of strookjes aluminiumfolie met lijm) te plakken op de lichtbruine strookjes op de Paperbit.
  • Sluit het LDR kaartje precies aan zoals op deze foto staat:

  • Klik in de programmeeromgeving links bovenin op [Start]. Klik daarna weer op de grote plus (+) om een nieuw project te maken. Geef het project de naam Sensortest en druk op [Create].
  • Maak met programmablokken het volgende programma. De groene pijltjes geven weer aan waar de diverse blokken te vinden zijn.

  • Dit piepkleine programmaatje leest steeds de hoeveelheid licht die op de sensor valt en laat dat getal over het schermpje van de micro:bit scrollen. Voor het getal geldt: hoe lager hoe lichter, hoe hoger hoe donkerder. Houd je hand maar eens vlak boven de sensor…

Stap 4: laat alle onderdelen samenwerken

  • We gaan ervoor zorgen dat als je je hand (of een voorwerp) voor de sensor houdt, er een kerstliedje begint te spelen en dat de lampjes op de maat meeknipperen.
  • Omdat dit een wat groter programma wordt, gaan we het stap voor stap opbouwen en het beter leesbaar maken zodat je later makkelijker dingen in kunt aanpassen.
  • Klik in de programmeeromgeving links bovenin op [Start]. Klik daarna weer op de grote plus (+) om een nieuw project te maken. Geef het project de naam Hack de Kerstlampjes en druk op [Create].
  • Eerst maken we een aantal variabelen. Een variabele is een soort doosje of vakje in het computergeheugen waarin je een getal of stukje tekst kunt bewaren, eventueel aanpassen en weer kunt ophalen. Klik eerst op de blokjesgroep Variabelen en dan op knop [Maak een variabele…]. Maak op deze manier de volgende 3 variabelen en druk na elke variabele op knop [Ok] (de groene pijltjes in het plaatje hieronder wijzen je de weg):
    1. lampjes aan
    2. lampjes uit
    3. waarde lichtsensor

  • Nadat je de 3 variabelen hebt toegevoegd, zou je dit op het scherm moeten zien:

  • Gebruik het blokje “stel … in op …” om bij het starten van je programma de variabele lampjes aan op 1 te zetten en de variabele lampjes uit op 0 zoals hieronder:

  • In het blok “de hele tijd” lezen we telkens de waarde van de lichtsensor en stoppen die waarde in de variabele waarde lichtsensor. Als die waarde groter dan 600 is, dan vinden we het te donker en dan doen we de lampjes aan. Zo niet, dan doen we de lampjes uit. Zorg dat de juiste blokjes in het blok “de hele tijd” komen te staan, zoals hieronder:

  • Upload het programma weer naar de micro:bit. Kijk of de lampjes gaan branden als je je hand (of een voorwerp) voor de sensor houdt. Werkt het niet, controleer dan nog een keer goed je programma. Het zou ook kunnen dat je niet het getal 600 moet gebruiken, maar een andere waarde. Want je weet wat voor de lichtsensor geldt: hoe lager het getal hoe lichter, hoe hoger het getal hoe donkerder.
  • Voor het stukje programma dat geluidjes maakt en de lampjes laat knipperen maken we een functie, een apart stukje blokjescode dat je aan kunt roepen als je het wil laten beginnen. Daarmee maak je je programma overzichtelijker. Klik onder Geavanceerd op Functies en dan op knop [Maak een functie…], zoals hieronder met de groene pijltjes is aangegeven:

  • Vul in het scherm als naam van de functie maak geluid en licht in en klik op [Klaar] zoals je hieronder ziet:

  • Eerst zetten we het geluid op hard! Om daarna muzieknootjes te spelen en tegelijkertijd de lampjes op de maat te laten knipperen gaan we steeds 4 blokjes herhalen (dupliceren, dat is hetzelfde als kopiëren):

    1. eerst een blokje dat de lampjes aanzet
    2. dan een blokje dat een muzieknoot speelt gedurende een aantal beats
    3. vervolgens een blokje dat de lampjes weer uitzet
    4. als laatste een rustblokje van een aantal (delen van) beats

    Hieronder zie je hoe de eerste noot van “Oh Denneboom” wordt geprogrammeerd:

  • Om de functie “maak geluid en licht” te laten starten zodra je je hand (of een voorwerp) voor de sensor houdt, moeten we het programma een klein beetje aanpassen. Klik met je rechtermuisknop in blok “de hele tijd” op blokje “schrijf digitale pin P1 naar lampjes aan”, en kies dan Verwijder blokken om alleen dit ene blokje weg te halen. Kijk maar hieronder:

  • Klik op blokjesgroep “Functies” en sleep blokje “aanroep maak geluid en licht” op de plek waar het verwijderde blokje stond, zoals hieronder is aangegeven met de groene pijl:

  • Upload het programma weer naar de micro:bit. Als je nu je hand (of een voorwerp) voor de sensor houdt, zou je steeds de eerste noot van “Oh Denneboom” moeten horen en zouden de lampjes aan en uit moeten gaan.
  • Om het Kerstliedje verder af te maken, gaan we steeds de 4 eerder aangegeven blokjes dupliceren en passen we als het nodig is toon, beat en rust aan. Om makkelijk te zien waar je in het lied gebleven bent, kun je via je rechtermuisknop op het grijze gedeelte een reactie toevoegen naast de functie, waarin je aangeeft welke lettergreep er door die toon gespeeld wordt. Hieronder staat hoe dat eruitziet:

  • Maak nu het liedje af. Hieronder zie je de notenbalk met de letters eronder die je kunt gebruiken (als je op het plaatje klikt, kun je de melodie ook nog laten voorspelen):

  • Je kunt op dezelfde manier natuurlijk ook een ander liedje programmeren, zoals Jingle Bells (klik op het plaatje voor het hele liedje):

  • Alvast een fijne Kerst allemaal..!

Thuistip: je kunt ook je eigen luidspreker aansluiten om het geluid wat harder te laten klinken, zoals in deze video:

Advertisement

CoderDojo micro:bit opdrachten

Klik op de onderstaande knop om de programmeeromgeving te openen:
Microsoft MakeCode for microbit editor

Opdrachten met alleen de micro:bit (en USB-kabel en batterijhouder)

  1. Programmeer je naam in licht
  2. Maak een knipperend hart
    • de in de video bedoelde [Aan de slag] pagina vind je hier

  3. Maak een digitaal kompas
    1. Een kompas met vier letters (niet zo nauwkeurig)
    2. Een kompas met acht pijlen (nauwkeuriger)
  4. Programmeer het spel ‘steen, papier, schaar’
  5. Bouw een digitale dobbelsteen
  6. Matrixbord
  7. Programmeer een slimme thermometer
    • het in de video gebruikte werkblad vind je hier
  8. Maak je eigen huisdier, de MicroPet

    • de in de video gebruikte MicroPet bladen vind je hier
    • het programma in de video is niet helemaal in het Nederlands omdat toen nog niet alle blokjes vertaald waren. Inmiddels kan het programma wel helemaal in het Nederlands geschreven worden, zoals hieronder:
      (opklikken voor groot)

    9. Opdrachten waarbij je bubbeltjesplastic en plakband nodig hebt

  9. Crashtest auto

    • het is het leukst als je een speelgoedauto of klein wagentje kunt gebruiken
    • je hebt ook bubbeltjesplastic en plakband nodig

  10. Overgooispel

    • je hebt bubbeltjesplastic en plakband nodig

    11. Opdracht waarbij je snoertjes met krokodilklemmen en een piëzo-toetertje nodig hebt

  11. Overgooispel met geluid

    • je hebt 2 snoertjes met krokodilklemmen en een piëzo-toetertje nodig

    12. Opdrachten waarbij je deze dingen nodig hebt

    • snoertjes met krokodilklemmen
    • losse LED-lampjes (met 2 pootjes)
    • piëzo-toetertje
    • kopertape (of aluminiumfolie en lijm)
    • schaar en plakband
    • en natuurlijk de Paperbits

      • Je hoeft niet meteen alle Paperbit-kaartjes uit te knippen en er kopertape (of strookjes aluminiumfolie) op te plakken, maar hieronder staat hoe je ze in elkaar kunt zetten als je ze bij een opdracht nodig hebt.

  12. Werken met de LED kaartjes (lampjes)
  13. Werken met het Piëzo-Toeter kaartje (muziek)
  14. Zingend kompas (muziek)

    15. Opdracht waarbij je ook deze dingen nodig hebt

    • een LDR (afkorting van Light Dependent Resistor oftewel een lichtsensor)
    • een weerstandje van 10 kΩ (spreek uit: tien kilo-ohm)
    • een buigrietje
  15. Werken met de lichtsensor: nachtlampje

    16. wordt vervolgd

Wave to get the Train moving

Wave to get the Train moving

Shortly after Christmas 2018 my good friend Marco (from CODA FabLab and CoderDojo) thought it was a good idea to create an interactive little contraption in the basement of the Apeldoorn public library (Netherlands). The train is heavily inspired by the 1981 set Electric Passenger Train but with a 9V electric motor underneath. So I decided to use the color sensor and 2 touch sensors of the Mindstorms NXT 2.0 set together with the NXT Intelligent Brick because we could not spare any EV3 parts…

Kids (but also a lot of adults) are waving their hand in front of the sensor to make the train move from one buffer stop to the other, showing working headlights while driving. Both buffer stops contain a touch sensor. It has been running in the display case ever since. I only had to clean the track once and had to readjust the color sensor because it moved away from the window a bit, causing it to no longer see waving hands… More technical details can be found below the videos/images.

This is the test phase on my desktop at home:

And this is the setup in the display case in the library:

The code was written using the NXT-G programming software and you can download the CodaTrain.rbt file here. Below is a screenshot of the complete program:

It contains of an infinite loop waiting until something inside the color range from blue until and including red is spotted by the color sensor, like so:

Then motor output A is powered. To be able to adapt an NXT connection to a 9V Train Connection Wire I used a Mindstorms NXT Converter Cable.

So output A is powered until touch sensor 2 is touched, then the power to output A it cut. Again the waiting is for something to move in front of the color sensor (same code is used as shown above). When this happens, output A is powered in the other direction, to reverse the train ride. Until sensor 1 is touched, etc…

The NXT Intelligent Brick is powered by the Rechargeable Battery for LEGO Mindstorms NXT which is ultimately connected to a regular 220V electrical outlet coming from the ceiling of the library

Maak je eigen digitale Kerstkaart

Maak je eigen digitale Kerstkaart

Met Scratch kun je een digitale Kerstkaart maken waarop allerlei dingen bewegen, van kleur veranderen en die geluid maakt. Deze kaart kun je dan bijvoorbeeld naar iemand mailen of WhatsAppen.

Een Scratch account maken (gratis en 100% betrouwbaar)
Om je zelfgemaakte kaart naar iemand te kunnen mailen of WhatsAppen moet je hem kunnen delen. En om te kunnen delen heb je een gratis Scratch account nodig. Als je dat niet hebt, kun je dat op deze manier aanmaken:

  1. Ga naar scratch.mit.edu
  2. Klik links bovenin op Create
  3. Klik links bovenin op het wereldbolletje en kies Nederlands
  4. Klik rechts bovenin op Word Scratcher
  5. In het venster Join Scratch (NL: Word Scratcher) vul de nu de volgende dingen in:
    • Create a username (NL: Verzin een gebruikersnaam): gebruik je favoriete game nickname
    • Create a password (NL: Maak een wachtwoord): 2x hetzelfde door jou verzonnen wachtwoord tikken en schrijf het ergens op (!)
    • Klik op Next (NL: Volgende)
    • What country do you live in? (NL: In welk land woon je?): Netherlands
    • Klik op Next (NL: Volgende)
    • When were you born? (NL: Wanneer ben je geboren): kies je geboortemaand en geboortejaar
    • Klik op Next (NL: Volgende)
    • What’s your gender? (NL: Wat is je geslacht): kies Female (NL: Vrouw) of Male (NL: Man)
    • Klik op Next (NL: Volgende)
    • What’s your email? (NL: Wat is je e-mailadres?): BELANGRIJK vul je eigen e-mailadres in of dat van je ouders. LET OP doe dit heel netjes, want je krijgt een e-mail van Scratch die je MOET bevestigen anders kun je je kaart niet delen. Als je het niet zeker weet, vul dan coda@dotnetjes.nl in, dan kan ik je account voor jou activeren.
    • Klik op Create Your Account (NL: Maak je account)
    • Klik op Done (NL: Aan de slag) om te beginnen..!

Zoek het startproject om te Remixen
Er staat al een project klaar met een aantal achtergrondjes, kerstmannetjes in slee en kerstmuziek. Deze gaan we gebruiken om te starten, als volgt:

  1. klik bovenin je browser op:

    zie je dit niet, klik dan eerst linksboven op:
  2. tik: coda kerstkaart en druk op je toetsenbord op [Enter]
  3. als het goed is zie je nu dit, klik er maar op:
  4. klik dan rechtsboven op:

Een achtergrond kiezen
We gaan beginnen met de achtergrond van de kerstkaart, dit heet in Scratch het Speelveld.

  1. klik rechts onderin op:
  2. klik daarna links bovenin op:
  3. Aan de linkerkant zie je 5 achtergronden staan. Kies een leuke uit, bijvoorbeeld nummer 2 lampjes
  4. Om de achtergrond een ander kleurtje te geven, klik je eerst op het emmertje met verf:
  5. Daarna kies je een kleur door hierop te klikken:
  6. schuif met de witte rondjes om de kleur in te stellen:
  7. klik hierna op een wit vlak op je achtergrond om je kleur te gebruiken
  8. heb je spijt van je kleur dan kies je een ander door stap 5 en 6 opnieuw uit te voeren
  9. wil je een stapje terug, klik dan op:

Een sprite kiezen
Er staan een aantal kerstmannetjes met rendierslee klaar om te gebruiken. Kies er steeds een uit en maak hem zichtbaar of onzichtbaar door op het oogje te klikken:

De gekozen sprite laten bewegen
Als je een kerstman met slee hebt gekozen, gaan we hem over het scherm laten vliegen. Hiervoor gaan we een stukje programmeren.

  1. als je gewenste sprite zichtbaar en geselecteerd is, klik dan links bovenin op:
  2. kies dan in de lijst aan de linkerkant voor categorie Gebeurtenis en sleep “Wanneer op (groene vlag) wordt geklikt” naar het middenveld:
  3. Om de slee te laten bewegen gaan we een aantal blokjes vastmaken aan het eerste blokje. De twee rondjes laten zien uit welke categorie de blokjes komen. En er staat een korte uitleg naast. Let ook op de getallen die in de blokjes staan. Probeer het maar:
  4. Als je aan het programmeren bent, test je je programma vaak. Met de groene vlag rechts bovenin start je je programma. Het rode stopbord laat het weer stoppen. Kijk eens of de slee doet wat je wil.
  5. Als je je kaart groot op het scherm wil zien, klik dan rechts bovenin je scherm op de knop met de pijltjes die naar buiten wijzen. Om weer naar kleiner scherm te gaan, klik je op de knop met de pijltjes die naar binnen wijzen, zoals hieronder te zien is:

Een tekst-sprite maken
Als je tekst op je kaart wil zetten die je van kleur wil laten veranderen kun je daar het beste een sprite voor maken.

  1. Laat je muis boven het blauwe kat-icoon zweven en kies voor het kwastje, zoals hieronder:
  2. Selecteer de grote T en klik op het middenscherm. Je kan dan je tekst tikken, zoals hieronder te zien is:
  3. Als je daarna de rand die om je tekst staat, selecteert, kun je van alles aanpassen. Hieronder zie je hoe dat kan, probeer het maar:
  4. Om de letters steeds van kleur te laten veranderen, gaan we weer een paar blokjes code neerzetten. klik eerst links bovenin op:
  5. Gebruik deze blokjes om de tekst de hele tijd van kleur te laten veranderen:
  6. Klik op de groene vlag om te kijken of de tekst van kleur verandert en of de slee het nog doet.

Dansende losse letters
We gaan nu het woord Kerst met losse sprite letters maken. Dan kunnen we ze ook apart van elkaar laten bewegen.

  1. Laat je muis boven het blauwe kat-icoon zweven en kies voor het vergrootglas, zoals hieronder:
  2. Klik daarna rechts bovenin op Letters om alle lettersprites te zien.
  3. Kies de letter K en zet ‘m op de gewenste plek.
  4. Herhaal de stappen 1 en 2 om de letters E, R, S en T neer te zetten.
  5. Selecteer de letter K in het gedeelte rechts onderin, zoals je hier kunt zien:
  6. Om een letter te laten wiebelen, kun je deze blokjes gebruiken. Probeer het maar. En druk op de groene vlag om te zien of het werkt.
  7. Selecteer de volgende letter die je wil laten bewegen, bijvoorbeeld de E in het gedeelte rechts onderin, zoals je hier kunt zien:
  8. Hoe je een letter kunt laten springen zie je hieronder. Zet de blokjes neer, pas de getallen aan en start je programma met de groene vlag.
  9. Selecteer weer een andere letter, bijvoorbeeld de R. Deze gaan we als een ballon opblazen en weer snel leeg laten lopen, kijk maar hoe dat kan:
  10. Selecteer nu één voor één de rest van de letters en programmeer met blokjes voor elk van deze letters één van de eerder gemaakte bewegingen, dus of wiebelen, of springen, of vergroten/verkleinen. Test je programma daarna weer.

Kies een leuk melodietje
Als laatste gaan we je kaart een Kerstliedje laten spelen.

  1. klik rechts onderin op:
  2. klik daarna links bovenin op:
  3. Aan de linkerkant staan een aantal liedjes. Als je er een aanklikt en dan op de knop [Afspelen] klikt, kun je ze horen.
  4. Als je je gekozen liedje hebt geselecteerd, klik je links bovenin op:
  5. Deze blokjes zorgen ervoor dat het liedje begint te spelen als je op de groene vlag klikt. Zet ze maar neer en probeer het eens.

Deel je kaart
Als je kaart af is, kun je hem delen.

  1. Geef je kaart bovenin het scherm een duidelijke naam en druk dan op de knop [Delen]:

    LET OP: als je de knop [Delen] niet ziet, heb je je account niet geactiveerd via de e-mail die Scratch stuurde na je aanmelding. Dus dat moet je dan nog even (laten) doen.

  2. Je bent nu op de “project pagina” van je programma. Hier kan je de Instructies aanpassen (bijv. dat mensen op de groene vlag links bovenin moeten klikken). Gebruik dan rechts onderin de knop [Kopieer link] zodat je deze naar iemand kunt mailen of WhatsAppen:
  3. In het volgende scherm kun je de link echt kopiëren. Kijk maar. Als je er nou ook nog /fullscreen direct achteraan tikt, dan opent je kaart bij de ontvanger zo groot als het hele scherm.

    Kijk maar eens wat er gebeurt als je deze voorbeeldlink aanklikt, daar staat dus /fullscreen achter: https://scratch.mit.edu/projects/459718050/fullscreen

  4. Plak de link met eventueel /fullscreen erachter in een e-mail of WhatsApp bericht naar iemand en vertel dat hij of zij op de groene vlag moet klikken om de kaart tot leven te zien komen..!

Tot slot
Je kunt zoveel kaarten maken en sturen als je wil, met voor iedereen een ander liedje en tekst als je dat leuk vindt. Hier zijn nog twee links die handig kunnen zijn:

In elk geval fijne Kerstdagen en een gezond Nieuwjaar..!

Bouw en programmeer je eigen Otto DIY robot bij CoderDojo CODA Apeldoorn

Bouw en programmeer je eigen Otto DIY robot bij CoderDojo CODA Apeldoorn

Al ruim een jaar zijn we met CoderDojo CODA Apeldoorn bezig met Otto DIY robots. Onder de bezielende leiding van Lia en John bouwen de deelnemertjes de Otto robots en programmeren deze vervolgens zodat ze tot leven komen.

De Otto DIY robot is volledig open source zowel wat betreft de hardware als de software. Dit geeft iedereen de kans om eigen versies te ontwikkelen met nog meer functies en mogelijkheden.

Je kunt bij de CoderDojo de kunststof buitenkant met een 3D-ontwerpprogramma aanpassen en laten printen. Ook helpen we je met het in elkaar zetten en programmeren van je Otto robot, zodat je hem of haar o.a. kan laten lopen, dansen, obstakels laat ontwijken en geluidjes laat maken.

Op deze manier ontdek je spelenderwijs uit welke onderdelen een robot bestaat en hoe je deze kunt besturen met kleine programmaatjes.

  • De complete bouwpakketten kun je via de Ottobot DIY bedenkers of via de CoderDojo aanschaffen.
  • De meest recente onderdelenlijst, aanpasbare 3D-printer CAD sjablonen, bouwhandleiding, gratis (driver) software, links naar de iOS en Android apps, programmeervoorbeelden en video tutorials vind je hier.
  • Om na het bouwen van de Ottobot de juiste programmeeromgevingen en driver te downloaden en in te stellen, zodat je programma’s naar je robot kunt uploaden om uit te laten voeren, heb ik een Nederlandstalige handleiding gemaakt.
  • Op deze pagina staan o.a. nog een keer de bouwinstructies, als video en als presentatie.

Course C# Advanced including WPF, MVVM and SQL Database

Lesson 01 Tuesday June 2nd (08:30 – 12:00)

Homework to finish before Lesson 01
Perform the following assignment using Visual Studio 2019:
Exercise: Creating an Object Oriented System for Drawing Shapes using C#
If certain topics appear to be unclear, an explanation of the different object oriented concepts used in this exercise can be found here:

Class Time
During this first lesson we will get acquainted with each other and discuss the topics of the course.
We will use the homework exercise mentioned above to perform a thorough recap of the C# Fundamentals course to see where we all stand knowledge wise and skill wise.
These recap topics will be discussed as well:

1. Generics

2. Delegates

Lesson 02 Tuesday June 9th (08:30 – 12:00)

Homework to finish before this lesson
Perform the parts 5, 6, 7 and 8 using Visual Studio 2019.
Exercise: Creating an Object Oriented System for Drawing Shapes using C#
For the parts 6 and 7 this article might be handy:

Class Time
The second lesson will start with a discussion of the homework. Other topics during class time:

3. Performing Operations Asynchronously

Lesson 03 Tuesday June 16th (08:30 – 12:00)

Homework to finish before this lesson
Perform the parts 9 and 10 using Visual Studio 2019 of this exercise:
Exercise: Creating an Object Oriented System for Drawing Shapes using C#
If there is nothing else for you to watch on Netflix, you could check out Async programming deep dive by Bart De Smet.

Class Time

4. Creating a Windows Desktop Application using WPF

First released as part of .NET Framework 3.0 in 2006

5. Working with XML and XAML

6. Creating Modern and Advanced GUIs using WPF

Lesson 04 Tuesday June 23th (08:30 – 12:00)

Homework to finish before this lesson
Perform the parts 11, 12 and 13 of this exercise:
Exercise: Creating an Object Oriented System for Drawing Shapes using C#

Class Time

  • Homework Discussion
  • Visual Studio Tip of the Day: Vertical Selection + Editing
    it gets even better thanks to Karel’s tip 💡 Multi-line and multi-cursor editing
  • Some Key WPF Concepts
    • A Dependency Property is a property whose value depends on multiple sources, such as animation, data binding, styles, or visual tree inheritance. A Dependency Property also has the built-in feature of providing notification when the property has changed. Their values are not stored in the local object but (only changed) properties are stored in a dictionary of key/value pairs which is provided by the DependencyObject class.
    • Attached Properties are a special kind of Dependency Properties that are settable on a different object than the one that exposes it. An example of attached property is a StackPanel using DockPanel.Dock=”Top” or a Button using Canvas.Left=”120″.
  • Content Controls are controls that can contain a single item in their Content property. This can of course also be one of the panel controls…
    Below are some examples of Content Controls:
  • Examples of other types of controls can be found here
  • ItemsControls contain a collection of child objects. The ItemSource or Items property specifies the source collection of child objects.
    • 💡 If you specify a value for the ItemsSource property, the Items collection is made read-only and fixed-size, which means that you cannot add items to the collection directly.

    Below are some examples of ItemsControls:

    • ComboBox
    • ListBox
      👓 WPF101 > ItemControlEventsDemo
      👓 WPF101 > CSharpCodeInXAMLDemo
    • 💡 Example of how to display selected text from both ComboBox and ListBox in a Label:
      •       private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
      {
          if (myLabel != null)
          {
              // Selector is a base class of both ComboBox and ListBox
              // Both ComboBoxItem and ListBoxItem derive from ContentControl
              myLabel.Content = ((sender as Selector)?.SelectedValue as ContentControl)?.Content.ToString();
          }
      }
  • WPF Resources
    👓 WPF101 > ResourcesDemo
    • Defining Resources by Using XAML
    • Defining Resources Programmatically
    • Referencing Resources in XAML
      • reference as StaticResource
      • reference as DynamicResource

        • The most common markup extensions used in WPF programming are those that support resource references (StaticResource and DynamicResource)

        💡 you could also paint using a Gradient Brush

  • Styles
    👓 WPF101 > StylesDemo

    • You can think of a style as a convenient way to apply a set of property values to more than one element

Lesson 05 Thursday July 2nd (08:30 – 12:00)

Homework to finish before this lesson
Complete the following assignment using Visual Studio 2019:
Exercise: Creating a Visual Solar System using WPF

Class Time

  • Homework Discussion
  • Visual Studio Tip of the Day: Run To Cursor
  • Control Templates
    👓 WPF102 > ControlTemplatesDemo
    👓 WPF102 > SeparateControlTemplateDemo

    • By setting the Template property to another instance of a Control Template, you can completely replace the appearance (visual tree) of a control.

    In many cases, Control Templates give you sufficient flexibility so that you do not have to implement your own Custom Controls

  • Routed Events
    👓 WPF102 > TunnelingAndBubblingDemo
    👓 WPF102 > RoutedEventsDemo

    • Routed events are events that can invoke handlers on multiple listeners in an element tree, instead of invoking them only on the object that raised the event. This behavior is largely invisible if you are handling an event on the element where it is raised, but becomes powerful if you use any of these scenarios: defining common handlers at a common root, compositing your own control, or defining your own custom control class.

  • Commands
  • Data Binding

    • Data Binding enables a clean separation of business logic from UI

    • Introduction
    • Binding Markup Extension
    • Data Binding Modes
      👓 WPF102 > BindingToControlsDemo
      💡 In general, user-editable control properties, such as those of text boxes and check boxes, default to two-way bindings, whereas most other properties default to one-way bindings.
      • OneWay
      • TwoWay
      • OneWayToSource
      • OneTime

Lesson 06 Tuesday July 7th (08:30 – 12:00)

Homework to finish before this lesson
Complete parts 6 and 7 of our solar system assignment:
Exercise: Creating a Visual Solar System using WPF

Class Time

  • Homework Discussion
  • Visual Studio Tip of the Day: C# Interactive Window
  • DataContext
    • Specify the Binding Source using C# (via Code Behind)
      👓 WPF103 > BindingToSingleObjectDemo
    • Specify the Binding Source using XAML
      👓 WPF103 > BindingToSingleObjectDemoXAMLTwoStep
      👓 WPF103 > BindingToSingleObjectDemoXAMLOneStep
  • The UpdateSourceTrigger Property
    👓 WPF103 > UpdateSourceTriggerDemo
  • Property Change Notification
  • Converting Data

Lesson 07 Tuesday July 14th (08:30 – 12:00)

Homework to finish before this lesson
Complete parts 8 and 9 of our solar system assignment:
Exercise: Creating a Visual Solar System using WPF

Class Time

Lesson 08 Tuesday July 21th (08:30 – 12:00)

Homework to finish before this lesson
Complete parts 10, 11, 12, 13, 14, 15, 16 and 17 of our solar system assignment:
Exercise: Creating a Visual Solar System using WPF

Class Time

  • Homework Discussion
  • Visual Studio Tip of the Day: Searching inside Visual Studio plus Navigate/GoTo (Ctrl+,)
  • Binding to Collections
    • 👓 WPF105 > SelectedValuePathDemo
    • 👓 WPF105 > BindingToACollectionDemo
    • Observable Collections
      💡 ObservableCollection(T) implements INotifyCollectionChanged to provide notifications when items are added or removed or the whole collection is changed. When a control is bound to an ObservableCollection, WPF automatically adds a CollectionChanged event handler to that ObservableCollection’s events.
      💡💡 Each object in the collection must implement INotifyPropertyChanged. Otherwise changes to individual object properties are not broadcasted.
      👓 WPF105 > ObservableCollectionDemo
      👓 WPF105 > ObservableCollectionDemoXAML
      • 💡 this demo also uses a so-called ObjectDataProvider

        • An ObjectDataProvider allows us to specify a method name, pass arguments and invoke it from XAML

    • Collection Views
      💡 A Collection View is a wrapper around a collection that enables sorting, filtering and grouping without manipulating the underlying source collection. All collections have an associated default collection view. The binding engine always accesses the collection by using the associated view.
      👓 WPF105 > CollectionViewDemo
    • Data Templates
      👓 WPF105 > DataTemplateComboBoxDemo
      The ListView control makes heavy use of DataTemplates.
      💡 the _Starter.xaml file in every 👓 WPF10x demo solution contains both a Collection View and a Data Template
  • Showing Sample Data while Designing
  • Appendix: Summary of WPF Class Hierarchy

7. The Model-View-ViewModel (MVVM) Software Architectural Pattern

  • What Wikipedia has to say
  • Introducing the MVVM Pattern
  • Getting started with MVVM WPF

    • Fundamental equation of MVVM: View.DataContext = ViewModel
    also called ‘Marrying the View and the ViewModel’

  • Commands Revisited

    • All user controls that implement the ICommandSource interface (e.g. Buttons, MenuItems) support a Command property that will be invoked when the control’s default action occurs.

    Commands are simply objects that implement the ICommand interface. Or, put another way, Commands are messages from the View to your View Model

  • A more complete MVVM Example
    👓 NorthwindTradersMVVM
    • the NorthwindTradersMVVM Demo – Notes, Tips & Tricks document
    • including some basic Unit Tests

      The name of your Unit Test Method should consist of three parts:

      • the name of the method being tested
      • the scenario under which it is being tested
      • the expected behavior when the scenario is invoked

      💡 some examples are:

      • Withdraw_ValidAmount_ChangesBalance()
      • Withdraw_AmountMoreThanBalance_Throws()
      • Add_SingleNumber_ReturnsSameNumber()
      • Add_MaximumSumResult_ThrowsOverflowException()

Lesson 09 Tuesday July 28th (08:30 – 12:00)

Homework to finish before Tuesday September 1st, 2020 (09:00 CEST)
Complete the final assignment: Exercise: Final Assignment

Class Time

  • Visual Studio Tip of the Day: Code Editor Keyboard Shortcuts

    • 8. Introduction to Databases and SQL

    9. How to Design a Relational Database

    10. Implementing a database using Microsoft SQL Server 2014
    💡 in case of error message “Saving changes is not permitted”

  • Create a Database in SQL Server Management Studio
  • Create Tables
  • Create a foreign key relationship in Table Designer
  • some extracurricular articles on numerical data types:

    • 11. Perform Create/Read/Update/Delete (CRUD) Operations on SQL Server

  • The original ADO.NET low-level Data Access Library
  • ADO.NET Entity Framework
    Microsoft’s implementation of an Object-Relational Mapping (ORM) framework (since August 2008)

    • Final Lesson 10 Tuesday August 4th (08:30 – 12:00)

    Class Time

  • Visual Studio Tip of the Day: Conditional and Hit Count Breakpoints
         👓 BreakpointsDemo
  • Development Approaches with Entity Framework
         ⧉ this figure illustrates the choices in Visual Studio
         💡 server names: (localdb)\MSSQLLocalDB or (local)\SQLEXPRESS
         💡 Install latest version (now 6.4.4): Install-Package EntityFramework
         💡 Logging and intercepting database operations

    • 12. Language-Integrated Query (LINQ)

  • Behaviors in WPF

    • A behavior encapsulates functionality into a reusable component that can be attached to View elements. Behaviors keep the MVVM pattern intact.

    💡 You can also use an Attached Property to provide a service, which is often referred to as Attached Behavior

  • Attached Behavior versus Blend Behaviors
    • Attached Behavior
      👓 WPF106 > AttachedBehaviorDemo
    • Blend Behavior

      • Blend Behaviors are meant to give interaction designers more flexibility to design complex user interactions without writing any code.

      • Since 2018 XAML Behaviors for WPF is available as NuGet package
        👓 WPF106 > BlendBehaviorDemo
        👓 WPF106 > AnotherBlendBehaviorDemo
        👓 WPF106 > StoryboardAnimationDemo
  • BackgroundWorker Class
         since .NET 2.0 (2006)
  • Task Parallal Library (TPL)
         since .NET 4.0 (2010)
  • Validation using INotifyDataErrorInfo and Validation Attributes
  • Recap: Benefits of using MVVM
    • Collaborative working
    • Ease of testing
    • Ease of maintainability
    • Transparent Communication

      • In the Microsoft solution stack, the binder is a markup language called XAML

      recommended book about design patterns in general: Head First Design Patterns

  • Action vs Func vs Predicate in C#
         👓 ActionFuncPredicateDemo

    • Een sneller obstakelontwijkend voertuigje

    Een sneller obstakelontwijkend voertuigje

    Voor de CoderDojo CODA Apeldoorn heb ik dit obstakelontwijkende voertuig samengesteld. Zwaar geïnspireerd op één van de WeDo 2.0 Building Instructions, namelijk het model Steer. Het bijzondere aan dit model is dat je met 1 enkele motor rechtdoor kunt rijden en achteruit naar links kunt bewegen en daarmee het voertuig heel redelijk kunt laten manoeuvreren. Dit model beweegt sneller dan de MazeRunnerBot versie 2.0.

    Bouwinstructies
    Weer heb ik het model in LEGO Digital Designer (LDD) getekend, zodat er een bouwtekening kan worden gegenereerd. Deze bouwinstructies kun je downloaden of bekijken in de formaten HTML en PDF. Hier kun je het 3-D LDD bronbestand ObstakelOntwijker.lxf downloaden.

    Programmacode
    Het bijbehorende programma is niet erg groot. Er wordt (nadat de snelheid van de motor wordt ingesteld) voortdurend vooruit gereden totdat de bewegingssensor iets waarneemt. Dan wordt een korte tijd de draairichting van de motor omgedraaid, waardoor het wagentje een bochtje achteruit naar links maakt. Vervolgens wordt weer vooruit gereden, etc.

    LineFollowerBot Programma

    Ook kan eenvoudig een soort afstandsbediening worden gemaakt met 3 mogelijkheden, vooruit rijden, bochtje links achteruit en stoppen:

    LineFollowerBot Programma

    Het obstakelontwijkende voertuigje in actie:

    MazeRunnerBot versie 2.0 met zwaartepunt boven zwenkwiel

    MazeRunnerBot versie 2.0 met zwaartepunt boven zwenkwiel

    Tijdens de 2018 editie van het Bloeiend festival konden de deelnemers actief kennismaken met de eerste versie van de MazeRunnerBot. Toen bleek dat er te weinig gewicht op het zwenkwieltje lag, zodat het dubbele gladde bandje nogal eens slipte.

    Voor versie 2 van de MazeRunnerBot is het batterijcompartiment boven het zwenkwiel geplaatst en zijn de gladde bandjes vervangen door een band met profiel.

    Bouwinstructies
    Het model heb ik ook weer met LEGO Digital Designer getekend, zodat er een bouwtekening kan worden gegenereerd. Deze bouwinstructies kun je downloaden of bekijken in de formaten HTML en PDF.

    Ook kun je het bestand MazeRunnerBot 2_0.lxf downloaden. Met welk programma je dat kunt openen en hoe je het model daarin correct kunt bekijken, staat onderaan deze blog post in de paragrafen Extra informatie en Lego Digital Designer Developer Mode.

    Programmacode
    Hieronder staat het bijbehorende programma (dit is niet veranderd sinds de eerste versie), waarin eerst eenmalig het display links onderin het scherm een neutrale/witte achtergrond krijgt en de motorkracht wordt gezet. Daarna wordt telkens vooruit gereden tot de bewegingssensor iets waarneemt binnen 15 cm afstand. De motor stopt dan met draaien. Op dat moment wordt een willekeurig getal tussen de 1 en de 9 gekozen en dit getal wordt vermenigvuldigd met 0,1 zodat de uiteindelijke uitkomst een waarde tussen de 0,10 en 0,90 is (deze waarden worden overigens steeds in het display links onderin getoond). De motor gaat nu de andere kant op draaien gedurende de laatstgenoemde waarde in seconden. Hierdoor draait het wagentje telkens een willekeurig stukje. Daarna gaat door de herhalingslus de motor weer zo draaien dat het karretje rechtdoor verder rijdt. Tot het volgende obstakel verschijnt, enz…

    MazeRunnerBot Programma

    Beelden van het 2.0 model in een met houten blokjes gemaakte arena met het lopende programma op een iPad ernaast.

    Jong en oud aan de LEGO WeDo tijdens Apeldoorns Bloeiend Festival

    Jong en oud aan de LEGO WeDo tijdens Apeldoorns Bloeiend Festival

    Afgelopen zaterdagmiddag tijdens het festival Bloeiend werd het Apeldoornse culturele seizoen gestart met allerlei activiteiten in de buitenruimte tussen Gigant en CODA. Dit was de gebruikte wervingstekst van ons gedeelte:

    LEGO Robot Parcours
    CODA en Gigant slaan de handen ineen en organiseren op de trappen van het Van Reekumplein een heus LEGO robottoernooi. Je leert van alles over het besturen en programmeren van een robot en hoe deze in elkaar zit. Ook leer je meer over de werking van sensoren en motoren en hoe je een robot precies dat kunt laten doen wat jij wilt. Rij met de LEGO auto over het parcours en pas de auto aan zodat deze extra snel, sterk of stoer wordt!

    Met houten latten hadden we op de vlakke traptreden richting het CODA museum een soort doolhof/hindernisbaan gelegd en daarnaast een aantal LEGO Education WeDo 2.0 sets en iPads. Op deze iPads kon met behulp van dit blog een tweetal modellen worden nagebouwd en geprogrammeerd, LineFollowerBot en MazeRunnerBot.

    Gedurende de middag werd er door diverse mensen en kinderen op de brede treden lekker gebouwd, geprogrammeerd, geprobeerd en gefotografeerd. Gelukkig was het goed weer…

    Doel van onze aanwezigheid is het promoten van het CODA FabLab in het algemeen en de LEGO bouwmiddagen en de CoderDojo in het bijzonder.

    Hieronder een korte impressie van de middag:

    Iets anders geweldigs dat tijdens het festival door de straat trok, was onderstaande zandtekenmachine BLOM van Gijs van Bon.