Node-RED - Premiers pas
Artistes, à vos palettes !
Node-RED est un outil de programmation visuel, basé sur Nodejs, permetant d’interconnecter des objets de facon ludique ; l’Internet of Things !
L’éditeur est un navigateur WEB, permettant la création de flux par la liaison de noeuds.
La force de Node-RED est la palette de plusieurs jeux de noeuds mis à disposition par une communauté riche de contributeurs.
Si ce n’est déjà fait, installer Node-RED comme indiqué sur ce billet
L’éditeur
L’éditeur de Node-RED est composé de plusieures zones d’activitée:
- Menu
- Notification
- Noeuds
- Création de flux
- Enregistrement / Activation du flux
Menu
Le menu permet de:
- Importer / Exporter des noeuds & flux au format JSON
- Gérer des Fluxs et Sous Flux
- Gérer la palette de jeux de noeuds
- La configurations des raccourcis clavier, de l’interface, de la palette…
Noeuds
Les noeuds sont répartis par types :
- Common: entrées / sorties
- Function: manipuler, traiter, modifier…
- Network: http, mqtt, tcp, udp, websocket…
- Sequence
- Parser: convertir, extraire depuis ou vers différents formats (csv, html, json, yaml, xml)
- Storage: stocker / lire
Information: d’autres jeux de noeuds peuvent être ajoutés: stockage vers une base de données, dashboard / ui, mail, sms, périphérique Shelly, périphériques HUE Philips, twitter, RSS, watson…
Il faudra les installer via la palette.
Notification
Une zone très importante, où:
- Information fournit un descriptif du noeud sélectionné
- Debug affiche le contenu du noeud injecté
- L’ajout du dashboard fournira l’accès à l’UI
Flux
Pour créer un flux, il suffit de glisser / déposer un noeud, un second, de remplir les informations attendus et de les lier.
Deploy
Une fois le flux crée, ce bouton, activera et enregistrera la configuration du flux.
La Palette
La gestion de jeux de noeuds s’effectue via la palette. Installons le jeu de noeuds dashboard de Node-RED.
Installer le dashboard
Aller dans le menu, cliquer sur Manage Palette
Une interface, s’ouvre, via l’onglet install, chercher le “Noeud” souhaité. Ici node-red-dashboard.
Installation | Jeu de noeuds |
---|---|
![]() |
![]() |
- Accéder à la page internet du noeud
- Installer le noeud choisi
l’installation du jeu de noeud, fournira le nouveau type “Dashboard” et les noeuds associés. Une nouvelle icone apparaitra dans la zone Notification.
Format JSON
Le JSON (JavaScript Object Notation, N.d.T: Notation Object, issue du JavaScript) est un format d’échange de données basé sur une collection de tuples {nom:valeur}.
Simple, il est facilement compréhensible par un humain. Le format idéal pour échanger et traiter les données transitant par les noeuds de Node-RED.
Le format JSON utilisé par Node-RED va nous permettre de manipuler des objets msg.
Exemple :
Nom | Valeur |
---|---|
msg_id | 12345 |
Expression JSON:
{
"_msgid": "12345",
"payload": "myMessage",
"topic": "myTopic"
}
Ici, nous ferons transiter le tuple { “msg.payload”:“myMessage” } de l’objet msg sur différent topic.
Les noeuds function, permettront de manipuler les données contenues dans les objets JSON.
Premier flow - Hello World !
Objectif
Envoyer la chaine de charactère “Hello World !” dans la zone de notification “Debug”.
Expression JSON:
{
"_msgid": "e1a1d9f.71fb828",
"topic": "",
"payload": "Hello World !"
}
Flow
- Glisser déposer le noeud “inject”
- Ouvrir les propriétés du noeud (double click sur le noeud)
- Modifier l’attribut type du payload : string
- Insérer la valeur “Hello World !” dans le payload
- Cliquer sur Done
- Cliquer sur Deploy
- Ouvrir les propriétés du noeud (double click sur le noeud)
- Cliquer sur l’injection et observer le résultat ci-dessous:
Importer le code JSON:
[
{
"id":"35698d9b.064cca",
"type":"tab",
"label":"Flow 1",
"disabled":false,
"info":""
},
{
"id":"4d95dfd.a7f10a",
"type":"inject",
"z":"35698d9b.064cca",
"name":"Send Sring",
"topic":"",
"payload":"Hello World !",
"payloadType":"str",
"repeat":"",
"crontab":"",
"once":false,
"onceDelay":0.1,
"x":290,
"y":40,
"wires":[["7e3bce47.3b71c8"]]
},
{
"id":"7e3bce47.3b71c8",
"type":"debug",
"z":"35698d9b.064cca",
"name":"Flow_1",
"active":true,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"false",
"x":340,
"y":100,
"wires":[]
}
]
Informations: nous retrouvons, nos trois objets utilisés.
- tab: Flow 1
- inject: Send String
- debug: Flow_1
Second Flow - Hello Node-RED UI !
Objectif:
- Un bouton inject envoie la chaine de charactère “Hello Node-RED UI !” à un noeud text
- Le noeud text affiche la chaine de charactère reçue
- Un noeud debug, permet de visualiser ce qui transite dans le flux
Expression JSON transitant entre les noeuds:
{
"payload": "Hello Node-RED UI !",
"event": "object",
"clientX": 672,
"clientY": 72,
"bbox": "array[4]",
"0": 562,
"1": 104,
"2": 880,
"3": 56,
"socketid": "CV3JvlrDJDNldwNpAAAI",
"_msgid": "bda45c0c.9d2d9"
}
Flow
Information: le dashboard peut être configuré et customisé.
- Layout: Disposition des éléments
- Site: Configuration du dashboard (format, title & en-têtes)
- Thème: Police, background…
- Agencement du Layout !
Configuration:
Noeud Inject | Noeud Text |
---|---|
![]() |
![]() |
Résultat:
Dash | Sortie |
---|---|
![]() |
![]() |
Importer le Code JSON:
[
{
"id":"35698d9b.064cca",
"type":"tab",
"label":"Flow 1",
"disabled":false,
"info":""
},
{
"id":"7d96a6a4.181098",
"type":"ui_button",
"z":"35698d9b.064cca",
"name":"send String",
"group":"c169ab23.54c6f",
"order":1,
"width":0,
"height":0,
"passthru":false,
"label":"button",
"tooltip":"",
"color":"",
"bgcolor":"",
"icon":"",
"payload":"Hello Node-RED UI !",
"payloadType":"str",
"topic":"","x":110,
"y":60,
"wires":[["70becc11.b76f34","63a5dcff.d25e24"]]
},
{
"id":"70becc11.b76f34",
"type":"ui_text",
"z":"35698d9b.064cca",
"group":"c169ab23.54c6f",
"order":2,
"width":0,
"height":0,
"name":"Text_reçu",
"label":"text",
"format":"{{msg.payload}}",
"layout":"row-spread",
"x":290,
"y":40,
"wires":[]
},
{
"id":"63a5dcff.d25e24",
"type":"debug",
"z":"35698d9b.064cca",
"name":"Flow_1",
"active":true,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"payload",
"targetType":"msg",
"x":160,
"y":120,
"wires":[]
},
{
"id":"c169ab23.54c6f",
"type":"ui_group",
"z":"",
"name":"Send String",
"tab":"67a6e042.8c9",
"order":1,
"disp":true,
"width":"6",
"collapse":false
},
{
"id":"67a6e042.8c9",
"type":"ui_tab",
"z":"",
"name":"Home",
"icon":"dashboard",
"disabled":false,
"hidden":false
}
]
Information: Nous retrouvons ci-dessus, nos six objets utilisés.
- tab: Flow 1
- ui_button: Send String
- ui_text: text
- debug: Flow_1
- ui_group: Send String
- ui_tab: Home
Conclusion
Nous avons pu appréhender:
- La gestion d’un flux via deux noeuds
- Le format de modélisation et d’échanges JSON
- L’installation d’un jeu de noeuds via la palette
- La mise en oeuvre d’une interface interactive, via le dashboard
- La sortie debug