HowTo: NodeRed/MagicMirror – Daten von NodeRed 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/


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.

Ansicht des Loginbildschirms. Hier müsst Ihr die Logindaten eingeben die Ihr während der Konfiguration des Logins angegeben habt. Infos dazu findet Ihr im Artikel NodeRed - Benutzerlogin einrichten.

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":"{ \n    \"Daten\": [\n        {\n        \"name\": \"RPi Temp\",\n        \"value\": \"{{temp}}°C\",\n        \"lastUpdate\": \"{{temp-timestamp}}\"\n        },\n        {\n        \"name\": \"CPU Load\",\n        \"value\": \"{{load}}%\",\n        \"lastUpdate\": \"{{load-timestamp}}\"\n        },\n        {\n        \"name\": \"Free Memory\",\n        \"value\": \"{{free}}MB\",\n        \"lastUpdate\": \"{{free-timestamp}}\"\n        }\n    ]\n}","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\nmsg.payload = str.substring(5,9);\nreturn 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;\nvar now = new Date();\n\nvar Hours=now.getHours();\nvar Minutes=now.getMinutes();\nvar Seconds=now.getSeconds();\n\n if (Seconds<10)\n Seconds=\"0\"+Seconds;\n \n if (Minutes<10)\n Minutes=\"0\"+Minutes;\n \n if (Hours<10)\n Hours=\"0\"+Hours;\n \nmsg.timestamp=Hours+\":\"+Minutes+\":\"+Seconds;\nreturn 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;\nvar now = new Date();\n\nvar Hours=now.getHours();\nvar Minutes=now.getMinutes();\nvar Seconds=now.getSeconds();\n\n if (Seconds<10)\n Seconds=\"0\"+Seconds;\n \n if (Minutes<10)\n Minutes=\"0\"+Minutes;\n \n if (Hours<10)\n Hours=\"0\"+Hours;\n \nmsg.timestamp=Hours+\":\"+Minutes+\":\"+Seconds;\nreturn 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;\nvar now = new Date();\n\nvar Hours=now.getHours();\nvar Minutes=now.getMinutes();\nvar Seconds=now.getSeconds();\n\n if (Seconds<10)\n Seconds=\"0\"+Seconds;\n \n if (Minutes<10)\n Minutes=\"0\"+Minutes;\n \n if (Hours<10)\n Hours=\"0\"+Hours;\n \nmsg.timestamp=Hours+\":\"+Minutes+\":\"+Seconds;\nreturn 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\nmsg.payload = str.trim();\nreturn 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\nmsg.payload = str.trim();\nreturn 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.

JSON-Daten wie sie Euch im Firefox-Browser angezeigt werden. Dieser eignet sich gut zum debuggen, weil er auch Fehler in der JSON-Struktur anzeigt.

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
Öffnet also die Konfigurations-Datei Eures MagicMirrors und fügt die Modulkonfiguration ein.
{
   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
   }
}
Dabei ersetzt Ihr natürlich vorher "IP_EURER_NODE_RED_INSTALLATION" durch die IP-Adresse des RaspberryPi#s auf dem Euer MagicMirror läuft.

Ä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 der noch unkorrigierten Datei müsst Ihr die Zeile mit "request({ url: url, method: 'GET'}, function (error, response, body) {" finden.

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){
Die korrigierte Zeile sieht dann also so aus.
Danach speichert Ihr die Datei wieder ab indem Ihr "STRG+X" drückt, dann mit "J" bestätigt...
...und mit "Enter" die Datei verlasst.

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


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. 🙂

Fab

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. 🙂

Buy Me a Coffee at ko-fi.com

7 Kommentare

  1. Hi, tolle Seite! Ich fange gerade erst an mit RedNote und bin zufällig auf deine Seite gestoßen. Top!
    Magicmirror betreibe ich schon etwas länger und meine Frage ist, kann ich auch andere JSon Daten anzeigen lassen ?

    Gruß Stefan

    1. Hi Stefan, danke freut mich. 🙂
      Klar die Daten die angezeigt werden kannst du natürlich auch ändern. Im Prinzip musst du nur die Daten ändern die an die „cutString oder „deleteWhitespace“ nodes weitergeleitet werden ändern.
      Beste Grüße
      Fabian

      1. Hi, sorry ich meinte dein openweathermap.org… 😉
        Ich bekomme es irgendwie nicht unter einander und auch nicht alles angezeigt.
        Aber das wird schon, muss mich da ein bisschen reinfuchsen.

        Hast du hier eigentlich ein Forum oder so, wo man sich austauschen kann ?

        1. Hey,
          kein Problem. 🙂 Was bekommst du denn nicht untereinander? Die Ansicht im Dashboard?
          Ja, ich habe mal ein Forum eingerichtet. Muss das aber noch etwas ausbauen. Werde ich mir morgen drum kümmern. 🙂
          Beste Grüße
          Fab

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.