Autor Thema: Node-Red als Frontend  (Gelesen 19458 mal)

Offline Master_Nick

  • Sr. Member
  • ****
  • Beiträge: 667
Antw:Node-Red als Frontend
« Antwort #90 am: 28 Dezember 2018, 13:56:58 »
 ;) 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? :-)
« Letzte Änderung: 28 Dezember 2018, 14:00:30 von Master_Nick »
RasPi 3 mit nanoCUL (a-culfw) | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem 0.3.0 | WOL | NFC | Harmony UltimateHub | Homestate | Roomba | 10" Touch mit Node-Red | SonOff S20 | Und ganz viel anderes tolles Gerödel.... ;-)

Offline stefanm

  • Jr. Member
  • **
  • Beiträge: 60
Antw:Node-Red als Frontend
« Antwort #91 am: 30 Dezember 2018, 12:36:21 »
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

Offline atmelfreak

  • New Member
  • *
  • Beiträge: 25
Antw:Node-Red als Frontend
« Antwort #92 am: 31 Dezember 2018, 17:20:26 »
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}]
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline atmelfreak

  • New Member
  • *
  • Beiträge: 25
Antw:Node-Red als Frontend
« Antwort #93 am: 31 Dezember 2018, 17:25:47 »
Und hier mein Energieverbrauch und Gasverbrauch.

Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline stefanm

  • Jr. Member
  • **
  • Beiträge: 60
Antw:Node-Red als Frontend
« Antwort #94 am: 18 Januar 2019, 14:02:39 »
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




« Letzte Änderung: 19 Januar 2019, 09:18:39 von stefanm »
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

Offline Master_Nick

  • Sr. Member
  • ****
  • Beiträge: 667
Antw:Node-Red als Frontend
« Antwort #95 am: 18 Januar 2019, 15:21:22 »
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.  :)
« Letzte Änderung: 18 Januar 2019, 17:30:28 von Master_Nick »
RasPi 3 mit nanoCUL (a-culfw) | IT(V1&V3), IT-PIR, THGR122NX |Co² | alexa-fhem 0.3.0 | WOL | NFC | Harmony UltimateHub | Homestate | Roomba | 10" Touch mit Node-Red | SonOff S20 | Und ganz viel anderes tolles Gerödel.... ;-)

Offline stefanm

  • Jr. Member
  • **
  • Beiträge: 60
Antw:Node-Red als Frontend
« Antwort #96 am: 19 Januar 2019, 09:08:48 »
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

Offline SamNitro

  • Sr. Member
  • ****
  • Beiträge: 612
  • Kölner Wimpelbeauftragter
Antw:Node-Red als Frontend
« Antwort #97 am: 19 Januar 2019, 15:23:13 »
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.
(Rpi 3, Stretch) (HM-LGW) (EnOcean) (MAX!) (CUL868) (CUL433) (Homematic) (FS20) (ESP8266) (Echo)

Offline stefanm

  • Jr. Member
  • **
  • Beiträge: 60
Antw:Node-Red als Frontend
« Antwort #98 am: 20 Januar 2019, 09:54:53 »
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

Offline maci

  • Full Member
  • ***
  • Beiträge: 408
  • ... und sie leben doch!
Antw:Node-Red als Frontend
« Antwort #99 am: 20 Januar 2019, 13:44:59 »
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.
Raspberry Pi3, UniPi Vers. 1.1 mit Raspberry Pi2, Netatmo Wetterstation + Regenmesser, Netatmo Thermostat, 2x ESP8266 1wire WLAN Bridge, HMLan, Homematic