Wert von mehreren empf. Objekten in eine Tabelle darstellen
-
@frankyboy73 Ach so - Du hast die Template Node nun genommen und nicht die table Node.
Zu Deiner Frage klar kannst Du das alles nach Deinen Bedürfnissen modifizieren:
Ich hatte erst kürzlich mit der template Node und verschiedenen Inputs gespielt und referriert: https://forum.iobroker.net/topic/49661/aus-string-eine-übersichtliche-liste-erstellen
dabei kannst in den Spalten natürlich auch Formatanweisungen unterbringen (s. hier):
https://forum.iobroker.net/topic/49661/aus-string-eine-übersichtliche-liste-erstellen/8also kannst
align=center oder align=rightfür Zahlen besser geeignet.
Also in Deinem Fall:
<table> <tr><th width=100>Name</th><th width=100>Signal</th></tr> <tr ng-repeat="(key, y) in msg.payload"> <td>{{y.topic}}</td><td align=right>{{y.payload}}</td> </tr> </table> -
gelöscht, doppelt
-
@mickym Ah, super. Sieht schon viel besser aus, danke.
Aber irgendwas mache ich noch falsch. Die Join gibt mir nach 24 Nachrichten das Array raus, das passt. Aber nicht von 24 Unterschiedlichen Geräten, manche Geräte senden Ihren Status öfter als andere. Ich habe einige Geräte jetzt doppelt oder dreifach in der Liste, dafür andere gar nicht und die Reihenfolge der Geräte ändert sich auch ständig.
Oder habe ich das in der Join noch falsch? Muss ich da Verbinde jedes msg.topic einstellen? -
@frankyboy73 Tja das ist ja logisch - weil Dein Array immer wächst.
- Das ist gut für LOG Einträge - aber nun musst Du Dir eine Logik ausdenken, dass Du wenn vom gleichen Gerät eine erneute Meldung kommt Du die entsprechenden Array Einträge löschst. Bei meiner Shelly Seite habe ich es mit Objekten gemacht und nicht mit einem Array. Wie man es mit einem Array zuordenen könnte weiss ich noch nicht.Bei einem Objekt machst Du es so:
"Laptop" : { "signal": 72}
Bei einem Array weiss ich das noch nicht - jedenfalls musst Du das logisch so lösen, dass Du die alten Einträge durch neue überschreibst - und dann sendest Du ja immer das gesamte Objekt an die Node.
Also mit Objekten ist es easy - bei Arrays weiss ich noch nicht:
Du siehst ich habe das Laptop Objekt von 72 auf 52 aktualisiert über zusammengeführtes Objekt:
-
@mickym Das schaue ich mir auf jeden Fall noch an, muss ja hinzukriegen sein.
Ich habe es mir nur erstmal einfach gemacht, und lese jetzt per Injekt und Listen Node erst mal in bestimmten Intervallen die Signalstärke aus, da bekomme ich dann alle Nachrichten zu gleichen Zeit und habe keine Zwischennachrichten.
-
@frankyboy73 Nun wie gesagt mach mal Objekte aus Deinen Geräten - so wie ich das beschrieben habe
{"Laptop":{"signal":52},"Fernseher":{"signal":100}}Über das zusammenführen in der JOIN Node wie unten beschrieben - wird dann das richtige Objekt akualisiert.
In der template Node nutzt Du den Namen dann als Key:
<table> <tr><th width=100>Name</th><th width=100>Signal</th></tr> <tr ng-repeat="(key, y) in msg.payload"> <td>{{key}}</td><td align=right>{{y.signal}}</td> </tr> </table>das funzt:
Ich pass die JOIN Node noch an - damit Du das gleich gemäß Deines Outputs aus den iobroker Nodes verarbeiten kannst
So damit ist es easy:
payload wird in ein Obejkt verschoben und das topic hast Du ja schon extrahiert.
-
Wenn du möchtest, kann ich dir auch 3 Skripte für die Tabellen zu Verfügung stellen (blockly).
Die entsprechenden Geräte werden jeweils automatisch erkannt.
Was man sehen möchte und was nicht lässt sich mit ein wenig HTML leicht anpassen.
-
@mickym Ok, danke. Sieht gut aus. Was mir noch gefehlt hatte war der Wert. Ich hatte nicht bedacht das ich das payload verschieben muss. Aber ist klar, wird ja sonst überschrieben.
Aus einer deiner Antworten oben hatte ich auch geschlossen das man unbedingt ein Array senden muss, aber das galt wohl nur für die Table Node
Dann kann ich mich ja jetzt an weitere Tabellen machen, supi.@_R_A_L_F_
Hi, das ist nett, von Dir, aber ich bin von Blockly komplett weg und nutze stattdessen nur noch Node Red -
@mickym JA genau - ich mach Dir nun was mit mehren Spalten und Werten - da musst dann mit einer Flow Variablen und einer kleinen Function Node arbeiten - das ist wieder mal einer der Fälle wo ich es mit JSONATA noch nicht kann. Das Array ist nur für die table Node.
In dem verlinkten Thread hab ich Dir ja gezeigt wie man mit der ng-repeat nun sowohl Arrays wie auch Objekte durchsucht.
-
@mickym Das mit den mehr Spalten ist schwierig, das Dashboard nutze ich meist auf dem Iphone, deshalb ist es bei mir auch sehr einfach gehalten und visuell nicht so schön.
Edit: Die Breite musste ich fürs Iphone auf 6 beschränken.
Ich könnte mir natürlich auch noch weitere Seiten nur für den Abruf per PC oder Tablet anlegen, war aber bis jetzt zu faul dazu. Funktion kommt vor Aussehen.
-
@frankyboy73 sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:
@mickym Das mit den mehr Spalten ist schwierig, das Dashboard nutze ich meist auf dem Iphone, deshalb ist es bei mir auch sehr einfach gehalten und visuell nicht so schön.
Ich könnte mir natürlich auch noch weitere Seiten nur für den Abruf per PC oder Tablet anlegen, war aber bis jetzt zu faul dazu. Funktion kommt vor Aussehen.Ist egal ich hab Dir hier mal gezeigt wie es ginge - und passt auch noch in Deine Kachel
Du sammelst alles in einer Flow variable von unterschiedlichen Punkten - so habe ich das auch mit den Shellies gemacht.
Und in der function Node steht nicht soviel drin - das Problem ist den Pfad zum Objekt zusammenzusetzen:
flow.set('devices.' + msg.topic + '.temperature',msg.payload); return msg;Also statt den jeweils 3 Inject Nodes die iobroker In Node mit den Wildcards für eine Eigenschaft - dann ist das doch ein Supereasy Flow.
-
@frankyboy73 sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:
@mickym Das mit den mehr Spalten ist schwierig, das Dashboard nutze ich meist auf dem Iphone, deshalb ist es bei mir auch sehr einfach gehalten und visuell nicht so schön.
Edit: Die Breite musste ich fürs Iphone auf 6 beschränken.
Ich könnte mir natürlich auch noch weitere Seiten nur für den Abruf per PC oder Tablet anlegen, war aber bis jetzt zu faul dazu. Funktion kommt vor Aussehen.Im Querformat gehen 12 - ausserdem kann man ja nach rechts schieben. Aber egal - ich hab Dir das Prinzip gezeigt, wie Du Dir so eine Tabelle über eine Flowvariable selbst aufbauen kannst.
-
@mickym Jau, passt noch mit 3 Spalten.
-
@frankyboy73 Und hier nochmal meine Shelly Tabelle - mit Icons kann mir hier auch viele Funktionen unterbringen - und es ist nicht nur eine Anzeigetabelle sondern man kann damit auch Aktionen anstoßen: Die Template Node hat noch einen Ausgang.
Hier nochmal meine Tabelle - und Du siehst wieviele Anzeigen man durch Icons in einer Tabelle quetschen kann:
<table id="t01"> <tr><th width=200>Bezeichnung</th><th width=80>Temperatur</th><th width=80>Leistung</th><th width=180>id</th><th width=300>Firmware</th><th width=130>IP-Adresse</th></tr> <tr ng-repeat="(key, y) in msg.payload"> <td>{{y.friendlyName}}</td><td align=right>{{y.temperature}}</td><td align=right>{{y.power}}</td><td>{{y.id}}</td><td style="color:{{y.icon.color}};text-align:center">{{y.fw_ver}}</td> <td align=center>{{y.ip}}</td> <!-- Bei Arrays kann man $index nehmen sonst bei ng-repeat key und value definieren <td class="material-icons" style="color:{{y.icon.color}}; text-align:right" ng-click="msg.payload=msg.payload[$index]; msg.topic=msg.payload.topic; send(msg)" >{{y.icon.name}}</td> --> <td class="material-icons" style="color:{{y.icon.color}}" ng-click="msg.payload=msg.payload[key]; msg.topic= 'Firmware Update of ' + msg.payload.id; send(msg)" >{{y.icon.name}}</td> <td class="material-icons" ng-click="msg.payload=msg.payload[key]; msg.topic= 'Reboot of ' + msg.payload.id; send(msg)" >replay</td> <td class="material-icons"><a ng-href="http://{{y.ip}}">exit_to_app</a></td> <td class="material-icons" style="color:{{y.state.color}}" ng-click="msg.payload=msg.payload[key]; msg.topic= 'State of ' + msg.payload.id; msg.key=key; send(msg)" >{{y.state.icon}}</td> <td class="material-icons" style="color:{{y.link.color}}" ng-click="msg.payload=msg.payload[key]; msg.topic= 'Link of ' + msg.payload.id; send(msg)" >{{y.link.icon}}</td> </tr> </table>Über ng-click oder ng-href kannst direkt verlinken oder eine Nachricht erzeugen, die Du im Flow dann weiter verarbeiten kannst.
- Also ich finde das schon ziemlich genial - auch wenn Du siehst wie einfach das im Prinzip geht. Ich habe zwar damals viel rumprobiert - aber wenn man weiß wie es geht ist das kein Problem -
@mickym Wow, das muss ich dann doch noch umsetzen. Vor allem die Möglichkeit aus der Tabelle nen Neustart anzustoßen und das Webinterface aufzurufen gefällt mir sehr.
Aber heute nicht mehr, habe leider noch nen Termin.
Danke -
@frankyboy73 sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:
@mickym Wow, das muss ich dann doch noch umsetzen. Vor allem die Möglichkeit aus der Tabelle nen Neustart anzustoßen und das Webinterface aufzurufen gefällt mir sehr.
Aber heute nicht mehr, habe leider noch nen Termin.
DankeHallo franky,
wie gesagt das was ich gemacht mit meiner Shelly Seite gemacht habe - funktioniert ja soweit.
Trotzdem beginne ich mich nun mit der ui_table Node intensiver zu befassen und da gibts dann weit mehr Möglichkeiten, als man auf den ersten Blick erahnt. Teilweise ist es einfacher - teilweise noch sehr viel komplexer - was da geht - ist auch teilweise unvollständig dokumentiert - etwas besser ist es wenn man die mit der Node mitgelieferten Beispiele ausprobiert - wobei ich das mit den callback Funktionen auch noch nicht verstehe. - Aber schaut schon toll aus und das was ich mit der Template Node gemacht habe - das sollte mit der ui_table Node auch funktionieren. Hier mal die Beispiele im Dashboard dargestellt:
Wenn ich da mal besser durchsteige - werde ich vielleicht einen eigenen Thread hierzu aufmachen. Bislang muss das halt mit der Template Node noch langen.
-
@mickym Hi, nachdem ich jetzt weiß wie es geht komme ich auch erst mal mit der Template Node klar. Und da ich ja mehr Wert auf Funktion als auf aussehen lege reicht mir das auch erst mal so. Konnte mir die Links für das WebInterface und den Reboot jetzt mit einbauen.
Das ich auch mit der Doku der table Node nicht wirklich klar komme hatte ich ja schon erwähnt. Das ist wohl eher was, wenn ich mal wirklich viel Zeit habe. Vielleicht klappt das ja mal im Weihnachtsurlaub -
@frankyboy73 Hi - also ich habe mich in den letzten Tagen intensiv mit der ui_table Node beschäftigt habe, bin ich von den Möglichkeiten fasziniert. Die Doku kann dieser Node gar nicht gerecht werden, da sich hinter dieser Node das komplette Tabulator Objekt mit eingebunden ist.
Ich habe es tatsächlich geschafft sogar eine Tabelle editierbar zu machen - die Möglichkeiten sind echt der Wahnsinn. Auch die Möglichkeiten - in Tabellen Spalten festzufrieren, sind vielleicht gerade bei kleinen Displays von Vorteil - oder auch selbst (mal anders als Admin5) wieder mit der Maus Spaltenbreiten zu verändern. Da bräuchte man wohl neben der Template Node noch eine Menge mehr. Aber ich stimme Dir zu- für den Anfang kann man ja auch mit der Template NOde Ergebnisse erzielen, wobei - wenn man die Komplexität der ui_table nicht nutzen will, das auch alles sehr rasch geht, wenn man die Node mal verstanden hat.Ich hatte die ui_table ja schon länger im Einsatz um das iobroker Log mal im NR Dashboard anzuzeigen:
und versuche ähnlich wie Du mit den Tasmotas meine Shelly Tabelle mal mit der ui_table zu implementieren - da stehe ich aber noch am Anfang:
Schau Dir mal das Video hier von diesem Projekt an: https://discourse.nodered.org/t/announce-remote-device-table-and-collaboration-wanted/22505
Ich habs nun zumindest halbwegs verstanden, wie es funktioniert - vielleicht mache ich wieder mal einen Thread auf - um bisschen was zu Tabellen im NodeRed Dashboard zu schreiben.
Was ich mir auch installiert habe ist die Popup Node um Kontextmenüs zur Verfügung zu haben - habe ich aber noch nicht ausprobiert.
Den ganzen Flow von dem Projekt kann man sich übrigens da holen: https://github.com/Christian-Me/remote-device-table
Na ja - wird zuviel mit function Nodes gemacht - aber inzwischen habe ich das Teil verstanden. Die eigentliche Doku zu dem Tabulator Teil, das sich hinter der ui_table Node verbirgt - gibt es nämlich hier: http://tabulator.info/examples/5.0?#localization
Das brauchst Du auch, um die Beispiele, die Du auch mit der Node mitbekommen hast zu verstehen.
Was ich mir zumindest gleich abgeschaut habe - ist der sinnvolle Einsatz von Umgebungsvariablem bei Subflows - so dass ich gleich meine JSON Node to iobroker States überarbeitet habe.
- Ich liebe dieses Produkt mit den Möglichkeiten die sich auftun immer mehr. -
@mickym sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:
Ich habs nun zumindest halbwegs verstanden, wie es funktioniert - vielleicht mache ich wieder mal einen Thread auf - um bisschen was zu Tabellen im NodeRed Dashboard zu schreiben.
Da ich mich auch ein wenig mit dem Thema gerade beschäftige habe ich die Suche hier bemüht. Ich kann aber leider kein Thema von dir dazu finden. Den wirklichen Durchblick habe ich zu der table-ui Node noch nicht hin bekommen. Im ersten Schritt würde mir eine kleine Tabelle reichen, wo mir aktuelle Temperaturwerte angezeigt werden. Diese aktualisieren sich natürlich in regelmäßigen Abständen. Jetzt stellt sich mir die Frage gehe ich den Weg über die HTML Programmierung, oder verwende ich die ui-table Node. Und da gibt es ja dann auch noch die ui table handler node. Leider tue ich mich mit den zur Verfügung stehenden Dokumentationen oft sehr schwer. Vielleicht stecke ich aus Zeitgründen oftmals auch zu schnell auf.
-
@garf Ich habe mich einige Zeit ebenfalls mit ui-table beschäftigt. Ich habe die node aber wieder gelöscht. Um tabulator nutzen zu können braucht man diese node nicht. Das kann man alles m.M. flexibler direkt mit html-template-nodes lösen.
Warum nicht ui-table?
- ui-table arbeitet mit einer recht alten tabulator Version (4.4 glaube ich). Aktuell ist 5.4. Da sich 5.x in wesentlichen Teilen (z.B. event-Modell) geändert hat, glaube ich nicht, dass sich ui-table einfach updaten läßt.
- spätestens wenn man functions für events/formatter etc. einsetzen will, wird die Eingabe von Quelltext als stringified JSON schon zur Qual. Und die Tabellen werden erst durch den Einsatz von events etc richtig schön;-)
- Die 4.x aus der ui-table hatte bei mir gelegentlich unschöne Bugs die mit Versionen 5.x (zumindest bei mir) nicht mehr aufgetreten sind. Beispiel war der letzte Gruppenheader der nicht korrekt refresht wurde. Egal mit welchem Browser ich getestet habe.
Dagegen ist der Einsatz von tabulator im template-node ganz einfach.
- man kann beliebige tabulator-Versionen verwenden
- Man kann zum Test die Beispiele fast ohne irgendwelche Änderungen übernehmen. Hier ist die Eingabe von Quelltext direkt möglich.
- Tabulator selbst muss nicht installiert werden, da die tabulator.js/css per CDN geladen werden kann. Das ist nur einmal für sämtliche Tabellen einer Site nötig. Ich verwende dazu ein eigenes template-node in der <head> Sektion.
- für einfache Seiten kann das zur Not auch im Tabellen-template gemacht werden.
- man kann tabulator bei Bedarf aber auch lokal z.B. per npm im html-static-ordner installieren
- das template-node erlaubt es den vollen Funktionsumfang von tabulator zu nutzen.
Hier mal einBeispiel flow für eine simple und eine etwas komplexere Tabelle.
- Die Daten werden als array of objects im payload oder einem beliebigen andern msg.xxxxx übergeben.
- Sollen mehrere Tabellen auf dem gleichen widget erscheinen können sie in einem oder getrennten template-nodes definiert werden.
- Bei mehreren Tabellen müssen alle Tabellen-Objects individuelle Namen habe, egal, ob sie im gleichen oder getrennten template-nodes definiert sind.
- Die site faßt die script-teile aller template-nodes dieser site zusammen. Deshalb kann man z.B. die datenübernahme/event-handling etc in eigene template-nodes auslagern, was bei komplexen Tabellen für wesentlich mehr Übersicht sorgen kann. In den kleinen Beispielen mache ich davon keinen Gebrauch, habe aber guter Erfahrungen damit.
Gruß
Reinerclosed moment is not defined at tabulator.js #1631
