HowTo: Node Red - Maak een gebruikersinterface met dashboardknooppunten

Ik weet niet of dashboards DE manier zijn om het hart van een nerd sneller te laten kloppen, maar ze zijn wel degelijk een manier om het hart van een nerd sneller te laten kloppen. Voor degenen die zijn opgegroeid met StarTrek en Co. zijn dashboardachtige overzichten in de vorm van diagrammen en afbeeldingen het toppunt van technologie. Dit gevoel kun je nu zelf creëren met NodeRed dankzij bepaalde knooppunten.

Want als je je SmartHome eenmaal zo ver hebt dat hij allerlei gegevens over je eigen vier muren verzamelt, wil je hem natuurlijk presenteren. Maar hoe? Deze gegevens kun je immers niet zomaar in een fotoalbum plakken, zoals je laatste vakantiefoto's.

Een eenvoudige, informatieve en decoratieve manier is om de bestaande gegevens via het dashboardknooppunt voor NodeRed te presenteren. Dit biedt naast diverse display-elementen ook de mogelijkheid tot interactie met uw SmartHome-systeem. Dit betekent dat u tegelijkertijd waarden kunt instellen, virtuele schakelaars kunt omzetten, acties kunt activeren en de status ervan kunt controleren.

Een overzicht van de verschillende functies van het dashboardknooppunt vindt u in het volgende artikel


Eisen

Handige artikelen:
Om nieuwe nodes te kunnen installeren, moet NodeRed natuurlijk al geïnstalleerd zijn.
Hoe je een RaspberryPi voorbereidt en vervolgens NodeRed erop installeert, wordt beschreven in de volgende artikelen.

In de volgende drie artikelen wordt beschreven wat er moet gebeuren om de RaspberryPi voor te bereiden:
RaspberryPi – setup voor nerds!
RaspberryPi – De eerste configuratie!
RaspberryPi – Bedien de RaspberryPi via SSH

NodeRed – NodeRed installeren op de RaspberryPi
NodeRed – Installeer nieuwe knooppunten

Vereist gereedschap:
-Nee-

Benodigd materiaal:

In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.


Log in op de configuratie-interface van NodeRed

Voordat u uw NodeRed-configuratie kunt bewerken, moet u - indien geactiveerd - eerst inloggen op de NodeRed-configuratie-interface.

Weergave van het aanmeldingsvenster. Hier moet u de inloggegevens invoeren die u tijdens de configuratie van de login hebt opgegeven. Informatie hierover vind je in het artikel NodeRed - gebruikersaanmelding instellen.

Dashboardknooppunt installeren

Om de dashboardknooppunten te kunnen gebruiken, moet u over het knooppunt beschikken
knooppunt-rood-dashboard
installeren.
Hoe uw node is geïnstalleerd in het artikel NodeRed – Installeer nieuwe knooppunten beschreven.
 
Weergeven tijdens de installatie van de node "node-red-dashboard".

Overzicht van de beschikbare in- en uitgangsknooppunten

Door het installeren van de dashboardnodes ontvangt u een heel pakket extra knooppunten die geschikt zijn voor het weergeven en invoeren van diverse waarden. Deze worden zoals gebruikelijk weergegeven in het knooppuntenpalet in het linkergedeelte van het configuratiemenu. Details over de afzonderlijke knooppunten vindt u hieronder.

Weergave van de dashboardknooppunten in het palet Knooppunten.

Knooppunt en positionering van de elementen in het dashboard

Het eerste en eenvoudigste knooppunt is het "knoopknooppunt". Hiermee kun je een knop op je dashoard plaatsen. Deze werkt dan als een knop in de echte wereld. Als er op wordt geklikt, stuurt het een aanpasbare waarde en een aanpasbaar onderwerp naar de gekoppelde node.

Knopknooppunten kunnen bijvoorbeeld heel goed worden gebruikt om acties te activeren. Zo kun je bijvoorbeeld lampen aan- en uitzetten.

Voordat u het knopknooppunt kunt gebruiken, moet het eerst op het lay-outraster van het dashboard worden geplaatst.

Naast de functies van de daadwerkelijke knooppunten kan voor elk ook de positionering op de lay-out van het latere dashboard worden geconfigureerd. Het dashboard is een aparte website die centraal beheerd kan worden via de dashboardconfiguratie.

Door de dashboardknooppunten te installeren, werd een nieuw tabblad toegevoegd aan het linker configuratiegebied. Je herkent het aan het icoontje in de vorm van een staafdiagram. Klik hierop om de basisconfiguratie van het dashboard te openen.

Hier zie je de verschillende tabbladen "Layout", "Thema" en "Site" in het bovenste gedeelte. Rechts hiervan zie je een pijl die naar boven en naar rechts wijst. Als je hierop klikt, word je doorgestuurd naar de website van het dashboard.

U komt op de dashboardpagina door op het met de muisaanwijzer gemarkeerde symbool in de dashboardtab te klikken.

Je kunt ook direct de dashboardpagina selecteren. Voeg hiervoor gewoon "/ui/" toe aan het adres van je NodeRed-configuratiepagina. Bijvoorbeeld, als het adres van je NodeRed-configuratiepagina is
https://192.168.172.5:1880
dan is het adres naar je dashboard
https:// 192.168.172.5:1880/ui/

Ten eerste gaat het om de lay-out. Hiermee kun je de respectievelijke invoer- en uitvoerelementen (dashboardknooppunten) vrijwel vrij op het dashboard plaatsen. Het dashboard biedt de mogelijkheid om individuele dashboardknooppunten samen te vatten in groepen. De weergavevolgorde van deze knooppunten kan dan worden ingesteld op het dashboard. Bovendien kunnen of moeten deze gegroepeerde knooppunten worden toegewezen aan een specifiek "tabblad".

Naast het tabblad "Home" kunnen ook andere tabbladen worden aangemaakt. Dit is bijvoorbeeld handig om de elementen in verschillende kamers in een smart home-systeem virtueel te scheiden. Je kunt bijvoorbeeld alle sensoren en actuatoren in de woonkamer samenvatten in een tabblad met de naam "Woonkamer". Dit maakt het gemakkelijker om het overzicht te bewaren en brengt structuur in het vaak snel toenemende aantal knooppunten.

Dit is ook wat je kunt zien en instellen op het tabblad "Lay-out" van de dashboardconfiguratie. Alle tabbladen en de bijbehorende groepen worden daar weergegeven. In de volgende schermafbeelding

"Layout" gebied van de dashboardconfiguratie. Hier kun je enkele van de afzonderlijke tabbladen zien (in dit voorbeeld "Home", "Raspi-gegevens", "Instellingen" en "Tasmota-status"). De groepen kunnen ook worden herkend. Het tabblad "Raspi-gegevens" bevat bijvoorbeeld de groepen "1" en "2". Elke groep bevat vervolgens de eigenlijke dashboardelementen die eraan zijn toegewezen. Je kunt deze zichtbaar maken door op het kleine pijltje te klikken dat naar rechts wijst.
Weergave van het tabblad "Thema" van de dashboardconfiguratie. Hier kun je de stijl, de basiskleur en het lettertype voor het dashboard instellen.
Op het tabblad "Site" van de dashboardconfiguratie kun je ook de titel van de dashboardpagina en andere opties instellen.

Een ander voorbeeld:

Op dit lay-outoverzicht kun je zien dat er twee tabbladen zijn met de namen "Instellingen" en "Home". Op het tabblad "Instellingen" vind je bijvoorbeeld de verschillende groepen zoals "Server", "RasPi" of "Status". Op het tabblad "Home" vind je daarentegen alleen de groep "Default". In de uitgebreide groep "Server" kun je ook zien hoe de afzonderlijke elementen zoals "Server herstarten" of "Scherm uitschakelen" zijn gerangschikt.
U vindt deze tabbladen en groepen nu in de dashboardweergave. In de getoonde weergave bevindt u zich op het tabblad "Instellingen". Het eerste rode kader markeert de groep "Server". De groep "LED-streep" is gemarkeerd met het tweede rode kader. De grote rode pijl aan de linkerkant markeert ook het symbool waarop je moet klikken om naar een ander tabblad te gaan.
Als u op dit symbool klikt, worden alle beschikbare tabbladen weergegeven - in dit geval "Instellingen" en "Home".

Het knopenknooppunt

Het knopknooppunt is een van de zeer eenvoudige knooppunten. Je kunt het gebruiken om virtuele sleutels te bouwen. Om dit te doen, sleept u het knopknooppunt van het Knooppuntpalet naar het NodeRed-configuratiegebied. Als u nu dubbelklikt op het knooppunt, kunnen de volgende opties worden geconfigureerd.

De "Groep" definieert de groep en het tabblad waarin de knop wordt geplaatst. In dit voorbeeld staat de knop op het tabblad "TestTab" in de groep "TestGroup". Met "Size" kun je de grootte van de knop instellen. Verderop in het artikel zie je een voorbeeld van verschillende groottes. Je kunt ook de instelling "Pictogram" gebruiken om pictogrammen op de knop weer te geven. Om een selectie van de beschikbare pictogrammen te krijgen, klik je gewoon op de link "Material Design pictogram" in de infobalk aan de rechterkant. "Label" bepaalt de tekst van de knop. "Met "Kleur" en "Achtergrond" kun je de kleur van de knop en de tekst van de knop instellen. Met "Payload" en "Topic" bepaal je welke waarde (payload) via welk topic wordt verzonden zodra de knop wordt ingedrukt. Last but not least, een zeer belangrijke functie: Door het vakje "If msg arrives on input, pass through to output." aan of uit te vinken, kun je het doorsturen van een bericht dat is ontvangen op de ingang van het knoopknooppunt naar de uitgang activeren of deactiveren. Met "Name" kun je de naam van het knooppunt instellen voor de NodeRed configuratie zoals gebruikelijk.
Dit is de weergave die je krijgt als je klikt op het kleine (Bewerken) potloodje naast het Groepsgedeelte in het vorige venster. Dit brengt je naar het venster waarin de groep en het tabblad kunnen worden toegewezen aan het knoopknooppunt (of een ander dashboardknooppunt). In principe bewerkt u de eigenschappen van de hele groep in dit venster. De toegewezen tab (onder "Tab") en de breedte van de groep (onder "Breedte") kunnen worden ingesteld. Je kunt ook de weergave van de groepsnaam activeren of deactiveren en instellen of het mogelijk moet zijn om de groep "in te klappen", d.w.z. de inhoud te verbergen.
In het dashboardoverzicht worden vervolgens alle opgenomen tabbladen weergegeven in een uitklapbare paginaweergave. Hier kunt u heen en weer schakelen door op het betreffende tabblad te klikken.
De weergave van de knoppen van verschillende grootte op het dashboard. 

dropdown-knooppunt

Het dropdown-knooppunt is een knooppunt waarmee u een keuzelijst op het dashboard kunt maken. U kunt bijvoorbeeld een lijst met beschikbare temperaturen voor een radiator maken. Maar u kunt ook allerlei andere vermeldingen definiëren met een grote verscheidenheid aan namen en de bijbehorende waarden.

Om dit te doen, sleept u een dropdown-knooppunt uit het Knooppunt-palet naar de Node Red-configuratie-interface en dubbelklikt u erop.

Het weergegeven venster verschijnt dan. Net als bij de andere knooppunten kunnen hier de toegewezen groep en tab en de grootte worden ingesteld. Zoals voorheen kunt u ook het "Label" instellen. In dit geval betekent "Label" de naam voor de vervolgkeuzelijst op het eigenlijke dashboard. Onder "Placeholder" kun je een placeholder instellen die wordt weergegeven zolang er geen waarde is geselecteerd in de vervolgkeuzelijst. Het wordt pas echt spannend in het gedeelte "Opties". Hier kun je de beschikbare opties voor je vervolgkeuzelijst configureren. Hiervoor wordt in de rechterkolom de naam voor de overeenkomstige invoer ingesteld en in de linkerkolom de waarde van de overeenkomstige invoer. Je kunt meer opties toevoegen door op "+optie" te klikken. U kunt ook de volgorde van de items wijzigen met behulp van de drie kleine horizontale lijnen aan de linkerkant van elk item. Om dit te doen, klik je gewoon op de lijnen in de invoer die je wilt verplaatsen en houd je de muisknop ingedrukt. Je kunt nu de geselecteerde invoer verplaatsen door de muisaanwijzer omhoog of omlaag te bewegen. De andere getoonde functies gedragen zich op precies dezelfde manier als reeds beschreven voor de "Knop".
Weergave van de geconfigureerde vervolgkeuzelijst op het dashboard.
Als u nu op het selectieveld klikt, kunt u kiezen tussen de verschillende eerder geconfigureerde vermeldingen.

schakel knooppunt

Het schakelknooppunt komt in principe overeen met een virtuele schakelaar. Hiermee kunnen schakelsignalen worden verzonden of schakeltoestanden worden weergegeven.

Om dit te doen, sleept u het schakelknooppunt van het knooppuntenpalet naar de rode configuratie-interface van het knooppunt en dubbelklikt u erop.

Het weergegeven venster verschijnt dan. Net als bij de andere knooppunten kunnen hier de toegewezen groep en tab en de grootte worden ingesteld. Zoals voorheen kun je ook het "Label" instellen. Onder "Pictogram" kun je een pictogram selecteren dat je voor het label of zonder label als schakelsymbool kunt weergeven. De overige eigenschappen zoals "Onderwerp" en "Naam" zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hier is dat je verschillende payloads kunt invoeren voor de "Aan" en "Uit" schakeltoestanden. Dit is ook logisch, omdat je anders geen onderscheid zou kunnen maken tussen de uitgeschakelde en de ingeschakelde toestand.
Zicht op de ingeschakelde schakelaar.
Zicht op de uitgeschakelde schakelaar.

schuifknoop

Het schuifknopknooppunt is ideaal voor het instellen van getallen binnen een bepaald bereik. Een goede use case is bijvoorbeeld om hem te gebruiken als dimmer voor een lamp.

Om het schuifknooppunt te gebruiken, moet u het eerst van het knooppuntenpalet naar de Node Red-configuratie-interface slepen en het instellingenmenu ervan openen door te dubbelklikken.

Net als bij de andere knooppunten verschijnt het instellingenvenster weer na dubbelklikken. Net als voorheen kunnen hier de toegewezen groep en tab en de grootte worden ingesteld. Zoals voorheen kun je ook het "Label" instellen. In het gedeelte "Bereik" kun je het waardebereik instellen waarover de schuifbalk moet bewegen. Dit gaat van "min"=de minimumwaarde tot max=de maximumwaarde. De toename kan worden ingesteld met "stap". De overige eigenschappen zoals "Onderwerp" en "Naam" zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hier is dat de payload natuurlijk wordt bepaald door de huidige "schuifwaarde".
Weergave van de schuifregelaar in het dashboard.

numeriek knooppunt

Het Numeric Node is een andere manier om numerieke waarden door te geven aan Node-Red voor verwerking.

Om dit te configureren sleept u een numeriek knooppunt van het knooppuntenpalet naar de configuratie-interface van knooppunt rood.

De spannende - want verschillende van de andere knooppunten - instelopties voor dit knooppunt zijn de twee eigenschappen "Waardeformaat" en "Bereik". Net als bij het schuifknooppunt kun je "Bereik" gebruiken om het mogelijke getalbereik te definiëren en de toename in te stellen. Met "Waardeopmaak" kun je de weergave van de waarde opmaken. Hier kun je bijvoorbeeld een eenheidsteken toevoegen na "{{value}}" zodat het dashboard later niet alleen de numerieke waarde weergeeft, maar een numerieke waarde plus een eenheid. Je kunt bijvoorbeeld ook een temperatuurwaarde labelen met "°C" als temperatuur.

Knooppunt voor tekstinvoer

Het tekstinvoerknooppunt is – zoals de naam al doet vermoeden – een knooppunt om tekstinvoer mogelijk te maken.

Naast de gebruikelijke instellingsopties zoals "Groep", "Grootte", "Label", "Onderwerp" en "Naam", kunnen de "Modus" en een "Vertraging" worden ingesteld voor dit knooppunt. Vertraging" wordt gebruikt om de tijd in te stellen die wordt gewacht na de laatste tekeninvoer totdat de tekens die in het tekstveld zijn ingevoerd naar het volgende knooppunt worden verzonden.
Onder "Modus" kun je selecteren welke gegevens in het betreffende veld moeten worden ingevoerd. Je kunt kiezen tussen de verschillende getoonde opties en het invoerveld perfect aanpassen aan de betreffende toepassing.
(Relatief eenvoudig ogende) weergave van het tekstknooppunt in de dashboardweergave.

Knooppunt datumkiezer

De date picker node doet in principe precies wat de naam doet vermoeden: je kunt er een bepaalde datum mee selecteren en deze vervolgens doorgeven aan NodeRed voor verdere verwerking.

Voor dit knooppunt kunnen geen andere opties (behalve de gebruikelijke) worden geconfigureerd. Na het invoeren van een datum op het dashboard wordt deze via payload doorgestuurd naar de aangesloten flow.
Weergave van de datumkiezer in het dashboard.

Kleurkiezer knooppunt

De Color Picker Node is ideaal voor het instellen van de kleur van een aangesloten RGB-lamp. Uiteraard kunt u hiermee in alle andere gevallen ook kleuren overbrengen naar Node-Red voor verdere verwerking.

Naast de "gebruikelijke instellingsopties" heeft het knooppunt Kleurkiezer de instellingsoptie "Formaat" en ook verschillende selectievakjes (aankruisvakjes) die je kunt instellen of verwijderen. Met de eigenschap "Formaat" kun je het formaat van de kleurenuitvoer instellen. Je kunt kiezen tussen XXXXXXX en XX. Door de eigenschap "Toon tintschuifbalk" of "Toon helderheidsschuifbalk" te activeren, kun je ook een schuifbalk weergeven voor het instellen van de TONEN- of helderheidswaarde. Je kunt ook de permanente weergave van verschillende "pickervarianten" configureren met de selectievakjes "Toon altijd swatch", "Toon altijd picker" en "Toon altijd waardeveld". Probeer gewoon uit welke weergave je het mooist vindt 🙂
Zo zou uw kleurenkiezer er op het dashboard uit kunnen zien.

vorm knooppunt

Met het formulierknooppunt heeft u de mogelijkheid om een typisch formulier te configureren. Hierdoor kunnen verschillende invoeropties worden gecombineerd. Dit is bijvoorbeeld perfect voor het configureren van een formulier voor het invoeren van een adres of iets dergelijks.

Naast de gebruikelijke instellingsopties kun je hier in het gedeelte "Formulierelementen" de weergegeven formulierelementen configureren. Je kunt tekstvelden toevoegen voor verschillende inhoud zoals tekst of getallen. Je kunt ook standaardinhoud opslaan of aangeven of dit een verplicht veld is of niet. Tot slot kun je ook je eigen tekst toevoegen aan de bevestigings- en annuleerknoppen.
Weergave van het testformulier in het dashboard.

Knooppunt voor tekstuitvoer

Het tekstuitvoerknooppunt is ideaal voor het eenvoudig weergeven van tekst. Zo kun je bijvoorbeeld meetwaarden van sensoren weergeven. De gebruiker heeft geen mogelijkheid om de weergegeven tekst te bewerken.

Daardoor kunnen er relatief weinig instellingen worden gemaakt in de eigenschappen van het knooppunt tekstuitvoer. Naast het "Waardeformaat" waarin je het uiterlijk van de tekstuitvoer kunt uitbreiden met extra informatie zoals eenheidstekens, heb je ook de mogelijkheid om de opmaak van de tekstuitvoer te bewerken. Je kunt kiezen uit vijf verschillende indelingen van label en tekst. Probeer gewoon uit welke het beste bij je presentatie past.
Tekstuitvoer knooppuntweergave in dashboardweergave.

meter knooppunt

Het meterknooppunt is perfect voor het visualiseren van meetwaarden. Dit betekent dat de gemeten waarden direct visueel geclassificeerd kunnen worden. U kunt ook getalsintervallen instellen waarin de kleur van de weergegeven schaal verandert. Hoge/gevaarlijke temperaturen kun je bijvoorbeeld met een rode kleur weergeven. Temperaturen in het normale bereik worden daarentegen weergegeven met een groene schaal. Hierdoor is het mogelijk om in één oogopslag een indruk te krijgen of de weergegeven meetwaarden in orde zijn of niet. Afgezien daarvan ziet het er gewoon best cool uit (/Star Trek-achtig). 🙂

Naast de gebruikelijke instellingsopties heb je de mogelijkheid om het "Type", het "Waardeformaat", de "Eenheden", het "Bereik", de "Kleurverlopen" en de "Sectoren" in te stellen voor het meter-knooppunt. Je bent al bekend met "Label" en "Waarde formaat" van de vorige knooppunten. Met de eigenschap "Units" kunt u opnieuw de weergegeven eenheid opgeven. U kunt de eigenschap "Range" gebruiken om het bereik van de weer te geven waarden te definiëren. Als je bijvoorbeeld een vochtigheidswaarde wilt weergeven, moet dit bereik gaan van 0 tot 100%. Voor een buitentemperatuurbereik moet een temperatuurbereik worden geselecteerd dat normaal niet wordt overschreden of onderschreden. Bijvoorbeeld -20°C tot 45°C. Je kunt nu de eigenschap "Kleurverloop" gebruiken om de kleuren te definiëren die worden weergegeven om overeen te komen met de gemeten waarde. In dit voorbeeld wordt de kleur groen weergegeven voor alle lage meetwaarden, de kleur geel voor alle middelhoge meetwaarden en de kleur rood voor alle hoge meetwaarden. Normaal gesproken zijn de punten waarop de ene kleur overgaat in de andere gelijkmatig verdeeld. Als u echter een andere schaling wilt of zelfs de middelste kleur wilt weglaten, kunt u de instelling "Sectoren" gebruiken om aan te geven waar de kleuren moeten overgaan.
Onder "Type" kun je ook selecteren welk type meter je wilt weergeven. Je kunt hier voorbeelden zien van de beschikbare types.
Weergave van het metertype "Gauge" in het dashboard.
Weergave van het metertype "Donut" in het dashboard.
Weergave van het metertype "Kompas" in het dashboard.
Weergave van het meettype "Niveau" in het dashboard.

grafiek knooppunt

Het diagramknooppunt is geschikt voor het weergeven van waardetrends. Hiermee kunt u bijvoorbeeld het verloop van een temperatuur over een ingestelde tijdsperiode opslaan en weergeven. Helaas worden de waarden momenteel slechts tijdelijk opgeslagen. Dit betekent dat als uw NodeRed-server crasht of anderszins opnieuw wordt opgestart, alle eerder weergegeven waarden verloren gaan.

Vergeleken met de vorige knooppunten biedt dit knooppunt nog enkele instelmogelijkheden. Hier kun je eerst naar toe "Type" stel het type diagram in. U kunt de afzonderlijke meetwaarden in elk display markeren door het vakje aan te vinken "Vergroot punt". zet. Met de parameter kunt u de resolutie of de duur van de gegevensvoortgang op de X-as (de horizontale as die van links naar rechts loopt) instellen "Label X-as". set. Hier kunt u opgeven hoe lang het duurt of hoeveel meetwaarden moeten worden weergegeven. U kunt er bijvoorbeeld voor kiezen om alle metingen van de afgelopen twee uur of de laatste 500 metingen weer te geven. Dit kan worden gecombineerd met "Label X-as". stel dan ook de labeling van de X-as in. Met "Y-as". Er kan echter alleen het weergegeven waardebereik van de Y-as worden ingesteld. Als u bijvoorbeeld bij een temperatuurcurve alleen het waardebereik van 0° tot 30°C wilt zien, moet u dit hier invoeren. De optie gebruiken "Legende" U kunt ook een legenda configureren, wat vooral handig is als er meerdere curven worden weergegeven. Dit betekent dat u voor elke curvekleur een naam kunt weergeven. De optie "Interpoleer". bepaalt hoe de afzonderlijke meetwaarden aan elkaar worden gekoppeld. Last but not least kunt u met "Reekskleuren" de kleuren instellen die worden gebruikt voor de curven en met "Blanco label" de tekst instellen die wordt weergegeven als er geen meetwaarden beschikbaar zijn voor de curve.
Weergave van het grafiekknooppunt in het dashboard.

audio-uitgangsknooppunt

De Audio Out Node is nog een van die knooppunten die precies doet wat de naam doet vermoeden. Het voert tekst uit als gesproken taal.

Hiervoor kun je de "TTS Voice" (="Text-To-Speech" stem) selecteren in de eigenschappen van het knooppunt. Hiermee kun je de stemuitvoer een beetje meer aan je eigen stijl aanpassen. Uiteindelijk zal dit knooppunt alle tekst die je er naartoe stuurt met je stem uitvoeren. Het is echter belangrijk dat deze stem niet lokaal op de Node Red server wordt uitgevoerd, maar in de browser van de gebruiker die zojuist het dashboard heeft geopend. Als er geen browservenster open is op het moment dat het spraakbericht wordt verzonden, wordt het spraakbericht niet uitgevoerd. Je kunt echter een lokale uitvoer op de NodeRed server realiseren via aangesloten luidsprekers met het programma "Espeak". Informatie hierover vind je in het artikel RaspberryPi – Installeer spraakuitvoer met eSpeak.

meldingsknooppunt

Met het meldingsknooppunt kunt u meldingen weergeven op het geopende dashboard. Dit kan worden weergegeven als informatie aan de rand of gecentreerd in het midden van het scherm, inclusief een bevestigingsknop.

In het instellingenvenster van het meldingsknooppunt kun je de positie van het meldingsveld instellen onder "Lay-out". Er is onder andere de optie "Dialoog OK/Annuleren", waarmee je de melding kunt uitrusten met twee knoppen. Deze moeten dan door de gebruiker worden bevestigd. Zo weet je zeker dat de gebruiker de melding heeft opgemerkt. Hiervoor kun je onder "Standaard actielabel" en "Secundair actielabel" aangeven wat er op de knoppen "Bevestigen" en "Annuleren" moet komen te staan.
Naast de meldingsvariant die de gebruiker moet bevestigen, is er ook de optie om de melding alleen als hint weer te geven. Selecteer hiervoor bijvoorbeeld "Rechtsboven" onder "Lay-out". Als je dan een melding naar het knooppunt stuurt, wordt deze rechtsboven weergegeven en verdwijnt deze na een paar seconden automatisch weer.
Weergave van een melding die moet worden bevestigd om deze weer te laten verdwijnen.
Weergave van een melding in de rechterbovenhoek.

UI-besturingsknooppunt

Je kunt het knooppunt UI-besturing gebruiken om het uiterlijk en het gedrag van de dashboardweergave te regelen. Je kunt het bijvoorbeeld gebruiken om de weergegeven tab te wijzigen en om groepen "uit te vouwen en in te klappen". Je kunt dit knooppunt ook gebruiken om te reageren op het feit of een gebruiker het dashboard heeft geopend of gesloten.

Voor dit knooppunt kan alleen de naam worden geconfigureerd in het instellingenvenster. Alle instelbare parameters of beschikbare informatie worden ook samengevat in de informatiebalk aan de zijkant.

sjabloon knooppunt

Het sjabloonknooppunt is een zeer veelzijdig knooppunt. U kunt het gebruiken om uw eigen HTML-code in het dashboard te integreren. Deze kan dan individueel reageren op de ontvangen berichten van de aangesloten knooppunten en ook zelf berichten versturen.

Met behulp van het sjabloonknooppunt kunt u inhoud toevoegen aan de koptekst van de pagina...
...of voeg knooppunten toe aan groepen die u naar wens hebt opgemaakt met uw eigen HTML-code.

thztjz

U kunt dit knooppunt bijvoorbeeld gebruiken om koppelingen naar elke pagina op het dashboard in te voegen. In dit voorbeeld wordt de link naar de MagicMirror-weergave gegenereerd en weergegeven op het dashboard.
Er zal dan een link zichtbaar zijn op het dashboard die u doorverwijst naar de MagicMirror-weergave.

Verdere voorbeelden

Hieronder vind je een kleine opsomming van de artikelen waarin ik ook de dashboardnodes gebruik. Misschien zit er ook iets voor jou bij. 🙂


Meer informatie

https://flows.nodered.org/node/node-red-dashboard

Veel plezier met het project

Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen.
Ideeën voor nieuwe projecten zijn altijd welkom. 🙂

PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂

Koop Me a Coffee op ko-fi.com       

7 comments

  1. Hallo, geweldig artikel. Een vraag: Hoe krijg je het voor elkaar om binnen een groep elementen naast elkaar te schikken, zoals de aan- en uitknop in je ledstripgroep?

    Hartelijke groeten
    Andreas

    1. Hallo Andreas,
      bedankt 🙂
      Dit zou eigenlijk automatisch moeten gebeuren zodra beide elementen naast elkaar passen in de groep. Hiervoor moet je de breedte van de elementen (de knoppen in het geval van de LED Stripe) bijvoorbeeld op 3 zetten, zodat ze passen in de groep (hier “LED Stripe”) met een breedte van 6 vervolgens naar elkaar. 🙂
      Laat me alsjeblieft weten of het gelukt is. 🙂
      Hartelijke groeten
      Fab

  2. Goedemorgen,

    geweldig artikel, heeft me veel geholpen. Heb je nog een algemene vraag over een Node-Red dashboard.

    Ik heb er een gebouwd en lees gegevens van een temperatuursensor via Node-Red. Deze heb ik aangesloten op de RPi. (Node-red draait op mijn RPi).

    Dit dashboard is ook makkelijk toegankelijk via de browser die ik gebruik. Maar alleen als ik in hetzelfde netwerk zit als de Raspberry Pi zelf.
    Ik heb geen toegang tot het dashboard vanaf het internetnetwerk van mijn smartphone.

    Weet jij een manier waarop ik toegang kan krijgen tot het dashboard vanaf het “openbare” netwerk of vanaf andere internetverbindingen dan mijn wifi thuis?

    Bedankt en vriendelijke groeten, Lennard

    1. Hallo Lennard,
      Bedankt. 🙂
      De (enige redelijk) veilige optie is om via een VPN verbinding te maken met je thuisnetwerk en zo toegang te krijgen tot de RaspberryPi in je netwerk.
      In de tussentijd kunnen veel routers (bijvoorbeeld de Fritzbox) worden geconfigureerd als VPN-servers.
      Helaas heb ik hier geen tutorial voor klaar liggen, maar waarschijnlijk wel. vind je er iets over? 🙂
      Hartelijke groeten
      Fabian

  3. Hallo,
    Ik werk al een paar dagen met de Node-Red op de Raspy-400. Een AD-converter (ADS1115) geeft me ook schone resultaten. Ik wil graag de lettergrootte voor de dashboardknooppunten wijzigen. Is dit mogelijk? Sommige codes worden op andere sites gepubliceerd, maar ze werken niet. Heb je een voorbeeld voor mij (bijv. voor meter) hoe je dat moet doen?

    Ik wil je alvast bedanken, alleen al vanwege het dashboard-artikel.
    Met vriendelijke groeten
    H. Harle

    1. Hallo Horst,
      Helaas heb ik hier geen voorbeeld van, maar waarschijnlijk wel. een "duwtje" in de goede richting. De knooppuntbeschrijving voor het meterknooppunt bevat de volgende opmerking:

      Als een klasse is opgegeven, wordt deze toegevoegd aan de bovenliggende kaart. Op deze manier kun je de kaart en de elementen erin stylen met aangepaste CSS. De klasse kan tijdens runtime worden ingesteld door een tekenreekseigenschap msg.className in te stellen.

      Dat betekent dat je eigenlijk in staat zou moeten zijn om het uiterlijk van de individuele componenten van het meterknooppunt te bewerken met CSS-code.
      Ik hoop dat dit je verder helpt. 🙂
      Hartelijke groeten
      Fab

Kommentar hinterlassen

Het e-mailadres wordt niet gepubliceerd. Erforderliche Felder sind mit * markiert

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.