Dashboard aanmaken

Open in de rechterkolom het drop-down menu en selecteer “dashboard”, of rechtstreeks door het grafiek-achtige icoontje te selecteren rechtsboven. Voeg in het dashboard window een tab toe door op de “+tab” knop te drukken. Er wordt dan een tab toegevoegd met de naam “Tab 1”, die kun je wijzigen door met je muis boven Tab 1 te bewegen, en dan het menu “edit” te kiezen dat verschijnt:

Geeft het tab een eigen naam, bijvoorbeeld “Teller”, en druk op de rode knop “Update” als je dat hebt gedaan. Om Dashboard-nodes te kunnen plaatsen moet je nog een group toevoegen, doe dit door in het menu dat verschijnt als je boven de tab “Teller” beweegt met je muis nu het item “+ group” te kiezen. Er wordt dan een group “Group 1” toegevoegd, die kun je ook weer een andere naam geven, bijvoorbeeld “Seconden”. Dit ziet er dan zo uit:

In de flow die we nu hebben verwijderen we eerst de rechtstreekse verbinding tussen de teller-functie-node en de debug-node. Je kunt hem gewoon selecteren en daarna op delete drukken op je toetsenbord. Voeg nu een “gauge” node toe uit je node-palette links, het ziet er dan zo uit:

Dubbelklik op de “gauge” node, zodat we hem aan de juiste dashboard-group kunnen toevoegen. “Gauge” is het Engelse woord voor wijzer, we voegen een wijzer toe die de waarde van de teller weergeeft. De teller telt tot 100, daarom moeten we de maximum waarde van de wijzer nog aanpassen van 10 naar 100 en we kunnen de naam, het label en de units nog aanpassen, als volgt:

Als je klaar bent, druk dan weer op de rode “Done” knop, en daarna op “Deploy”. Druk op de knop links van de Inject node om de flow te starten.

Als je nu rechtsboven op het vierkantje met pijltje drukt

opent een nieuw tabblad in je browser, met daarop het dashboard dat je net hebt aangemaakt:

En de wijzer telt het aantal seconden sinds dat je op de knop van de inject node hebt gedrukt! Je zult zien dat de kleur van de wijzer verandert naarmate het getal hoger wordt, dat is iets dat je kunt instellen in de eigenschappen van de gauge!