Node-Red als Frontend

[Master_Nick]

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

[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....

[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.

[Master_Nick]

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.

[Biervögelhasso]

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.

[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

[Biervögelhasso]

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.

[Master_Nick]

Du kannst dir eigene Gifs bauen und einbinde, so wie ich es bei meinem Trockner und der Waschmaschine gemacht habe.

[SamNitro]

Garage und Fenster kann ich dir heute Abend rein stellen.



Edit:

Code: [Auswählen]

[
    {
        "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
    }
]

[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

[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

[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.

[stefanm]

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

[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.

[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