{"id":1830,"date":"2019-04-29T13:19:07","date_gmt":"2019-04-29T11:19:07","guid":{"rendered":"https:\/\/www.nerdiy.de\/?p=1830"},"modified":"2021-12-18T17:32:07","modified_gmt":"2021-12-18T16:32:07","slug":"nodered-maak-een-gebruikersinterface-met-dashboard-nodes","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/nl\/nodered-maak-een-gebruikersinterface-met-dashboard-nodes\/","title":{"rendered":"HowTo: Node Red - Maak een gebruikersinterface met dashboardknooppunten"},"content":{"rendered":"

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\u00ebren met NodeRed dankzij bepaalde knooppunten.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Een overzicht van de verschillende functies van het dashboardknooppunt vindt u in het volgende artikel<\/p>\n\n\n\n

\n\n\n\n

Eisen<\/h2>\n\n\n\n

Handige artikelen:
<\/strong>Om nieuwe nodes te kunnen installeren, moet NodeRed natuurlijk al ge\u00efnstalleerd zijn.
Hoe je een RaspberryPi voorbereidt en vervolgens NodeRed erop installeert, wordt beschreven in de volgende artikelen.<\/p>\n\n\n\n

In de volgende drie artikelen wordt beschreven wat er moet gebeuren om de RaspberryPi voor te bereiden:
RaspberryPi \u2013 setup voor nerds!<\/a><\/strong><\/em>
RaspberryPi \u2013 De eerste configuratie!
<\/a>RaspberryPi \u2013 Bedien de RaspberryPi via SSH<\/a><\/strong><\/em>
NodeRed \u2013 NodeRed installeren op de RaspberryPi<\/a>
NodeRed \u2013 Installeer nieuwe knooppunten<\/a><\/strong><\/em><\/p>\n\n\n\n

Vereist gereedschap:
<\/strong>-Nee-<\/em><\/p>\n\n\n\n

Benodigd materiaal:<\/strong><\/p>\n\n\n\n

In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.<\/strong><\/p>\n\n\n\n

\n \n \n \n \n \n \n \n \n <\/colgroup>\n <\/table>\n \n \n \n<\/div>\n\n\n\n\n
\n\n\n\n

Log in op de configuratie-interface van NodeRed<\/h2>\r\n

Voordat u uw NodeRed-configuratie kunt bewerken, moet u - indien geactiveerd - eerst inloggen op de NodeRed-configuratie-interface.<\/p>\r\n

\"\"<\/a>
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<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Dashboardknooppunt installeren<\/h2>\n\n\n\n
Om de dashboardknooppunten te kunnen gebruiken, moet u over het knooppunt beschikken<\/div>\n\n\n\n
\n
knooppunt-rood-dashboard<\/pre>\n<\/div>\n\n\n\n
installeren.<\/div>\n\n\n\n
Hoe uw node is ge\u00efnstalleerd in het artikel NodeRed \u2013 Installeer nieuwe knooppunten<\/em><\/a> <\/strong>beschreven.<\/div>\n\n\n\n
 <\/div>\n\n\n\n
\"\"<\/a>
Weergeven tijdens de installatie van de node \"node-red-dashboard\".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Overzicht van de beschikbare in- en uitgangsknooppunten<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
Weergave van de dashboardknooppunten in het palet Knooppunten.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Knooppunt en positionering van de elementen in het dashboard<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Knopknooppunten kunnen bijvoorbeeld heel goed worden gebruikt om acties te activeren. Zo kun je bijvoorbeeld lampen aan- en uitzetten.<\/p>\n\n\n\n
Voordat u het knopknooppunt kunt gebruiken, moet het eerst op het lay-outraster van het dashboard worden geplaatst.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
U komt op de dashboardpagina door op het met de muisaanwijzer gemarkeerde symbool in de dashboardtab te klikken.<\/figcaption><\/figure>\n\n\n\n
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<\/strong>
dan is het adres naar je dashboard
https:\/\/ 192.168.172.5:1880\/ui\/<\/strong><\/p>\n\n\n\n
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\".<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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<\/p>\n\n\n\n
\"\"<\/a>
\"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.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Weergave van het tabblad \"Thema\" van de dashboardconfiguratie. Hier kun je de stijl, de basiskleur en het lettertype voor het dashboard instellen.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Op het tabblad \"Site\" van de dashboardconfiguratie kun je ook de titel van de dashboardpagina en andere opties instellen.<\/figcaption><\/figure><\/div>\n\n\n\n
Een ander voorbeeld:<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Als u op dit symbool klikt, worden alle beschikbare tabbladen weergegeven - in dit geval \"Instellingen\" en \"Home\".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Het knopenknooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
De weergave van de knoppen van verschillende grootte op het dashboard. <\/span><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
dropdown-knooppunt<\/h2>\n\n\n\n
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\u00ebren met een grote verscheidenheid aan namen en de bijbehorende waarden.<\/p>\n\n\n\n
Om dit te doen, sleept u een dropdown-knooppunt uit het Knooppunt-palet naar de Node Red-configuratie-interface en dubbelklikt u erop.<\/p>\n\n\n\n
\"\"<\/a>
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\".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van de geconfigureerde vervolgkeuzelijst op het dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Als u nu op het selectieveld klikt, kunt u kiezen tussen de verschillende eerder geconfigureerde vermeldingen.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
schakel knooppunt<\/h2>\n\n\n\n
Het schakelknooppunt komt in principe overeen met een virtuele schakelaar. Hiermee kunnen schakelsignalen worden verzonden of schakeltoestanden worden weergegeven.<\/p>\n\n\n\n
Om dit te doen, sleept u het schakelknooppunt van het knooppuntenpalet naar de rode configuratie-interface van het knooppunt en dubbelklikt u erop.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Zicht op de ingeschakelde schakelaar.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Zicht op de uitgeschakelde schakelaar.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
schuifknoop<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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\".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van de schuifregelaar in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
numeriek knooppunt<\/h2>\n\n\n\n
Het Numeric Node is een andere manier om numerieke waarden door te geven aan Node-Red voor verwerking.<\/p>\n\n\n\n
Om dit te configureren sleept u een numeriek knooppunt van het knooppuntenpalet naar de configuratie-interface van knooppunt rood.<\/p>\n\n\n\n
\"\"<\/a>
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\u00ebren 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 \"\u00b0C\" als temperatuur.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Knooppunt voor tekstinvoer<\/h2>\n\n\n\n
Het tekstinvoerknooppunt is \u2013 zoals de naam al doet vermoeden \u2013 een knooppunt om tekstinvoer mogelijk te maken.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
(Relatief eenvoudig ogende) weergave van het tekstknooppunt in de dashboardweergave.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Knooppunt datumkiezer<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van de datumkiezer in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Kleurkiezer knooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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 \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Zo zou uw kleurenkiezer er op het dashboard uit kunnen zien.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
vorm knooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het testformulier in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Knooppunt voor tekstuitvoer<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Tekstuitvoer knooppuntweergave in dashboardweergave.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
meter knooppunt<\/h2>\n\n\n\n
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 \u00e9\u00e9n 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). \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a>
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\u00ebren. 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\u00b0C tot 45\u00b0C. Je kunt nu de eigenschap \"Kleurverloop\" gebruiken om de kleuren te defini\u00ebren 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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Onder \"Type\" kun je ook selecteren welk type meter je wilt weergeven. Je kunt hier voorbeelden zien van de beschikbare types.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het metertype \"Gauge\" in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het metertype \"Donut\" in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het metertype \"Kompas\" in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het meettype \"Niveau\" in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
grafiek knooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
Vergeleken met de vorige knooppunten biedt dit knooppunt nog enkele instelmogelijkheden. Hier kun je eerst naar toe \"Type\"<\/strong> stel het type diagram in. U kunt de afzonderlijke meetwaarden in elk display markeren door het vakje aan te vinken \"Vergroot punt\".<\/strong> 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\".<\/strong> 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\".<\/strong> stel dan ook de labeling van de X-as in. Met \"Y-as\".<\/strong> Er kan echter alleen het weergegeven waardebereik van de Y-as worden ingesteld. Als u bijvoorbeeld bij een temperatuurcurve alleen het waardebereik van 0\u00b0 tot 30\u00b0C wilt zien, moet u dit hier invoeren. De optie gebruiken \"Legende\"<\/strong> 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\".<\/strong> 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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het grafiekknooppunt in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
audio-uitgangsknooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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 \u2013 Installeer spraakuitvoer met eSpeak<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
meldingsknooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van een melding die moet worden bevestigd om deze weer te laten verdwijnen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van een melding in de rechterbovenhoek.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
UI-besturingsknooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
sjabloon knooppunt<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a>
Met behulp van het sjabloonknooppunt kunt u inhoud toevoegen aan de koptekst van de pagina...<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
...of voeg knooppunten toe aan groepen die u naar wens hebt opgemaakt met uw eigen HTML-code.<\/figcaption><\/figure>\n\n\n\n
thztjz<\/p>\n\n\n\n
\"\"<\/a>
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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Er zal dan een link zichtbaar zijn op het dashboard die u doorverwijst naar de MagicMirror-weergave.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Verdere voorbeelden<\/h2>\n\n\n\n
Hieronder vind je een kleine opsomming van de artikelen waarin ik ook de dashboardnodes gebruik. Misschien zit er ook iets voor jou bij. \ud83d\ude42<\/p>\n\n\n\n