{"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-create-a-user-interface-with-dashboard-nodes","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/fr\/nodered-create-a-user-interface-with-dashboard-nodes\/","title":{"rendered":"HowTo\u00a0: Node Red - Cr\u00e9er une interface utilisateur avec des n\u0153uds de tableau de bord"},"content":{"rendered":"

Je ne sais pas si les tableaux de bord sont LE (seul) outil pour faire battre le c\u0153ur d'un nerd plus vite, mais ils sont d\u00e9finitivement un outil pour faire battre le c\u0153ur d'un nerd plus vite. Pour ceux qui ont grandi avec StarTrek and Co., les aper\u00e7us de type tableau de bord sous forme de diagrammes et de graphiques sont la quintessence de la technologie. Vous pouvez maintenant pr\u00e9parer vous-m\u00eame ce sentiment avec NodeRed gr\u00e2ce \u00e0 certains n\u0153uds.<\/p>\n\n\n\n

Parce qu'une fois que votre SmartHome a atteint le point o\u00f9 il collecte toutes sortes de donn\u00e9es sur vos quatre murs, vous avez naturellement envie de les pr\u00e9senter. Mais comment? Apr\u00e8s tout, vous ne pouvez pas simplement coller ces donn\u00e9es dans un album photo comme les derni\u00e8res photos de vacances.<\/p>\n\n\n\n

Une mani\u00e8re simple et \u00e0 la fois informative et d\u00e9corative est de pr\u00e9senter les donn\u00e9es existantes via le n\u0153ud du tableau de bord pour NodeRed. En plus de divers \u00e9l\u00e9ments d'affichage, cela offre \u00e9galement la possibilit\u00e9 d'interagir avec votre syst\u00e8me SmartHome. Vous pouvez d\u00e9finir des valeurs, basculer des commutateurs virtuels, d\u00e9clencher des actions et surveiller leur \u00e9tat en m\u00eame temps.<\/p>\n\n\n\n

Un aper\u00e7u des diff\u00e9rentes fonctions du n\u0153ud du tableau de bord peut \u00eatre trouv\u00e9 dans l'article suivant<\/p>\n\n\n\n

\n\n\n\n

Conditions pr\u00e9alables<\/h2>\n\n\n\n

Articles utiles :
<\/strong>Pour que vous puissiez installer de nouveaux n\u0153uds, NodeRed doit bien s\u00fbr d\u00e9j\u00e0 \u00eatre install\u00e9.
Comment pr\u00e9parer un RaspberryPi puis installer NodeRed dessus est d\u00e9crit dans les articles suivants.<\/p>\n\n\n\n

Les trois articles suivants d\u00e9crivent ce qu'il faut faire pour pr\u00e9parer le RaspberryPi :
RaspberryPi - configuration pour les nerdiys\u00a0!<\/a><\/strong><\/em>
RaspberryPi \u2013 La premi\u00e8re configuration !
<\/a>RaspberryPi - Contr\u00f4lez le RaspberryPi via SSH<\/a><\/strong><\/em>
NodeRed \u2013 Installer NodeRed sur le RaspberryPi<\/a>
NodeRed \u2013 Installer de nouveaux n\u0153uds<\/a><\/strong><\/em><\/p>\n\n\n\n

Outil requis\u00a0:
<\/strong>-Non-<\/em><\/p>\n\n\n\n

Mat\u00e9riel requis :<\/strong><\/p>\n\n\n\n

Dans la liste suivante, vous trouverez toutes les pi\u00e8ces dont vous avez besoin pour mettre en \u0153uvre cet article.<\/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

Connectez-vous \u00e0 l'interface de configuration de NodeRed<\/h2>\r\n

Avant de pouvoir modifier votre configuration NodeRed, vous devez - si activ\u00e9 - vous connecter d'abord \u00e0 l'interface de configuration NodeRed.<\/p>\r\n

\"\"<\/a>
Vue de la bo\u00eete de dialogue de connexion. Ici, vous devez entrer les donn\u00e9es de connexion que vous avez sp\u00e9cifi\u00e9es lors de la configuration de la connexion. Vous trouverez des informations \u00e0 ce sujet dans l'article NodeRed - configurer la connexion de l'utilisateur<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Installer le n\u0153ud du tableau de bord<\/h2>\n\n\n\n
Pour pouvoir utiliser les n\u0153uds du tableau de bord, vous devez avoir le n\u0153ud<\/div>\n\n\n\n
\n
node-red-tableau de bord<\/pre>\n<\/div>\n\n\n\n
\u00e0 installer.<\/div>\n\n\n\n
Comment votre n\u0153ud est install\u00e9 dans l'article NodeRed \u2013 Installer de nouveaux n\u0153uds<\/em><\/a> <\/strong>d\u00e9crites.<\/div>\n\n\n\n
 <\/div>\n\n\n\n
\"\"<\/a>
Vue lors de l'installation du noeud "node-red-dashboard".<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Vue d'ensemble des n\u0153uds d'entr\u00e9e et de sortie disponibles<\/h2>\n\n\n\n
En installant les n\u0153uds du tableau de bord, vous obtenez un ensemble complet de n\u0153uds suppl\u00e9mentaires adapt\u00e9s \u00e0 l'affichage et \u00e0 la saisie de diff\u00e9rentes valeurs. Comme d'habitude, ceux-ci sont affich\u00e9s dans la palette de n\u0153uds \u00e0 gauche du menu de configuration. Les d\u00e9tails sur les n\u0153uds individuels sont r\u00e9pertori\u00e9s ci-dessous.<\/p>\n\n\n\n
\"\"<\/a>
Vue des n\u0153uds du tableau de bord dans la palette N\u0153uds.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud bouton et positionnement des \u00e9l\u00e9ments dans le tableau de bord<\/h2>\n\n\n\n
Le premier n\u0153ud et le plus simple est le "n\u0153ud bouton". Vous pouvez l'utiliser pour positionner un bouton sur votre tableau de bord. Cela fonctionne alors comme un bouton dans le monde r\u00e9el. S'il est cliqu\u00e9, il envoie une valeur ajustable et un sujet ajustable au n\u0153ud li\u00e9.<\/p>\n\n\n\n
Les n\u0153uds de bouton, par exemple, peuvent tr\u00e8s bien \u00eatre utilis\u00e9s pour d\u00e9clencher des actions. Par exemple, vous pouvez allumer et \u00e9teindre les lampes.<\/p>\n\n\n\n
Avant de pouvoir utiliser le n\u0153ud du bouton, il doit d'abord \u00eatre positionn\u00e9 sur la grille de mise en page du tableau de bord.<\/p>\n\n\n\n
Parce qu'en plus des fonctions des n\u0153uds r\u00e9els, le positionnement sur la mise en page du tableau de bord ult\u00e9rieur peut \u00e9galement \u00eatre configur\u00e9 pour chacun. Le tableau de bord est donc un site Web distinct qui peut \u00eatre g\u00e9r\u00e9 de mani\u00e8re centralis\u00e9e via la configuration du tableau de bord.<\/p>\n\n\n\n
En installant les n\u0153uds du tableau de bord, un nouvel onglet a \u00e9t\u00e9 ajout\u00e9 \u00e0 la zone de configuration de gauche. Vous pouvez le reconna\u00eetre par l'ic\u00f4ne bas\u00e9e sur un graphique \u00e0 barres. Cliquez dessus pour ouvrir la configuration de base du tableau de bord.<\/p>\n\n\n\n
Ici, vous pouvez voir les diff\u00e9rents onglets "Mise en page", "Th\u00e8me" et "Site" dans la zone sup\u00e9rieure. \u00c0 droite de celle-ci se trouve une fl\u00e8che pointant vers le haut et vers la droite. Si vous cliquez dessus, vous serez redirig\u00e9 vers le site Web du tableau de bord.<\/p>\n\n\n\n
\"\"<\/a>
Vous acc\u00e9dez \u00e0 la page du tableau de bord en cliquant sur le symbole marqu\u00e9 avec le pointeur de la souris dans l'onglet du tableau de bord.<\/figcaption><\/figure>\n\n\n\n
Alternativement, vous pouvez \u00e9galement s\u00e9lectionner directement la page du tableau de bord. Il vous suffit d'ajouter "\/ui\/" \u00e0 l'adresse de votre page de configuration NodeRed. Par exemple, est l'adresse de votre page de configuration NodeRed
https:\/\/192.168.172.5:1880<\/strong>
alors l'adresse est \u00e0 votre tableau de bord
https:\/\/ 192.168.172.5:1880\/ui\/<\/strong><\/p>\n\n\n\n
La premi\u00e8re chose \u00e0 faire est de diviser la mise en page. Avec l'aide de laquelle vous pouvez positionner les \u00e9l\u00e9ments d'entr\u00e9e et de sortie respectifs (n\u0153uds du tableau de bord) presque librement sur le tableau de bord. Le tableau de bord offre la possibilit\u00e9 de combiner des n\u0153uds de tableau de bord individuels en groupes. L'ordre d'affichage de ces n\u0153uds peut ensuite \u00eatre d\u00e9fini sur le tableau de bord. De plus, ces n\u0153uds group\u00e9s peuvent ou doivent \u00eatre affect\u00e9s \u00e0 un "onglet" sp\u00e9cifique.<\/p>\n\n\n\n
En plus de l'onglet "Accueil", d'autres onglets peuvent \u00eatre cr\u00e9\u00e9s. Ceci est utile, par exemple, pour s\u00e9parer virtuellement les \u00e9l\u00e9ments de diff\u00e9rentes pi\u00e8ces les uns des autres dans un syst\u00e8me de maison intelligente. Vous pouvez \u00e9galement r\u00e9sumer tous les capteurs et actionneurs du salon dans un onglet appel\u00e9 "Salon". Cela simplifie la vue d'ensemble et structure le nombre de n\u0153uds qui augmente souvent rapidement.<\/p>\n\n\n\n
C'est \u00e9galement ce que vous pouvez voir et param\u00e9trer dans l'onglet "Mise en page" de la configuration du tableau de bord. Tous les onglets et les groupes associ\u00e9s y sont affich\u00e9s. Dans la capture d'\u00e9cran ci-dessous<\/p>\n\n\n\n
\"\"<\/a>
Section "Mise en page" de la configuration du tableau de bord. Ici, vous pouvez voir une partie des onglets individuels (dans cet exemple "Home", "Raspi Data", "Settings" et "Tasmota Status"). De plus, les groupes peuvent \u00eatre identifi\u00e9s. Par exemple, l'onglet Donn\u00e9es Raspi comprend les groupes 1 et 2. Chaque groupe contient alors les \u00e9l\u00e9ments de tableau de bord r\u00e9els qui lui sont affect\u00e9s. Vous pouvez le rendre visible en cliquant sur la petite fl\u00e8che pointant vers la droite.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Vue de l'onglet "Th\u00e8me" de la configuration du tableau de bord. Ici, vous pouvez d\u00e9finir le style, la couleur de base et la police utilis\u00e9e sur le tableau de bord.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Vous pouvez \u00e9galement d\u00e9finir le titre de la page du tableau de bord et d'autres options dans l'onglet "Site" de la configuration du tableau de bord.<\/figcaption><\/figure><\/div>\n\n\n\n
Un autre exemple:<\/p>\n\n\n\n
\"\"<\/a>
Sur cet aper\u00e7u de la mise en page, vous pouvez voir qu'il existe deux onglets nomm\u00e9s "Param\u00e8tres" et "Accueil". Sur l'onglet "Param\u00e8tres" vous trouverez alors, par exemple, les diff\u00e9rents groupes tels que "Serveur", Rasp Pi" ou "Status". Sur l'onglet "Accueil", en revanche, vous ne trouverez que le groupe "Par d\u00e9faut". Dans le groupe d\u00e9velopp\u00e9 "Serveur", vous pouvez \u00e9galement voir comment les \u00e9l\u00e9ments individuels tels que "Red\u00e9marrer le serveur" ou "\u00c9teindre l'\u00e9cran" sont dispos\u00e9s.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Vous pouvez maintenant trouver ces onglets et groupes dans la vue du tableau de bord. Dans la vue affich\u00e9e, vous vous trouvez dans l'onglet "Param\u00e8tres". Le premier cadre rouge marque le groupe "Serveur". Le groupe "LED Stripe" est marqu\u00e9 par le deuxi\u00e8me cadre rouge. La grande fl\u00e8che rouge \u00e0 gauche marque \u00e9galement le symbole sur lequel vous devez cliquer pour passer \u00e0 un autre onglet.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Si vous cliquez sur ce symbole, tous les onglets disponibles - dans ce cas "Param\u00e8tres" et "Accueil" - seront affich\u00e9s.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Le noeud bouton<\/h2>\n\n\n\n
Le n\u0153ud de bouton est l'un des n\u0153uds tr\u00e8s simples. Vous pouvez l'utiliser pour cr\u00e9er des cl\u00e9s virtuelles. Pour ce faire, faites glisser le n\u0153ud de bouton de la palette de n\u0153uds vers la zone de configuration NodeRed. Si vous double-cliquez maintenant sur le n\u0153ud, les options suivantes peuvent \u00eatre configur\u00e9es.<\/p>\n\n\n\n
\"\"<\/a>
Dans "Groupe", il est d\u00e9termin\u00e9 dans quel groupe et dans quel onglet le bouton est positionn\u00e9. Dans cet exemple, le bouton est positionn\u00e9 dans l'onglet "TestTab" du groupe "TestGroup". Avec "Taille", vous pouvez d\u00e9finir la taille du bouton. Vous pouvez voir un exemple de diff\u00e9rentes tailles plus bas dans le post. Les ic\u00f4nes peuvent \u00e9galement \u00eatre affich\u00e9es sur le bouton \u00e0 l'aide du param\u00e8tre "Ic\u00f4ne". Pour obtenir une s\u00e9lection des ic\u00f4nes disponibles, cliquez simplement sur le lien "Ic\u00f4ne Material Design" dans la barre d'informations \u00e0 droite. "Label" sp\u00e9cifie le texte du bouton. "Avec "Couleur" et "Arri\u00e8re-plan", vous pouvez d\u00e9finir la couleur du bouton et le texte du bouton. Le r\u00e9glage pour \u00ab\u00a0Payload\u00a0\u00bb et \u00ab\u00a0Topic\u00a0\u00bb d\u00e9finit quelle valeur (payload) est envoy\u00e9e via quel sujet d\u00e8s que le bouton est enfonc\u00e9. Enfin, une fonction tr\u00e8s importante : En cochant ou d\u00e9cochant \u00ab Si msg arrive en entr\u00e9e, passer en sortie. \u00bb vous pouvez activer ou d\u00e9sactiver le renvoi d'un message re\u00e7u \u00e0 l'entr\u00e9e du n\u0153ud de bouton vers la sortie. Avec "Name", vous pouvez d\u00e9finir le nom du n\u0153ud pour la configuration NodeRed comme d'habitude.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Voici la vue que vous obtenez lorsque vous cliquez sur le petit stylo (modifier) \u00e0 c\u00f4t\u00e9 de la section de groupe dans la fen\u00eatre pr\u00e9c\u00e9dente. Ensuite, vous arrivez \u00e0 la fen\u00eatre dans laquelle le groupe et l'onglet peuvent \u00eatre affect\u00e9s au n\u0153ud du bouton (ou \u00e0 tout autre n\u0153ud du tableau de bord). En principe, vous modifiez les propri\u00e9t\u00e9s de l'ensemble du groupe dans cette fen\u00eatre. L'onglet attribu\u00e9 (sous "Tab") et la largeur du groupe (sous "Largeur") peuvent \u00eatre d\u00e9finis. Vous pouvez \u00e9galement activer ou d\u00e9sactiver l'affichage du nom du groupe et d\u00e9finir s'il doit \u00eatre possible de "r\u00e9duire" le groupe, c'est-\u00e0-dire de masquer le contenu.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Dans l'aper\u00e7u du tableau de bord, tous les onglets contenus sont ensuite affich\u00e9s dans une vue lat\u00e9rale d\u00e9pliante. Ici, vous pouvez basculer entre eux en cliquant sur l'onglet correspondant.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
La vue des boutons de diff\u00e9rentes tailles sur le tableau de bord. <\/span><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud d\u00e9roulant<\/h2>\n\n\n\n
Le n\u0153ud d\u00e9roulant est un n\u0153ud que vous pouvez utiliser pour cr\u00e9er une liste de s\u00e9lection sur le tableau de bord. Par exemple, vous pouvez cr\u00e9er une liste des temp\u00e9ratures disponibles pour un radiateur. Cependant, toutes sortes d'autres entr\u00e9es avec les noms les plus divers et les valeurs associ\u00e9es peuvent \u00e9galement \u00eatre d\u00e9finies.<\/p>\n\n\n\n
Pour ce faire, faites glisser un n\u0153ud d\u00e9roulant de la palette de n\u0153uds vers l'interface de configuration du n\u0153ud rouge et double-cliquez dessus.<\/p>\n\n\n\n
\"\"<\/a>
La fen\u00eatre affich\u00e9e appara\u00eet. Comme pr\u00e9c\u00e9demment avec les autres n\u0153uds, le groupe et l'onglet attribu\u00e9s ainsi que la taille peuvent \u00eatre d\u00e9finis ici. En plus, comme avant, le "Label". "Libell\u00e9" dans ce cas signifie le libell\u00e9 de la liste d\u00e9roulante sur le tableau de bord r\u00e9el. Sous "Espace r\u00e9serv\u00e9", vous pouvez configurer un espace r\u00e9serv\u00e9 qui sera affich\u00e9 tant qu'aucune valeur n'a \u00e9t\u00e9 s\u00e9lectionn\u00e9e dans la liste d\u00e9roulante. Cela ne devient vraiment excitant que dans la section "Options". Ici, vous pouvez configurer les options disponibles de votre liste d\u00e9roulante. A cet effet, le nom de l'entr\u00e9e correspondante est d\u00e9fini dans la colonne de droite et la valeur de l'entr\u00e9e correspondante est d\u00e9finie dans la colonne de gauche. Vous pouvez ajouter d'autres entr\u00e9es en cliquant sur "+option". L'ordre des entr\u00e9es peut \u00e9galement \u00eatre modifi\u00e9 \u00e0 l'aide des trois petites lignes horizontales situ\u00e9es \u00e0 gauche de chaque entr\u00e9e. Cliquez simplement sur les lignes de l'entr\u00e9e que vous souhaitez d\u00e9placer et maintenez le bouton de la souris enfonc\u00e9. Vous pouvez maintenant repositionner l'entr\u00e9e marqu\u00e9e en d\u00e9pla\u00e7ant le pointeur de la souris vers le haut ou vers le bas. Les autres fonctions affich\u00e9es se comportent exactement de la m\u00eame mani\u00e8re que celle d\u00e9j\u00e0 d\u00e9crite pour le "bouton".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue de la liste d\u00e9roulante configur\u00e9e sur le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Si vous cliquez maintenant sur le champ de s\u00e9lection, vous pouvez choisir entre les diff\u00e9rentes entr\u00e9es pr\u00e9c\u00e9demment configur\u00e9es.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de commutation<\/h2>\n\n\n\n
En principe, le n\u0153ud de commutation correspond \u00e0 un commutateur virtuel. Celui-ci peut \u00eatre utilis\u00e9 pour envoyer des signaux de commutation ou pour afficher des \u00e9tats de commutation.<\/p>\n\n\n\n
Pour ce faire, faites glisser le n\u0153ud de commutation de la palette de n\u0153uds vers l'interface de configuration du n\u0153ud rouge et double-cliquez dessus.<\/p>\n\n\n\n
\"\"<\/a>
La fen\u00eatre affich\u00e9e appara\u00eet. Comme pr\u00e9c\u00e9demment avec les autres n\u0153uds, le groupe et l'onglet attribu\u00e9s ainsi que la taille peuvent \u00eatre d\u00e9finis ici. En plus, comme avant, le "Label". Sous "Ic\u00f4ne", vous pouvez s\u00e9lectionner une ic\u00f4ne que vous pouvez afficher devant l'\u00e9tiquette ou sans \u00e9tiquette comme symbole d'interrupteur. Les propri\u00e9t\u00e9s restantes telles que "Sujet" et "Nom" sont \u00e0 nouveau les m\u00eames qu'avec les n\u0153uds pr\u00e9c\u00e9dents. La seule diff\u00e9rence ici est que vous pouvez entrer des charges utiles diff\u00e9rentes pour les \u00e9tats de commutation "On" et "Off". Ce qui est \u00e9galement logique, car sinon vous ne pourriez pas faire la distinction entre les \u00e9tats \u00e9teint et allum\u00e9.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue de l'interrupteur allum\u00e9.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue de l'interrupteur \u00e9teint.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de curseur<\/h2>\n\n\n\n
Le n\u0153ud du curseur est id\u00e9al pour d\u00e9finir des nombres dans une certaine plage. Un bon cas d'utilisation, par exemple, consiste \u00e0 l'utiliser comme gradateur pour une lampe.<\/p>\n\n\n\n
Pour pouvoir utiliser le n\u0153ud du curseur, vous devez d'abord le faire glisser de la palette de n\u0153uds vers l'interface de configuration du n\u0153ud rouge et double-cliquer pour ouvrir son menu de param\u00e8tres.<\/p>\n\n\n\n
\"\"<\/a>
Comme d'habitude \u00e0 partir des autres n\u0153uds, la fen\u00eatre des param\u00e8tres r\u00e9appara\u00eet apr\u00e8s un double-clic. Comme pr\u00e9c\u00e9demment, le groupe et l'onglet attribu\u00e9s ainsi que la taille peuvent \u00eatre d\u00e9finis ici. En plus, comme avant, le "Label". Dans la section "Plage", vous pouvez d\u00e9finir la plage de valeurs que le curseur doit couvrir. Cela va de "min" = la valeur minimale \u00e0 max = la valeur maximale. La largeur de pas peut \u00eatre r\u00e9gl\u00e9e avec "step". Les propri\u00e9t\u00e9s restantes telles que "Sujet" et "Nom" sont \u00e0 nouveau les m\u00eames qu'avec les n\u0153uds pr\u00e9c\u00e9dents. La seule diff\u00e9rence ici est que la charge utile est bien s\u00fbr d\u00e9finie par la "valeur du curseur" actuelle.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue du curseur dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud num\u00e9rique<\/h2>\n\n\n\n
Le n\u0153ud num\u00e9rique est un autre moyen de transmettre des valeurs num\u00e9riques \u00e0 Node-Red pour le traitement.<\/p>\n\n\n\n
Pour configurer cela, vous faites glisser un n\u0153ud num\u00e9rique de la palette de n\u0153uds vers l'interface de configuration Node Red.<\/p>\n\n\n\n
\"\"<\/a>
Les options de r\u00e9glage int\u00e9ressantes - parce que diff\u00e9rentes des autres n\u0153uds - pour ce n\u0153ud sont les deux propri\u00e9t\u00e9s "Format de valeur" et "Plage". Avec "Plage", vous pouvez d\u00e9finir la plage de nombres possible et d\u00e9finir la taille du pas, comme auparavant avec le n\u0153ud du curseur. "Format de la valeur" permet de formater l'affichage de la valeur. Ici, vous pouvez, par exemple, ajouter un signe d'unit\u00e9 apr\u00e8s "{{value}}", de sorte que non seulement la valeur num\u00e9rique, mais une valeur num\u00e9rique plus l'unit\u00e9 s'affiche ult\u00e9rieurement sur le tableau de bord. Par exemple, vous pouvez marquer une sp\u00e9cification de temp\u00e9rature avec "\u00b0C" comme temp\u00e9rature.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud de saisie de texte<\/h2>\n\n\n\n
Le n\u0153ud de saisie de texte est - comme son nom l'indique - un n\u0153ud permettant la saisie de texte.<\/p>\n\n\n\n
\"\"<\/a>
Avec ce n\u0153ud, en plus des options de r\u00e9glage habituelles telles que \u00ab\u00a0Groupe\u00a0\u00bb, \u00ab\u00a0Taille\u00a0\u00bb, \u00ab\u00a0\u00c9tiquette\u00a0\u00bb, \u00ab\u00a0Sujet\u00a0\u00bb et \u00ab\u00a0Nom\u00a0\u00bb, le \u00ab\u00a0Mode\u00a0\u00bb et un \u00ab\u00a0D\u00e9lai\u00a0\u00bb peuvent \u00eatre d\u00e9finis. Sous "D\u00e9lai", la dur\u00e9e est d\u00e9finie apr\u00e8s la derni\u00e8re saisie de caract\u00e8res, jusqu'\u00e0 ce que les caract\u00e8res saisis dans le champ de texte soient envoy\u00e9s au n\u0153ud suivant.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Sous "Mode", vous pouvez s\u00e9lectionner les donn\u00e9es \u00e0 saisir dans le champ respectif. Vous pouvez choisir entre les diff\u00e9rentes options affich\u00e9es et adapter parfaitement le champ de saisie \u00e0 l'objectif respectif.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue (relativement simple) du n\u0153ud de texte dans la vue du tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud de s\u00e9lection de date<\/h2>\n\n\n\n
En principe, le n\u0153ud de s\u00e9lection de date fait exactement ce que son nom sugg\u00e8re\u00a0: vous pouvez l'utiliser pour s\u00e9lectionner une certaine date et ainsi la transf\u00e9rer \u00e0 NodeRed pour un traitement ult\u00e9rieur.<\/p>\n\n\n\n
\"\"<\/a>
Aucune autre option (\u00e0 part l'habituelle) ne peut \u00eatre configur\u00e9e pour ce n\u0153ud. Apr\u00e8s avoir saisi une date sur le tableau de bord, celle-ci est transmise au flux connect\u00e9 via la charge utile.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue du s\u00e9lecteur de date dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud de s\u00e9lecteur de couleurs<\/h2>\n\n\n\n
Le n\u0153ud de s\u00e9lecteur de couleurs est id\u00e9al pour d\u00e9finir la couleur d'une lampe RVB connect\u00e9e. Bien s\u00fbr, vous pouvez \u00e9galement l'utiliser pour transf\u00e9rer des couleurs vers Node-Red pour un traitement ult\u00e9rieur dans tous les autres cas.<\/p>\n\n\n\n
\"\"<\/a>
En plus des "options de r\u00e9glage habituelles", le n\u0153ud du s\u00e9lecteur de couleurs a l'option de r\u00e9glage "Format" ainsi que diverses cases \u00e0 cocher (coches) que vous pouvez d\u00e9finir ou supprimer. Le format de la couleur de sortie peut \u00eatre d\u00e9fini via la propri\u00e9t\u00e9 "Format". Vous pouvez choisir entre XXXXXXX et XX. En activant la propri\u00e9t\u00e9 "Afficher le curseur de teinte" ou "Afficher le curseur de luminosit\u00e9", vous pouvez \u00e9galement afficher un curseur pour r\u00e9gler la HUE ou la valeur de luminosit\u00e9. Vous pouvez \u00e9galement utiliser les cases \u00e0 cocher "Toujours afficher l'\u00e9chantillon", "Toujours afficher le s\u00e9lecteur" et "Toujours afficher le champ de valeur" pour configurer l'affichage permanent des diff\u00e9rentes "variantes de s\u00e9lecteur". Essayez simplement quelle vue vous pr\u00e9f\u00e9rez. \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Votre s\u00e9lecteur de couleurs pourrait ressembler \u00e0 ceci dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de formulaire<\/h2>\n\n\n\n
Avec le n\u0153ud de formulaire, vous avez la possibilit\u00e9 de configurer un formulaire type. Cela vous permet de combiner diff\u00e9rentes options d'entr\u00e9e. C'est parfait pour configurer un formulaire pour entrer une adresse ou similaire, par exemple.<\/p>\n\n\n\n
\"\"<\/a>
En plus des options de r\u00e9glage habituelles, vous pouvez configurer ici les \u00e9l\u00e9ments de formulaire affich\u00e9s dans la zone "\u00c9l\u00e9ments de formulaire". Vous pouvez ajouter des zones de texte pour diff\u00e9rents contenus comme du texte ou des chiffres. De plus, un contenu standard peut y \u00eatre stock\u00e9 ou il peut \u00eatre sp\u00e9cifi\u00e9 s'il s'agit d'un champ obligatoire ou non. Enfin, vous pouvez \u00e9galement ajouter votre propre texte aux boutons de confirmation et d'annulation.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue du formulaire de test dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud de sortie de texte<\/h2>\n\n\n\n
Le n\u0153ud de sortie de texte est id\u00e9al pour afficher uniquement du texte. Par exemple, vous pouvez afficher les lectures des capteurs. L'utilisateur n'a pas la possibilit\u00e9 de modifier le texte affich\u00e9.<\/p>\n\n\n\n
\"\"<\/a>
Par cons\u00e9quent, seuls relativement peu de param\u00e8tres peuvent \u00eatre d\u00e9finis dans les propri\u00e9t\u00e9s du n\u0153ud de sortie de texte. En plus du "Format de valeur" dans lequel vous pouvez \u00e9tendre l'apparence de la sortie texte avec des informations suppl\u00e9mentaires telles que des symboles d'unit\u00e9, vous avez \u00e9galement la possibilit\u00e9 de modifier la mise en page de la sortie texte. Vous pouvez choisir parmi cinq dispositions diff\u00e9rentes d'\u00e9tiquette et de texte. Essayez simplement celui qui convient le mieux \u00e0 votre pr\u00e9sentation.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue du n\u0153ud de sortie de texte dans la vue du tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de jauge<\/h2>\n\n\n\n
Le n\u0153ud de jauge est parfait pour afficher les valeurs mesur\u00e9es sous une forme visualis\u00e9e. De cette fa\u00e7on, les valeurs mesur\u00e9es peuvent \u00eatre class\u00e9es visuellement directement. De plus, des intervalles de nombres peuvent \u00e9galement \u00eatre d\u00e9finis dans lesquels la couleur de l'\u00e9chelle affich\u00e9e change. Par exemple, vous pouvez utiliser une couleur rouge pour repr\u00e9senter les temp\u00e9ratures \u00e9lev\u00e9es\/dangereuses. Les temp\u00e9ratures dans la plage normale, en revanche, sont repr\u00e9sent\u00e9es par une \u00e9chelle verte. Cela permet de se faire une id\u00e9e en un coup d'\u0153il si les valeurs mesur\u00e9es affich\u00e9es sont correctes ou non. En dehors de cela, il a aussi l'air plut\u00f4t cool (\/ Star Trek-ish). \ud83d\ude42<\/p>\n\n\n\n
\"\"<\/a>
En plus des options de param\u00e9trage habituelles, vous avez la possibilit\u00e9 de param\u00e9trer le "Type", le "Format de valeur", les "Unit\u00e9s", la "Plage", les "D\u00e9grad\u00e9s de couleur" et les "Secteurs" avec le n\u0153ud jauge. Vous connaissez d\u00e9j\u00e0 "Label" et "Format de valeur" des n\u0153uds pr\u00e9c\u00e9dents. La propri\u00e9t\u00e9 "Unit\u00e9s" vous permet de d\u00e9finir \u00e0 nouveau l'unit\u00e9 affich\u00e9e. Vous pouvez utiliser la propri\u00e9t\u00e9 "Plage" pour sp\u00e9cifier la plage de valeurs \u00e0 afficher. Par exemple, si vous souhaitez afficher une valeur d'humidit\u00e9, cette plage doit \u00eatre comprise entre 0 et 100%. Pour une plage de temp\u00e9rature ext\u00e9rieure, une plage de temp\u00e9rature doit \u00eatre s\u00e9lectionn\u00e9e qui n'est normalement ni inf\u00e9rieure ni d\u00e9pass\u00e9e. Par exemple -20\u00b0C \u00e0 45\u00b0C. Avec la propri\u00e9t\u00e9 "D\u00e9grad\u00e9 de couleur", vous pouvez maintenant sp\u00e9cifier les couleurs qui s'affichent pour correspondre \u00e0 la valeur de mesure affich\u00e9e. Dans cet exemple, la couleur verte est affich\u00e9e pour toutes les petites valeurs, la couleur jaune pour toutes les valeurs moyennes et la couleur rouge pour toutes les valeurs \u00e9lev\u00e9es. Normalement, les endroits o\u00f9 les couleurs se fondent dans la suivante sont uniform\u00e9ment r\u00e9partis. Cependant, si vous voulez une mise \u00e0 l'\u00e9chelle diff\u00e9rente ou m\u00eame si vous voulez omettre la couleur du milieu, vous pouvez utiliser le param\u00e8tre "Secteurs" pour sp\u00e9cifier o\u00f9 les couleurs doivent changer.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Sous "Type", vous pouvez \u00e9galement s\u00e9lectionner le type de jauge que vous souhaitez afficher. Vous pouvez voir des exemples des types disponibles ici.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Affichage de la jauge de type "Jauge" dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Affichage du type de jauge Donut dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue de type boussole dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue de type jauge de niveau dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
noeud de graphique<\/h2>\n\n\n\n
Le n\u0153ud de graphique est adapt\u00e9 pour afficher des progressions de valeur. Cela vous permet, par exemple, d'enregistrer et d'afficher l'\u00e9volution d'une temp\u00e9rature sur une p\u00e9riode de temps sp\u00e9cifi\u00e9e. Malheureusement, les valeurs ne sont actuellement enregistr\u00e9es que temporairement. Cela signifie que si votre serveur NodeRed tombe en panne ou est red\u00e9marr\u00e9 d'une autre mani\u00e8re, toutes les valeurs pr\u00e9c\u00e9demment affich\u00e9es seront perdues.<\/p>\n\n\n\n
\"\"<\/a>
Par rapport aux n\u0153uds pr\u00e9c\u00e9dents, ce n\u0153ud offre quelques options de r\u00e9glage suppl\u00e9mentaires. Ici, vous pouvez d'abord sous "Taper"<\/strong> d\u00e9finir le type de graphique. Vous pouvez mettre en surbrillance les valeurs mesur\u00e9es individuelles dans chaque affichage en cochant la case "agrandir le point"<\/strong> met. Vous pouvez d\u00e9finir la r\u00e9solution ou la dur\u00e9e de la progression des donn\u00e9es sur l'axe X (l'axe horizontal allant de gauche \u00e0 droite) avec le param\u00e8tre "Libell\u00e9 de l'axe X"<\/strong> ensemble. Ici, vous pouvez sp\u00e9cifier la dur\u00e9e ou le nombre de valeurs mesur\u00e9es \u00e0 afficher. Par exemple, vous pouvez choisir d'afficher toutes les lectures des deux derni\u00e8res heures ou des 500 derni\u00e8res lectures. Cela peut \u00eatre fait avec "Libell\u00e9 de l'axe X"<\/strong> puis d\u00e9finissez \u00e9galement l'\u00e9tiquetage de l'axe X. Avec "Axe Y"<\/strong> par contre, seule la plage de valeurs affich\u00e9es de l'axe Y peut \u00eatre ajust\u00e9e. Par exemple, si vous souhaitez uniquement voir la plage de valeurs de 0\u00b0 \u00e0 30\u00b0C pour un profil de temp\u00e9rature, vous devez la saisir ici. Utilisation de l'option "l\u00e9gende"<\/strong> vous pouvez \u00e9galement configurer une l\u00e9gende, ce qui est particuli\u00e8rement utile lorsque plusieurs courbes sont affich\u00e9es. Vous pouvez afficher un nom pour chaque couleur de courbe. L'option "Interpoler"<\/strong> d\u00e9cide comment les diff\u00e9rentes valeurs mesur\u00e9es sont reli\u00e9es les unes aux autres. Enfin, vous pouvez d\u00e9finir les couleurs utilis\u00e9es pour les courbes avec "Series Colours" et le texte \u00e0 afficher avec "Blank label" si aucune valeur de mesure n'est disponible pour la courbe.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Vue du n\u0153ud de graphique dans le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de sortie audio<\/h2>\n\n\n\n
Le n\u0153ud de sortie audio est \u00e0 nouveau l'un de ces n\u0153uds qui fait exactement ce que son nom l'indique. Il produit du texte en tant que langue parl\u00e9e.<\/p>\n\n\n\n
\"\"<\/a>
Pour ce faire, vous pouvez s\u00e9lectionner la "Voix TTS" (= voix "Text-To-Speech") dans les propri\u00e9t\u00e9s du n\u0153ud. Cela vous permet de personnaliser un peu plus la voix en fonction de votre style. En fin de compte, ce n\u0153ud prononce tout texte que vous lui envoyez. Cependant, il est important que cette voix ne soit pas sortie localement sur le serveur Node Red mais dans le navigateur de l'utilisateur qui vient d'ouvrir le tableau de bord. Si aucune fen\u00eatre de navigateur n'est ouverte au moment o\u00f9 le message vocal est envoy\u00e9, le message vocal ne sera pas \u00e9mis. Cependant, vous pouvez utiliser le programme "Espeak" pour impl\u00e9menter une sortie locale sur le serveur NodeRed via des haut-parleurs connect\u00e9s. Vous trouverez des informations \u00e0 ce sujet dans l'article RaspberryPi - Installer la sortie vocale avec eSpeak<\/strong><\/em><\/a>.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de notification<\/h2>\n\n\n\n
Le n\u0153ud de notification vous permet d'afficher des notifications sur le tableau de bord ouvert. Cela peut \u00eatre affich\u00e9 sous forme d'informations sur le bord ou centr\u00e9 au milieu de l'\u00e9cran, y compris un bouton de confirmation.<\/p>\n\n\n\n
\"\"<\/a>
Dans la fen\u00eatre des param\u00e8tres du n\u0153ud de notification, vous pouvez d\u00e9finir la position du champ de notification sous "Mise en page". Entre autres choses, il y a l'option "Dialogue OK\/Annuler", qui vous permet d'\u00e9quiper la notification de deux boutons. Celles-ci doivent ensuite \u00eatre confirm\u00e9es par l'utilisateur. De cette fa\u00e7on, vous pouvez \u00eatre s\u00fbr que l'utilisateur a bien remarqu\u00e9 le message. Pour cela, vous pouvez sp\u00e9cifier sous "Libell\u00e9 de l'action par d\u00e9faut" et "Libell\u00e9 de l'action secondaire" ce qui doit appara\u00eetre sur les boutons "Confirmer" et "Annuler".<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
En plus de la variante de notification, que l'utilisateur doit confirmer, il existe \u00e9galement la possibilit\u00e9 de n'afficher la notification qu'\u00e0 titre indicatif. Pour cela, s\u00e9lectionnez \u00ab En haut \u00e0 droite \u00bb sous \u00ab Mise en page \u00bb, par exemple. Si vous envoyez ensuite une notification au n\u0153ud, celle-ci appara\u00eetra dans le coin sup\u00e9rieur droit et dispara\u00eetra automatiquement apr\u00e8s quelques secondes.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Visualisation d'une notification qu'il faut confirmer pour la faire dispara\u00eetre \u00e0 nouveau.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Affichage d'une notification dans le coin sup\u00e9rieur droit.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
N\u0153ud de contr\u00f4le de l'interface utilisateur<\/h2>\n\n\n\n
Avec le n\u0153ud de contr\u00f4le de l'interface utilisateur, vous pouvez contr\u00f4ler l'apparence et le comportement de la vue du tableau de bord. Cela peut \u00eatre utilis\u00e9, par exemple, pour changer l'onglet affich\u00e9, les groupes "rentrer et sortir". Vous pouvez \u00e9galement utiliser ce n\u0153ud pour r\u00e9agir si un utilisateur a ouvert ou ferm\u00e9 le tableau de bord.<\/p>\n\n\n\n
\"\"<\/a>
Avec ce n\u0153ud, seul le nom peut \u00eatre configur\u00e9 dans la fen\u00eatre des param\u00e8tres. Tous les param\u00e8tres r\u00e9glables ou informations disponibles sont \u00e9galement r\u00e9sum\u00e9s dans la barre d'informations sur le c\u00f4t\u00e9.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
n\u0153ud de mod\u00e8le<\/h2>\n\n\n\n
Le n\u0153ud de mod\u00e8le est un n\u0153ud tr\u00e8s polyvalent. Vous pouvez int\u00e9grer votre propre code HTML sur le tableau de bord. Celui-ci peut alors r\u00e9agir individuellement aux messages re\u00e7us des n\u0153uds connect\u00e9s et \u00e9galement renvoyer lui-m\u00eame des messages.<\/p>\n\n\n\n
\"\"<\/a>
En utilisant le n\u0153ud de mod\u00e8le, vous pouvez ajouter du contenu \u00e0 l'en-t\u00eate de la page...<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
...ou ajoutez des n\u0153uds aux groupes que vous avez format\u00e9s comme vous le souhaitez avec votre propre code HTML.<\/figcaption><\/figure>\n\n\n\n
thztjz<\/p>\n\n\n\n
\"\"<\/a>
Vous pouvez \u00e9galement utiliser ce n\u0153ud pour ins\u00e9rer des liens vers n'importe quelle page du tableau de bord, par exemple. Dans cet exemple, le lien vers la vue MagicMirror est g\u00e9n\u00e9r\u00e9 et affich\u00e9 sur le tableau de bord.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Un lien appara\u00eetra alors sur le tableau de bord, qui vous am\u00e8nera \u00e0 la vue MagicMirror.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
Autres exemples<\/h2>\n\n\n\n
Vous trouverez ci-dessous une petite liste des articles dans lesquels j'utilise \u00e9galement les n\u0153uds du tableau de bord. Peut-\u00eatre qu'il y a quelque chose pour vous aussi. \ud83d\ude42<\/p>\n\n\n\n