Node-RED - Dashboard

We gaan nu een eenvoudige Dashboard in Node Red bouwen. Hiermee kan je een eenvoudige controle paneel voor jouw AI-Bot bouwen. Standaard in Node-Red kan je de programma's (flows) gebouwd hebt soms wel een per ongeluk "kapot" maken, door een Node bijvoorbeeld per ongeluk te verwijderen. Als je de besturing van jouw AI-Bot in een Dashboard bouwt, dan kan er veel minder mis gaan.

We hebben hiervoor wel nieuwe soorten Nodes nodig. Die moeten we dus eerst installeren.

Installeer Node Dashboard Module

Klik in jouw Node-Red omgeving op de 3 horizontale lijntjes helemaal rechts boven (zie pijl 1 in onderstaande afbeelding). Selecteer hierna de optie "Manage palette" (zie pijl 2 in de onderstaande afbeelding).

Klik nu op het tabblad "Install" (pijl 1), en zoek daarna op het woord "dashboard" (pijl 2).
Klik dan op het knopje "install" (pijl 3) achter "node-red-dashboard".

 

Klik nu opnieuw op de knop "Install" wanneer je de installatie moet bevestigen.

Nu moet je even wachten tot de installatie gereed is, dit duurt ongeveer 10 - 20 seconden.

Wanneer de installatie klaar is, staat er "Installed" achter de node module die je zojuist hebt geinstalleerd.

Bouw een Kleurenkiezer

In de Basis les heb je geleerd hoe je het LED lampje van kleur kan laten veranderen. Maar als je een ander kleurtje wilt moet je dat in de Shine Node selecteren of de kleur die je wilt hebben doorsturen in een berichtje. 
Met een kleurenkiezer (colour-picker) op een dashboard kan je veel makkelijker de kleur van het LED lampje veranderen.

Laten we eerst een nieuwe werkblad voor de Dashboard Flows aanmaken. Dit doe je door op het plus teken rechtsboven van het werkblad te klikken.

Noem deze nieuwe werkblad "Dashboard" en klik op "Done".

Sleep nu de node "colour picker" onder het kopje "dashboard" naar het werkblad. Sleep ook een "change" en "shine" node naar het werkblad en verbind ze met elkaar zoals op de afbeelding hieronder.

Dubbelklik op de colour picker node en geef het de naam "Led Colour". Selecteer de opties "Show hue slider" en "multiple values during editing" bij de optie "Send". Klik daarna op het potlood icoontje bij de optie "Group" zodat we een nieuwe Dashboard Group kunnen aanmaken.

Zoals je ziet krijgt de nieuwe dashboard group al standaard de naam "Default". We moeten nu nog een tabblad voor deze group aanmaken. Dit kan je doen door op het potlood icoontje achter de optie "Tab" te klikken.

De nieuwe tabblad heeft al een naam gekregen: "Home". Je hoeft hier verder nu niks meer te doen.
Klik nu op de knoppen "Add" en/of "Done" totdat je weer het werkblad "Dashboard" ziet. 

Dubbelklik nu op de Shine node. Selecteer de Mode 'Shine' en Color '-- set msg.color --'.
Klik op "Done".

Dubbelklik op de Change Node. Geeft het de naam "Change Colour" en zorg dat er bij "Set" 'msg.color' komt te staan, en bij "to" 'msg.payload'. Klik nu op "Done".

Je hebt nu een Flow gebouwd die de waarde van een kleurenkiezer naar een change node stuurt. De waarde uit de kleurenkiezer (msg.payload) wordt dan in een berichtje (msg.color) naar de Shine node gestuurd.
Klik nu op Deploy. We gaan nu de Dashboard openen op te kijken hoe het resultaat eruit ziet.
Klik hiervoor op het driehoekje die naar beneden wijst (pijl 1) en daarna op de optie "Dashboard" (pijl 2).

Klik nu op het externe link icoon.

Test nu jouw kleuren kiezer door op het grijze vierkantje te klikken.

Een Volume Schuifknop Bouwen

Omdat jouw AI-Bot straks wat meer gaat praten is het wel handig wanneer je de volume van het geluid makkelijk kan aanpassen. We gaan hiervoor een een volume schuifknop bouwen.

Sleep hiervoor de volgende nodes naar het werkblad "Dashboard" en verbind ze met elkaar zoals in de afbeelding hieronder.

  • Inject (onder kopje "common")
  • Slider (onder kopje "dashboard")
  • Function (onder kopje "function")
  • Exec (onder kopje "function")

Pas nu de Inject node aan:

Payload: <String> met waarde 75
Selecteer de optie "Inject once after 0,1 seconds, then"
Deze Inject Node stuurt hierdoor nu ieder keer na een Deploy, zonder dat je er zelf nog iets voor hoeft te doen meteen de waarde "75" door in het berichtje 'msg.payload'.

Pas de slider node aan:

Label: "Volume"
Range Max waarde: verander die van 10 naar 100.
De maximale waarde moeten we aanpassen naar 100 omdat we met percentages willen werken: het volume kan hierdoor straks ergens tussen 0 en 100% worden gezet.

Pas de function node aan:

Name: "Add Percentage Sign"
Function: Voeg de volgende regel bovenaan toe: "msg.payload = msg.payload + '%'"
Omdat de slider alleen een getal doorstuurt, moeten we er zelf een procent teken erachter plakken. Dat doet die ene regel code hierboven.

Pas de exec node aan:

Command: "amixer set PCM"
Dit is een opdracht die naar de Raspberry Pi gestuurd kan worden om de volume aan te passen.
En omdat de optie Append 'msg.payload' aanstaat, zal straks iedere keer als je de volume schuifknop aanpast een nieuwe opdracht naar de Raspberry Pi gestuurd worden. Bijvoorbeeld als je de schuifknop halverwege zet: "amixer set PCM 50%".

Klik nu op "Deploy" en test jouw nieuwe volume schuifknop in jouw Node-RED dashboard om te kijken of die goed werkt. Laat hiervoor jouw AI-Bot wat zeggen met de Flow die je in de Basis les hebt gebouwd.

Opdracht

Toon nu de gekozen kleurcode en het percentage van het volume op de Node-RED dashboard.