Aus String eine Übersichtliche Liste erstellen
-
Re: Visualisierung (Dashboard) gestalten & strukturieren
Hallo zusammen, ich kämpfe gerade mit der Darstellung einer Zeichenkette wie man das optisch schöner gestalten kann, vielleicht hat einer eine Idee:-).
Ich lasse mir mit einem Blockly script in einen Datenpunkt (Zeichenfolge) meine geöffneten Fenster schreiben. Jetzt versuche ich das irgendwie im Node Red Dashboard schicker darzustellen. Am liebsten hätte ich jedes Fenster in einer Zeile ohne die Klammern (siehe Bild). Mit einem Template bekomme ich es auch nicht hin da ich nicht wirklich Programmierkenntnisse habe.
Danke schon mal für eure Ideen
-
@saranger Um es einfach zu machen Installiere Dir die Tabellen Node - falls Du es nicht selbst mit der Template Node machen willst.
Diese kannst Du dann einfach mit Arrays füttern. Falls Du es doch mit einer Template Node machen willst, sag Bescheid. Dann solltest Du aber lieber ein Object , anstelle von Strings verwenden, also:
{"Gäste WC":"geöffnet","Flur EG":"geöffnet"} -
Hi, werde ich dann testen :). Muss ich mal prüfen ob ich in blockly das ganze in eine anderen datenpunkt schreiben kann damit Array raus kommt, muss ich da nur als datenpunkt Object auswählen?
-
@saranger Nein aber Du kannst ja auch einen Flow machen - dass da Objekte rauskommen, poste mal Dein String Array in Code-Tags - dann mache ich das schnell.
-
Mach ich sobald ich daheim bin. Danke schon mal
-
@saranger sagte in Aus String eine Übersichtliche Liste erstellen:
Mach ich sobald ich daheim bin. Danke schon mal
Also wie gesagt dass einfachste ist, Du installierst Dir die ui-Table - die ist schon sehr mächtig und die kannst Du easy mit Arrays füllen:
Mit der ui-Table hole ich mir beispielsweise das Log in das NR Dashboard:
So wenn Du es mit der Template Node machen willst - hier mal ein paar Beispiele:
Das erste Beispiel ist so ein einfaches Array mit Zeichenketten - so wie Du sie ja im Eingangsposting gepostet hast:
["Gäste WC - geöffnet","Flur EG - geöffnet"]
das kannst zwar nun auch zentriert oder rechtsbündig machen - aber weil es halt pro Fenster nur EINE Zeichenkette ist - schaut das in meinen Augen nicht besonders schön aus.
Die nächste Möglichkeit ist Du nutzt Objekte,
{ "Gäste WC": "geöffnet", "Flur EG": "geöffnet" }Dann kannst das auf 2 Spalten verteilen:
oder falls Du Objekt Arrays mit bekannten /festen keys verwenden willst, kannst dann auch Icons nutzen;
[ { "id": "Gäste WC", "status": "geöffnet", "icon": "sensor_window", "color": "red" }, { "id": "Flur EG", "status": "geschlossen", "icon": "sensor_window", "color": "green" } ]Dann kannst das auf 2 Spalten oder mehrere Spalten verteilen:
Wo ich noch Probleme hätte, wäre wenn Du die keys nicht kennst. Zumindest ist eine Tabelle nicht so einfach für das ng-repeat:
Das habe ich noch nicht raus. Hier mal die Beispiele zum Üben:
Um die einzelnen Typen ineinander umzuwandeln - hier noch folgender Flow:
-
Hier der Input als Objekt-Array - mit unbekannten Keys:
[{"Gäste WC":"geöffnet"},{"Flur EG":"geschlossen"}]So ich habe es nun auch geschafft auch eine geschachtelte ng-repeat Anweisung in den Tabellen zu schreiben. Ist zwar doppelt aber anders bringe ich es nicht hin:
Hier mal der relevante Code:
<table id="t01"> <tr><th width=150>Fenster</th><th width=100>Status</th></tr> <tr ng-repeat="item in msg.payload"> <td ng-repeat="(key,value) in item">{{key}}</td><td ng-repeat="(key,value) in item" align=center>{{value}}</td> </tr> </table> -
@saranger Mir ist evtl. noch in den Sinn gekommen, dass Du nur ein Gruppe mit den geöffneten Fenstern brauchst und gar nicht den Status aus dem String brauchst.
Eingang ist dieser String:
'["Gäste WC - geöffnet", "Flur EG - geschlossen"]'
Hier der zugrhörige Flow:
-
@saranger So und falls ich es immer noch falsch verstanden habe - dann jetzt aber:
Also Deinen String genommen - es werden nur die Fenster aus dem String herausgelöst und automatisch gezählt.
Außerdem dies ist nun eine Darstellung mit den Text-Nodes und nicht mit der Template Node.
Hier der zugehörige Flow wieder mit Deinen Strings als Input:
So nun hab ich glaub alle Möglichkeiten durchgespielt. Input also String aus Deinem Datenpunkt ist wieder der folgende String:
'["Gäste WC - geöffnet", "Flur EG - geschlossen"]' -
@mickym Einen schönen guten Morgen, also erstmal vielen vielen Dank für den Einsatz :-). Das hätte ich so nicht hinbekommen. Ich habe mal eingefügt welchen Style ich genutzt habe :-). Eine Sache ist mir noch aufgefallen, wenn die Zahl 0 ist bleibt das letzte Fenster in der liste aber stehen, im Io Broker ist diese aber leer. Muss ich das irgendwie über eine Logik leerenlassen (wenn Zahl 0 dann ...)?
Vg
-
@saranger sagte in Aus String eine Übersichtliche Liste erstellen:
Muss ich das irgendwie über eine Logik leerenlassen (wenn Zahl 0 dann ...)?
Die Antwort ist JA.
Nun ich sehe halt nicht genau - wie Deine Datenpunkte aussehen, aber ja Du hast Recht - man muss um die Template Node zu leeren einen leeren String schicken. Der Grund ist die split Node - die halt auch nichts schickt, wenn es nichts zu splitten gibt.
Im NodeRed nimmst Du für Filter oder Bedingungen grundsätzlich eine Switch Node.@saranger sagte in Aus String eine Übersichtliche Liste erstellen:
im Io Broker ist diese aber leer.
Basierend auf dieser Aussage bin ich mal von einem leeren String ausgegangen, den man dann auch direkt weiterleiten kann. Ansonsten musst halt die Abprüfung so machen, wie es im iobroker ist und dann mit einer Change Node einen leeren String an die Template Node schicken:
Hier der abgewandelte Flow:
-
hab es hin bekommen
Da ich ja eh die Zahlen auswerte und sich bei 0 die Farbe ändert hatte ich somit die 0 aus der switch Node und hab diese auf eine change node gelegt hab es mal beigefügt wie es jetzt komplett ist.
-
@saranger Super
Wie ich an Deinen iobroker In Nodes sehe hättest Du aber auch auf einen String "[]" abprüfen können (insofern ja die Change Node in jedem Fall erforderlich, da Du nicht wirklich einen leeren String in Deinem Datenpunkt hattest) - wie immer gibt es ja mehrere Wege - wichtig war ja nur, dass Du die Template Nodes mit einem leeren String löschen kannst.
