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

Node-RED zones

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

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
Palette - Install Dashboard Noeud - Dashboard
  • 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#

Hello World!

  • 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
  • Cliquer sur l’injection et observer le résultat ci-dessous:

Hello World!

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":[]
  }
]

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#

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 !

Flow

Configuration:

Noeud Inject Noeud Text
Inject Text

Résultat:

Dash Sortie
dash out

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
  }
]

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

Documentation#