HowTo: Node Red / Magic Mirror – Toon gegevens van Node Red op de spiegel

Lange tijd was ik op zoek naar een manier om de gegevens die ik uit mijn SmartHome verzamel met NodeRed handig weer te geven op de MagicMirror.
Dankzij de vele plugins voor MagicMirror en NodeRed werd dit sneller geïmplementeerd dan verwacht. Hoe het werkt, wordt beschreven in het volgende artikel.


Veiligheidsinstructies

Ik weet dat de volgende opmerkingen altijd een beetje vervelend zijn en onnodig lijken. Helaas hebben veel mensen die "beter" wisten door onvoorzichtigheid ogen, vingers of andere dingen verloren of zichzelf verwond. Gegevensverlies is in vergelijking bijna te verwaarlozen, maar zelfs dit kan erg vervelend zijn. Neem daarom vijf minuten de tijd om de veiligheidsinstructies te lezen. Omdat zelfs het coolste project geen blessure of andere problemen waard is.
https://www.nerdiy.de/sicherheitshinweise/

Affiliate links / reclame links

De hier vermelde links naar online winkels zijn zogenaamde affiliate-links. Als u op zo'n affiliate-link klikt en via deze link een aankoop doet, ontvangt Nerdiy.de een commissie van de betreffende onlineshop of aanbieder. De prijs verandert voor jou niet. Als u via deze links uw aankopen doet, steunt u Nerdiy.de om in de toekomst andere nuttige projecten aan te kunnen bieden. 🙂 


Eisen

Handige artikelen:
Voordat je begint met de installatie, moet je de RaspberryPi hebben voorbereid zodat hij toegankelijk is via het netwerk en bestuurbaar is via SSH.

In de volgende drie artikelen wordt beschreven wat er moet gebeuren om de RaspberryPi voor te bereiden:
RaspberryPi – setup voor nerds!
RaspberryPi – De eerste configuratie!
RaspberryPi – Bedien de RaspberryPi via SSH

MagicMirror - De benodigde software installeren
MagicMirror - Modules van derden installeren

Benodigd materiaal:

In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.


Log in op de configuratie-interface van NodeRed

Voordat u uw NodeRed-configuratie kunt bewerken, moet u - indien geactiveerd - eerst inloggen op de NodeRed-configuratie-interface.

Weergave van het aanmeldingsvenster. Hier moet u de inloggegevens invoeren die u tijdens de configuratie van de login hebt opgegeven. Informatie hierover vind je in het artikel NodeRed - gebruikersaanmelding instellen.

Maak de gegevensbron in NodeRed aan als JSON

In dit voorbeeld worden gegevens van de RaspberryPI waarop NodeRed draait weergegeven op de MagicMirror.
NodeRed levert deze gegevens als JSON, die de MagicMirror met regelmatige tussenpozen verzamelt en op het display weergeeft. U hoeft geen nieuwe knooppunten te installeren, omdat de gegevensbron is samengesteld uit de standaardknooppunten.

Om dit te doen, moet je de volgende stroom bouwen.

Het is eenvoudiger om de volgende knooppuntcode in te voegen:

[{"id 'cc7a1b10.a7c038', type 'http in', z '8c9f8f17.13eb78', 'name', 'url', '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,"draden": []},{"id 'ced95c01.75153', type 'change', z '8c9f8f17.13eb78', 'name 'Kopteksten instellen', 'regels':[{"t vacatures: "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,"draden":[["89f4552e.8cc4f8"]]}, {"id 'a5b108a6.e68c88', type 'template', z '8c9f8f17.13eb78', 'name' pagina, 'field', payload, 'fieldType', msg "format" stuur "syntax" snor "template": { "Gegevens": [ { "naam": "RPi Temp", "waarde": "{{temp}} °C", "lastUpdate": "{{temp-timestamp}}" }, { "name": "CPU-belasting", "value": "{{load}}%", "lastUpdate": "{{load -timestamp}}" }, { "name": "Vrij geheugen", "value": "{{free}}MB", "lastUpdate": "{{free-timestamp}}" } ] }","output trays":[["ced95c01.75153"]]},{"id":c088c2a8.b53bc","type"commentaar ","z":8c9f8f17.13eb78", "name":Json-feed voor het voeden van de MagicMirror", "info":, "x":240,"y":80,"draden":[] },{"id '61e489ce.08eb68', type 'wijzigen', z '8c9f8f17.13eb78', 'name 'Kopieertijd', 'regels':[{"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": laden", "pt":msg", "to": laden", "tot": flow"},{"t: set", "p: tijdstempel laden", "pt: msg "to"load-timestamp","tot"flow"},{"t"set"p"free"pt"msg""to": "gratis", "tot":flow"},{"t":set", "p": gratis tijdstempel", "tot":flow"}],"action":"property":560, "y":460,"draden":[["a5b108a6.e68c88"]]},{"id":b64f17d1.b71778", "type"commentaar", "z":8c9f8f17.13eb78", "name":Inkomende gegevens worden hier tijdelijk opgeslagen om ze later te kunnen verzenden", "info":"x":480,"y":140,"wires":[]},{"id":9eede084 .b713a", "type":comment","z":8c9f8f17.13eb78", "name": Hier worden de opgeslagen gegevens geleverd als Json ", info":, "x":410, "y":420,"wires":[]},{"id":877b026b.7bbd9", "type"exec", "z":8c9f8f17.13eb78", "command":vcgencmd meet_temp ","addpay":false,"append":","useSpawn"","timer":",name"RPi-temperatuur", "x":510,"y":220 ,"draden":[["c71030c9.e8723"],[],[]]},{"id":e2c23c0f.e6896", type": injecteren", "z":8c9f8f17.13eb78" ,"name" "topic" ", "payload" ", "payloadType ", datum ", repeat "10", crontab ", "once":false ,"onceDelay":","x":310,"y":220,"draden":[["877b026b.7bbd9","bd2a3aa8.b05be8","f6021bf6.b47108"]]},{"id 'c71030c9.e8723', type 'function', z '8c9f8f17.13eb78', name 'cutString', 'func' str = msg.payload msg.payload = str. subtekenreeks(5,9); return msg;","outputs":1,"noerr":0,"x":700,"y":220,"wires":[["38abd283.af271e"]]},{"iddice: 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 Belasting","x":510,"y":280,"draden":[["966babc4.47d538"],[],[]]},{"id":f6021bf6.b47108", "type" :"exec", "z":8c9f8f17.13eb78", "command": gratis | grep-meme | awk '{print 100*($4+$6+$7)/$2}'","addpay":false,"append" "useSpawn" "timer": "name": "Vrij geheugen","x":510,"y":340,"wires":[["350be0e6.dc723"],[],[]]},{"id 'ff73e7b0.560078' type 'wijzigen', z '8c9f8f17.13eb78', name 'Bewaartijd', 'regels':[{"t 'instellen', 'p 'temp', 'pt static: "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": "Winkeltijd", "rules":[{"t":set", "p": laden", "pt":flow", "to": payload", "tot":msg"},{"t":set", "p": laadtijdstempel", "pt":flow", to: tijdstempel", tot "msg" "}],"action": "property": "from": "to": "reg":false,"x":1170,"y":280, "wires":[[]]},{"id 'bd9b96f7.e4c268', type 'change', z ' z ' 8c9f8f17.13eb78 ',name 'Winkeltijd', 'regels ":[{"t "set", p "free", pt "flow", to "payload", tot "msg"},{"t": "set", "p": gratis tijdstempel "pt "flow", "to" tijdstempel ", tot "msg"}]," action ", "property" :"","from":", "to":", reg":false,"x":1170,"y":340,"wires":[[]]},{"id" :"38abd283.af271e","type"function",z"8c9f8f17.13eb78",name"tijdstempel toevoegen",func":msg.payload = msg.payload; var nu = nieuwe datum(); var Uren=nu.getHours(); var Minuten=nu.getMinutes(); var Seconden=nu.getSeconds(); als (Seconden<10) Seconden = "0"+Seconden; if (Minuten<10) Minuten = "0"+Minuten; if (Uren<10) Uren = "0"+Uren; msg.timestamp=Uren+:+Minuten+:+Seconden; return msg;","outputs":1,"noerr":0,"x":960,"y":220,"wires":[["ff73e7b0.560078"]]},{"iddice: 9a625c6e.b43da","type"function",z"8c9f8f17.13eb78",name"tijdstempel toevoegen",func":msg.payload = msg.payload; var nu = nieuwe datum(); var Uren=nu.getHours(); var Minuten=nu.getMinutes(); var Seconden=nu.getSeconds(); als (Seconden<10) Seconden = "0"+Seconden; if (Minuten<10) Minuten = "0"+Minuten; if (Uren<10) Uren = "0"+Uren; msg.timestamp=Uren+:+Minuten+:+Seconden; return msg;","outputs":1,"noerr":0,"x":960,"y":280,"wires":[["ec6a82fb.238ff"]]},{"iddice: a85eaa63.cad4a8", type "function", z "8c9f8f17.13eb78", naam "addTimestamp", "func":msg.payload = msg.payload; var nu = nieuwe datum(); var Uren=nu.getHours(); var Minuten=nu.getMinutes(); var Seconden=nu.getSeconds(); als (Seconden<10) Seconden = "0"+Seconden; if (Minuten<10) Minuten = "0"+Minuten; if (Uren<10) Uren="0"+Uren; msg.timestamp=Uren+:+Minuten+:+Seconden; return msg;","outputs":1,"noerr":0,"x":960,"y":340,"wires":[["bd9b96f7.e4c268"]]},{"iddice: 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"]]},{"iddice: 966babc4.47d538 "type" function "z" 8c9f8f17.13eb78 "naam" deleteWhitespace "" func "str = msg.payload msg.payload = str.trim() ; return msg;","uitgangen":1,"noerr":0,"x":730,"y":280,"draden":[["9a625c6e.b43da"]]}]

Nu zie je het adres (let er wel op of je het moet laten voorafgaan door “https://” of “http://”.

https://IP_EURER_NODE_RED_INSTALLATION:1880/daten.json

er wordt een JSON weergegeven met de gegevens die u hebt ingevoerd. Deze kan nu op zijn beurt hierop worden weergegeven door een MagicMirror-plug-in.

JSON-gegevens zoals weergegeven in de Firefox-browser. Dit is goed voor foutopsporing omdat het ook fouten in de JSON-structuur laat zien.

Het installeren van de module

Om de door NodeRed aan u verstrekte gegevens als JSON op de MagicMirror te kunnen weergeven, moet u vervolgens de module “MMM-JsonTable” installeren. Je kunt het vinden onder https://github.com/timdows/MMM-JsonTable.

Installeer dit op je RaspberryPi. Hoe u uw modules installeert, wordt beschreven in het volgende artikel:
MagicMirror - Modules van derden installeren


Configuratie van de module

De configuratie van de module is eenvoudig gehouden, aangezien de structuur van de weergegeven data wordt bepaald door de JSON.

sudo nano ~/MagicMirror/config/config.js
Open dus het configuratiebestand van uw MagicMirror en voer de moduleconfiguratie in.
{ module: 'MMM-JsonTable', position: 'top_right', header: 'Raspi-Status', config: { url: 'https://IP_EURER_NODE_RED_INSTALLATION:1880/daten.json', // Vereiste arrayName: 'Data' , // optioneel tryFormatDate: false } }
Vervang uiteraard eerst “IP_EURER_NODE_RED_INSTALLATION” door het IP-adres van de RaspberryPi# waarop uw MagicMirror draait.

Ga naar de module voor zelfondertekende SSL-certificaten

Helaas is er een probleem met de MagicMirror plugin (huidig: november 2018). Dit staat geen HTTPS-verbindingen toe als het betreffende SSL-certificaat zelfondertekend is.
Dat wil zeggen, als u uw NodeRed-installatie hebt zoals beschreven in het bericht NodeRed - Verbinding versleutelen Als je het hebt beveiligd met een zelfondertekend SSL-certificaat, kan de MagicMirror-plug-in de gegevens uit de JSON niet laden of weergeven.

Om dit probleem op te lossen is er een kleine oplossing die deze beveiligingsfunctie uitschakelt. Dit betekent dat de MagicMirror-plug-in ook zelfondertekende SSL-certificaten kan accepteren en de gegevens van uw JSON kan weergeven.

Schakel hiervoor naar de modulemap van de MagicMirror-module die u zojuist hebt geïnstalleerd.

cd MagicMirror/modules/MMM-JsonTable/

Daar open je het bestand “node_helper.js” met het volgende commando:

sudo nano node_helper.js

In het geopende bestand moet je nu de regel vinden met de volgende inhoud:

request({ url: url, methode: 'GET'}, function (error, response, body) {
In het nog ongecorrigeerde bestand moet je de regel vinden met “request({ url: url, method: 'GET'}, function (error, response, body) {”.

In deze regel moet je nu het commando “rejectUnauthorized: false” invoegen na de “…method: 'GET'”.
De regel zou er dus zo uit moeten zien:

 request({ url: url, methode: 'GET', rejectUnauthorized: false}, function (error, response, body){
Dus de gecorrigeerde regel ziet er zo uit.
Sla het bestand vervolgens opnieuw op door op “CTRL+X” te drukken en vervolgens te bevestigen met “Y”…
...en verlaat het bestand met “Enter”.

Last but not least moet u uw MagicMirror-installatie opnieuw starten door de volgende opdracht in te voeren:

pm2 herstart mm

Na het opnieuw opstarten en opnieuw laden van de MagicMirror-weergave worden de gegevens uit de JSON weergegeven. 🙂


Verdere informatie

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


Veel plezier met het project

Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen.
Ideeën voor nieuwe projecten zijn altijd welkom. 🙂

PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂

Koop Me a Coffee op ko-fi.com       

9 comments

  1. Hallo, geweldige site! Ik ben net begonnen met RedNote en kwam je site tegen. Bovenkant!
    Ik gebruik Magicmirror al een tijdje en mijn vraag is, kan ik ook andere JSON data weergeven?

    Groetjes Stefan

    1. Hallo Stefan, bedankt, ik ben blij. 🙂
      Uiteraard kunt u ook de weergegeven gegevens wijzigen. In principe hoeft u alleen maar de gegevens te wijzigen die worden doorgegeven aan de knooppunten "cutString" of "deleteWhitespace".
      Hartelijke groeten
      Fabian

  2. Super bedankt. Dat ga ik dan proberen...
    Maar ik worstel nog steeds met de Weatherground. Krijg dat niet goed weergegeven.

    Groetjes Stefan

      1. Hallo, sorry, ik bedoelde je openweathermap.org... 😉
        Ik krijg het op de een of andere manier niet onder elkaar en niet alles wordt weergegeven.
        Maar dat komt goed, ik zal er nog even mee moeten stoeien.

        Heb je hier eigenlijk een forum of zo waar we ideeën kunnen uitwisselen?

        1. Hoi,
          Geen probleem. 🙂 Wat krijg je niet onder elkaar? De dashboardweergave?
          Ja, ik heb een forum opgezet. Maar dat moet nog wat uitgebreid worden. Ik zal er morgen voor zorgen. 🙂
          Hartelijke groeten
          Fab

  3. Bedankt voor de tutorial!
    Ik had de bug dat de module in het begin alleen 'In afwachting van json-gegevens...' weergaf.
    Een herstart loste dat op.

Kommentar hinterlassen

Het e-mailadres wordt niet gepubliceerd. Erforderliche Felder sind mit * markiert

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.