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.
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.
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.
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
Een ander voorbeeld:
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.
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.
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.
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.
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.
Knooppunt voor tekstinvoer
Het tekstinvoerknooppunt is – zoals de naam al doet vermoeden – een knooppunt om tekstinvoer mogelijk te maken.
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.
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.
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.
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.
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). 🙂
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.
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.
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.
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.
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.
thztjz
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. 🙂
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. 🙂
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?
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
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?
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
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
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
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
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
Bedankt 🙂
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
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
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
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:
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