Accueil | Niveau de difficulté | Avancé | Dashboard pour objet connecté avec Node-RED. Partie 2 : jauges, graphiques, notifications, template HTML

Dashboard pour objet connecté avec Node-RED. Partie 2 : jauges, graphiques, notifications, template HTML

Voici le second article consacré à la création d’un dashboard (tableau de bord) pour objet connecté à l’aide du module Dashboard pour Node-RED. Dans ce tutoriel, nous allons nous intéresser à l’ajout des afficheurs graphiques. Le module Dashboard propose 4 types d’afficheurs (jauge, graphique, champ texte, notification furtive), le composant ui-control qui permet de changer de panneau (tab) par programmation, et enfin un champ qui permet d’afficher du code HTML libre (déjà vu dans la 1ère partie). Si vous avez manquez la première partie, la séance de rattrapage est ici.

Préparation

Sonde de température MySensors DHT22 pour générer des mesures à afficher

Pour illustrer le fonctionnement des différents composants de sortie du module Dashboard, je vous propose d’utiliser des mesures en provenance d’une sonde de température DHT22 MySensors. Tout est déjà expliqué dans cet article.

Page MySensors

Ouvrez l’onglet Dashboard et ajoutez un nouveau Tab. Nommez le MySensors par exemple. Ajoutez 2 groupes :

  • Mesures
  • Graphiques

Le Dashboard ressemble à ça maintenant.

node-red dashboard tabs

Changer de page par programmation (ui-control)

Ajoutons maintenant un composant ui-control qui permet de changer de page (tab) par programmation. Il accepte en entrée un payload sous 2 formes :

  • {tab:”MySensors”} : on donne le nom de la page de destination. Attention, il faudra reporter tout changement de nom de la page dans le dashboard.
  • {tab:1} : ou alors, on donne le numéro de la page. Idem, si on ré-ordonne les pages, il faudra appliquer le nouveau index dans le code.

Pour cela, ajoutez une fonction et collez ce code

node-red-dashboard-payload-ui-control

On peut déclencher le passage à une autre page depuis un bouton de commande par exemple.

node-red-dashboard-ui-control

Connection et extraction des mesures de température et d’humidité de la sonde MySensors

Maintenant, connectons Node-RED à la gateway MySensors pour récupérer les mesures. Si vous débutez sur le sujet, commencez par lire cet article. Ce flow (code ci-dessous) utilise le flow de décodage des messages MySensors. Un premier filtre permet d’extraire la mesure de température du noeud qui nous intéresse. Le second filtre permet d’extraire la mesure d’humidité.

node-red dashboard connect mysensors gateway extract value

Code du flow de connexion et d’extraction des mesures

Afficher une jauge (ou donut, compass, level)

Il ne reste plus qu’à afficher les mesures dans une jauge. Ajoutez un composant jauge sur le flow. On dispose de 4 types de présentation :

  • Jauge : adapté pour afficher une mesure sur un cadran. Par exemple toutes les mesures physiques dans une plage connue (température, humidité, pression atmosphérique, vitesse du vent…)
  • Donut : adapté pour un affichage de plusieurs valeurs. Par exemple une répartition de puissance consommée par différents appareils
  • Compass : adapté pour indiquer une direction. Par exemple la direction du vent mesuré par une girouette connectée.
  • Level : adapté pour affiché un niveau. Par exemple le niveau de remplissage d’un réservoir (eau, fuel domestique…)

Ici nous choisirons le type jauge. Les autres paramètres importants sont :

  • Value format : cette chaine permet de définir comment afficher la mesure. On peut ajouter du texte avant et après. La variable se présente sous la forme {{value}}. Node-RED remplacera cette variable par la valeur contenue dans le msg.payload en entrée. Par exemple, pour la température, on indiquera {{value}}°C pour ajouter l’unité après la mesure.
  • Label : une étiquette placée en dessous de la valeur
  • Range : plage de valeur minimum et maximum de l’afficheur
  • Color gradient (uniquement pour jauge et donut) : on peut définir 3 couleurs, par exemple froid (bleu), tiède (orange), chaud (rouge).

node-red dashboard gauge donut compass level.

Ce qui donne ceci

node-red-dashboard-gauge-dht22-mysensors

Afficher un graphique (chart)

Le module dashboard propose 2 types de graphiques :

  • En ligne (Line Chart). Il est très bien adapté à l’affichage de mesure en temps réel
  • En barre (Bar Chart). Comme le Donut, il est bien adapté pour comparer des mesures. Par exemple la température dans plusieurs pièces

Il est possible d’avoir plusieurs données sur un même graphique. Il suffit de “brancher” les flows sur le Node Chart. Le module Dashboard se charge de créer une donnée pour chaque payload entrant. Il faut essayer de mettre des mesures avec une plage assez proche (ou encore mieux de même nature) pour que le rendu soit correct.

Les autres paramètres du Node Chart :

  • Size : on peut adapter la taille pour avoir un affichage homogène
  • Label : libellé du graphique qui sera affiché au dessus de celui-ci
  • Type : en ligne ou en barre
  • X-axis (uniquement pour Line Chart) : base de temps de l’échelle de l’abscisse en secondes, heures, jours, semaine. On peut personnaliser l’affichage, par exemple H:M, H:M:S…
  • Y-axis : échelle minimum et maximum de l’axe Y
  • Interpolate : méthode d’interpolation entre deux points. C’est utile si les mesures sont très espacées dans le temps.
  • Legend : affiche ou pas la légende. Pratique si on affiche plusieurs mesures sur un même graphique. Le Dashboard attribue automatiquement une couleur
  • Blank label : texte affiché s’il n’y a rien à tracer sur le graphique

node-red dashboard chart

Ce qui donne le graphique suivant

node-red dashboard chart temperature humidite

Zone de texte et notification furtive

Nous allons terminé la présentation du module Dashboard avec l’affichage d’un texte dans un champ et dans une notification furtive. Commençons par préparer la chaine de texte à afficher

Assembler plusieurs payload en une chaine de caractère

Node-RED est un système asynchrone, c’est à dire que les opérations ne se terminent pas forcément en même temps. Dans le cas présent (oui j’aurais pu le faire autrement, mais c’est un problème récurrent de Node-RED), j’ai extrait la température et l’humidité séparément. C’est nécessaire pour afficher simplement la mesure dans une jauge, mais ça ne nous arrange pas pour afficher le tout dans une notification. Voici comment faire.

Dans chaque filtre, j’ai ajouté un topic (par exemple température et humidity). On créé une variable de context; A chaque fois qu’un payload se présente dans le Node, on test le topic et on range la valeur dans l’objet de context. Ensuite on test si le context contient une valeur pour la température et l’humidité (et si elle n’est pas undefined). Si c’est le cas, on construit une chaine correctement formatée qu’il ne suffira plus qu’à afficher. Par exemple Température : 21.4°C – Humidité : 52.3%.

Afficher un texte sur le Dashboard

Le Node Text permet d’afficher très simplement du texte contenu dans un payload. On le configure comme ceci :

  • Size : la taille du champ
  • Label : le libellé du champ.
  • Value format : on peut personnaliser l’affichage de la valeur. Par exemple, si on veut ajouter une unité ou un préfixe. On pourrait aussi afficher le topic (msg.topic) ou accéder directement à un élément d’un objet JSON, par exemple msg.payload.data.valeur. Dans le cas présent, on ne changera rien.
  • Layout : permet de choisir un mode d’affichage. Le libellé collé à gauche, la valeur à droite ou une autre combinaison de position.

node-red dashboard text node

Ce qui donne

node-red dashboard text node

Afficher une notification furtive

Nous allons terminer ce tutoriel par la notification furtive. On peut choisir parmi 4 positions :

  • Coin supérieur droit (Top Right)
  • Coin inférieur droit (Bottom Right)
  • Coin supérieur gauche (Top Left)
  • Coin inférieur droit (Bottom Left)

Remarque. Sur tablette, smartphone ou si la fenêtre du navigateur est réduite, le message est affiché en bas de l’écran (sur toute la largeur).

On définit également la durée d’apparition du message furtif. Par défaut, 3 secondes.

node-red dashboard mysensors dht22

Ce qui donne pour terminer un affichage plutôt sympa !

node-red-dashboard-mysensors-dht22

Code du flow

Importez simplement ce code dans un flow si vous ne voulez pas réaliser toutes les étapes. Ce flow contient également la 1ère partie de ce tutoriel.

node-red dashboard test complet toutes fonctions