Tableau de bord pour objets connectés en temps réel avec Node-RED

Cette semaine je me suis intéressé à Node-red, un outil de programmation graphique dédié à l’internet des objets. Avec cet outil associer à un raspberry pi les possibilités qu’offraient nos simples ESP8266 sont déformaient multipliées !

Node-red est un serveur de web de programmation graphique. Il fonctionne avec des nœuds qu’il faut relier, l’ensemble forme un flow. Les flows se lisent de gauche à droite, la gauche étant l’entrée et la droite la sortie.

Node red peut-être installé sous Windows, mac ou Linux. Pour l’utiliser avec des objets connectés tels que l’ESP je te conseille fortement de l’installer sur un raspberry. Le but est de réaliser un serveur qui pourra centraliser tous nos capteurs (entrée/sortie), mais également traiter leurs données diverses et ces 24H/24H.

Sans nod-red, pour allumer ou éteindre une lumière nous passions par un serveur monté directement sur l’ESP. Plus on comptait d’ESP pour contrôler nos lumières, plus il devenait compliqué des managers manuellement puisqu’il faut à chaque fois changer d’adresse IP pour changer de serveur web.

Désormais node red sera l’unique interface utilisateur, ainsi, nos ESP ne seront plus commandées directement par l’utilisateur, mais par le serveur Nod-red. En effet, celui-ci pourra aussi nous servir pour contrôler nos ESP afin de traiter directement leurs données ou pour simplement les mettre en formes.

C’est justement ce que nous allons voir dans cet article ! Comment remonter des données venant de nos ESP sur un serveur Web (ici Nod Red) ?

Afin de simplifier la démonstration je n’utiliserais pas de capteur, mais sachez que c’est pratiquement la même chose avec un capteur, il y aura juste une variable qui se balade.

RASPBERRY PI

La première partie de ce tutoriel se fait sur notre raspberry pi. Étant donné que notre raspberry sera l’hôte sur lequel nos ESP devront se connecter pour envoyer des données. Il faut absolument que celui-ci ait une IP statique.

Pour ce faire, tu peux soit utiliser l’interface graphique, ou alors te rendre dans le fichier /etc/dhcpcd.conf pour l’éditer. Pense aussi à prendre une adresse IP qui n’est pas déjà utilisée sur le réseau local afin d’éviter des conflits.

Par ailleurs, pour valider les modifications, pense à bien redémarrer ton interface ! Si la modification n’est toujours pas prise en compte, redémarre simplement le raspberry.

Ensuite il faut installer node-red. Pour nous simplifier la vie, node-red à prévu un script d’installation :

curl -sL https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/update-nodejs-and-nodered

ATTENTION

L’installation est assez longue !

Afin de faciliter la maintenance du raspberry j’ai aussi activé la liaison SSH. Pourquoi ? C’est pour éviter d’avoir à mettre mon écran, mon clavier et ma souris dessus à chaque fois que je veux voir ce qu’il se passe dedans 😊.

Avant de terminer la configuration de la rasp voilà ce que je te conseil. J’ai ajouté dans la liste des programmes au démarrage du système, nod-red et ssh justement.

Il ne te reste plus qu’à démarrer le service node-red : node-red-start

Tu peux maintenant laisser tomber la rasp pour le moment ! En effet, si tous c’est bien passé tu devrais pouvoir accède au serveur node-red depuis n’importe quel PC! J’ai faits un test de ping pour savoir si tout était correct:

Pour plus d’informations sur l’installation de Node-RED voici le lien de la documentation: https://nodered.org/docs/

Programmation ESP8266

Le programme de notre esp8266 aura pour but de mettre en forme des données en JSON. Ensuite il les enverra en HTTP vers notre serveur node-red.

Tout comme le raspberry l’ESP8266 devra être connecté à un réseau WIFI, c’est la seule condition pour que les deux objets puissent communiquer.

Pour transmettre nos données, nous utiliserons le format de donnée JSON. Ce format sera ensuite transmis par la méthode POST avec le protocole HTTP.

Pour simuler un changement continu de valeur (afin d’imiter un capteur par exemple). j’ai déclaré la fonction JsonPost dans une boucle for. De cette manière toutes les secondes la variable i qui était à l’origine à 0 sera incrémentée de 1.

Cette valeur sera transmise directement au serveur node-red qui l’affichera sur un tableau de bord.

J’ai définir une fonction qui doit se connecter à l’hôte (node-red). Il faut lui transmettre les données que l’on souhaite en JSON. Cette fonction possède deux paramètres, l’hôte (adresse IP du rapsberry) ainsi que les données à transmettre.

Les requêtes HTTP POST doivent obligatoirement avoir un entête qui stipule le type de contenue (application/json dans notre cas). On peut ensuite poster le contenu de la requête.

Pour mettre en forme les données, il faut respecter certaines règles. Les données sont organisées sous forme de tableaxu successifs, et dans chaque sous tableau les données sont définies par une valeur et sa clé. Je vous mets un exemple de structure JSON ci-dessous :

{
  "id": 3,
  "first_name": "Noell",
  "last_name": "Bea",
  "email": "nbea2@imageshack.us",
  "gender": "Female",
  "ip_address": "180.66.162.255"
}

Pour simplifier la tâche j’aurais une seule donnée dans ma structure Json qui portera le nom de data.

Pour définir celle-ci, j’ai créé une variable result de type string qui reprendra juste la forme utilisée en JSON. Elle contiendra la clé « data « qui portera une valeur issue d’une concaténation du paramètre data de la fonction.

Une fois la variable définie, il ne reste plus qu’à l’envoyer grâce à la méthode http.POST(…).

La boucle for a chaque itération changera la valeur de data. Donc celle de la valeur transmise au serveur node-red. Si tous se passe bien on aura une fois node-red configurée un afficheur de données qui s’actualisera automatique à chaque nouveau POST de l’ESP.

 

–> CODE SOURCE <–

Configuration de Node-red

Node-red est un serveur graphique destiné à l’internet des objets. Il a l’avantage d’être très intuitif une fois le principe compris.

Tout d’abord, le principe pour notre cas d’usage est simple. D’abord le serveur nod-red va recevoir des données brutes envoyées par l’ESP. Ensuite vient une petite phase de traitement. En effet, Javascript va extraire de notre structure de données la donnée qui nous intéresse (pas compliqué puisqu’il y en a une seule). Puis enfin, la phase de traitement terminé, il ne reste plus qu’à les afficher sur le tableau de bord.

Pour pouvoir afficher correctement les données il faut utiliser l’addon dashboard de Node. Pour l’installer il te suffit d’aller dans l’onglet manage palette et y chercher node-red-dashboard. Une fois installer, tu remarquera l’apparition de nouveaux nœuds ainsi qu’un nouvel onglet à droite de ton écran qui te permettra de désigner ton tableau de bord.

Le nœud qui va recevoir nos requêtes HTTP devrait simplement définir l’URL sur lequel il va écouter. Conformément au programme Arduino se sera /data pour nous.

La phase de traitement en JS consistera à simplement récupérer la donnée data de la structure JSON

Enfin, j’ai choisi un nœud d’affiche textuel pour la mise en forme de data. Rien de spécial à configurer, c’est 90% de visuel donc je te laisse exprimer ton imagination.

A NOTER

Le nœud debug est très utile pour déterminer les éventuelles erreurs que tu as faites dans ton flow. Il s’utilise comme une simple sortie. Pour voir se qu’il affiche pense à aller dans l’onglet debug message.

C’est pratiquement terminé ! Pense bien à déployer le flow! Puis tu n’as plus qu’à aller à l’adresse : http://adressIP :1880/ui pour voir se que le tableau affiche. Voici la forme que j’obtiens :

Si tous se passent bien cette valeur doit changer pour chaque POST de l’ESP.

Reçois 1 un petit guide de réalisation DIY par semaine!

+

Du contenu bonus offert à chaque nouvel article!