Wert von mehreren empf. Objekten in eine Tabelle darstellen

[mickym]

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

Spoiler

[
   {
       "id": "65840cd5.ec1804",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Laptop",
       "payload": "72",
       "payloadType": "num",
       "x": 270,
       "y": 700,
       "wires": [
           [
               "95f3ff38.3b29d"
           ]
       ]
   },
   {
       "id": "b25bb467.59c558",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Fernseher",
       "payload": "100",
       "payloadType": "num",
       "x": 270,
       "y": 760,
       "wires": [
           [
               "95f3ff38.3b29d"
           ]
       ]
   },
   {
       "id": "e3f5c00a.735fe",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Laptop",
       "payload": "40",
       "payloadType": "num",
       "x": 270,
       "y": 820,
       "wires": [
           [
               "95f3ff38.3b29d"
           ]
       ]
   },
   {
       "id": "beb5f63d.b18538",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Laptop",
       "payload": "84",
       "payloadType": "num",
       "x": 270,
       "y": 900,
       "wires": [
           [
               "2da75055.63422"
           ]
       ]
   },
   {
       "id": "fab30dd2.c8467",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Fernseher",
       "payload": "50",
       "payloadType": "num",
       "x": 270,
       "y": 960,
       "wires": [
           [
               "2da75055.63422"
           ]
       ]
   },
   {
       "id": "90faedaa.676e",
       "type": "inject",
       "z": "db9946ec.089af8",
       "name": "Laptop",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Laptop",
       "payload": "40",
       "payloadType": "num",
       "x": 270,
       "y": 1020,
       "wires": [
           [
               "2da75055.63422"
           ]
       ]
   },
   {
       "id": "db3586c8.d21f18",
       "type": "debug",
       "z": "db9946ec.089af8",
       "name": "",
       "active": true,
       "tosidebar": true,
       "console": false,
       "tostatus": false,
       "complete": "false",
       "statusVal": "",
       "statusType": "auto",
       "x": 870,
       "y": 840,
       "wires": []
   },
   {
       "id": "278dfba7.1ba504",
       "type": "ui_template",
       "z": "db9946ec.089af8",
       "group": "1b6ce2ed.70c1ad",
       "name": "",
       "order": 22,
       "width": "6",
       "height": "10",
       "format": "<table>\n \n \n  \n   <tr><th width=100>Name</th><th width=50>Signal</th><th width=50>Temperatur</th></tr>\n    <tr ng-repeat=\"(key, y) in msg.payload\">\n   <td>{{key}}</td><td  align=right>{{y.signal}}</td><td  align=right>{{y.temperature}} °C</td>\n \n   </tr>\n   \n</table>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 900,
       "y": 960,
       "wires": [
           []
       ]
   },
   {
       "id": "95f3ff38.3b29d",
       "type": "function",
       "z": "db9946ec.089af8",
       "name": "",
       "func": "flow.set('devices.' + msg.topic + '.signal',msg.payload);\nreturn msg; \n",
       "outputs": 1,
       "noerr": 0,
       "initialize": "",
       "finalize": "",
       "libs": [],
       "x": 420,
       "y": 760,
       "wires": [
           [
               "816b71de.5b37c"
           ]
       ]
   },
   {
       "id": "2da75055.63422",
       "type": "function",
       "z": "db9946ec.089af8",
       "name": "",
       "func": "flow.set('devices.' + msg.topic + '.temperature',msg.payload);\nreturn msg; \n",
       "outputs": 1,
       "noerr": 0,
       "initialize": "",
       "finalize": "",
       "libs": [],
       "x": 440,
       "y": 960,
       "wires": [
           [
               "816b71de.5b37c"
           ]
       ]
   },
   {
       "id": "816b71de.5b37c",
       "type": "change",
       "z": "db9946ec.089af8",
       "name": "",
       "rules": [
           {
               "t": "set",
               "p": "payload",
               "pt": "msg",
               "to": "devices",
               "tot": "flow"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 680,
       "y": 860,
       "wires": [
           [
               "278dfba7.1ba504",
               "db3586c8.d21f18"
           ]
       ]
   },
   {
       "id": "1b6ce2ed.70c1ad",
       "type": "ui_group",
       "name": "Start",
       "tab": "d6de6fe8.c78c",
       "order": 1,
       "disp": false,
       "width": "6",
       "collapse": false
   },
   {
       "id": "d6de6fe8.c78c",
       "type": "ui_tab",
       "name": "Motion2",
       "icon": "dashboard",
       "order": 21,
       "disabled": false,
       "hidden": false
   }
]

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.

[mickym]

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

[frankyboy73]

@mickym Jau, passt noch mit 3 Spalten.

[mickym]

@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

[frankyboy73]

@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

[mickym]

@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.
Danke

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

[frankyboy73]

@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

[mickym]

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

[Garf]

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

[rewenode]

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

Spoiler

[
   {
       "id": "3d54326a34d7b285",
       "type": "comment",
       "z": "7f6e6cb859163193",
       "name": "egal in welcher gruppe, wirkt für alle Tabellen dieser Seite",
       "info": "",
       "x": 550,
       "y": 220,
       "wires": []
   },
   {
       "id": "cad117ac93c02a8a",
       "type": "ui_template",
       "z": "7f6e6cb859163193",
       "group": "866e364cfd7328d1",
       "name": "load tsbulstor.js/.css",
       "order": 1,
       "width": 0,
       "height": 0,
       "format": "<link href=\"https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js\"></script>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "global",
       "className": "",
       "x": 440,
       "y": 300,
       "wires": [
           []
       ]
   },
   {
       "id": "357fbc37c1b58e1a",
       "type": "comment",
       "z": "7f6e6cb859163193",
       "name": "nur einmal für die komplette site nötig",
       "info": "",
       "x": 490,
       "y": 260,
       "wires": []
   },
   {
       "id": "365d1147f14c9f81",
       "type": "comment",
       "z": "7f6e6cb859163193",
       "name": "externe libs/css",
       "info": "",
       "x": 660,
       "y": 300,
       "wires": []
   },
   {
       "id": "8d802595263190fa",
       "type": "inject",
       "z": "7f6e6cb859163193",
       "name": "sample data in payload",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": true,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "[{\"Name\":\"na sowas\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]",
       "payloadType": "json",
       "x": 170,
       "y": 480,
       "wires": [
           [
               "d22d110ea73b8fa6"
           ]
       ]
   },
   {
       "id": "d22d110ea73b8fa6",
       "type": "ui_template",
       "z": "7f6e6cb859163193",
       "group": "d38200b70febfed9",
       "name": "tabulator html/script",
       "order": 1,
       "width": "0",
       "height": "0",
       "format": "<!-- \n    Tabulator js/css is only needes if this the only table on this site \n    <script type=\"text/javascript\" src=https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js></script>\n    <link rel=\"stylesheet\" href=https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css />\n//-->\n\n<!-- \n    for syntax see https://tabulator.info\n\n//-->\n\n<div id=\"example-table\"></div>\n<script>\n    var table = new Tabulator(\"#example-table\", {\n        height:\"500px\",\n        placeholder:\"Keine Daten verfügbar!\",\n        layout:\"fitColumns\",\n        columns:[\n            {title:\"Name\", field:\"Name\", width:200},\n            {title:\"Age\", field:\"Age\" },\n            {title:\"web\", field:\"web\", formatter: \"link\"},    \n        ],\n    });\n\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if(msg) {\n                var tabledata = msg.payload;\n                table.replaceData(tabledata);\n            }\n        });\n    })(scope);\n</script>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 440,
       "y": 480,
       "wires": [
           []
       ]
   },
   {
       "id": "c0c06c204207e4be",
       "type": "comment",
       "z": "7f6e6cb859163193",
       "name": "simple table without ui-table node",
       "info": "",
       "x": 480,
       "y": 440,
       "wires": []
   },
   {
       "id": "33be1b745f019cbf",
       "type": "inject",
       "z": "7f6e6cb859163193",
       "name": "sample data in payload",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": true,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "[{\"window\":\"Zwischentür_vorn\",\"status\":\"closed\",\"ts\":\"10.10.22 08:04:02\",\"ort\":\"Aussen\"},{\"window\":\"Zwischentür_Hof\",\"status\":\"closed\",\"ts\":\"10.10.22 08:04:00\",\"ort\":\"Aussen\"},{\"window\":\"Büro_WGn\",\"status\":\"closed\",\"ts\":\"10.10.22 11:39:31\",\"ort\":\"EG\"},{\"window\":\"Haustür\",\"status\":\"closed\",\"ts\":\"10.10.22 08:03:04\",\"ort\":\"EG\"},{\"window\":\"Fenster_Gäste_WC\",\"status\":\"closed\",\"ts\":\"10.10.22 06:43:40\",\"ort\":\"EG\"},{\"window\":\"WG_Fenster_rechts\",\"status\":\"closed\",\"ts\":\"10.10.22 06:33:56\",\"ort\":\"EG\"},{\"window\":\"WG_Fenster_links\",\"status\":\"closed\",\"ts\":\"10.10.22 06:33:32\",\"ort\":\"EG\"},{\"window\":\"WG_Schiebetuer\",\"status\":\"closed\",\"ts\":\"10.10.22 06:27:30\",\"ort\":\"EG\"},{\"window\":\"WGTuer\",\"status\":\"closed\",\"ts\":\"10.10.22 06:26:57\",\"ort\":\"EG\"},{\"window\":\"Wirtschaftsraum_Fenster\",\"status\":\"closed\",\"ts\":\"03.10.22 02:04:44\",\"ort\":\"EG\"},{\"window\":\"Kellerküche_Fenster\",\"status\":\"open\",\"ts\":\"30.09.22 11:16:50\",\"ort\":\"Keller\"},{\"window\":\"Keller\",\"status\":\"closed\",\"ts\":\"10.10.22 12:29:44\",\"ort\":\"Keller\"},{\"window\":\"Sportraum_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:42\",\"ort\":\"Keller\"},{\"window\":\"Billard_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:26\",\"ort\":\"Keller\"},{\"window\":\"Vorratsraum_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:07\",\"ort\":\"Keller\"},{\"window\":\"EWerkstatt_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 04:50:57\",\"ort\":\"Keller\"},{\"window\":\"Safe\",\"status\":\"closed\",\"ts\":\"10.10.22 04:26:58\",\"ort\":\"Keller\"},{\"window\":\"Schlafstube_Fenster_links\",\"status\":\"open\",\"ts\":\"10.10.22 09:11:13\",\"ort\":\"OG\"},{\"window\":\"Schlafstube_Fenster_rechts\",\"status\":\"closed\",\"ts\":\"10.10.22 10:29:38\",\"ort\":\"OG\"},{\"window\":\"OG_Kinderzimmer_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 02:41:40\",\"ort\":\"OG\"}]",
       "payloadType": "json",
       "x": 170,
       "y": 620,
       "wires": [
           [
               "d15cf69494e15f3f"
           ]
       ]
   },
   {
       "id": "d15cf69494e15f3f",
       "type": "ui_template",
       "z": "7f6e6cb859163193",
       "group": "d38200b70febfed9",
       "name": "tabulator html/script",
       "order": 1,
       "width": "0",
       "height": "0",
       "format": "<!-- \n    Tabulator js/css is only needes if this the only table on this site \n    <script type=\"text/javascript\" src=https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js></script>\n    <link rel=\"stylesheet\" href=https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css />\n//-->\n\n<!-- \n    for syntax see https://tabulator.info\n\n//-->\n<div id=\"openWindowsTable\"></div>\n<script>\n    var openWindowsTable = new Tabulator(\"#openWindowsTable\", {\n        height:\"700px\" ,\n        placeholder:\"Keine Daten verfügbar!\",\n        layout: \"fitDataStretch\",\n        /*fit columns to width of table*/\n        \n        //pagination: \"local\",\n        /*paginate the data*/\n        \n        //paginationSize: 40,\n        /*allow 40 rows per page of data*/\n        \n        movableColumns: true,\n        /*allow column order to be changed*/\n        \n        /*colums format definitions*/\n        columns: [{\n            title: \"Fenster\",\n            field: \"window\",\n            width: 250\n            },\n            {\n            title: \"Status\",\n            field: \"status\",\n            formatter: function(cell, formatterParams, onRendered){\n                    //cell - the cell component\n                    //formatterParams - parameters set for the column\n                    //onRendered - function to call when the formatter has been rendered\n                    return \"<span style='color:Black; font-weight:bold;'>\" + cell.getValue() + \"</span>\"\n                },\n            },\n            {\n            title: \"Zeit\",\n            field: \"ts\",\n            //sorter: \"date\"\n            /* need moment.js\n            see https://github.com/olifolkerd/tabulator/issues/1631#issuecomment-716460821\n            */\n            },\n        ],\n         \n        columnDefaults:{ \n            tooltip:true,\n        },\n        \n        /*initial sorting */\n        initialSort:[\n            {column:\"status\", dir:\"desc\"}, //sort by this first\n            {column:\"ts\", dir:\"desc\"}, //then sort by this second\n        ],\n        \n        /* group by ort*/\n        groupBy: \"ort\",\n        groupStartOpen: true,\n\n        /* format groupHeader */\n        groupHeader: function(value, count, data, group) {\n            var r = \"<span style='color:black; margin-left:10px;'>(\" + count + \" Fenster)</span>\";\n            return value + r;\n        },\n        \n        /*format individal cell*/\n        rowFormatter: function(row) {\n            const cl = row.getCells();\n            cl[1].getElement().style.backgroundColor = (cl[1]._cell.value === 'open' ? '#F1948A' : '#82E0AA');\n        },\n\n    });\n\n    /* events */\n    \n    openWindowsTable.on(\"renderComplete\",function() {\n        let data = openWindowsTable.getData();\n        let groupHeaderList = document.querySelectorAll(\".tabulator-row.tabulator-group\");\n        let groups = Array.from(groupHeaderList, (group) => group.outerText.split('(')[0]);\n        \n        for (let i = 0; i < groups.length; i++) { const group=groups[i]; const statusOpen=data.some(g=> g.ort === group &&\n            g.status === 'open');\n            groupHeaderList[i].style.backgroundColor = (statusOpen) ? '#E74C3C' : '#2ECC71';\n        }\n    });\n\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if(msg) {\n                var tabledata = msg.payload;\n                openWindowsTable.replaceData(tabledata);\n            }\n        });\n    })(scope);\n</script>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 440,
       "y": 620,
       "wires": [
           []
       ]
   },
   {
       "id": "86051fbedf8a9049",
       "type": "comment",
       "z": "7f6e6cb859163193",
       "name": "table with events and groups",
       "info": "",
       "x": 460,
       "y": 580,
       "wires": []
   },
   {
       "id": "866e364cfd7328d1",
       "type": "ui_group",
       "name": "helpers",
       "tab": "464d85dfac9971a2",
       "order": 4,
       "disp": false,
       "width": "1",
       "collapse": false,
       "className": "helperGroup"
   },
   {
       "id": "d38200b70febfed9",
       "type": "ui_group",
       "name": "simple table",
       "tab": "702f174cb9f60360",
       "order": 1,
       "disp": true,
       "width": "10",
       "collapse": false,
       "className": ""
   },
   {
       "id": "464d85dfac9971a2",
       "type": "ui_tab",
       "d": true,
       "name": "Listen",
       "icon": "dashboard",
       "order": 1,
       "disabled": false,
       "hidden": false
   },
   {
       "id": "702f174cb9f60360",
       "type": "ui_tab",
       "name": "simpleTable",
       "icon": "fa-thin fa-table",
       "order": 3,
       "disabled": false,
       "hidden": false
   }
]

• 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ß
Reiner

KES777 created this issue in olifolkerd/tabulator

closed moment is not defined at tabulator.js #1631

[Garf]

@rewenode sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:

Warum nicht ui-table?

Danke Dir für den Beitrag. Tendenziell war das template node auch mein Favorit. Zum table Node findet man bei youtube auch nicht wirklich viel an Lernvideos. Ich folge deinem Rat und beschäftige mich mal näher mit dem template Node uns dessen Möglichkeit Tabellen zu erstellen. Dank dir und mickym habe ich schon eine Menge an Informationen zum Verstehen und Ausprobieren zur Verfügung.

Gruß Garf

[mickym]

@rewenode Wie immer der Meister spricht - allerdings glaube ich, dass Du mit diesem Post einen Anfänger bzgl. der Nutzung von Tabellen überforderst. Ich werde deshalb auch noch mal einen eigenen Post verfassen.

Ich bin auch anderer Meinung als Du bzgl. der table Node. Ja es stimmt es wird eine alte tabulator Version benutzt - nämlich 4.4. Wenn man jedoch keine High- Sophisticated Tables benötigt, ist diese Node schon ein große Erleichterung, um schnell Werte darzustellen.

So ein Code - wie Du ihn dargestellt hast:

        columns:[
            {title:"Name", field:"Name", width:200},
            {title:"Age", field:"Age" },
            {title:"web", field:"web", formatter: "link"},    
        ],

ist für Dich zwar schnell geschrieben. Für einen Anfänger oder wenn man es ohne viel Schreibarbeit erledigen will, ist ein vordefinierte Form in der UI schon einfacher. Schließlich ist das, das Basiskonzept von NodeRed - sogut wie keinen Code schreiben zu müssen.

Wie gesagt die Vorteile hast Du ja schon beschrieben, wenn man den tabulator direkt in einer template Node nutzen will.

Ich hab selbst mal wieder ein paar Fragen, die Du mir als HTML Guru voraus hast.

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.

1. Du hast die "load tsbulstor.js/.css" Template Node in eine eigene Gruppe und in einen eigenen Tab gesteckt. Warum hast Du das gemacht? Hättest Du die Template nicht einfach in die simple-table Gruppe schmeißen können und trotzdem zur Head Section der Seite hinzufügen können?
   Oder ist das eine Sicherheitsmaßnahme oder einfach generell "Best Practice", um beim Löschen von Tabellen oder Gruppen nicht versehentlich diese Basis informationen mit zu löschen?
2. Die Definition bzw. das Hinzufügen zur <head> Sektion der Seite - dachte ich immer gilt nur für einen bestimmten Tab - scheint aber für alle Tabs des Dashboards zu gelten. Zumindest wenn ich mir das im Code Editor anschaue?. Gibt es eine Möglichkeit den Head auf bestimmte Tabs zu beschränken oder sollte man dann so eine template Node einfach ohne sichtbaren Inhalt einer Gruppe zuordnen?
   Sowie ich das jetzt sehe wird für das gesamte Dashboard geladen und nicht nur für eine "Site" - ausser Du betrachtest das ganze Dashboard als eine "Site".
3. Was heißt CDN (ich verstehe zwar das man den Code quasi aus dem Netz für die Seite holt), aber der Fachbegriff sagt mir nichts. Mit Googlen habe ich das rausbekommen: Content Delivery Network (CDN) - das heißt einfach, dass man bestimmten Webseiten-Code frei verfügbar von anderen Server lädt - mehr nicht?

für einfache Seiten kann das zur Not auch im Tabellen-template gemacht werden.

bzw. wenn man das Laden auf bestimmte Tabs beschränken will?

man kann tabulator bei Bedarf aber auch lokal z.B. per npm im html-static-ordner installieren

und wie würde dann das Laden bzw. der Code aussehen?
so: ?

<link href="tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="tabulator-tables/dist/js/tabulator.min.js"></script>

Also vielen Dank für Deine Mühe, werde da selbst noch bissi rumprobieren, wenn ich Zeit finde. Aber wie gesagt ich halte die table Node doch für sinnvoll, gerade wenn man nur schnell Tabellen darstellen will und keinen Code schreiben will.

=====================================================================

@Garf Ich werde wie gesagt nochmal auf die Tabellen grundsätzlich mit der table_ui oder hier mit template Node mit oder ohne tabulator nochmal eingehen. Das Problem ist gerade am Anfang, wie man Tabellen generell erzeugt und wie man ggf. einzelne Teile einer Tabelle anspricht. Dabei ist es letztlich unerheblich, welches Mittel Du einsetzt, ob die table Node direkt im Dashboard, eine template Node mit einer normalen HTML Tabelle sowie zu Beginn des Threads dargestellt oder template Node mit tabulator.

[Garf]

@mickym sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:

Das Problem ist gerade am Anfang, wie man Tabellen generell erzeugt und wie man ggf. einzelne Teile einer Tabelle anspricht.

Wahnsinn, mit einem Satz auf den Punkt gebracht. Genauso geht es mir seit Tagen. Mich stört im Dashboard die Platzverschwendung der zeileweisen Darstellung von Werten und Zuständen. Ich bekomme immer so Wahnsinnig schnell Platzprobleme. Gestern per template Node noch zwei Textzeilen reingequetscht, Schön ist es nicht geworden, aber die Werte stehen jetzt schon einmal an der richtigen Stelle. Ich schaue mal was rewenode mir so in seinem Beitrag zum Testen reingelegt hat. So ein ganz blutiger Anfänger bin ich ja vielleicht auch nicht mehr. Bei mir ist es immer ein Zeitproblem.

Danke an euch beide.

[Garf]

@rewenode sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:

Die Daten werden als array of objects im payload oder einem beliebigen andern msg.xxxxx übergeben.

Dank deiner html-Scripts schon einmal genau dass was ich gesucht habe, und wo ich weiß und vor allem verstehe wie und wo ich meine Daten eintragen muss. Jetzt mal sehen, ob ich das html-Script für meine Zwecke angepasst bekomme. Aber ich denke schon.

Allerdings bezweifel ich sehr, daß ich das tatsächlich ohne deine Hilfe hinbekommen hätte. Da hat mickym schon recht. Aber mit dem table-Node bin ich ja auch nicht wirklich weiter gekommen. Im Moment schon wieder eine Menge gelernt. Ich bin schon sehr gespannt was von mickym noch in Bezug auf das table-node kommen wird.

Danke für eure Hilfe, ihr seit einfach unbezahlbar. Denn ohne Erfolgserlebnis macht es irgendwie keinen Spaß. Frust und Erfolgslosigkeit tötet jede Lust am Weitermachen.

[mickym]

@garf So ich werde Dir trotzdem mal vorstellen, wie einfach es mit der table Node geht, ohne viel zu programmieren. Bissi muss immer sein.

[rewenode]

@mickym sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:
...

1. Du hast die "load tsbulstor.js/.css" Template Node in eine eigene Gruppe und in einen eigenen Tab gesteckt. Warum hast Du das gemacht? Hättest Du die Template nicht einfach in die simple-table Gruppe schmeißen können und trotzdem zur Head Section der Seite hinzufügen können?

Beim html-template-node geht nur widget in Gruppe oder <head> der site. Und eigentlich gehört sie in <head>. Läuft aber auch in widget wenn es sein muß.
Eigenes wiget ist auch mögliich. Da benutze ich meist ein eigenes helper-widget, wenn ich da z.B. zusätzlichen <style> oder <script> unterbringen will.
Da gibt es dann allerdings das Problem, dass man so ein Widget i.d.R. nicht auf der site sehen will und Größe 0 ist ja nicht vorgesehen, Habe aber eine Möglichkeit gefunden ein Widget komplett auszublenden.

Oder ist das eine Sicherheitsmaßnahme oder einfach generell "Best Practice", um beim Löschen von Tabellen oder Gruppen nicht versehentlich diese Basis informationen mit zu löschen?

Bin jetzt leider auch nicht der html-Guru. Könnte auch nur "Best Practice" sein. <Script> und <Link> sind ja nicht auf den header abboniert. Mit header ist aber sichergestellt, dass die Teile sicher geladen werden, bevor der Rest läuft, der ja i.d.R. auf geladenen Code zugreift.

2. Die Definition bzw. das Hinzufügen zur <head> Sektion der Seite - dachte ich immer gilt nur für einen bestimmten Tab - scheint aber für alle Tabs des Dashboards zu gelten. Zumindest wenn ich mir das im Code Editor anschaue?
   Gibt es eine Möglichkeit den Head auf bestimmte Tabs zu beschränken oder sollte man dann so eine template Node einfach ohne sichtbaren Inhalt einer Gruppe zuordnen?

Ja, gilt für die komplette site. Habe bisher keine Möglichkeit gefunden, dass auf einen bestimmten Tab zu beschränken. Könnte auch schwierig sein, da die tabs ja schon unterhalb des header liegen.

Sowie ich das jetzt sehe wird für das gesamte Dashboard geladen und nicht nur für eine "Site" - ausser Du betrachtest das ganze Dashboard als eine "Site".

Ja. Sollte beim ui-table aber auch so laufen, wenn es irgendwo auf der site verwendet wird.

3. Was heißt CDN (ich verstehe zwar das man den Code quasi aus dem Netz für die Seite holt), aber der Fachbegriff sagt mir nichts. Mit Googlen habe ich das rausbekommen: Content Delivery Network (CDN) - das heißt einfach, dass man bestimmten Webseiten-Code frei verfügbar von anderen Server lädt - mehr nicht?

Ja, ist ein schnelles Netz, das z.B. solche Libs ausliefern kann. Sie dir beliebige prof. Seiten an, z.B. spiegel.de da findest du im <header> jede Menge cdn-Links. Sollte also gängige Praxis sein.

für einfache Seiten kann das zur Not auch im Tabellen-template gemacht werden.

bzw. wenn man das Laden auf bestimmte Tabs beschränken will?

man kann tabulator bei Bedarf aber auch lokal z.B. per npm im html-static-ordner installieren

und wie würde dann das Laden bzw. der Code aussehen?
so: ?

<link href="tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="tabulator-tables/dist/js/tabulator.min.js"></script>

Kommt darauf an, wie du tabulator in deinem http-static-ordner installiert hast.
Die unterschiedlichen Möglichkeiten findest du hier https://tabulator.info/docs/5.4/install
Da findest du auch einen direkten Download.
Aus dem Archiv brauchst du nur das dist Verzeichnis.
Dann kannst du in deinem http-static ein Verzeichnis tabulator-tables erstellen und da kommt dann dist rein.
Danach sollten deine o.g. Links funktionieren. Konnte allerdings bisher keinen Unterschied feststellen.

Also vielen Dank für Deine Mühe, werde da selbst noch bissi rumprobieren, wenn ich Zeit finde. Aber wie gesagt ich halte die table Node doch für sinnvoll, gerade wenn man nur schnell Tabellen darstellen will und keinen Code schreiben will.

Da ist nichts gegen zu sagen. Will man aber mehr(neue Version) muss man doch auf die html-templates zurückgreifen und dann sind viele Dinge (hauptsächlich Funktionen/Formatters etc) nicht mehr kompatibel. Die muss man dann neu schreiben.
Da nutze ich doch lieber gleich aktuelle Versionen.
Und wer bei tabulator.info reinschaut, weil er Tips für die Gestaltung seiner Tabellen haben will kommt da mit der ui-table auch nicht weiter.
Aber hey, dass ist nur meine (ganz individuelle) Sicht.

Gruß
Reiner

[mickym]

@rewenode Danke für die Erklärungen. Bei Bedarf komm ich darauf wieder zurück. Ich hab gerade nur ein paar Flows für @Garf gestrickt und hab wieder bissi mit JSONATA gekämpft, aber war erfolgreich. Ich merke nur, wie schnell man Dinge wieder vergisst, die man mal gemacht hat bzw. wenn man nicht in Übung ist. Hab also manches wieder via trial & error hinbekommen.

[mickym]

@mickym sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:

@garf So ich werde Dir trotzdem mal vorstellen, wie einfach es mit der table Node geht, ohne viel zu programmieren. Bissi muss immer sein.

So um hier weiter zu machen ...

Also das ist im Prinzip nun egal, ob mit tabulator direkt oder table node. Es geht, sowie ich es erst mal verstanden habe, um eine einfache Tabelle. Es stimmt schon, was @rewenode schrieb, bei detaillierten Formatierungen oder sogar noch editierbaren Spalten muss man teilweise code als JSON in einem String verstecken, das ist ziemlich gewöhnungsbedürftig. Aber es ging ja um Einfachheit.

Ich werde mal für dieses Tutorial hier mal folgende Ausgangsbasis nehmen:

Sprich wir nehmen mal 2 fiktive Sensoren mit 4 Datenpunkten - je sensor einmal mit Temperatur und einmal Luftfeuchtigkeit.

[rewenode]

@garf sagte in Wert von mehreren empf. Objekten in eine Tabelle darstellen:

Allerdings bezweifel ich sehr, daß ich das tatsächlich ohne deine Hilfe hinbekommen hätte. Da hat mickym schon recht. Aber mit dem table-Node bin ich ja auch nicht wirklich weiter gekommen. Im Moment schon wieder eine Menge gelernt. Ich bin schon sehr gespannt was von mickym noch in Bezug auf das table-node kommen wird.

Na wenn ich Zeit habe und helfen kann, gerne.
Aber, für mich ist einer der gößten Vorteile, dass man die zahlreichen Beispiele in Netz und auf tabulator.info nahezu 1:1 im template Node verwenden kann.
Die haben i.Ü. auch einen super Discord Channel

Und auf JSFiddle u.a. findest du jede menge Beispiele, die du nach Herzenslust ändern oder Eigene testen kannst, ohne überhaupt NR anwerfen zu müssen.
Hier mein Beispiel auf https://jsfiddle.net/21ho4pez/6/.

Na und ich glaube überhaupt nicht, dass man dich noch als Anfänger bezeichnen kann

Aber das Alles gehört in der Tat nicht in diesen Thread. Sorry.

Gruß
Reiner

[mickym]

@Garf - sorry ich wollte Dich gar nicht persönlich als Anfänger bezeichnen, aber ich wollte es halt mal so darstellen, dass jeder der mit NodeRed angefangen hat, mit der Beschreibung auch was anfangen kann.

Sowohl in Tabulatur - als auch in der Table Node - als auch wenn Du selbst eine HTML Tabelle machst, wie anfangs von mir in dem Thread beschrieben füllst Du die Tabelle mit einem Objekt-Array.

dabei gilt einfach folgendes:

Jedes Array-Element entspricht einer Zeile in der Tabelle
Jede Eigenschaft innerhalb eines Objektes wird dann der entsprechenden Spalte zugeordnet.

Um also folgende Tabelle darzustellen:

muss folgendes Array mit den entsprechenden Objekten in die table Node eingespeist werden.

[{"temperature":23,"id":"sensor1","humidity":55},{"humidity":82,"id":"sensor2","temperature":26}]

Man sieht das 1. Array Element in der 1. Zeile, das 2. Array Element in der 2. Zeile usw.

Der Vorteil der table Node ist nun, dass die Spalten halt genau den Objekteigenschaften auch fix in der Node vorgeben kannst.