Installation & initialisation

NODE-RED
IIoT

I. C’est quoi ?
Node-RED a été créé par IBM en 2013 afin de facilité la création d'objets connectés.
C'est un langage graphique (sous-jacent en javascript) qui permet de créer des liens entre les flux de
données entrant et sortant.
Il est gratuit et nécessite : NodeJS (javascript du coté serveur).

II. Installation
Cette partie donne des instructions spécifiques sur la configuration de Node-RED dans un
environnement Microsoft Windows. Les instructions sont spécifiques à Windows 10 mais devraient
également fonctionner pour Windows 7 et Windows Server à partir de 2008R2. Il n'est pas recommandé
d'utiliser des versions antérieures à Windows 7 ou Windows Server 2008R2 en raison du manque de
support actuel.
1. Node.js
Téléchargez la dernière version 8.x LTS de Node.js depuis la page d'accueil officielle de Node.js. Il
vous offrira la meilleure version pour votre système.
Lien : https://nodejs.org/en/
Exécutez le fichier MSI téléchargé. L'installation de Node.js nécessite des droits d'administrateur local
; si vous n'êtes pas un administrateur local, un mot de passe administrateur vous sera demandé lors de
l'installation. Acceptez les valeurs par défaut lors de l'installation. Une fois l'installation terminée,
fermez toutes les invites de commande ouvertes et rouvrez-les pour vous assurer que les nouvelles
variables d'environnement sont prises en compte.
Une fois installé, ouvrez une invite de commande et exécutez la commande suivante pour vous assurer
que Node.js et npm sont installés correctement.
Utilisation de Powershell : node --version ; npm --version
Utiliser cmd : node --version && npm --version
Vous devriez recevoir une sortie de retour qui ressemble à :
v8.9.0
5.5.1
2. Node-RED

- Installation des outils de création de Windows Node.js

De nombreux modules Node.js utilisés par Node-RED ou les nœuds installés ont des composants
binaires qui devront être compilés avant de pouvoir fonctionner sous Windows. Pour permettre à npm
de compiler des binaires sur la plate-forme Windows, installez le module windows-build-tools en
utilisant l'invite de commande comme administrateur :

npm install --global --production windows-build-tools

Si vous souhaitez que l'installation intégrée de Python v2.7 soit exposée à l'utilisation, utilisez la
commande :

npm install --global --production --add-python-to-path windows-build-tools

Notes :
o Tous les modules de Node.js ne fonctionneront pas sous Windows, vérifiez
soigneusement que le fichier d'installation ne contient pas d'erreurs.
o Pendant l'installation, certaines erreurs peuvent être signalées par la commande node-
gyp. Ce sont typiquement des erreurs non fatales et sont liées à des dépendances
optionnelles qui nécessitent un compilateur afin de les compiler. Node-RED
fonctionnera sans ces dépendances optionnelles. Si vous obtenez des erreurs fatales,
vérifiez d'abord que vous avez installé le module windows-build-tools et que vous avez
fermé et ouvert votre fenêtre d'invite de commande.

- Fonctionnement sous Windows

Une fois installé, la façon simple d'exécuter Node-RED est d'utiliser la commande node-red dans une
invite de commande : Si vous avez installé Node-RED en tant que paquet global npm, vous pouvez
utiliser la commande node-red :
C:> npm install -g --unsafe-perm node-red

C:> node-red

- Lancement sous windows

Lancer la console windows en mode administrateur
Lancer la commande node-red
Autoriser l'accès
Allez avec un navigateur à l'ip : http://localhost:1880 : l'interface de node-red fonctionne....

Interface graphique style « lego »

Accès page web (donc en ligne)
Manipulation « drague and drop »

• Multiples protocoles (CSV, XML, JSON,..)

• Multiples interfaces matériel (Série, HTML, ….)
• Module configurable (javascript)
• Accès directs aux pins de la RPI (GPIO)
• Fonction MQTT intégrée
• Développement sponsorisé par IBM
• Gratuit
3. Fonctionnement
Les différentes parties de Node-Red

A gauche les modules/fonctions appelés « NODES » installées. D’autres modules sont à disposition sur
internet
Au milieu les tâches/programmes appelé « FLOW » c’est notre implémentation En haut toutes les tâches
qui tournent simultanément sur notre machine/CPU A droite quelques fenêtres info /Debug.
Une fois édité, on peut charger le flow dans la machine (l’activer).
Lors de l’activation, il se peut que nous recevions des messages d’erreur, manque d’information etc. à
corriger.

- Les fonctions Entrée / Input

Elles sont multiples et peuvent être étendues à souhait
✓ Quelques « nodes » utilisés lors des premiers essais.
✓ Les nodes sont triés par groupe (entrée, tâche, sortie).
✓ Une connexion entre les nodes se fait en tirant une liaison avec la souris.

- Module sortie

- Les fonctions
- Autres fonctions
 Créer un dashboard pour objet connecté avec Node-RED

Le module Dashboard permet d’ajouter très facilement une (très belle) interface graphique à un
projet Node-RED. Le module Dashboard succède au module UI. Avec ce module on peut ajouter
des afficheurs pour visualiser sous différentes formes des mesures : gauges, graphique, texte,
notification, ou du code HTML libre. On peut aussi ajouter des champs permettant de interactions :
bouton, interrupteur, slider (potentiomètre linéaire), champ de saisie (texte ou numérique), liste de choix
et des formulaires.

Installer le module Dashboard pour Node-RED

Si vous utilisez le module UI (node-red-contrib-ui), vous devez déjà le désinstaller. Depuis le Terminal
cd ~/.node-red
npm uninstall node-red-contrib-ui
Vous pouvez aussi le désinstaller depuis de gestionnaire de palette.

Ouvrez le gestionnaire de palette et cherchez le module à l’aide du mot clé dashboard.

Eléments graphiques proposés par Dashboard

Découverte des commandes du Dashboard
Nous allons découvrir les commandes proposées par ce module Dashboard.
Comment personnaliser les icônes
Avant de rentrer dans le vif du sujet, voyons d’abord comment utiliser des icônes. Plusieurs librairies
d’icônes Open Source peuvent être utilisées pour personnaliser l’affichage des composants.
La plus connue, Font Awesome (http://fontawesome.io/icons/). Les versions les plus récentes ne sont
pas supportées (4.7 et 5), mais il en reste beaucoup d’autres ! Pour utilisez une fonte Awesome, ajoutez
fa- devant le nom de l’icône. Par exemple fa-fire.
Material Design (https://material.io/icons/) est un projet Open Source soutenu par Google. Pour utiliser
une icône, remplacez les espaces par _, par exemple pour “account balance wallet”, saisissez
“account_balance_wallet”.

Préparation des pages (tabs)

Il est possible de créer des groupes et des pages directement depuis le panneau de configuration de
chaque Node du dashboard. Lorsqu’on découvre le module, c’est beaucoup plus facile et plus clair de
passer par la palette de configuration qui s’ajoute à coté de la console (debug). Si le panneau n’est pas
visible(ou si vous l’avez fermé), allez dans le menu puis View et enfin dashboard.

Choisissez un titre (title). Il sera affiché comme titre de la page dans l’entête du navigateur internet. On
peut choisir entre deux thèmes, sombre avec un fond noir (Dark) ou clair avec un fond blanc, les
éléments graphiques en bleu (Light).

Cliquez sur +tab pour ajouter une page.

 Ouvrez la fenêtre d’édition en appuyant sur edit.

Donnez un nom (name) et éventuellement une icône (voir plus haut comment faire). Enregistrez
avec Doneou Update. Ici on donnera le nom Ecran Principale et l’icône home.

Ajoutez maintenant 3 groupes

Et ouvrez la fenêtre d’édition

Donnez les noms suivants aux groupes :

• Eléments d’entrées
• Formulaire
• Journal d’événement du Dashboard

On peut laisser la taille de chaque widget se régler automatiquement mais dans certains cas vous devrez
la changer à la main avec le paramètre Width (largeur).

On peut réordonner les groupes dans une Tab, les déplacer d’une Tab à une autre et réordonner les Tab
et utilisant la poignée.
 Le groupe est maintenant prêt.

Maintenant, nous allons ajouter un à un les éléments de contrôle proposés par le module et découvrir ce
qu’ils permettent de réaliser ainsi que les paramètres disponibles. On assignera chaque élément au
groupe “Eléments d’entrée”, sauf le formulaire que l’on assignera au groupe “Formulaire”.

Bouton (Button)
Paramètres du bouton

• Group : groupe d’affichage.

• Size : taille de l’élément. Auto par défaut
• Icon : permet d’afficher un icône à gauche du libellé
• Label : libellé du bouton
• Colour : couleur du libellé (en hexa, pr exemple #8000ff)
• Payload : valeur de sortie lorsqu’on presse sur le bouton (true, false)
• Topic : étiquette
• Name : nom du Node affiché sur le flow Node-RED

Le bouton obtenu
 Liste de choix (dropdown)
L’élément Dropdown (liste de choix) permet à l’utilisateur de renvoyer 3 types de données :

• Une chaine de caractère

• Une valeur numérique entière
• Un booléen
Le Node peut aussi être transparent et laisser passer un message entrant. Pour cela, il faut cocher la case
“If msg arrives on input, pass trough to output”.

La liste de choix obtenue

Interrupteur (switch)
L’interrupteur horizontal permet de renvoyer un booléen lorsqu’il change d’état. Il est possible
d’inverser la valeur du booléen en sélectionnant en inversant les valeur de sortie en fonction de l’état
On et Off.
 Il est également possible d’avoir d’autres types de sortie (autre que le payload) :

• Un Flow
• Stocker l’état dans une variable globale (Global)
• Une chaîne de caractères (String)
• Un nombre (Number)
• Un objet JSON
• La date et l’heure de l’action (timestamp)

Le switch obtenu

Potentiomètre linéaire (Slider)

Tout comme le switch, le slider peut laisser passer un message entrant en toute transparence (cocher if
msg arrives…).

Le slider prend comme paramètre la valeur minimum (min), maximum (max) et le pas (step).
Le slider obtenu

Champ de saisie numérique (Numeric)

On doit définir une gamme de saisie (min, max).

Le champ numérique obtenu

Champ de saisie texte (Text) :
Ce champ propose 4 masques de saisie. Si un délai (delay) est indiqué (par défaut 300ms), le Node
renvoie la valeur saisie automatiquement. C’est pratique pour un usage sur tablette. Si le délai est nul
(0), il faudra valider la saisie par un appui sur la touche Enter.

Texte
Rien de plus à dire dessus.

Sélecteur de couleur (color picker)

Il renvoie le code couleur au format hexadecimal. Il utilise le sélecteur de couleur du système.
Adresse Email
Pratique, ce champ vérifie que l’email saisi est correct.

Formulaire (form)
Dernier gros morceau du Dashbord, le formulaire. C’est un composant vraiment très puissant et très
simple à mettre en oeuvre.
 Comme d’habitude, un libellé (Label) permet de lui donner un type qui sera affiché en entête. On
’empile’ ensuite les éléments dans le formulaire (Form elements). On dispose des choix suivants :
• Texte (text)
• Nombre (Number)
• Email (E-mail)
• Mot de passe (Password)
• Case à cocher (Checkbox)
• Interrupteur (Switch)
On peut rendre chaque élément obligatoire (Required) avant la sortie du formulaire.

Voici le formulaire obtenu.