HowTo: Node Red / Magic Mirror - Afficher les données de Node Red sur le miroir

Pendant longtemps, j'ai cherché un moyen d'afficher facilement les données que je collecte de mon SmartHome avec NodeRed sur le MagicMirror.
Grâce aux nombreux plugins pour MagicMirror et NodeRed, cela a été implémenté plus rapidement que prévu. Son fonctionnement est décrit dans l'article suivant.

---

Consignes de sécurité

Je sais que les notes suivantes sont toujours un peu ennuyeuses et semblent inutiles. Malheureusement, de nombreuses personnes qui savaient "mieux" ont perdu des yeux, des doigts ou d'autres choses à cause d'une négligence ou se sont blessées. La perte de données est presque négligeable en comparaison, mais même celles-ci peuvent être vraiment ennuyeuses. Par conséquent, veuillez prendre cinq minutes pour lire les consignes de sécurité. Parce que même le projet le plus cool ne vaut pas une blessure ou d'autres problèmes.
https://www.nerdiy.de/sicherheitshinweise/

Liens d'affiliation/publicitaires

Les liens vers des boutiques en ligne répertoriés ici sont des liens dits d'affiliation. Si vous cliquez sur un tel lien d'affiliation et effectuez un achat via ce lien, Nerdiy.de recevra une commission de la boutique en ligne ou du fournisseur concerné. Le prix ne change pas pour vous. Si vous effectuez vos achats via ces liens, vous aidez Nerdiy.de à pouvoir proposer d'autres projets utiles à l'avenir. 🙂 

---

Conditions préalables

Articles utiles :
Avant de commencer l'installation, vous devez avoir préparé le RaspberryPi pour qu'il soit accessible via le réseau et contrôlé via SSH.

Les trois articles suivants décrivent ce qu'il faut faire pour préparer le RaspberryPi :
RaspberryPi - configuration pour les nerdiys !
RaspberryPi – La première configuration !
RaspberryPi - Contrôlez le RaspberryPi via SSH
MagicMirror - Installation du logiciel requis
MagicMirror - Installer des modules tiers

Matériel requis :

Dans la liste suivante, vous trouverez toutes les pièces dont vous avez besoin pour mettre en œuvre cet article.

---

Connectez-vous à l'interface de configuration de NodeRed

Avant de pouvoir modifier votre configuration NodeRed, vous devez - si activé - vous connecter d'abord à l'interface de configuration NodeRed.

---

Créer la source de données dans NodeRed en tant que JSON

Dans cet exemple, les données du RaspberryPI sur lequel NodeRed s'exécute sont affichées sur le MagicMirror.
NodeRed rend ces données disponibles au format JSON, que le MagicMirror collecte à intervalles réguliers et affiche sur son écran. Vous n'avez pas besoin d'installer de nouveaux nœuds pour cela, car la source de données est assemblée à partir des nœuds standard.

Pour ce faire, vous devez configurer le flux suivant.

Il est plus facile d'insérer le code de nœud suivant :

[{"id": "cc7a1b10.a7c038", "type": "http in", "z": "8c9f8f17.13eb78", "name": ", " url "/daten.json " method":"get","upload":false,"swaggerDoc":"","x":320,"y":460,"wires":[["61e489ce.08eb68"]]},{"id ":"89f4552e.8cc4f8","type":"réponse http","z":"8c9f8f17.13eb78","name":"","x":1040,"y":460,"wires": []},{"id": ced95c01.75153, "type": change, "z": "8c9f8f17.13eb78", "name": "Définir les en-têtes", "rules": [{"t ": "set", "p": en-têtes, "pt": "msg", "to": {}, "tot": "json"}, {"t": "set", p": "headers.content-type", "pt": "msg", "to": "application/json", "tot": "str"}], "action": ", "propriété": "","from":"","to":"","reg":false,"x":880,"y":460,"wires":[["89f4552e.8cc4f8"]]}, {"id": "a5b108a6.e68c88", "type": "template", "z": "8c9f8f17.13eb78", "name": "page", "field": "charge utile", "fieldType": msg","format":"guidons","syntax":"moustache","template":"{ "Données": [ { "name": "RPi Temp", "value": "{{temp}} °C", "lastUpdate": "{{temp-timestamp}}" }, { "name": "CPU Load", "value": "{{load}}%", "lastUpdate": "{{load -timestamp}}" }, { "name": "Mémoire libre", "value": "{{free}}Mo", "lastUpdate": "{{free-timestamp}}" } ] }","output ":"str","x":720,"y":460,"wires":[["ced95c01.75153"]]},{"id":"c088c2a8.b53bc","type":"commentaire ","z":"8c9f8f17.13eb78","name":"Flux Json pour alimenter le MagicMirror","info":"","x":240,"y":80,"wires":[] },{"id": "61e489ce.08eb68", "type": "change", "z": "8c9f8f17.13eb78", "name": "Heure de copie", "rules": [{" t": "set", "p": "temp", "pt": "msg", "to": "temp", "tot": "flow"}, {"t": "set", "p": "temp-timestamp", "pt": "msg", "to": "temp-timestamp", "tot": "flow"}, {"t": "set", "p": "load", "pt": "msg", "to": "load", "tot": "flow"}, {"t": "set", "p": "load-timestamp", "pt": "msg ","to":"load-timestamp", "tot": "flow"}, {"t": "set", "p": "free", "pt": "msg", "to": "free", "tot": "flow"}, {"t": "set", "p": "free-timestamp", "pt": "msg", "to": "free-timestamp", "tot": "flux"}], "action": ", "property": ", " from ", " à ", " " reg " : faux, " x " : 560, "y":460,"wires":[["a5b108a6.e68c88"]]},{"id":"b64f17d1.b71778","type":"comment","z":"8c9f8f17.13eb78", "name": "Les données entrantes sont temporairement stockées ici pour un envoi ultérieur." .b713a","type":"comment","z":"8c9f8f17.13eb78","name":"Ici, les données enregistrées sont livrées au format Json","info":"","x":410, "y":420,"wires":[]},{"id":"877b026b.7bbd9","type":"exec","z":"8c9f8f17.13eb78","command":"vcgencmd mesure_temp ","addpay":false,"append":"","useSpawn":"","timer":"","name":"RPi Temp.","x":510,"y":220 ,"wires":[["c71030c9.e8723"],[],[]]},{"id":"e2c23c0f.e6896","type":"inject","z":"8c9f8f17.13eb78" ,"name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false ,"onceDelay":"","x":310,"y":220,"wires":[["877b026b.7bbd9","bd2a3aa8.b05be8","f6021bf6.b47108"]]},{"id ": "c71030c9.e8723", "type": "function", "z": "8c9f8f17.13eb78", "name": "cutString", "func": "str = msg.payload msg.payload = str. sous-chaîne(5,9); return msg;","outputs":1,"noerr":0,"x":700,"y":220,"wires":[["38abd283.af271e"]]},{"id": bd2a3aa8.b05be8","type":"exec","z":"8c9f8f17.13eb78","command":"top -d 1 -b -n2 | grep "Cpu(s)"|tail -n 1 | awk '{print $2 + $4}'","addpay":false,"append":"","useSpawn":"","timer":"","oldrc":false,"name":"CPU Charge","x":510,"y":280,"wires":[["966babc4.47d538"],[],[]]},{"id":"f6021bf6.b47108","type" :"exec", "z": "8c9f8f17.13eb78", "command": "gratuit | grep meme | awk '{print 100*($4+$6+$7)/$2}'","addpay":false,"append":"","useSpawn":"","timer":"","name": "Mémoire libre","x":510,"y":340,"wires":[["350be0e6.dc723"],[],[]]},{"id":"ff73e7b0.560078"," type": "change", "z": "8c9f8f17.13eb78", "name": "Heure de stockage", "rules": [{"t": "set", "p": "temp", "pt " : " flow "," to                                                                 » "to": "horodatage", "tot": "msg"}], "action": ", "property": ", " from ", " à ", " " reg " : false,"x":1170,"y":220,"wires":[[]]},{"id":ec6a82fb.238ff","type":"change","z":"8c9f8f17. 13eb78","name":"Heure de stockage","rules":[{"t":"set","p":"load","pt":"flow","to":"payload", "tot": "msg"},{"t": "set", "p": "load-timestamp", "pt": "flow", "to": "timestamp", "tot": "msg" "}],"action":"","property":"","from":"","to":"","reg":false,"x":1170,"y":280, "wires":[[]]},{"id":"bd9b96f7.e4c268","type":"change","z":"8c9f8f17.13eb78","name":"Heure de stockage","rules ":[{"t": "set", "p": "gratuit", "pt": "flow", "to": "payload", "tot": "msg"},{"t": "set", "p": "free-timestamp", "pt": "flow", "to": "timestamp", "tot": "msg"}], "action": "", "property" :"","from":"","to":"","reg":false,"x":1170,"y":340,"wires":[[]]},{"id" :"38abd283.af271e", type "function", "z": "8c9f8f17.13eb78", "name": "addTimestamp", "func": "msg.payload = msg.payload; var maintenant = new Date(); var Hours=maintenant.getHours(); var Minutes=maintenant.getMinutes(); var Secondes=maintenant.getSeconds(); si (secondes <10) secondes = "0" + secondes ; si (Minutes<10) Minutes="0"+Minutes ; si (Heures<10) Heures="0"+Heures ; msg.timestamp=Heures+":"+Minutes+":"+Secondes ; return msg;","outputs":1,"noerr":0,"x":960,"y":220,"wires":[["ff73e7b0.560078"]]},{"id": 9a625c6e.b43da","type":"function","z":"8c9f8f17.13eb78","name":"addTimestamp","func":"msg.payload = msg.payload; var maintenant = new Date(); var Hours=maintenant.getHours(); var Minutes=maintenant.getMinutes(); var Secondes=maintenant.getSeconds(); si (secondes <10) secondes = "0" + secondes ; si (Minutes<10) Minutes="0"+Minutes ; si (Heures<10) Heures="0"+Heures ; msg.timestamp=Heures+":"+Minutes+":"+Secondes ; return msg;","outputs":1,"noerr":0,"x":960,"y":280,"wires":[["ec6a82fb.238ff"]]},{"id": a85eaa63.cad4a8","type":"function","z":"8c9f8f17.13eb78","name":"addTimestamp","func":"msg.payload = msg.payload; var maintenant = new Date(); var Hours=maintenant.getHours(); var Minutes=maintenant.getMinutes(); var Secondes=maintenant.getSeconds(); si (secondes <10) secondes = "0" + secondes ; si (Minutes<10) Minutes="0"+Minutes ; si (Heures<10) Heures="0"+Heures ; msg.timestamp=Heures+":"+Minutes+":"+Secondes ; return msg;","outputs":1,"noerr":0,"x":960,"y":340,"wires":[["bd9b96f7.e4c268"]]},{"id": 350be0e6.dc723","type":"function","z":"8c9f8f17.13eb78","name":"deleteWhitespace","func":"str = msg.payload msg.payload = str.trim() ; return msg;","outputs":1,"noerr":0,"x":730,"y":340,"wires":[["a85eaa63.cad4a8"]]},{"id": 966babc4.47d538","type":"function","z":"8c9f8f17.13eb78","name":"deleteWhitespace","func":"str = msg.payload msg.payload = str.trim() ; return msg;","outputs":1,"noerr":0,"x":730,"y":280,"wires":[["9a625c6e.b43da"]]}]

Vous verrez maintenant l’adresse (mais faites attention si vous devez la préfixer avec « https:// » ou « http:// ».

https://IP_EURER_NODE_RED_INSTALLATION:1880/daten.json

un JSON avec les données que vous avez saisies s'affiche. Cela peut maintenant à son tour être affiché dessus par un plugin MagicMirror.

---

Installation du module

Afin que vous puissiez afficher les données qui vous sont fournies par NodeRed au format JSON sur le MagicMirror, vous devez alors installer le module « MMM-JsonTable ». Vous pouvez le trouver sous https://github.com/timdows/MMM-JsonTable.

Installez-le sur votre RaspberryPi. L'installation de vos modules est décrite dans l'article suivant :
MagicMirror - Installer des modules tiers

---

Paramétrage du module

La configuration du module reste simple, puisque la structure des données affichées est spécifiée par le JSON.

sudo nano ~/MagicMirror/config/config.js

{ module : 'MMM-JsonTable', position : 'top_right', header : 'Raspi-Status', config : { url : 'https://IP_EURER_NODE_RED_INSTALLATION:1880/daten.json', // Requis arrayName : 'Data' , // tryFormatDate facultatif : faux } }

---

Modification du module pour les certificats SSL auto-signés

Malheureusement, il y a un problème avec le plugin MagicMirror (actuel : novembre 2018). Cela n'autorise pas les connexions HTTPS si le certificat SSL en question est auto-signé.
Autrement dit, si vous mettez à jour votre installation NodeRed comme dans le post NodeRed – Crypter la connexion sécurisé avec un certificat SSL auto-signé, le plugin MagicMirror ne pourra pas charger ou afficher les données du JSON.

Pour résoudre ce problème, il existe une petite solution de contournement qui désactive cette fonctionnalité de sécurité. Cela signifie que le plug-in MagicMirror peut également accepter les certificats SSL auto-signés et afficher les données de votre JSON.

Pour ce faire, basculez vers le dossier module du module MagicMirror que vous venez d'installer.

cd MagicMirror/modules/MMM-JsonTable/

Là, vous ouvrez le fichier « node_helper.js » avec la commande suivante :

sudo nano node_helper.js

Dans le fichier ouvert, vous devez trouver la ligne avec le contenu suivant :

request({ url: url, method: 'GET'}, function (error, response, body) {

Dans cette ligne, vous devez maintenant insérer la commande « rejectUnauthorized : false » après le « … méthode : 'GET' ».
La ligne devrait donc ressembler à ceci :

 request({ url: url, method: 'GET', rejetUnauthorized: false}, function (error, response, body){

Enfin, vous devez redémarrer votre installation MagicMirror en saisissant la commande suivante :

pm2 redémarrage mm

Après avoir redémarré et rechargé la vue MagicMirror, les données du JSON seront affichées. 🙂

---

Plus d'informations

https://github.com/MichMich/MagicMirror
https://github.com/timdows/MMM-JsonTable

---

Amusez-vous avec le projet

J'espère que tout a fonctionné comme décrit. Si ce n'est pas le cas ou si vous avez des questions ou des suggestions, faites-le moi savoir dans les commentaires. Je les ajouterai à l'article si nécessaire.
Les idées de nouveaux projets sont toujours les bienvenues. 🙂

PS Beaucoup de ces projets - en particulier les projets matériels - coûtent beaucoup de temps et d'argent. Bien sûr, je le fais parce que j'aime ça, mais si vous pensez que c'est cool que je partage l'information avec vous, je serais heureux d'un petit don au fonds du café. 🙂