{"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>
Bekijk tijdens de installatie van het knooppunt \u201cnode-red-dashboard\u201d.<\/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 \u201cknopknooppunt\u201d. 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.<\/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 bovenaan de verschillende tabbladen \u201cLay-out\u201d, \u201cThema\u201d en \u201cSite\u201d. Rechts ervan staat een pijl die naar rechts wijst. Als u hierop klikt, wordt u doorgestuurd naar de dashboardwebsite.<\/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
Als alternatief kunt u de dashboardpagina ook rechtstreeks selecteren. Om dit te doen, hoeft u alleen maar \u201c\/ui\/\u201d toe te voegen aan het adres van uw NodeRed-configuratiepagina. Het adres van uw NodeRed-configuratiepagina is bijvoorbeeld
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
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 \u201ctabblad\u201d worden toegewezen.<\/p>\n\n\n\n
Naast het tabblad \u2018Start\u2019 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 \u2018Woonkamer\u2019. Dit maakt het overzicht eenvoudiger en brengt structuur in het vaak snel toenemende aantal knooppunten.<\/p>\n\n\n\n
Dit is ook wat u kunt zien en instellen op het tabblad \u201cIndeling\u201d van de dashboardconfiguratie. Alle tabbladen en de bijbehorende groepen worden daar weergegeven. In de onderstaande schermafbeelding<\/p>\n\n\n\n
\"\"<\/a>
Het gedeelte 'Lay-out' van de dashboardconfiguratie. Hier kunt u enkele van de afzonderlijke tabbladen zien (in dit voorbeeld \u201cHome\u201d, \u201cRaspi-gegevens\u201d, \u201cInstellingen\u201d en \u201cTasmota-status\u201d). De groepen kunnen ook worden ge\u00efdentificeerd. Het tabblad \u201cRaspi-gegevens\u201d bevat bijvoorbeeld de groepen \u201c1\u201d en \u201c2\u201d. 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.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Weergave van het tabblad \u201cThema\u201d van de dashboardconfiguratie. Hier kunt u de stijl, de basiskleur en het lettertype dat op het dashboard wordt gebruikt, instellen.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Op het tabblad \u201cSite\u201d van de dashboardconfiguratie kunt u 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 genaamd \u201cInstellingen\u201d en \u201cHome\u201d. Op het tabblad \u201cInstellingen\u201d vind je bijvoorbeeld de verschillende groepen zoals \u201cServer\u201d, RasPi\u201d of \u201cStatus\u201d. Op het tabblad \u2018Home\u2019 vindt u echter alleen de groep \u2018Standaard\u2019. In de geopende groep \u201cServer\u201d kunt u ook zien hoe de afzonderlijke elementen zoals \u201cServer opnieuw opstarten\u201d of \u201cScherm uitschakelen\u201d zijn gerangschikt.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
U kunt deze tabbladen en groepen nu vinden in de dashboardweergave. In de getoonde weergave bevindt u zich op het tabblad \u201cInstellingen\u201d. Het eerste rode kader markeert de groep \u201cServers\u201d. De groep \u201cLED Stripe\u201d 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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Als u op dit symbool klikt, worden alle beschikbare tabbladen \u2013 in dit geval \u201cInstellingen\u201d en \u201cHome\u201d \u2013 weergegeven.<\/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>
\u201cGroep\u201d bepaalt in welke groep en tabblad de knop wordt geplaatst. In dit voorbeeld bevindt de knop zich op het tabblad \u201cTestTab\u201d in de groep \u201cTestGroup\u201d. Met \u201cGrootte\u201d kunt u de grootte van de knop instellen. Een voorbeeld van verschillende maten vindt u verderop in het bericht. Met de instelling \u201cIcon\u201d kunnen ook iconen op de knop worden weergegeven. Om een selectie te krijgen van de beschikbare iconen, hoeft u alleen maar op de link \u201cMaterial Design icon\u201d in de infobalk aan de rechterkant te klikken. \u201cLabel\u201d geeft de tekst van de knop aan. \u201cMet \u201cKleur\u201d en \u201cAchtergrond\u201d kun je de kleur van de knop en de knoptekst instellen. De instelling voor \u201cPayload\u201d en \u201cTopic\u201d 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 \u201cAls een bericht binnenkomt bij invoer, ga dan door naar uitvoer.\u201d U kunt het doorsturen van een bericht ontvangen op de ingang van het knopknooppunt naar de uitgang activeren of deactiveren. Met \u201cNaam\u201d kunt u zoals gebruikelijk de naam van het knooppunt voor de NodeRed-configuratie instellen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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 \u201cTab\u201d) en de breedte van de groep (onder \u201cBreedte\u201d) kunnen worden ingesteld. Ook kunt u de weergave van de groepsnaam activeren of deactiveren en instellen of het mogelijk moet zijn de groep te \u2018vouwen\u2019, 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 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 \u201clabel\u201d. \u201cLabel\u201d betekent in dit geval het label voor de vervolgkeuzelijst op het daadwerkelijke dashboard. Onder \u201cPlaceholder\u201d 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 \u201c+optie\u201d 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 \u201cKnop\u201d.<\/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 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 \u201clabel\u201d. Onder \u201cIcoon\u201d kunt u een pictogram selecteren dat u als schakelsymbool voor het label of helemaal zonder label kunt weergeven. De overige eigenschappen zoals \u201cOnderwerp\u201d en \u201cNaam\u201d zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hier is dat u voor de schakeltoestanden \u201cAan\u201d en \u201cUit\u201d verschillende payloads kunt invoeren. Dat is logisch, want anders zou je geen onderscheid kunnen maken tussen de uitgeschakelde en 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>
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 \u201clabel\u201d. In het gedeelte \u2018Bereik\u2019 kun je instellen welk bereik van waarden de schuifregelaar moet bestrijken. Dit varieert van \u201cmin\u201d=de minimumwaarde tot max=de maximumwaarde. De stapgrootte kan worden aangepast met \u201cstap\u201d. De overige eigenschappen zoals \u201cOnderwerp\u201d en \u201cNaam\u201d zijn hetzelfde als bij de vorige knooppunten. Het enige verschil hierbij is dat de payload uiteraard wordt bepaald door de huidige \u201cslider value\u201d.<\/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 opwindende instelmogelijkheden voor dit knooppunt - omdat ze verschillen van de andere knooppunten - zijn de twee eigenschappen \u201cWaardeformaat\u201d en \u201cBereik\u201d. Met \u201cBereik\u201d kunt u het mogelijke nummerbereik defini\u00ebren en de stapgrootte instellen, zoals voorheen met het schuifknooppunt. Met \u201cWaardeformaat\u201d kunt u de weergave van de waarde opmaken. Hier kunt u bijvoorbeeld een eenheidsteken achter \u201c{{value}}\u201d 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 \u201c\u00b0C\u201d 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 instelmogelijkheden zoals \u201cGroep\u201d, \u201cGrootte\u201d, \u201cLabel\u201d, \u201cOnderwerp\u201d en \u201cNaam\u201d, kunt u met dit knooppunt de \u201cModus\u201d en een \u201cVertraging\u201d instellen. \u201cVertraging\u201d 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.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Onder \u201cModus\u201d 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.<\/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 \u201cgebruikelijke instellingsopties\u201d heeft het kleurkiezerknooppunt de instellingsoptie \u201cformaat\u201d en ook verschillende selectievakjes (vinkjes) die u kunt instellen of verwijderen. Het formaat van de uitvoerkleur kan worden ingesteld met de eigenschap \u201cFormat\u201d. U kunt kiezen tussen XXXXXXX en XX. Door de eigenschap \u201cToon tint-schuifregelaar\u201d of \u201cToon helderheid-schuifregelaar\u201d te activeren, kunt u ook een schuifregelaar weergeven voor het instellen van de HUE- of helderheidswaarde. U kunt ook de permanente weergave van verschillende \u201ckiezervarianten\u201d configureren met behulp van de selectievakjes \u201cAltijd staal tonen\u201d, \u201ckiezer altijd tonen\u201d en \u201cWaardeveld altijd tonen\u201d. Probeer gewoon eens uit welk uitzicht jij het leukst 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 instelmogelijkheden kunt u hier in het gebied \u201cFormulierelementen\u201d 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.<\/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>
Als gevolg hiervan kan er relatief weinig worden ingesteld in de eigenschappen van het tekstuitvoerknooppunt. Naast het \u201cWaardeformaat\u201d 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.<\/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 instelmogelijkheden kunt u met het Gauge-knooppunt het \u201cType\u201d, het \u201cWaardeformaat\u201d, de \u201cEenheden\u201d, het \u201cBereik\u201d, de \u201cKleurverlopen\u201d en de \u201cSectoren\u201d instellen. Je kent \u201cLabel\u201d en \u201cWaardeformaat\u201d al van de vorige knooppunten. Met de eigenschap \u201cEenheden\u201d kunt u de weergegeven eenheid opnieuw opgeven. U kunt de eigenschap \u201cRange\u201d 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\u00b0C tot 45\u00b0C. Met de eigenschap \u201cKleurverloop\u201d 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 \u2018Sectoren\u2019 opgeven welke kleuren moeten veranderen.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Onder \u201cType\u201d kunt u tevens selecteren welk metertype u weergegeven wilt hebben. Voorbeelden van de beschikbare typen kunt u hier bekijken.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het metertype \u201cGauge\u201d in het dashboard.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Weergave van het metertype 'Donut' op 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 metertype \u201cNiveau\u201d 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 \u201cpunt vergroten\u201d<\/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 \u201cX-as label\u201d<\/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 \u201cX-as label\u201d<\/strong> stel dan ook de labeling van de X-as in. Met \u201cY-as\u201d<\/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 \u201cInterpoleert\u201d<\/strong> bepaalt hoe de afzonderlijke meetwaarden met elkaar worden verbonden. Last but not least kunt u via \u2018Seriekleuren\u2019 de kleuren instellen die voor de curven worden gebruikt en \u2018Blank label\u2019 om de tekst in te stellen die moet worden weergegeven als er nog 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>
Om dit te doen, kunt u de \u201cTTS Voice\u201d (=\u201dText-To-Speech\u201d 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 \u201cEspeak\u201d. Informatie hierover vindt u 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 notificatieknooppunt kunt u onder \u201cLayout\u201d de positie van het notificatieveld instellen. Er is onder meer de optie \u201cOK\/Cancel Dialog\u201d, 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 \u201cBevestigen\u201d en \u201cAnnuleren\u201d moet staan onder \u201cStandaard actielabel\u201d en \u201cSecundair actielabel\u201d.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
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 \u201cRechtsboven\u201d onder \u201cIndeling\u201d. Als u vervolgens een melding naar het knooppunt stuurt, wordt deze rechtsboven weergegeven en verdwijnt deze na enkele seconden automatisch.<\/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
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.<\/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