node-red Dashboard Text formatieren

[netfriend]

Hallo,

ich habe mehrere Dashboard-Text-Nodes zur Darstellung div. Werte.
Mir persönlich sind die Abstände der einzelnen Nodes auf dem Dashboard viel zu weit auseinander. Gibt es eine Möglichkeit, diese anzupassen? Sozusagen die Abstände zwischen den einzelnen Text-Anzeigen bzw. die Zeilenhöhe?
Ich finde in dem Text-Node diesbezüglich keine Einstellung, aber über CSS geht das bestimmt.
Bin leider nicht der CSS-Freak, aber vielleicht kann mir jemand helfen?
Danke!

[mickym]

@netfriend Nein das geht nicht, weil die minimale Höhe ist ja durch das Grid des Dashboards festgelegt. Du kannst höchstens Dir mehrere Textausgaben zusammen in einer Template Node ausgeben lassen, da kannst du dann alles mit html Deinen Wünschen anpassen

[netfriend]

@mickym ok, wenn das geht, wäre auch ne Möglichkeit. Hast Du mal ein Beispiel, wie man das macht? Wenn ich mal nen Einstieg sehe, komme ich schon klar. Aber im Moment fehlt mir der Anfang....

[mickym]

@netfriend Du musst halt entweder in verschiedene Nachrichteneigenschaften alles in eine Nachricht verpacken und immer alle Werte zusammen zu verschicken (am Einfachsten ist es, wenn Du die Werte über den Flow Kontext sammelst):

Entweder in dem Du ein Objekt aus deiner payload machst oder verschiedene Nachrichteneigenschaften benutzt. Du musst die template Node auch selbst refreshen ggf.

Hier mal ein kleiner Flow zum Test:

Spoiler

[
   {
       "id": "20ba5acb91a495b3",
       "type": "ui_template",
       "z": "7e6af0015415146d",
       "group": "866e364cfd7328d1",
       "name": "",
       "order": 1,
       "width": 0,
       "height": 0,
       "format": "<p>Wert 1: {{msg.payload1}}</p>\n<p>Wert 2: {{msg.payload2}}</p>\n<p>Wert 3: {{msg.payload.Wert3}}</p>\n<p>Wert 4: {{msg.payload.Wert4}}</p>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 780,
       "y": 4520,
       "wires": [
           []
       ]
   },
   {
       "id": "34f7eeeb9994239d",
       "type": "inject",
       "z": "7e6af0015415146d",
       "name": "",
       "props": [
           {
               "p": "payload1",
               "v": "215",
               "vt": "num"
           },
           {
               "p": "payload2",
               "v": "Ich bin ein Text",
               "vt": "str"
           },
           {
               "p": "payload"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "{\"Wert3\":\"Ich bin Wert 3\",\"Wert4\":\"... und ich Wert 4\"}",
       "payloadType": "json",
       "x": 590,
       "y": 4520,
       "wires": [
           [
               "20ba5acb91a495b3"
           ]
       ]
   },
   {
       "id": "866e364cfd7328d1",
       "type": "ui_group",
       "name": "helpers",
       "tab": "464d85dfac9971a2",
       "order": 4,
       "disp": false,
       "width": "6",
       "collapse": false,
       "className": "helperGroup"
   },
   {
       "id": "464d85dfac9971a2",
       "type": "ui_tab",
       "name": "Listen",
       "icon": "dashboard",
       "order": 1,
       "disabled": false,
       "hidden": false
   }
]

Du kannst auch ganze Tabellen machen - ggf. mit Icons - da sitzt Du dann aber bis das sitzt.

Beispiele aus meiner Produktivumgebung:

oder noch komplexer wenn Du Steuerung mit einbauen willst.

Musst Dich halt bissi mit HTML auseinandersetzen.

Für Tabellen kannst Du aber auch die Table Node verwenden, dann musst nicht soviel codieren.

[mickym]

Du solltest nur eines nicht vergessen:

Das NR Dashboard ist eine super schnelle und super leichte Methode um Steuerung und Infos auszugeben. Wenn Du aber grafisch nun sehr anspruchsvoll bist, dann ist eine andere Visualisierung vielleicht besser geeignet ansonsten wird es ziemlich schnell kompliziert.

Falls Du in der payload auch noch HTML Code mitgeben willst, dann musst Du die andere Schreibweise verwenden - die geschweiften Klammern geben nur Text aus

In diesem Artikel findest Du auch noch andere Informationen.

Das ist aber erst dann wichtig, wenn Du dynamisch mit Javascipt innerhalb der Webseite programmierst, wie ich es mit den Steelseries Widgests probiert habe. Dort findest Du auch Teile meiner Wetterseite etc. um dann auch noch Grafiken einzubinden etc.

Da kannst Du dann spielen:

https://forum.iobroker.net/assets/uploads/files/1622060564573-steelseries-test2.mp4

[netfriend]

@mickym Vielen Dank, das macht den Einstieg recht einfach. Ich benötige nur ein paar Messwerte, ähnlich deiner Darstellung "Datenträger / Speicher".
Die bisherige Darstellung über das Dashboard-Text-Node hat mir zuviel Platz benötigt, aber diese Darstellung finde ich völlig ausreichend. Ich werde damit rumspielen und versuchen, meine Werte auf diese Art darzustellen.
Für andere Darstellung habe ich noch Grafana am Laufen und für meine KNX-Visu nutze ich CometVisu. Hier dagegen interessieren mich Messwerte, die ich mir schnell am Smartphone anschauen kann. Dafür finde ich das genau richtig