Node-Red+Node-Red-Dashboard etc.

User stellen ihre Haussteuerung vor

Moderator: Co-Administratoren

Antworten
weltraumkuh
Beiträge: 13
Registriert: 31.12.2015, 00:00

Node-Red+Node-Red-Dashboard etc.

Beitrag von weltraumkuh » 19.02.2017, 15:20

Hallo,
Ich habe erfolgreich Node-Red+Node-Red-Dashboard+ioBroker+MQTT+Homematic Komponenten (CCU2 etc.)+ andere Steuerungen (Arduino, DMX, Kameras) im Einsatz.
Ich denke, dass diese Kombination einfach viel zu wenig in Zusammenhang genutzt wird. Dabei ist ist diese für mich die "eierlegenden Wollmilchsau" schlechthin :)
Als ich letzte Jahr in das Thema Smarthome eingestiegen bin, habe ich mich extrem schwer getan: es gibt einfach viel zu viele Softwareprojekte und gerade im Bereich Visualisierung hat mich kein einziges überzeugt: oft sah die Oberfläche "altbacken" aus, die Anpassung sehr umständig bzw. fast nicht möglich, die Daten wurden nicht in Echtzeit angezeigt oder es wurden nur einzelne Devices verwendet (z.B. nur Apps für Smartphone).
Zu der von mir eingesetzten Lösung:
- Node-Red ist eine sehr ausgereifte Lösung zur Steuerung aller Smarthome Komponenten. Diese ist nicht auf einen Hersteller beschränkt. Die Bedienung ist sehr einfach/macht Spaß und man kann komplexe Abläufe sehr elegant umsetzten. Ich bin selbst Programmierer und nutze daher solche Tools nicht gerne (programmiere also lieber direkt). Aber Node-Red ist wirklich sehr... sehr gut und ich würde mir anderen IT Bereichen ähnlich gute Tools zur Steuerung von Abläufen wünschen. Viele kennen Node-Red sicher schon hier.
- Sehr viel unbekannter scheint mir Node-Red-Dashboard (https://github.com/node-red/node-red-dashboard) zu sein. Damit kann man direkt in einem Node-Red Diagramm die Oberfläche gleich mit gestalten. Node Red Dashboard ist schnell aus dem Node-Red Verzeichnis mit einem npm Aufruf installiert und bietet folgende coole Features:
1. Direkte Integration in die Node-Red Oberfläche: also nicht mehr zwischen zwei Tools umschalten bei der Entwicklung
2. voll responsive Darstellung: Desktop-Browser, Smartphone, Tablet etc. alles automatisch
3. Echtzeitaktualisierung (durch node.js/Websockets). Wenn ich ein Schalter irgendwo drücke oder ein Wert angezeigt wird, dann sieht man das sofort und auch auf allen offenen Ansichten.
4. super easy anpassbar durch CSS und Javascript
5. kostenlos und wird gut weiter entwickelt
6. bietet die wichtigsten Komponenten an: diverse Dialoge/Schalter+ Charts etc.
7. modernes Flat-Design: einige werden das nicht mögen... mir war das sehr wichtig.

Im Detail sieht meine Smarthomesteuerung so aus:
- Homematic/ CCU2 für Heizungssteuerung, Brunnensteuerung, Licht
- Node-Red+MQTT Server auf einem Raspberry-PI
- Ansteuerung eines Arduino mit diversen Sensoren über MQTT. Mein Arduino Projekt verbessert hier über diverse Relais die vorhandene Torsteuerung: richtig Tor auf/Tor zu (und nicht Status umschalten, was genervt hatte da man aus Versehen das Tor zu gemacht hatte oder Mitten im Ablauf es gestoppt hatte), Anzeige Torstatus (auf/zu/unterwegs/Fehler - klingt einfach ist es aber nicht), Tor über Telefon-Anruf öffnen. Kleines Zusatzprojekt Status Anzeige vom Tor über NodeMCU/ESP8266 auf einem kleinem OLED Display.
- Steuerung Fassadenbeleuchtung über Artnet + Wifi DMX mit Umschalten der Farben/Farbauswahl
- Livebild diverse Kameras, Aktualisierung 1 Mal pro Sekunde
- Dazu habe ich noch einen Sensor im Briefkasten für neue eMail wenn neue Post.
Hier ein Screenshot im schmalen Browserfenster.
node-red-dashboard.png
Dashboard
Wenn ich den breiter mache, passt sich das natürlich an. Oben links gibt es auch noch ein Menü, über das man weitere Räume umschalten kann.
Ich habe die Videobilder unkenntlich gemacht dabei.

So sieht meine Steuerung in Node-Red aus:
node-red1.png
Node Red
Ich möchte dabei ein paar Beispiele zeigen:
1. Integration eines Homematic Schalters (hier Licht Arkaden):
arkaden_schalter.png
Schalter Oberfläche
arkaden_schalter.png (15.18 KiB) 12105 mal betrachtet
Sieht so aus (Kopieren und in Node-Red einfügen - geht ganz einfach):

Code: Alles auswählen

[
    {
        "id": "9ebdc084.9489c8",
        "type": "ui_switch",
        "z": "ccc246f.f333db8",
        "name": "Schalter",
        "label": "",
        "group": "95a2690b.a43fb",
        "order": 2,
        "width": "3",
        "height": "1",
        "passthru": true,
        "topic": "",
        "style": "",
        "onvalue": "true",
        "onvalueType": "str",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "str",
        "officon": "",
        "offcolor": "",
        "x": 374,
        "y": 621,
        "wires": [
            [
                "658ba4a6.9fb944"
            ]
        ]
    },
    {
        "id": "658ba4a6.9fb944",
        "type": "ioBroker out",
        "z": "ccc246f.f333db8",
        "name": "Licht Arkaden.STATE",
        "topic": "hm-rpc.0.MEQ1563355.1.STATE",
        "ack": "false",
        "autoCreate": "true",
        "x": 652.2857284545898,
        "y": 621.9999895095825,
        "wires": []
    },
    {
        "id": "c1f3b08f.83b0c8",
        "type": "ioBroker in",
        "z": "ccc246f.f333db8",
        "name": "Licht Arkaden.STATE",
        "topic": "hm-rpc.0.MEQ1563355.1.STATE",
        "payloadType": "value",
        "onlyack": true,
        "func": "all",
        "gap": "",
        "x": 160,
        "y": 618,
        "wires": [
            [
                "9ebdc084.9489c8",
                "11241716.fed7c1",
                "935afa3c.31487"
            ]
        ]
    },
    {
        "id": "f2cffb44.e0f92",
        "type": "ui_text",
        "z": "ccc246f.f333db8",
        "group": "95a2690b.a43fb",
        "order": 3,
        "width": "3",
        "height": "1",
        "name": "on/off",
        "label": "",
        "format": "<font color={{msg.payload}}><i class=\"fa fa-lightbulb-o fa-2x\"></i></font>",
        "layout": "row-center",
        "x": 618,
        "y": 690,
        "wires": []
    },
    {
        "id": "11241716.fed7c1",
        "type": "function",
        "z": "ccc246f.f333db8",
        "name": "lightbulb color",
        "func": "if (msg.payload==\"true\") msg.payload=\"gold\";\nif (msg.payload==\"false\") msg.payload=\"LightGrey\";\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 354,
        "y": 695,
        "wires": [
            [
                "f2cffb44.e0f92"
            ]
        ]
    },
    {
        "id": "ca5a5eb8.705828",
        "type": "ui_text",
        "z": "ccc246f.f333db8",
        "group": "95a2690b.a43fb",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Licht Arkaden ist",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "x": 622,
        "y": 764,
        "wires": []
    },
    {
        "id": "935afa3c.31487",
        "type": "function",
        "z": "ccc246f.f333db8",
        "name": "an/aus",
        "func": "if (msg.payload==\"true\") msg.payload=\"an\";\nif (msg.payload==\"false\") msg.payload=\"aus\";\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 338,
        "y": 756,
        "wires": [
            [
                "ca5a5eb8.705828"
            ]
        ]
    },
    {
        "id": "95a2690b.a43fb",
        "type": "ui_group",
        "z": "",
        "name": "Licht Arkaden",
        "tab": "d3591833.2ca6e8",
        "order": 2,
        "disp": false,
        "width": "6"
    },
    {
        "id": "d3591833.2ca6e8",
        "type": "ui_tab",
        "z": "ccc246f.f333db8",
        "name": "Schloss",
        "icon": "dashboard",
        "order": "1"
    }
]
Den Homematic Schalter/Status bekomme ich über ioBroker über die RPC Schnittstelle. Bei mir "Licht Arkaden.STATE". Man kann in Node-Red dann alle Homematic Geräte dann durchsuchen.
Wichtig: wenn man neue Geräte hinzufügt oder was ändert die RPC Instanz in ioBroker neu starten.
Man sieht, dass ich die Farbe vom Licht-Icon mit CSS gesetzt habe.
Hier sieht man auch wie Node-Red Dashboard aufgebaut ist. Es gibt in Node-Red einen Reiter "Dashboard":
arkaden.png
Dashboard Aufbau
* Tabs: hier schaltet man die gesamte Ansicht um. Man könnte ein Raum oder eine Etage etc. in einem Tab unterbringen. Ich habe zur Zeit nur einen Tab
* Dann gibt es Gruppen: das sind so Blöcke.., hier aufgeklappt die Gruppe "Licht Arkaden", welche neben dem Lichtschalter auch ein Kamerabild beinhaltet. Diese Gruppen werden auch bei einer responsiven Ansicht neu angeordnet.
* innerhalb einer Gruppe kann man die Reihenfolge der Controls verschieben
* Mit Themes kann man die Farben anpassen
* Site: einige allgemeine Einstellungen wie z.B. Group Padding
* Jedes Node-Red Dashboard Element/Control kann man auch nebeneinander anordnen auf einem Raster:
arkaden_switch.png
Größe eines Schalters im Raster
2. Beispiel: Kamerabild zeigen
Hier sieht man die extrem hohe Flexibilität von Node-Red. Das Kamerabild wird neben dem Videostream auch als JPG ausgegeben. Dieser natürlich über eine interne IP. Nun habe ich aber diese Oberfläche im Internet (über Passwort/Login natürlich) zugänglich. Wenn ich also darin direkt das JPG Bild anzeigen möchte, würde das nicht gehen, da es eine interne IP ist. Außerdem wäre es ggf. nicht wirklich sicher.
Ich habe daher mit Node-Red einen Proxy gebaut der das Bild für diese Oberfläche ausgibt. Und mittels Javascript habe ich das einmal pro Sekunde aktualisiert. Auch das geht ganz easy in Node-Red/Node-Red Dashboard:

Code: Alles auswählen

[
    {
        "id": "da542ae9.87945",
        "type": "ui_template",
        "z": "ccc246f.f333db8",
        "group": "95a2690b.a43fb",
        "name": "Kamera Apartment hinten",
        "order": 0,
        "width": "6",
        "height": "4",
        "format": "<script language=\"javascript\">\n<!--\n\n\nfunction update3()\n{\n    var imgObj;\n\timgObj = document.getElementById('apartment_img');\n\timgObj.src = \"/camera/apartment?\" + (new Date()).getTime();;\n}\n\n\nsetInterval(update3,500);\n\n\n//startonload();\n\n//-->\n</script>\n\n\n<img src=\"http://EXTERNE_IP_HIER:1880/camera/apartment\" id=\"apartment_img\">",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "x": 916,
        "y": 677,
        "wires": [
            []
        ]
    },
    {
        "id": "254ba7ec.6dd578",
        "type": "http in",
        "z": "ccc246f.f333db8",
        "name": "Apartment proxy",
        "url": "/camera/apartment",
        "method": "get",
        "swaggerDoc": "",
        "x": 845,
        "y": 758,
        "wires": [
            [
                "7c226d7.ae40c14"
            ]
        ]
    },
    {
        "id": "bfc9832b.12f998",
        "type": "http response",
        "z": "ccc246f.f333db8",
        "name": "cam image",
        "x": 1174,
        "y": 759,
        "wires": []
    },
    {
        "id": "7c226d7.ae40c14",
        "type": "http request",
        "z": "ccc246f.f333db8",
        "name": "from cam",
        "method": "GET",
        "ret": "bin",
        "url": "http://192.168.178.121/tmpfs/auto.jpg",
        "tls": "",
        "x": 1002,
        "y": 759,
        "wires": [
            [
                "bfc9832b.12f998"
            ]
        ]
    },
    {
        "id": "95a2690b.a43fb",
        "type": "ui_group",
        "z": "",
        "name": "Licht Arkaden",
        "tab": "d3591833.2ca6e8",
        "order": 2,
        "disp": false,
        "width": "6"
    },
    {
        "id": "d3591833.2ca6e8",
        "type": "ui_tab",
        "z": "ccc246f.f333db8",
        "name": "Schloss",
        "icon": "dashboard",
        "order": "1"
    }
]
Also bei mir gibt es das Kamerabild intern über http://192.168.178.121/tmpfs/auto.jpg
Extern hingegen läuft es auf meiner externen (ich habe eine feste IP bei mir) IP+Node-Red Port +Login/Passwort unter "/camera/apartment"
Mit Javascript aktualisiere ich das Bild in der Oberfläche. Dafür habe ich ein sogenanntes Template-Node genommen. Damit kann man beliebiges HTML/Javascript in Node-Red Dashboard einbauen.


3. Beispiel DMX Steuerung
Die Hausfassade kann ich mit zwei leistungsstarken LED Wallwashern in verschiedenen Farben anleuchten. Es handelt sich dabei um Veranstaltungstechnik mit DMX Steuerung (http://flash-butrym.pl/en_US/p/-LED-WAL ... E-IP65/136). Diese Lampen werden über einen Artnet-Controller über Wifi-DMX angesteuert. Dieses Artnet Protokoll finde ich persönlich nicht so besonders toll, da über UDP, aber auch hier war die Integration in Node-Red kinderleicht ;)
Unter https://flows.nodered.org gibt es fertige Node-Red Abläufe, wie diese oben und da kann man suchen. Artnet war auch dabei. Hier sogar sehr komfortabel über einen Subworkflow gelöst. Das Ergebnis schicke ich dann direkt über einen UDP Node an das Artnet Gerät. Dann habe ich einige Buttons für Blau/Rot/Grün/Aus eingebaut um das zu steuern. Dazu dann eine Farbauswahl. Da kann ich jede Farbe aussuchen, wenn ich z.B. die Fassade auch mal in Pink haben möchte :lol:

4. Beispiel Arduino Ansteuerung
Das Torprojekt war recht komplex, da es eine bidirektionale Steuerung ist. Aber auch hier sieht man die Vorteile einer Echtzeitoberfläche. Das Tor ist ca. 200 Meter vom Haus entfernt und zum Glück habe ich dort Internetzugang über eine eigene Richtfunkstrecke um den Arduino ins Netz zu bekommen.
Der Ablauf ist so:
1. Klick auf "Tor auf" (analog "Tor zu")
2. MQTT Message schicken: "gate/nodered/auf"
3. der Arduino hängt an den MQTT Server, reagiert darauf und schaut nach bei seinen Sensorstatus, ob das Tor zu ist und startet dann den Tor Mechanismus. Beim Öffnen werden weitere Sensoren ausgelöst und der Arduino schickt an den MQTT Server "gate/arduino/unterwegs".
4. Darauf reagiert dann Node-Red über eine MQTT Eingangsnode und zeigt den Status "unterwegs" an.
5. Wenn das Tor offen ist, wird dann genauso (Sensor->Arduino->MQTT->Node Red) dieser Status angezeigt.

Ich ergänze ggf. diesen Artikel bei Fragen noch. Habe aber insgesamt leider nicht zu viel Zeit was zu schreiben. Ein Hinweis noch: die aktuelle Version 2.3.1 vom Dashboard hat einen nervigen Bug in der Touch-Scroll Steuerung. Daran arbeiten die aber. Update: der Bug wurde inzwischen behoben. Ich habe 2.3.5 gerade installiert.

Xent
Beiträge: 13
Registriert: 25.08.2016, 20:15

Re: Node-Red+Node-Red-Dashboard etc.

Beitrag von Xent » 21.07.2017, 09:54

Hört sich sehr interessant an.
Mich würde die genaue Umsetzung von Homematic zu Node-RED interessieren.
Hast du das über ioBroker umgesetzt bzw. geht das auch mit https://github.com/hobbyquaker/hm2mqtt.js ?
Kannst du in Node-Red dann direkt die Geräte auswählen?

Mein ziel währe es, auch kompliziertere Regeln in Node-RED abzubilden.

HomeManiac
Beiträge: 72
Registriert: 24.12.2015, 13:13
Hat sich bedankt: 2 Mal

Re: Node-Red+Node-Red-Dashboard etc.

Beitrag von HomeManiac » 22.07.2017, 12:35

Hallo,
Hast du das über ioBroker umgesetzt bzw. geht das auch mit https://github.com/hobbyquaker/hm2mqtt.js ?
ich benutzte auch hm2mqtt.js. Funktioniert hervorragend. Du brauchst keinen ioBroker oder ähnliches.
Mein ziel wäre es, auch kompliziertere Regeln in Node-RED abzubilden.
Tja, Für komplizierte Dinge kann man selber Funktionen programmieren (Halt in Javascript).

Ich persönlich finde aber die Darstellung in Node-Red übersichtlicher und klarer als in der Homematic Weboberfläche. Mit den ganzen Tabellen und wenn dann sonst. Das war zu viel für mein armes Hirn :wink:

Viel Erfolg!

juergen2908
Beiträge: 74
Registriert: 10.12.2013, 16:51

Re: Node-Red+Node-Red-Dashboard etc.

Beitrag von juergen2908 » 31.07.2018, 21:18

Hallo,

ich habe mir das addon redmatic auf meinen raspberrymatic installiert.

Ich verwende seit langen iobroker.

Wollte mal was neues ausprobieren.

Mir gelingt es nicht mein unifi kamerabild einzubinden bzw. so dass es alle 1s aktuallisiert!?

Code: Alles auswählen

[{"id":"683bfeca.07e1e","type":"ui_template","z":"d9f815b5.de7248","group":"7911ca7c.8a5df4","name":"Kamera Einfahrt","order":0,"width":"6","height":"4","format":"<script language=\"javascript\">\n<!--\n\n\nfunction update3()\n{\n    var imgObj;\n\timgObj = document.getElementById('apartment_img');\n}\n\n\nsetInterval(update3,1000);\n\n\nstartonload();\n\n//-->\n</script>\n\n\n<img src=\"http://192.168.xxx.xxx:7080/api/2.0/snapshot/camera/xxxapixxxxxxxxxxxxxxxxx?force=true&apiKey=apixxxxxxxxxxxxxx\">","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":320,"y":100,"wires":[[]]},{"id":"7911ca7c.8a5df4","type":"ui_group","z":"","name":"Ueberwachung","tab":"bc94d364.f47e4","order":2,"disp":false,"width":"6","collapse":false},{"id":"bc94d364.f47e4","type":"ui_tab","z":"","name":"Ueberwachung","icon":"dashboard","order":10}]
hab den code von weltraumkuh angepasst, aber irgendwas wird nicht ganz passen.

Bitte um Hilfe!

LG

Jürgen
1x HM-WDS10-TH-O, 3x HM-Sec-RHS, 7x HM-Sec-SC-2, 4x HM-LC-Sw4-WM, 2x HM-Sen-MDIR-O-2, 10x HM-LC-Sw1-FM, 1x HM-PB-2-WM, 1x HM-PB-2-WM55, 1x HM-RC-12, 1x HM-RC-P1, 1x HM-TC-IT-WM-W-EU, 1x HM-RC-Key3-B, 1x HM-RC-Key4-2, 1x HM-OU-CFM-Pl, 1x HM-LC-Dim1L-CV, 1x HM-LC-Dim1T-FM, 1x HM-SCI-3-FM, 1x HM-PB-6-WM55, 1x HM-PBI-4-FM, 1x HM-Sec-Key-S, 1x HM-ES-PMSw1-Pl

Antworten

Zurück zu „Projektvorstellungen“