HowTo: Node Red / Magic Mirror – Daten von Node Red auf dem Mirror anzeigen

Lange habe ich nach einer Möglichkeit gesucht wie ich die Daten die ich mit NodeRed aus meinem SmartHome sammele bequem auf dem MagicMirror anzeigen lassen kann.
Dank der vielen Plugins für den MagicMirror und NodeRed war das dann schneller umgesetzt als erwartet. Wie es funktioniert ist im folgenden Artikel beschrieben.

---

Sicherheitshinweise

Ich weiß die folgenden Hinweise sind immer irgendwie lästig und wirken unnötig. Aber leider haben schon viele Menschen die es "besser" wussten aus Leichtsinnigkeit Augen, Finger oder anderes verloren bzw. sich verletzt. Im Vergleich dazu ist ein Datenverlust fast nicht der Rede Wert, aber auch diese können echt ärgerlich sein. Deswegen nehmt Euch bitte fünf Minuten Zeit um die Sicherheitshinweise zu lesen. Denn auch das coolste Projekt ist keine Verletzung oder anderen Ärger wert.
https://www.nerdiy.de/sicherheitshinweise/

Affiliatelinks/Werbelinks

Die hier in aufgeführten Links zu Online-Shops sind sogenannte Affiliate-Links. Wenn Du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommt Nerdiy.de von dem betreffenden Online-Shop oder Anbieter eine Provision. Für Dich verändert sich der Preis nicht. Falls Du Deine Einkäufe über diese Links tätigst unterstützt Du Nerdiy.de dabei auch in Zukunft weitere nützliche Projekte anbieten zu können. 🙂 

---

Voraussetzungen

Hilfreiche Artikel:
Bevor ihr mit der Installation startet solltet ihr den RaspberryPi soweit vorbereitet haben, dass dieser über das Netzwerk erreichbar und per SSH Steuerbar ist.

Die folgenden drei Artikel beschreiben was zu tun ist um den RaspberryPi soweit vorzubereiten:
RaspberryPi – Einrichten für Nerdiys!
RaspberryPi – Die Erste Konfiguration!
RaspberryPi – Den RaspberryPi über SSH steuern
MagicMirror – Installation der benötigten Software
MagicMirror – 3rd-Party-Module installieren

Benötigtes Material:

In der folgenden Liste findet Ihr alle Teile die Ihr zur Umsetzung dieses Artikels benötigt.

---

In die NodeRed Konfigurationsoberfläche einloggen

Bevor Ihr eure NodeRed Konfiguration bearbeiten könnt müsst Ihr Euch - falls aktiviert - zunächst in die NodeRed Konfigurationsoberfläche einloggen.

---

Erstellen der Datenquelle in NodeRed als JSON

In diesem Beispiel werden auf dem MagicMirror Daten des RaspberryPI’s angezeigt auf dem NodeRed läuft.
NodeRed stellt diese Daten als JSON zur Verfügung, welche sich der MagicMirror in regelmäßigen Abständen abholt und auf seinem Display anzeigt. Ihr braucht dazu keine neuen Nodes zu installieren, da die Datenquelle aus den Standard-Nodes zusammengebaut wird.

Dazu müsst Ihr folgenden Flow aufbauen.

Einfacher ist es den folgenden Node-Code einzufügen:

[{"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":"http response","z":"8c9f8f17.13eb78","name":"","x":1040,"y":460,"wires":[]},{"id":"ced95c01.75153","type":"change","z":"8c9f8f17.13eb78","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"application/json","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":880,"y":460,"wires":[["89f4552e.8cc4f8"]]},{"id":"a5b108a6.e68c88","type":"template","z":"8c9f8f17.13eb78","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ 
    "Daten": [
        {
        "name": "RPi Temp",
        "value": "{{temp}}°C",
        "lastUpdate": "{{temp-timestamp}}"
        },
        {
        "name": "CPU Load",
        "value": "{{load}}%",
        "lastUpdate": "{{load-timestamp}}"
        },
        {
        "name": "Free Memory",
        "value": "{{free}}MB",
        "lastUpdate": "{{free-timestamp}}"
        }
    ]
}","output":"str","x":720,"y":460,"wires":[["ced95c01.75153"]]},{"id":"c088c2a8.b53bc","type":"comment","z":"8c9f8f17.13eb78","name":"Json Feed zum Füttern des MagicMirrors","info":"","x":240,"y":80,"wires":[]},{"id":"61e489ce.08eb68","type":"change","z":"8c9f8f17.13eb78","name":"Copy time","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":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":460,"wires":[["a5b108a6.e68c88"]]},{"id":"b64f17d1.b71778","type":"comment","z":"8c9f8f17.13eb78","name":"Hier werden ankommende Daten für das spätere versenden zwischngespeichert","info":"","x":480,"y":140,"wires":[]},{"id":"9eede084.b713a","type":"comment","z":"8c9f8f17.13eb78","name":"Hier werden die gespeicherten Daten als Json ausgeliefert","info":"","x":410,"y":420,"wires":[]},{"id":"877b026b.7bbd9","type":"exec","z":"8c9f8f17.13eb78","command":"vcgencmd measure_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.substring(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 Load","x":510,"y":280,"wires":[["966babc4.47d538"],[],[]]},{"id":"f6021bf6.b47108","type":"exec","z":"8c9f8f17.13eb78","command":"free | grep Mem | awk '{print 100*($4+$6+$7)/$2}'","addpay":false,"append":"","useSpawn":"","timer":"","name":"Free Memory","x":510,"y":340,"wires":[["350be0e6.dc723"],[],[]]},{"id":"ff73e7b0.560078","type":"change","z":"8c9f8f17.13eb78","name":"Store time","rules":[{"t":"set","p":"temp","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"temp-timestamp","pt":"flow","to":"timestamp","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1170,"y":220,"wires":[[]]},{"id":"ec6a82fb.238ff","type":"change","z":"8c9f8f17.13eb78","name":"Store time","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":"Store time","rules":[{"t":"set","p":"free","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 now = new Date();

var Hours=now.getHours();
var Minutes=now.getMinutes();
var Seconds=now.getSeconds();

 if (Seconds<10)
 Seconds="0"+Seconds;
 
 if (Minutes<10)
 Minutes="0"+Minutes;
 
 if (Hours<10)
 Hours="0"+Hours;
 
msg.timestamp=Hours+":"+Minutes+":"+Seconds;
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 now = new Date();

var Hours=now.getHours();
var Minutes=now.getMinutes();
var Seconds=now.getSeconds();

 if (Seconds<10)
 Seconds="0"+Seconds;
 
 if (Minutes<10)
 Minutes="0"+Minutes;
 
 if (Hours<10)
 Hours="0"+Hours;
 
msg.timestamp=Hours+":"+Minutes+":"+Seconds;
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 now = new Date();

var Hours=now.getHours();
var Minutes=now.getMinutes();
var Seconds=now.getSeconds();

 if (Seconds<10)
 Seconds="0"+Seconds;
 
 if (Minutes<10)
 Minutes="0"+Minutes;
 
 if (Hours<10)
 Hours="0"+Hours;
 
msg.timestamp=Hours+":"+Minutes+":"+Seconds;
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"]]}]

Nun wird Euch unter der Adresse (achtet aber darauf ob Ihr ein “https://” oder “http://” voranstellen müsst.

https://IP_EURER_NODE_RED_INSTALLATION:1880/daten.json

ein JSON mit den von euch eingegebenen Daten angezeigt. Dieses kann nun wiederum von einem MagicMirror-Plugin auf diesem angezeigt werden.

---

Installation des Moduls

Damit Ihr die Daten die euch von NodeRed als JSON zur Verfügung gestellt werden auf dem MagicMirror anzeigen könnt müsst Ihr dann das Modul “MMM-JsonTable” installieren. Ihr findet es unter https://github.com/timdows/MMM-JsonTable.

Installiert dies auf Eurem RaspberryPi. Wie Ihr Module installiert ist im folgendem Artikel beschrieben:
MagicMirror – 3rd-Party-Module installieren

---

Konfiguration des Moduls

Die Konfiguration des Moduls ist einfach gehalten, da die Struktur der angezeigten Daten durch das JSON vorgegeben wird.

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', // Required
      arrayName: 'Daten', // Optional
      tryFormatDate: false
   }
}

---

Änderung des Moduls bei selbst signierten SSL Zertifikaten

Leider gibt es bei dem MagicMirror-Plugin (aktuell: November 2018) ein Problem. Dieses erlaubt keine HTTPS-Verbindungen, wenn das betreffende SSL-Zertifikat selbstsigniert ist.
Das heißt, falls Ihr eure NodeRed-Installation wie in dem Beitrag NodeRed – Verbindung verschlüsseln mit einem selbst-signierten SSL-Zertifikat abgesichert habt so wird das MagicMirror-Plugin die Daten aus dem JSON nicht laden bzw. anzeigen können.

Um dieses Problem zu lösen gibt es einen kleinen Workaround der diese Sicherheitsfunktion abschaltet. Dies bedeutet das MagicMirror-Plugin kann so auch selbst-signierte SSL-Zertifikate akzeptieren und zeigt die Daten Eures JSON an.

Wechselt dazu in den Modulordner des soeben installierten MagicMirror-Moduls.

cd MagicMirror/modules/MMM-JsonTable/

Dort öffnet Ihr die Datei “node_helper.js” mit folgendem Befehl:

sudo nano node_helper.js

In der geöffneten Datei müsst Ihr nun die Zeile mit folgendem Inhalt finden:

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

In dieser Zeile müsst Ihr nun nach dem “…method: ‘GET'” den Befehl “, rejectUnauthorized: false” einfügen.
Die Zeile sollte dann also so aussehen:

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

Zu guter letzt müsst ihr Eure MagicMirror-Installation nochmal neustarten indem Ihr folgenden Befehl eingebt:

pm2 restart mm

Nach dem Neustart und dem Reload der MagicMirror-Ansicht werden euch die Daten aus dem JSON angezeigt. 🙂

---

Weitere Informationen

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

---

Viel Spaß mit dem Projekt

Ich hoffe bei euch hat alles wie beschrieben funktioniert. Falls nicht oder ihr Fragen oder Anregungen habt lasst es mich in den Kommentaren bitte wissen. Ich trage dies dann ggf. in den Artikel nach.
Auch Ideen für neue Projekte sind immer gerne willkommen. 🙂

P.S. Viele dieser Projekte - besonders die Hardwareprojekte - kosten viel Zeit und Geld. Natürlich mache ich das weil ich Spaß daran habe, aber wenn Du es cool findest, dass ich die Infos dazu mit Euch teile, würde ich mich über eine kleine Spende an die Kaffeekasse freuen. 🙂