Node-Red als Frontend

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

Vorheriges Thema - Nächstes Thema

Master_Nick

#75
 ;D Mahlzeit, ich wollte mal wieder meine aktuellen Stand zeigen.

Ich habe mir auf jedem Tab einen globalen Bereich eingerichtet um wichtige Aktoren oder Status immer zu sehen.

Das Ganze hängt weiter im Flur mittels Touchscreen und Bewegungsmelder der im Rahmen des Screens eingelassen ist (Bilderrahmen).
Ansonsten per Handy/Tablet/PC natürlich auch erreichbar solange man im WLAN ist. Als neustes habe ich nun Waschmaschine und Trockner mit eingebunden über jeweils eine TP Link HS110 (Modul für FHEM gab es schon - merkte ich als ich fast schon am bauen war mit einem python Client  ;D ).
Die Waschmaschine und der Trockner haben im abgeschalteten Modus lediglich ein normales Bild - werden sie aktiv so zeigt Node-Red jeweils ein Gif an. Das war einfacher als das ganze selber zu animieren mittes Javascript oder ähnlichem.

Das Gif der Waschmaschine ist mal eben 10 MB :-D das wollte nicht hier im Forum laden ;-)
Das hier ist das Orignal:  https://cdn.dribbble.com/users/893939/screenshots/2223098/washing_machine2.gif (meines ist geschnitten, dass es keinen Rand hat)

Hier kann man es abgefilmt von meinem Touchpanel sehen: https://youtu.be/BkjPVJx2zeQ
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.... ;-)

Master_Nick

Wer sich nach einem Update von NodeRed oder NodeJS ärgert über die hässliche Ansicht seiner Sachen sollte folgende Option prüfen:,

https://forum.fhem.de/index.php?action=dlattach;topic=78512.0;attach=107876;image

Bei mir sahen die Nest Thermometer auf einmal grausig aus....

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.... ;-)

Biervögelhasso

Hallo,

ich habe ein kleines Problem mit Node-RED und komme an dieser Stelle nicht weiter. Ich habe mir ein kleines Dashboard gebaut und kann vom Handy darauf zugreifen. ( Node-Red läuft auf einen PI, Handy ist im WLAN verbunden) Das Problem ist nun leider das ich bei jeden neuem Aufruf meinen Login für Node-Red eingeben muß.  Ist dies bei Euch auch so? Wie habt ihr das gelöst?

Und noch eine zweite Frage. Wie habt ihr das Dashboard aufgebaut. Hab ihr zwei verschiedene eins fürs Handy und eins fürs Tablet?


Vielen Dank für Eure Hilfe.

FHEM auf Raspy3 mit Stretch, CUL, SDuino, JeeLink, SomfyHomematic, MQTT, Grafana, Node-RED

Master_Nick

#78
NodeRed ist bei richtiger Nutzung 100% responsive - soll heißen es passt sich an die Geräte auf denen es aufgerufen wird anhand der erkannten nutzbaren Bildschirmgröße an und sortiert die verschiedenen Elemente so, dass es gut passt.

Ich habe somit genau eine Instanz NodeRed zuhause laufen.

Warum genau nutzt du Zugangsdaten? Bei mir ist das WLAN über Zugangsdaten gesichert, das NodeRed selber kann man sobald man in diesem WLAN ist einfach aufrufen ohne jede Authentifizierung.
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.... ;-)

Biervögelhasso

Zitat von: Master_Nick am 05 November 2018, 15:54:52
NodeRed ist bei richtiger Nutzung 100% responsive - soll heißen es passt sich an die Geräte auf denen es aufgerufen wird anhand der erkannten nutzbaren Bildschirmgröße an und sortiert die verschiedenen Elemente so, dass es gut passt.

Ich habe somit genau eine Instanz NodeRed zuhause laufen.

Warum genau nutzt du Zugangsdaten? Bei mir ist das WLAN über Zugangsdaten gesichert, das NodeRed selber kann man sobald man in diesem WLAN ist einfach aufrufen ohne jede Authentifizierung.

Hallo Master_Nick,

vielen Dank für die Information. Ich habe das Passwort deaktiviert. Nun kann man sehr schnell auf das Dashboard zugreifen.
Ich hätte gern zwei Dashboards da ich auf dem Handy andere Informationen sehen möchte wie auf dem Tablet.  Ich werde nun aber mit dem Dashboard für das Tablet beginnen und dann weiter schauen.

Viele Grüße.
FHEM auf Raspy3 mit Stretch, CUL, SDuino, JeeLink, SomfyHomematic, MQTT, Grafana, Node-RED

Master_Nick

Dann mach dir doch mehrere Tabs?

Und rufe diesen dann jeweils mit seiner festen Adresse auf:

http://ip:1880/ui/#/0 <- wäre der erste Tab z.B für dein Handy
http://ip:1880/ui/#/1 <- wäre der zweite

Und dann kann man dennoch zwischen beiden Wechseln, also sie sind nicht voreinander versteckt - wobei man das Top Menü abschalten kann glaub ich und auch den Swipe zwischen den Tabs kann man deaktivieren.
Dann hättest du deine 2 Uis
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.... ;-)

Biervögelhasso

Zitat von: Master_Nick am 06 November 2018, 14:36:00
Dann mach dir doch mehrere Tabs?

Und rufe diesen dann jeweils mit seiner festen Adresse auf:

http://ip:1880/ui/#/0 <- wäre der erste Tab z.B für dein Handy
http://ip:1880/ui/#/1 <- wäre der zweite

Und dann kann man dennoch zwischen beiden Wechseln, also sie sind nicht voreinander versteckt - wobei man das Top Menü abschalten kann glaub ich und auch den Swipe zwischen den Tabs kann man deaktivieren.
Dann hättest du deine 2 Uis

Hi,
genaus so werde ich es machen. Ich kann nur sagen NODE-RED ist genau das was mir noch gefehlt hat. Ich fand es immer sehr aufwändig mit dem FHEM Tablet UI.
Ich besitze leider keine Programmierkenntnisse aber in nur 3 Tage habe ich mir meine Tablet Seite zusammengebaut. Das Dashboard läuft viel flüssiger auf meinem Samsung TAB3.
Ein paar kleine Nachteile gibt es leider auch. NODE-RED besitzt nicht so schöne Icons. Ein Icon für die Jalousie die langsam runter fährt habe ich leider noch nicht gefunden.
Auch Icons für die Garage oder offene Fenster konnte ich nicht finden.

FHEM auf Raspy3 mit Stretch, CUL, SDuino, JeeLink, SomfyHomematic, MQTT, Grafana, Node-RED

Master_Nick

Du kannst dir eigene Gifs bauen und einbinde, so wie ich es bei meinem Trockner und der Waschmaschine gemacht habe.
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

#83
Garage und Fenster kann ich dir heute Abend rein stellen.



Edit:


[
    {
        "id": "d46c7631.59f9a",
        "type": "function",
        "z": "9d8c568.24a8628",
        "name": "check",
        "func": "if (msg.payload === \"ON\"){\n    msg.payload = \"#FF0000\";\n    return msg;\n}else if (msg.payload === \"OFF\"){\n    msg.payload = \"#00FF00\";\n    return msg;\n}\n",
        "outputs": 1,
        "noerr": 0,
        "x": 410,
        "y": 1320,
        "wires": [
            [
                "1673ba21.82cede"
            ]
        ]
    },
    {
        "id": "1673ba21.82cede",
        "type": "ui_template",
        "z": "9d8c568.24a8628",
        "group": "bf451414.e71f48",
        "name": "Status Garage LED",
        "order": 15,
        "width": "0",
        "height": "0",
        "format": "<style>\n.led {\n    float: right;\n    padding: 3px;\n    width: 10px;\n    height: 10px;\n    margin: 5px 5px 5px 5px;\n    border-radius: 50%;\n    \n}\n</style>\n\n<div>Status Garage<span class=\"led\" style=\"background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload}} 0 3px 15px;\"></span></div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 690,
        "y": 1320,
        "wires": [
            []
        ]
    },
    {
        "id": "bf451414.e71f48",
        "type": "ui_group",
        "z": "",
        "name": "FHEM",
        "tab": "dbb46b72.63ce3",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "dbb46b72.63ce3",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "order": 1
    }
]
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

Biervögelhasso

Hallo SamNitro,

ich habe mich vielleicht falsch ausgedrückt. Ich suche direkt ein Icon Garage oder offenes Fenster wie ich es im FHEM Tablet UI hatte.
Wenn ich Zeit habe schau ich mir den Vorschlag von Master_Nick an. Er hat eigene GIFs erstellt und eingebaut.

Viele Grüße
FHEM auf Raspy3 mit Stretch, CUL, SDuino, JeeLink, SomfyHomematic, MQTT, Grafana, Node-RED

stefanm

Hallo

und erstmal danke für die tolle Arbeit.

Ich bin dabei auch alles auf Node-Red umzustellen.
Was nur schwierig ist, sind die Icons, die ich gerne verwenden würde. In Fhem sind ja die OpenAutomation- Icons drin.
Hat jemand eine Idee wie ich die in Node Red einbinden kann ?

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

Du wirst sie zum einen für die Browser die NodeRed aufrufen sollen zugänglich machen müssen und dann einzeln mittels HTLM Code in den Nodes einbinden müssen.
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

#87
Hem das dürfte schwierig werden, wenn ich das Frontend auf einem Tablett verwenden will.

Da muss einen andere Weg geben. Bei den Weather Icons klappt das ja auch
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

Warum genau sollte das nun schwierig werden?
Ich nutze NodeRed auf einem 10" Touchscreen, am PC und am Handy.
Und mache es genau wie ich es mitteilte.
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

Für mich schon :)
Ich bin nicht der Programmierprofie und bin froh das ich es so weit geschafft habe.

danke für den Hinweis. Da weis ich wonach ich suchen muss.

Guten Rutsch
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