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.
 
Bekijk tijdens de installatie van het knooppunt “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 “knopknooppunt”. Hiermee kunt u een knop op uw dashboard positioneren. Dit werkt dan als een knop in de echte wereld. Als erop wordt geklikt, stuurt het een instelbare waarde en een instelbaar onderwerp naar het gekoppelde knooppunt.

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 bovenaan de verschillende tabbladen “Lay-out”, “Thema” en “Site”. Rechts ervan staat een pijl die naar rechts wijst. Als u hierop klikt, wordt u doorgestuurd naar de dashboardwebsite.

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

Als alternatief kunt u de dashboardpagina ook rechtstreeks selecteren. Om dit te doen, hoeft u alleen maar “/ui/” toe te voegen aan het adres van uw NodeRed-configuratiepagina. Het adres van uw NodeRed-configuratiepagina is bijvoorbeeld
https://192.168.172.5:1880
dan is het adres naar je dashboard
https:// 192.168.172.5:1880/ui/

Allereerst gaat het om het verdelen van de lay-out. Met behulp hiervan kunt u de respectievelijke invoer- en uitvoerelementen (dashboardknooppunten) vrijwel vrij op het dashboard positioneren. Het dashboard biedt de mogelijkheid om individuele dashboardknooppunten in groepen te combineren. De weergavevolgorde van deze knooppunten kan vervolgens op het dashboard worden ingesteld. Bovendien kunnen of moeten deze gegroepeerde knooppunten aan een specifiek “tabblad” worden toegewezen.

Naast het tabblad ‘Start’ kunt u nog andere tabbladen maken. Dit is bijvoorbeeld praktisch om de elementen in verschillende kamers virtueel van elkaar te scheiden in een smart home-systeem. Dit betekent dat u alle sensoren en actuatoren in de woonkamer kunt combineren in een tabblad met de naam ‘Woonkamer’. Dit maakt het overzicht eenvoudiger en brengt structuur in het vaak snel toenemende aantal knooppunten.

Dit is ook wat u kunt zien en instellen op het tabblad “Indeling” van de dashboardconfiguratie. Alle tabbladen en de bijbehorende groepen worden daar weergegeven. In de onderstaande schermafbeelding

Het gedeelte 'Lay-out' van de dashboardconfiguratie. Hier kunt u enkele van de afzonderlijke tabbladen zien (in dit voorbeeld “Home”, “Raspi-gegevens”, “Instellingen” en “Tasmota-status”). De groepen kunnen ook worden geïdentificeerd. Het tabblad “Raspi-gegevens” bevat bijvoorbeeld de groepen “1” en “2”. Elke groep bevat vervolgens de feitelijke dashboardelementen die eraan zijn toegewezen. Deze kunt u zichtbaar maken door op het kleine pijltje naar rechts te klikken.
Weergave van het tabblad “Thema” van de dashboardconfiguratie. Hier kunt u de stijl, de basiskleur en het lettertype dat op het dashboard wordt gebruikt, instellen.
Op het tabblad “Site” van de dashboardconfiguratie kunt u 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 genaamd “Instellingen” en “Home”. Op het tabblad “Instellingen” vind je bijvoorbeeld de verschillende groepen zoals “Server”, RasPi” of “Status”. Op het tabblad ‘Home’ vindt u echter alleen de groep ‘Standaard’. In de geopende groep “Server” kunt u ook zien hoe de afzonderlijke elementen zoals “Server opnieuw opstarten” of “Scherm uitschakelen” zijn gerangschikt.
U kunt deze tabbladen en groepen nu vinden in de dashboardweergave. In de getoonde weergave bevindt u zich op het tabblad “Instellingen”. Het eerste rode kader markeert de groep “Servers”. De groep “LED Stripe” is gemarkeerd met het tweede rode kader. De grote rode pijl aan de linkerkant markeert tevens het symbool waarop je moet klikken om naar een ander tabblad te gaan.
Als u op dit symbool klikt, worden alle beschikbare tabbladen – in dit geval “Instellingen” en “Home” – weergegeven.

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.

“Groep” bepaalt in welke groep en tabblad de knop wordt geplaatst. In dit voorbeeld bevindt de knop zich op het tabblad “TestTab” in de groep “TestGroup”. Met “Grootte” kunt u de grootte van de knop instellen. Een voorbeeld van verschillende maten vindt u verderop in het bericht. Met de instelling “Icon” kunnen ook iconen op de knop worden weergegeven. Om een selectie te krijgen van de beschikbare iconen, hoeft u alleen maar op de link “Material Design icon” in de infobalk aan de rechterkant te klikken. “Label” geeft de tekst van de knop aan. “Met “Kleur” en “Achtergrond” kun je de kleur van de knop en de knoptekst instellen. De instelling voor “Payload” en “Topic” bepaalt welke waarde (payload) via welk onderwerp wordt verzonden zodra de knop wordt ingedrukt. Last but not least een zeer belangrijke functie: door het aan- of uitvinken van “Als een bericht binnenkomt bij invoer, ga dan door naar uitvoer.” U kunt het doorsturen van een bericht ontvangen op de ingang van het knopknooppunt naar de uitgang activeren of deactiveren. Met “Naam” kunt u zoals gebruikelijk de naam van het knooppunt voor de NodeRed-configuratie instellen.
Dit is de weergave die u krijgt als u op het kleine (bewerk)potlood naast het groepsgedeelte in het vorige venster klikt. Vervolgens komt u in het venster waarin de groep en het tabblad aan het knopknooppunt (of een ander dashboardknooppunt) kunnen worden toegewezen. In principe bewerkt u in dit venster de eigenschappen van de gehele groep. Het toegewezen tabblad (onder “Tab”) en de breedte van de groep (onder “Breedte”) kunnen worden ingesteld. Ook kunt u de weergave van de groepsnaam activeren of deactiveren en instellen of het mogelijk moet zijn de groep te ‘vouwen’, 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 getoonde venster verschijnt dan. Hier kunt u, net als voorheen bij de andere knooppunten, de toegewezen groep en het tabblad instellen, evenals de grootte. Ook, zoals voorheen, het “label”. “Label” betekent in dit geval het label voor de vervolgkeuzelijst op het daadwerkelijke dashboard. Onder “Placeholder” kunt u een placeholder configureren die wordt weergegeven zolang er geen waarde is geselecteerd in de vervolgkeuzelijst. Pas in het gedeelte 'Opties' wordt het echt spannend. Hier kunt u de beschikbare opties in uw vervolgkeuzelijst configureren. Om dit te doen, wordt de naam voor het overeenkomstige item in de rechterkolom ingesteld en de waarde van het overeenkomstige item in de linkerkolom. U kunt verdere vermeldingen toevoegen door op “+optie” te klikken. De volgorde van de vermeldingen kan ook worden gewijzigd met behulp van de drie kleine horizontale lijnen aan de linkerkant van elke vermelding. Om dit te doen, klikt u eenvoudigweg op de regels in het item dat u wilt verplaatsen en houdt u de muisknop ingedrukt. Door de muisaanwijzer naar boven of beneden te bewegen, kunt u de gemarkeerde invoer nu verplaatsen. De overige getoonde functies gedragen zich op 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 getoonde venster verschijnt dan. Hier kunt u, net als voorheen bij de andere knooppunten, de toegewezen groep en het tabblad instellen, evenals de grootte. Ook, zoals voorheen, het “label”. Onder “Icoon” kunt u een pictogram selecteren dat u als schakelsymbool voor het label of helemaal zonder label kunt weergeven. De overige eigenschappen zoals “Onderwerp” en “Naam” zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hier is dat u voor de schakeltoestanden “Aan” en “Uit” verschillende payloads kunt invoeren. Dat is logisch, want anders zou je geen onderscheid kunnen maken tussen de uitgeschakelde en 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.

Zoals gebruikelijk bij de andere knooppunten verschijnt het instellingenvenster opnieuw na dubbelklikken. Net als voorheen kunt u hier de toegewezen groep, het tabblad en de grootte instellen. Ook, zoals voorheen, het “label”. In het gedeelte ‘Bereik’ kun je instellen welk bereik van waarden de schuifregelaar moet bestrijken. Dit varieert van “min”=de minimumwaarde tot max=de maximumwaarde. De stapgrootte kan worden aangepast met “stap”. De overige eigenschappen zoals “Onderwerp” en “Naam” zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hierbij is dat de payload uiteraard wordt bepaald door de huidige “slider value”.
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 opwindende instelmogelijkheden voor dit knooppunt - omdat ze verschillen van de andere knooppunten - zijn de twee eigenschappen “Waardeformaat” en “Bereik”. Met “Bereik” kunt u het mogelijke nummerbereik definiëren en de stapgrootte instellen, zoals voorheen met het schuifknooppunt. Met “Waardeformaat” kunt u de weergave van de waarde opmaken. Hier kunt u bijvoorbeeld een eenheidsteken achter “{{value}}” plaatsen, zodat later niet alleen de numerieke waarde, maar een numerieke waarde plus de eenheid op het dashboard wordt weergegeven. U kunt bijvoorbeeld temperatuurinformatie markeren 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 instelmogelijkheden zoals “Groep”, “Grootte”, “Label”, “Onderwerp” en “Naam”, kunt u met dit knooppunt de “Modus” en een “Vertraging” instellen. “Vertraging” wordt gebruikt om de tijdsduur in te stellen die na de laatste tekeninvoer wacht totdat de in het tekstveld ingevoerde tekens naar het volgende knooppunt worden verzonden.
Onder “Modus” kunt u selecteren welke gegevens in het betreffende veld moeten worden ingevoerd. U kunt kiezen uit de verschillende weergegeven 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 kleurkiezerknooppunt de instellingsoptie “formaat” en ook verschillende selectievakjes (vinkjes) die u kunt instellen of verwijderen. Het formaat van de uitvoerkleur kan worden ingesteld met de eigenschap “Format”. U kunt kiezen tussen XXXXXXX en XX. Door de eigenschap “Toon tint-schuifregelaar” of “Toon helderheid-schuifregelaar” te activeren, kunt u ook een schuifregelaar weergeven voor het instellen van de HUE- of helderheidswaarde. U kunt ook de permanente weergave van verschillende “kiezervarianten” configureren met behulp van de selectievakjes “Altijd staal tonen”, “kiezer altijd tonen” en “Waardeveld altijd tonen”. Probeer gewoon eens uit welk uitzicht jij het leukst 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 instelmogelijkheden kunt u hier in het gebied “Formulierelementen” de weergegeven formulierelementen configureren. U kunt tekstvelden toevoegen voor verschillende inhoud, zoals tekst of cijfers. U kunt ook standaardinhoud opslaan of opgeven of dit een verplicht veld is of niet. Last but not least kunt u ook uw 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.

Als gevolg hiervan kan er relatief weinig worden ingesteld in de eigenschappen van het tekstuitvoerknooppunt. Naast het “Waardeformaat” waarin u het uiterlijk van de tekstuitvoer kunt uitbreiden met extra informatie zoals eenheidssymbolen, heeft u ook de mogelijkheid om de lay-out van de tekstuitvoer te bewerken. U kunt kiezen uit vijf verschillende arrangementen van etiket en tekst. Probeer gewoon uit welke het beste bij uw 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 instelmogelijkheden kunt u met het Gauge-knooppunt het “Type”, het “Waardeformaat”, de “Eenheden”, het “Bereik”, de “Kleurverlopen” en de “Sectoren” instellen. Je kent “Label” en “Waardeformaat” al van de vorige knooppunten. Met de eigenschap “Eenheden” kunt u de weergegeven eenheid opnieuw opgeven. U kunt de eigenschap “Range” gebruiken om het bereik van de waarden op te geven die moeten worden weergegeven. Als u bijvoorbeeld een vochtigheidswaarde wilt weergeven, moet dit bereik tussen 0 en 100% liggen. Voor een buitentemperatuurbereik moet een temperatuurbereik worden geselecteerd dat normaal gesproken niet onder of boven de grens ligt. Bijvoorbeeld -20°C tot 45°C. Met de eigenschap “Kleurverloop” kunt u nu de weergegeven kleuren specificeren, zodat deze overeenkomen met de weergegeven meetwaarde. In dit voorbeeld wordt de kleur groen weergegeven voor alle kleine metingen, de kleur geel voor alle gemiddelde metingen en de kleur rood voor alle hoge metingen. Normaal gesproken zijn de plaatsen waar de kleuren in de volgende overgaan gelijkmatig verdeeld. Als u echter een andere schaling wilt of zelfs de middelste kleur wilt weglaten, kunt u via de instelling ‘Sectoren’ opgeven welke kleuren moeten veranderen.
Onder “Type” kunt u tevens selecteren welk metertype u weergegeven wilt hebben. Voorbeelden van de beschikbare typen kunt u hier bekijken.
Weergave van het metertype “Gauge” in het dashboard.
Weergave van het metertype 'Donut' op het dashboard.
Weergave van het metertype 'Kompas' in het dashboard.
Weergave van het metertype “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 “punt vergroten” 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 “X-as label” 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 “X-as label” 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 “Interpoleert” bepaalt hoe de afzonderlijke meetwaarden met elkaar worden verbonden. Last but not least kunt u via ‘Seriekleuren’ de kleuren instellen die voor de curven worden gebruikt en ‘Blank label’ om de tekst in te stellen die moet worden weergegeven als er nog 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.

Om dit te doen, kunt u de “TTS Voice” (=”Text-To-Speech” stem) selecteren in de eigenschappen van het knooppunt. Hierdoor kun je de stemuitvoer iets meer aanpassen aan jouw stijl. Uiteindelijk voert dit knooppunt elke tekst uit die u er via spraak naartoe stuurt. Belangrijk is echter dat deze stem niet lokaal op de Node Red-server wordt weergegeven, maar in de browser van de gebruiker die zojuist het dashboard heeft geopend. Als er geen browservenster geopend is op het moment dat het spraakbericht wordt verzonden, wordt het spraakbericht niet uitgevoerd. U kunt echter lokale output op de NodeRed-server bereiken via aangesloten luidsprekers met behulp van het programma “Espeak”. Informatie hierover vindt u 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 notificatieknooppunt kunt u onder “Layout” de positie van het notificatieveld instellen. Er is onder meer de optie “OK/Cancel Dialog”, waarmee je de notificatie kunt uitrusten met twee knoppen. Deze moeten vervolgens door de gebruiker worden bevestigd. Zo weet je zeker dat de gebruiker het bericht zeker heeft opgemerkt. Om dit te doen, kunt u specificeren wat er op de knoppen “Bevestigen” en “Annuleren” moet staan onder “Standaard actielabel” en “Secundair actielabel”.
Naast de meldingsvariant die de gebruiker moet bevestigen, is er ook de mogelijkheid om de melding alleen als melding weer te geven. Selecteer hiervoor bijvoorbeeld “Rechtsboven” onder “Indeling”. Als u vervolgens een melding naar het knooppunt stuurt, wordt deze rechtsboven weergegeven en verdwijnt deze na enkele seconden automatisch.
Weergave van een melding die moet worden bevestigd om deze weer te laten verdwijnen.
Weergave van een melding in de rechterbovenhoek.

UI-besturingsknooppunt

Met het UI-controleknooppunt kunt u het uiterlijk en het gedrag van de dashboardweergave bepalen. Dit kan bijvoorbeeld worden gebruikt om het weergegeven tabblad te wijzigen en om groepen in- en uit te klappen. Ook kunt u via dit knooppunt reageren op de vraag 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 in de groep passen. Hiervoor moet je de breedte van de elementen (de knoppen op de LED-strip) bijvoorbeeld instellen op 3, zodat ze naast elkaar passen in de groep (hier “LED-strip”) met een breedte van 6 . 🙂
      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 u een manier hoe 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 misschien 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.