Node-Red mit neuem grafischen User-Interface

Node-Red entwickelt sich gerade im Internet sehr rasant und die Entwicklungen sind beeindruckend. Die „Internet of Things“ Community ist sehr fleißig an Programmierung und der Weiterentwicklung von Node-JS.

Die Tage hatte ich ein neues Design für Node-Red und dem User-Interface gesehen. Neugierig wie ich bin, habe ich gleich einen neues Raspberry Pi Image aufgesetzt und Node-Red installiert.

Ich zeig Dir jetzt, wie Du nun an die neue Software kommst mit den neuen Interface, was sich wirklich lohnt.

sudo apt-get install npm
sudo systemctl enable nodered.service # Damit wird Node-Red nach dem einschalten automatisch gestartet
 
cd .node-red/ 
npm install node-red-dashboard

Nach der Installation ist Node-Red erreichbar über folgende Adresse:

http://<IP-Adresse>:1880
http://localhost:1880

Importiere dieses Beispiel ins Clipboard des Dashboard:

[{"id":"fb12bcdf.3a5278","type":"ui_button","z":"561e8d16.aece7c","name":"Button Test","group":"19b34ee4.e244d9","order":1,"width":"2","height":"1","label":"button","color":"","icon":"","payload":"payload","payloadType":"str","topic":"Test","x":315,"y":121,"wires":[[]]},{"id":"19b34ee4.e244d9","type":"ui_group","z":"561e8d16.aece7c","name":"Default","tab":"6f12438e.bd1d04","disp":true,"width":"6"},{"id":"6f12438e.bd1d04","type":"ui_tab","z":"561e8d16.aece7c","name":"Home","icon":"dashboard"}]

Im Anschluss kann das User-Interface (UI) wie folgt aufgerufen werden :

http://<IP-Adresse>:1880/ui
http://localhost:1880/ui

Node-Red-Ui-1
Node Red User Interface
Node-red-UI-2
Node Red Dashboard
 Es gibt einige Beispiele unter „http://flows.nodered.org/
Ganz neu hinzugekommen ist ein Template welches HTML und Angular-Material Directives zulässt und versteht. Damit können ganze dynamische Webseiten erzeugt werden wie in diesem Beispiel :
Hiermit können Logdateien des Raspberry Pi oder anderen Linux Server ausgegeben werden. Finde das ist eine wirklich schicke Sache.

3 Kommentare

  1. Hi, can you please tell me how can I make the border around each node in order to separate each elements like in your demo ? In my layouts there are no margins between the elements and everything is flat. Thank you.

  2. Hallo Joachim,

    vielen Dank für die tolle Anleitung. Ich werde in den nächsten Tagen versuchen ein Dashboard zu bauen zusammen mit einem RC522 RFID Lesegerät.

    Viele Grüße,

    Ingmar

Kommentar hinterlassen

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

*