Node-Red als Frontend

Begonnen von Master_Nick, 26 Oktober 2017, 13:07:28

Vorheriges Thema - Nächstes Thema

Master_Nick

#90
 ;) Naja dann sag an woran es hapert und man kann dir helfen :-)

Pauschal sagen ist schwierig - da bleibt mir ja nichts anderes als zu sagen - seh ich anders :-D

Magst du mir mal ein Beispiel zeigen mit dem, was du mit Weathericons meinst? :-)
Rancher K8s Cluster mit nanoCUL (a-culfw) | IObroker | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem | WOL | NFC | Harmony UltimateHub | Anwesenheitserkennnung | Roomba | 10" Touch mit Node-Red | SonOff S20 | SonOff Touch | SonOff Dual | Rolladen | Und ganz viel anderes tolles Gerödel.... ;-)

stefanm

Bei den Weathericons, wurden die Icons als Webfont Importiert,
ich müsste also erstmal aus dem den Icons einen Webfont erzeugen um sie Importieren zu können.

Wie ist das denn bei fhem gelöst ? Schön währe, wenn man es auch für andere User vereinfachen könnte.

HM-Lan       HM-CC-TC Raumthermostat HM-CC-RT-DN & HM-CC-VD Heizkörperventil Dimmer HM-LC-DIM1T-FM 3 Stück
und divrse FS20 Komponenten  FHZ1000  mit div Schalter und Wandtaster  Max Heizung, Fenster Alarmanlage

atmelfreak

Hi,

ich habe mich die letzten Tage auch etwas mi Node Red beschäftigt. Zur Übung habe ich mal eine Überwachung des Raspberry Pi gebastelt. Falls Interesse besteht, hier der exportierte Flow:

[{"id":"a28b638e.db624","type":"tab","label":"RPI Monitoring","disabled":false,"info":""},{"id":"407cf732.097d18","type":"ui_gauge","z":"a28b638e.db624","name":"","group":"818f0d45.f2e81","order":1,"width":0,"height":0,"gtype":"gage","title":"CPU Temperature","label":"°C","format":"{{value}}","min":"20","max":"80","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":650,"y":40,"wires":[]},{"id":"d2699e9.1f7db6","type":"exec","z":"a28b638e.db624","command":"vcgencmd measure_temp","addpay":false,"append":"","useSpawn":"","timer":"","name":"RPi Temp.","x":290,"y":80,"wires":[["e84257f7.c0e9f8"],[],[]]},{"id":"21cdec28.7154f4","type":"inject","z":"a28b638e.db624","name":"","topic":"","payload":"","payloadType":"date","repeat":"30","crontab":"","once":false,"onceDelay":"","x":104.5,"y":88.25,"wires":[["d2699e9.1f7db6","99e03ce7.ae41f"]]},{"id":"e84257f7.c0e9f8","type":"function","z":"a28b638e.db624","name":"","func":"var result = msg.payload.match( /(\\d+[\\.]?\\d+)/ );\nmsg.payload = result[1];\nreturn msg;\n","outputs":1,"noerr":0,"x":450,"y":60,"wires":[["407cf732.097d18","ffe418a8.bce8b8"]]},{"id":"d6216760.0d0478","type":"ui_button","z":"a28b638e.db624","name":"","group":"2dff1e85.bfb782","order":2,"width":0,"height":0,"label":"Reboot","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":80,"y":440,"wires":[["e17e61e1.2998c"]]},{"id":"e17e61e1.2998c","type":"exec","z":"a28b638e.db624","command":"sudo reboot","addpay":false,"append":"","useSpawn":"","timer":"","name":"Reboot","x":298,"y":440,"wires":[[],[],[]]},{"id":"3f3ad9b4.29eab6","type":"ui_button","z":"a28b638e.db624","name":"","group":"2dff1e85.bfb782","order":3,"width":0,"height":0,"label":"Shutdown","color":"","bgcolor":"red","icon":"","payload":"","payloadType":"str","topic":"","x":80,"y":500,"wires":[["69f45d46.9f9494"]]},{"id":"69f45d46.9f9494","type":"exec","z":"a28b638e.db624","command":"sudo shutdown -h now","addpay":false,"append":"","useSpawn":"","timer":"","name":"Shutdown","x":300,"y":500,"wires":[[],[],[]]},{"id":"ffe418a8.bce8b8","type":"ui_chart","z":"a28b638e.db624","name":"CPU Temperatur Chart","group":"818f0d45.f2e81","order":2,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":true,"x":670,"y":80,"wires":[[],[]]},{"id":"22efa698.36131a","type":"ui_gauge","z":"a28b638e.db624","name":"CPU Idle","group":"e2100723.afe1a8","order":1,"width":0,"height":0,"gtype":"gage","title":"CPU Idle","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#c70000","#e6e600","#00bd26"],"seg1":"","seg2":"","x":620,"y":220,"wires":[]},{"id":"7b7d126b.397c4c","type":"ui_gauge","z":"a28b638e.db624","name":"","group":"1af884fa.4a3a8b","order":1,"width":0,"height":0,"gtype":"gage","title":"Memory Usage","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":640,"y":300,"wires":[]},{"id":"b1706aa.8d81098","type":"exec","z":"a28b638e.db624","command":"df -h | grep root","addpay":false,"append":"","useSpawn":"","timer":"","oldrc":false,"name":"Disk Usage","x":290,"y":380,"wires":[["1310c126.2c7adf"],[],[]]},{"id":"c78bd1ed.91359","type":"ui_gauge","z":"a28b638e.db624","name":"","group":"acbc6696.90d688","order":1,"width":0,"height":0,"gtype":"gage","title":"Disk","label":"Usage","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"x":610,"y":380,"wires":[]},{"id":"1310c126.2c7adf","type":"function","z":"a28b638e.db624","name":"","func":"var result = msg.payload.match( /(\\d+)%/ );\nmsg.payload = result[1];\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":380,"wires":[["c78bd1ed.91359"]]},{"id":"419d4b23.127794","type":"inject","z":"a28b638e.db624","name":"","topic":"","payload":"","payloadType":"date","repeat":"300","crontab":"","once":false,"onceDelay":"","x":90,"y":380,"wires":[["b1706aa.8d81098"]]},{"id":"854b4d00.01775","type":"ui_chart","z":"a28b638e.db624","name":"CPU Usage Chart","group":"e2100723.afe1a8","order":2,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":true,"x":650,"y":260,"wires":[[],[]]},{"id":"29c75f42.b7a14","type":"ui_chart","z":"a28b638e.db624","name":"Memory Usage Chart","group":"1af884fa.4a3a8b","order":2,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":true,"x":660,"y":340,"wires":[[],[]]},{"id":"b8f4396c.80d088","type":"ui_gauge","z":"a28b638e.db624","name":"","group":"1a84a357.f6b1fd","order":1,"width":0,"height":0,"gtype":"gage","title":"CPU Load","label":"","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":630,"y":140,"wires":[]},{"id":"a734871f.bfbcc8","type":"ui_chart","z":"a28b638e.db624","name":"CPU Load Chart","group":"1a84a357.f6b1fd","order":2,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":true,"x":640,"y":180,"wires":[[],[]]},{"id":"99e03ce7.ae41f","type":"exec","z":"a28b638e.db624","command":"top -d 1 -b -n2 | grep \"load average\\|Cpu(s)\\|KiB Mem\" | tail -3","addpay":false,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"CPU top","x":280,"y":160,"wires":[["a484a63.4bfac58"],[],[]]},{"id":"a484a63.4bfac58","type":"function","z":"a28b638e.db624","name":"Parse CPU top cmd","func":"var line = msg.payload.split(\"\\n\")[0];\nvar result = line.match( /load\\saverage:\\s(\\d+[.,]\\d+)/i );\nvar cpu_load1 = result[1].replace(\",\", \".\");\nvar msg1 = { payload: cpu_load1};\n\nvar line = msg.payload.split(\"\\n\")[1];\nresult = line.match( /(\\d+[.,]\\d+)\\sid,/i );\nvar cpu_idle = result[1].replace(\",\", \".\");\nvar msg2 = { payload: cpu_idle};\n\nvar line = msg.payload.split(\"\\n\")[2];\nresult = line.match( /\\s+(\\d+)\\s+total,\\s+(\\d+)\\s+free,\\s+(\\d+)\\s+used,/i );\nvar mem_total = result[1].replace(\",\", \".\");\nvar mem_used = result[3].replace(\",\", \".\");\nvar mem_used = parseFloat(mem_used) / parseFloat(mem_total) * 100;\nvar msg3 = { payload: mem_used.toFixed(2)};\n\nreturn [msg1, msg2, msg3];","outputs":3,"noerr":0,"x":320,"y":240,"wires":[["b8f4396c.80d088","a734871f.bfbcc8"],["22efa698.36131a","854b4d00.01775"],["7b7d126b.397c4c","29c75f42.b7a14"]]},{"id":"818f0d45.f2e81","type":"ui_group","z":"","name":"CPU Temperatur","tab":"e49b76a0.b0c5e8","order":4,"disp":false,"width":"6","collapse":false},{"id":"2dff1e85.bfb782","type":"ui_group","z":"","name":"Actions","tab":"e49b76a0.b0c5e8","order":6,"disp":true,"width":"6","collapse":false},{"id":"e2100723.afe1a8","type":"ui_group","z":"","name":"CPU Usage","tab":"e49b76a0.b0c5e8","order":1,"disp":false,"width":"6","collapse":false},{"id":"1af884fa.4a3a8b","type":"ui_group","z":"","name":"Memory Usage","tab":"e49b76a0.b0c5e8","order":3,"disp":false,"width":"6","collapse":false},{"id":"acbc6696.90d688","type":"ui_group","z":"","name":"Disk Usage","tab":"e49b76a0.b0c5e8","order":5,"disp":false,"width":"6","collapse":false},{"id":"1a84a357.f6b1fd","type":"ui_group","z":"","name":"CPU Load","tab":"e49b76a0.b0c5e8","order":2,"disp":false,"width":"6","collapse":false},{"id":"e49b76a0.b0c5e8","type":"ui_tab","z":"","name":"RPi Control","icon":"dashboard","order":4}]


atmelfreak

Und hier mein Energieverbrauch und Gasverbrauch.


stefanm

#94
So ich hab die openautomation Icons hinbekommen.

Für alle die Sie auch einbinden wollen und sich so blöd anstellen wie ich  ;)

Im TabletUI https://github.com/knowthelist/fhem-tablet-ui sind Sie als Webfont enthalten und mit der Anleitung für das WeatherIcon https://github.com/Paul-Reed/weather-icons funktioniert es.

Zu erst die nano .node-red/settings.js einen Eintrag bearbeiten httpStatic: '/home/pi/.node-red/public',  .

Dann aus der fhem-tablet-ui die /www/tablet/lib/openautomation.css nach .node-red/public/lib kopieren.
Danach das font verzeichniss (/www/tablet/fonts/) nach /.node-red/public kopieren.

node-red neu starten.

[{"id":"2b063255.b5ac8e","type":"ui_template","z":"f1c518d5.322988","group":"bdec015f.d5307","name":"openautomation","order":6,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"/lib/openautomation.css\">\n<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x oa oa-fts_window_2w_open\"></i>\n</div> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":340,"y":240,"wires":[[]]},{"id":"b3dc503.45641b","type":"ui_template","z":"f1c518d5.322988","group":"bdec015f.d5307","name":"icon image","order":1,"width":"2","height":"2","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x oa  oa-fts_window_2w_open\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":470,"y":380,"wires":[[]]},{"id":"2fee0420.7bd89c","type":"inject","z":"f1c518d5.322988","name":"test inj","topic":"","payload":"oa-fts_window_2w_open","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":230,"y":400,"wires":[["b3dc503.45641b","f48effa0.c5cab"]]},{"id":"f48effa0.c5cab","type":"ui_text","z":"f1c518d5.322988","group":"bdec015f.d5307","order":0,"width":"4","height":"2","name":"Some text","label":"Current icon:","format":"{{msg.payload}}","layout":"row-center","x":482,"y":426,"wires":[]},{"id":"bdec015f.d5307","type":"ui_group","z":"","name":"OA","tab":"f922caf3.52add8","disp":true,"width":"6","collapse":false},{"id":"f922caf3.52add8","type":"ui_tab","z":"","name":"oa","icon":"dashboard","disabled":false,"hidden":false}]

Stefan




HM-Lan       HM-CC-TC Raumthermostat HM-CC-RT-DN & HM-CC-VD Heizkörperventil Dimmer HM-LC-DIM1T-FM 3 Stück
und divrse FS20 Komponenten  FHZ1000  mit div Schalter und Wandtaster  Max Heizung, Fenster Alarmanlage

Master_Nick

#95
Genau so mache ich es mit allen Gifs oder Icons die ich nutze. Man legt sie in das httpstatic von Nodered schaltet noch die Verwaltung von NodeRed auf /admin und dann kann man mittels HTML die Icons/Gifs/whatever nutzen.
Da es sozusagen einfach ein Opendir ist. :-)

Da hätte ich dir doch helfen können - hab aber nicht verstanden was du eben mit einbinden meintest :-D Denn so sind sie ja nun nicht eingebunden sondern einfach rein kopiert und man kann sie halt als Inhalt nutzen :-D
Eventuell war ich da zu "Wortstuzig" sorry :-D

Aber schön, dass du dein Zeil errreicht und erarbeitet hast.  :)
Rancher K8s Cluster mit nanoCUL (a-culfw) | IObroker | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem | WOL | NFC | Harmony UltimateHub | Anwesenheitserkennnung | Roomba | 10" Touch mit Node-Red | SonOff S20 | SonOff Touch | SonOff Dual | Rolladen | Und ganz viel anderes tolles Gerödel.... ;-)

stefanm

Hallo Master_Nick,
das ist nett von dir danke aber das ist ja die Herausforderung es schaffen :)

Ich hatte am Webfont gehangen und dann durch Zufall gesehen, als ich mir angesehen habe wie es WebUI gemacht wird, das es dort als Font vorliegt.

Node_Red ist echt ein mächtiges Werkzeug, das nicht nur eine Oberfläche darstellt, sondern auch ein Teil der Logik übernehmen kann.
Es Wundert mich das mit nicht mehr die Oberfläche Umsetzen, da es auch viel schneller ist .

Stefan
HM-Lan       HM-CC-TC Raumthermostat HM-CC-RT-DN & HM-CC-VD Heizkörperventil Dimmer HM-LC-DIM1T-FM 3 Stück
und divrse FS20 Komponenten  FHZ1000  mit div Schalter und Wandtaster  Max Heizung, Fenster Alarmanlage

SamNitro

Ich nutze Node-Red auch sehr gerne. Alleine für Alexa. Aber Thorsten macht es einen nicht leicht mit seinem FUIP. Das ist so leicht zu ,,programmieren" und schon richtig umfangreich.
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

stefanm

Das kannte ich noch garnicht.
Bei Fhem gibts andauernd was neues :) Man lernt immer was dazu.
HM-Lan       HM-CC-TC Raumthermostat HM-CC-RT-DN & HM-CC-VD Heizkörperventil Dimmer HM-LC-DIM1T-FM 3 Stück
und divrse FS20 Komponenten  FHZ1000  mit div Schalter und Wandtaster  Max Heizung, Fenster Alarmanlage

maci

So soll es ja auch sein.  :) :)

Ich anfangs auch skeptisch, aber inzwischen mag ich mein Fhem.
Es ist so umfangreich, dass man nie alles wissen kann.
Fhem kann mit so vielen Geräten kommunizieren, was keine andere Plattform kann.
Das ist auch der lebendigen und sehr großen Gemeinschaft geschuldet.

Mein Eindruck ist, dass andere Plattformen zwar viel Augenmerk auf die Look & Feel legen, aber auf der anderen Seite eingeschränkt ist.
Wahrscheinlich auch dadurch, weil die Entwickler das nicht wollen.

Das ist bei Fhem einfach anderes.

Ich liebe mein Fhem inzwischen.
Fhem auf Dell Thinclient, Fhem auf Raspebrry Pi4,
UniPi Vers. 1.1 mit Raspberry Pi3, 1wire USB Adapter mit OWX
Netatmo Wetterstation + Regenmesser + Netatmo Thermostat
Homematic mit HMLan

maci

Ich habe mich zwischenzeitlich etwas in Node-Red eingearbeitet.

Wenn ich aber ehrlich bin, bleibe ich bei Fhem. :)
Nur als Anzeige ist mir das zu aufwändig.
Hier nehme ich lieber die TabletUI und Grafana für die Grafiken.
Fhem auf Dell Thinclient, Fhem auf Raspebrry Pi4,
UniPi Vers. 1.1 mit Raspberry Pi3, 1wire USB Adapter mit OWX
Netatmo Wetterstation + Regenmesser + Netatmo Thermostat
Homematic mit HMLan

Master_Nick

Wieso nur als Anzeige?

Ich nutze das als UI für die aktive Steuerung.
Nur ein gaaaanz kleiner Anteilt der Elemente ist für die reine Anzeige.
Die meisten kann man tappen etwas steuern oder kommt dadurch auf eine andere/n Seite/Raum.

Also sofern man alles in MQTT hat - ist NodeRed einfach total einfach um diesen nennen wir es mal "Datenstrom" zu verwerten und mit zu nutzen.

Aber Geschmäcker sind verschieden. :-)
Rancher K8s Cluster mit nanoCUL (a-culfw) | IObroker | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem | WOL | NFC | Harmony UltimateHub | Anwesenheitserkennnung | Roomba | 10" Touch mit Node-Red | SonOff S20 | SonOff Touch | SonOff Dual | Rolladen | Und ganz viel anderes tolles Gerödel.... ;-)

SamNitro

Ich war auch total für Node-Red aber Thorsten hat bei mir alles umgeworfen mit seinem ,,FUIP"

Einfacher geht es nun wirklich nicht mehr. Wenn er jetzt noch den weekdaytimer mit drin hat habe ich alles was ich brauche. ;)


Mobil unterwegs!
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

Master_Nick

Ich müsste mir das mal ansehen - kenne es gar nicht.

Aber für MQTT ist NodeRed soweit ich das bisher sehe "Das" Ding. :-)
FUIP scheint (nach kurzem Blick) nur für FHEM zu sein - das ist sicherlich auch was geniales aber dann nochmal etwas anderes.
Rancher K8s Cluster mit nanoCUL (a-culfw) | IObroker | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem | WOL | NFC | Harmony UltimateHub | Anwesenheitserkennnung | Roomba | 10" Touch mit Node-Red | SonOff S20 | SonOff Touch | SonOff Dual | Rolladen | Und ganz viel anderes tolles Gerödel.... ;-)

maci

Zitat von: Master_Nick am 27 Februar 2019, 17:47:13
Wieso nur als Anzeige?

Ich nutze das als UI für die aktive Steuerung.
Nur ein gaaaanz kleiner Anteilt der Elemente ist für die reine Anzeige.
Die meisten kann man tappen etwas steuern oder kommt dadurch auf eine andere/n Seite/Raum.

Also sofern man alles in MQTT hat - ist NodeRed einfach total einfach um diesen nennen wir es mal "Datenstrom" zu verwerten und mit zu nutzen.

Aber Geschmäcker sind verschieden. :-)

Ich kenn mich in Fhem jetzt halbwegs aus, nun will ich nicht schon wieder etwas anderes.

Im Prinzip könnte man Fhem mit Node-Red großteils ersetzen. Doch das will ich nicht.
Ich brauche eigentlich nur ein Tool in dem ich meine Ausgaben gut gestalten kann.
Fhem auf Dell Thinclient, Fhem auf Raspebrry Pi4,
UniPi Vers. 1.1 mit Raspberry Pi3, 1wire USB Adapter mit OWX
Netatmo Wetterstation + Regenmesser + Netatmo Thermostat
Homematic mit HMLan