Construction de l'IHM
Méthode : Prise en main de Node-RED et programmation d'un premier flux
La vidéo suivante :
présente sommairement Node-RED,
vous montre comment créer un compte (si vous vouliez le faire pour vous),
comment utiliser Node-RED,
vous accompagne dans la création d'un premier flux, appelé flux de débogage.
Impossible d'accéder à la ressource audio ou vidéo à l'adresse :
La ressource n'est plus disponible ou vous n'êtes pas autorisé à y accéder. Veuillez vérifier votre accès puis recharger le média.
TRAVAIL DEMANDE :
1) Création d'un premier flux
dans le menu général (en haut à droite) sélectionner Flows, Add
ceci ouvre une nouvelle feuille de travail.
2) Test de bon fonctionnement
Glisser un nœud d'injection, le relier à un nœud de débogage
(les points bleus sur les nœuds indiquent que les dernières modifications ne sont pas encore enregistrées...)
Choisir comme contenu ("Payload") à injecter l'heure courante ("Timestamp")
Validez la feuille en cliquant sur le bouton rouge "Deploy" (le bouton "Deploy" devient gris et les points bleus disparaissent)
Ouvrir la fenêtre de débogage (bouton avec la petite bête), et vérifiez que l'heure s'affiche à chaque appui sur le bouton à l'entrée du nœud d'injection.
Modifiez le nœud d'injection en choisissant une répétition toutes les secondes :
Déployez (bouton rouge) et vérifiez l'injection automatique de l'heure toutes les secondes :
3) Test de la réception d'un flux MQTT
L'objectif est de visualiser la bonne réception de l'information 'densite de trafic' émise par l'observateur.
Faire défiler la zone de choix des nœuds (à gauche) jusqu'au sous-ensemble Network ; glisser sur la feuille de flux un nœud de réception MQTT.
Le triangle rouge indique que le nœud mqtt n'a pas été configuré.
Configurer le nœud de réception MQTT (double-clic) :
Première boîte de dialogue : indiquer les informations concernant le broker
broker : test.mosquitto.org
Deuxième boîte de dialogue : indiquer les informations concernant le topic
topic : [monLycee]/[observateur]/qqpdm/densite (à adapter aux noms de topics que vous avez défini précédemment)
Relier un nœud de débogage.
Valider la feuille de flux (bouton déployer)
Ouvrez la fenêtre de débogage (bouton insecte)
Vérifiez que la tablette de l'observateur qui génère l'information 'densité de trafic' est bien reliée au broker (dans l'appli IoT MQTT Panel, le nuage doit être de couleur orange)
A chaque manipulation du curseur 'densité de trafic' sur la tablette, l'information doit être reçue sur la fenêtre de débogage.
La communication de votre chaîne IoT est validée.
Faites-en part à l'enseignant.
Il ne vous reste plus qu'à rendre l'information "présentable" .
Création de l'IHM du Centre de Contrôle
Vous devez visualiser les informations suivantes :
accéléromètres du véhicule --> sur des jauges
sa localisation GPS (si disponible) --> sur des afficheurs
densité du trafic routier --> jauge
un bouton pour l'envoi de la consigne 'Rappeler'
Ces informations utilisent les topics :
monLycee/qqpdm/vehicule/accelerometers/# (# = plusieurs données)
monLycee/qqpdm/vehicule/gps/#
monLycee/qqpdm/observateur/densite
monLycee/qqpdm/observateur/rappeler
Méthode : Création du Tableau de bord Node-RED
Nous allons créer un tableau de bord et y inclure les composants de contrôle/commande nécessaires :
1) Création du tableau de bord (dashboard)
Il faut sélectionner l'onglet dashboard (bouton avec un graphe en barres),
et créer un nouveau tableau en appuyant sur le bouton '
+ tab'
Editer le tableau créé (bouton
Edit) et lui donner un nom : 'Centre de contrôle'Ajouter un groupe (bouton
+group) qui contiendra les informations à visualiser.Editer le groupe créé et l'appeler 'Observateur' par exemple
2) Création des objets graphiques du tableau de bord : afficheurs, boutons, zones de texte...
Faire défiler la liste des nœuds (boîte de gauche) et sélectionner une jauge dans les composants dashboard.
Relier la jauge au composant entrée mqtt (à la place ou en plus du nœud de débogage)
Editer le composant "gauge"
Spécifier le groupe dans lequel inclure ce bouton (le groupe 'Observateur' du dashboard "Centre de Contrôle")
Définir les options d'apparence de la jauge (nom, couleurs, intervalles de valeurs associés,...)
Déployer le flux (bouton 'Deploy')
Ouvrir l'interface de visualisation du tableau de bord, en cliquant sur le lien en haut à droite.
Vous devriez voir apparaître le tableau de bord du "Centre de Contrôle" dans une nouvelle fenêtre du navigateur :
On retrouve bien la page 'Centre de Contrôle" avec une jauge qui réagit lorsque l'observateur fait évoluer le curseur 'densité de trafic' sur la tablette.
3) Création des autres objets graphiques de l'interface
Il ne reste plus qu'à créer les autres objets graphiques de la même manière (pour chaque objet sélectionné, une aide est disponible en cliquant sur le bouton i).
Le bouton d'envoi de commande 'Rappeler' pourra être rattaché au groupe 'Observateur'
Les informations Accéléromètres, GPS seront rattachées à un groupe 'Véhicule' à créer dans le dashboard 'Centre de Contrôle'
Vous pourrez vous inspirer du tableau de bord de l'appli IoT MQQT Panel ci-dessous pour créer votre tableau de bord avec Node-RED ;
Complément : Pour aller plus loin...
Vous pouvez enrichir votre tableau de bord avec des graphiques d'évolution des données dans le temps...
Remarque :
Nous avons utilisé ici une version de Node-RED en ligne ; sur les versions locales et embarquées, les dashboards s'exécutent également dans une page du navigateur.