DOIF uiTable in FTUI3

[Adimarantis]

Es gab glaube ich schon Anfragen wie man die DOIF uiTable in FTUI3 verwenden kann.

Ich denke ich kann dafür eine Lösung bieten, aber es braucht dazu noch einen kleinen Tick Unterstützung vom Framework und ein paar Tipps zu SVG. Bin da leider kein Experte.

Die Idee: uiTable sind SVG Daten. Das Problem ist nur sie aus DOIF zu extrahieren und in FTUI zu bekommen.
Zum Extrahieren beherrscht mein Modul "Signalbot" bereits eine Method um diese per Signal Messenger zu verschicken.
Dazu konvertiert er sie aktuell nach png - aber das ist ein optionaler Schritt, also habe ich eine Option eingefügt die Daten als SVG zu belassen.
Jetzt kann man in FHEM

Code Auswählen Erweitern

{getSVGuiTable("","DI_2");;}
aufrufen und bekommt die svg Daten des uiTable in der DOIF Device "DI_2" auf dem Bildschirm angezeigt.
Leider kenne ich keinen Weg, wie ich in FTUI3 einfach eine FHEM-Funktion aufrufen kann, und deren Ausgabe entsprechend einbetten kann.

Für den Proof of Concept habe ich mir jetzt so beholfen:
Der Aufruf

Code Auswählen Erweitern

{getSVGuiTable("xxx","DI_2");;}
legt die svg Daten im reading "svg" des Dummy device "xxx" ab.

Jetzt kann ich in FTUI mit

Code Auswählen Erweitern

      <ftui-grid-tile row="3" col="4" height="3" width="4" shape="round">
    <header>uiTable Test</header>
        <ftui-label [text]="xxx:svg">  </ftui-label>
      </ftui-grid-tile>
Das Bild tatsächlich anzeigen (siehe Screenshot)

Problem dabei: Größe und Farben werden wohl von ftui-label kontrolliert und das Ergebnis ist nicht wie man es sich wünscht.

Ideal wäre jetzt
1) Eine Option in ftui-image oder ftui-icon statt eines Dateinamens/Url auch einen Stream zu akzeptieren (das würde die Reading Methode schon mal ermöglichen [stream]="xxx:svg"
2) Besser noch eine Option darin dann auch eine Funktion zu erlauben - eigene Syntax vielleicht {stream}='getSVGuiTable("DI_2")'
oder [stream]='&getSVGuiTable("DI_2")'

Ein weiterer Workaround wäre, wenn FHEM das svg periodisch in eine Datei schreibt und dann als ftui-icon anzuzeigen.
Dazu hätte ich auch mal eine Funktion implementiert:

Code Auswählen Erweitern

saveSVGuiTable("www/ftui/uitable.svg","DI_collect");

Das klappt soweit, aber das SVG skaliert dort auch nicht. Scheint eine feste Größe zu haben. Vielleicht muss man da noch ein wenig "Hand anlegen" und die entsprechenden Tags löschen? Ich hänge das erzeugte svg auch mal an.

Mit ein wenig Unterstützung denke ich wir würden hier eine Lösung anbieten können.

Gruß,
Jörg

[mr_petz]

Hi, wieso machst du das nicht mit content oder einem div wenn du das svg als Reading hast?
Bsp.:

Code Auswählen Erweitern


      <ftui-content [content]="dummy:svg"></ftui-content>


Code Auswählen Erweitern


      <div ftui-binding [svg]="dummy:svg | v=>this.element.innerHTML=v"></div>

Beide sehen gleich aus im View.

Deine Fhemfunktion rufst du zB. so auf im label oÄ:

Code Auswählen Erweitern


@click='sendFhem(`{getSVGuiTable("","DI_2");;}`)'

Kannst es überall anwenden....
Wichtig sind hier die Backquotes...

LG

Edit:
Wenn du noch die Größe ändern willst, könntest du es so machen:

Code Auswählen Erweitern


<div ftui-binding [svg]="dummy:svg | v=>{this.element.innerHTML=v,this.element.firstChild.attributes.style.nodeValue='width:130px; height:130px;'}"></div>

Bild angehangen...

[Adimarantis]

Danke für deine Antwort.
Vielleicht stehe ich jetzt auf dem Schlauch, aber

Code Auswählen Erweitern

<ftui-content [content]="dummy:svg"></ftui-content>
erwartet in "content" doch einen Dateinamen, oder?
Der Inhalt meines readings ist ja sowas wie <svg .....>....</svg>.
Zumindest klappt das bei mir nicht (auf beide Varianten nicht).

Das @click führt jetzt ja nur beim Draufklicken aus - gut für Proof of Concept reicht das. Vielleicht gibt es ja eine Möglichkeit das periodisch auszuführen.
Problemstellung ist hier wieder, dass ich den Rückgabewert der Funktion (=string mit "<svg>...<svg>") direkt dargestellt bräuchte. Der wird aber denke ich ignoriert.

Was jetzt soweit schon mal gut funktioniert ist eine .svg Datei erzeugen zu lassen (was man mit AT, DOIF & co ja periodisch machen kann).

Code Auswählen Erweitern

saveSVGuiTable("www/ftui/uitable.svg","DI_collect,val=Diesel");

Das Skalierungsproblem hab ich jetzt auch im Griff (ich filtere vorher die Tags raus mit denen DOIF eine feste Größe vorgibt).
Diese Datei dann als image oder icon einbetten.

Code Auswählen Erweitern

     <ftui-grid-tile row="6" col="10" height="4" width="5" shape="round">
    <header>uiTable Icon</header>
        <ftui-icon name="uitable" path="./" color="dark" size="11"></ftui-icon>
      </ftui-grid-tile>

      <ftui-grid-tile row="6" col="4" height="4" width="5" shape="round">
    <header>uiTable Image</header>
        <ftui-image src="http://192.168.1.108:8083/fhem/ftui/uitable.svg" interval="1" nocache></ftui-icon>
      </ftui-grid-tile>

Nachteil von Icon:
- Manuelle Skalierung mit "size"
- Hauptfarbe wird überschrieben
- Kein Automatisches update via interval

Nachteil von Image:
- URL benötigt (geht dann wahrscheinlich nicht remote)

Ergebnis im Anhang.

[mr_petz]

mein list vom dummy sieht so aus:

Code Auswählen Erweitern


Internals:
   DEF       
   FUUID      634546e7-f33f-f2a1-f8ab-b43effc1b8f67eb5
   NAME       dummy
   NR         14
   STATE      svg xmlns="http
   TYPE       dummy
   eventCount 19
   READINGS:
     2022-10-27 10:25:13   state           svg xmlns="http
     2022-10-27 11:54:15   svg             <svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 75" width="63" height="75" style="width:63px; height:75px;"><defs><linearGradient id="gradbarfont" x1="0" y1="1" x2="0" y2="0"><stop offset="0" style="stop-color:white;stop-opacity:0.3"/><stop offset="1" style="stop-color:rgb(255, 255, 255);stop-opacity:0.1"/></linearGradient><linearGradient id="gradbackg" x1="0" y1="0" x2="1" y2="0"><stop offset="0" style="stop-color:rgb(255,255,255);stop-opacity:0.3"/><stop offset="1" style="stop-color:rgb(0, 0, 0);stop-opacity:0.3"/></linearGradient><linearGradient id="gradbackbar" x1="0" y1="1" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(32,32,32);stop-opacity:0.9"/><stop offset="1" style="stop-color:rgb(64, 64, 64);stop-opacity:0.9"/></linearGradient><linearGradient id="gradbar_196_40_-1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:hsl(196,100%,70%);stop-opacity:1"/><stop offset="1" style="stop-color:hsl(40,100%,50%);stop-opacity:0.5"/></linearGradient></defs><rect x="11" y="0" width="60" height="75" rx="2" ry="2" fill="url(#gradbackbar)"/><g transform="translate(0,-1)"><text x="23" y="10" style="fill:hsl(260,100%,70%);font-size:9px;">100</text><text x="23" y="74" style="fill:hsl(40,100%,50%);font-size:9px;">0</text><rect x="15" y="27" width="5" height="44" rx="1" ry="1" fill="url(#gradbar_196_40_-1)"/><rect x="15" y="6" width="5" height="65" rx="1" ry="1" fill="url(#gradbackg)"/><g transform="translate(34.5, 15) translate(11, 11) scale(1) translate(-11, -11) rotate(0,11,11) "><svg class=" temperature_humidity hsl(196,100%,70%)" data-txt="temperature_humidity@hsl(196,100%,70%)"    xmlns:dc="http://purl.org/dc/elements/1.1/"    xmlns:cc="http://creativecommons.org/ns#"    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"    xmlns:svg="http://www.w3.org/2000/svg"    xmlns="http://www.w3.org/2000/svg"    version="1.0"    width="22"    height="22"    viewBox="0 0 468 590"    id="svg2">   <defs      id="defs18" />   <metadata      id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:RDF>   <cc:Work      rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type        rdf:resource="http://purl.org/dc/dcmitype/StillImage" />     <dc:title></dc:title>   </cc:Work> </rdf:RDF> </metadata>   <g      transform="matrix(0.2,0,0,-0.2,0,590)"      id="g6"      fill="hsl(196,100%,70%)" stroke="none">     <path        d="m 1904,2572 c -72,-46 -140,-165 -235,-417 -51,-135 -53,-144 -54,-240 0,-121 18,-167 95,-249 225,-238 623,-79 622,249 0,56 -8,93 -41,187 -83,237 -152,376 -223,444 -46,46 -114,57 -164,26 z m 99,-154 c 71,-94 197,-420 197,-508 0,-86 -65,-179 -147,-211 -46,-18 -135,-13 -179,9 -90,46 -129,108 -128,207 0,59 8,90 48,195 79,206 149,340 176,340 5,0 20,-15 33,-32 z"        id="path12" />     <path        d="m 1504,1241 c -68,-41 -139,-167 -232,-411 -54,-140 -56,-148 -56,-245 -1,-90 2,-106 27,-156 75,-154 262,-240 423,-195 68,20 152,73 187,119 66,87 97,200 78,288 -19,91 -89,278 -152,405 -74,152 -133,214 -201,214 -24,0 -56,-8 -74,-19 z m 100,-154 c 66,-86 187,-395 194,-492 3,-51 0,-68 -25,-115 -43,-81 -94,-114 -187,-118 -59,-3 -81,0 -113,17 -87,44 -144,151 -128,239 18,99 142,397 197,475 25,35 32,34 62,-6 z"        id="path14" />     <g        transform="matrix(0.8651452,0,0,0.9679424,184.97789,35.389924)"        id="g6-8"        fill="hsl(196,100%,70%)" stroke="none">       <path          d="m 225,2939 c -17,-4 -46,-25 -65,-44 L 125,2859 122,1806 120,752 91,747 C 73,743 50,726 33,704 L 5,667 2,391 C -1,82 2,68 69,23 102,0 107,0 409,0 c 343,0 356,2 396,70 18,32 20,55 23,287 2,167 -1,266 -8,294 -13,47 -61,99 -91,99 -19,0 -19,26 -19,1035 0,1114 2,1073 -51,1122 -13,11 -42,26 -64,32 -47,13 -326,13 -370,0 z m 345,-789 0,-660 -155,0 -155,0 0,660 0,660 155,0 155,0 0,-660 z"          id="path8" />       <path          d="m 790,2783 c -44,-16 -55,-91 -18,-117 18,-13 52,-16 164,-16 142,0 143,0 163,26 27,35 26,59 -4,89 -23,24 -29,25 -157,24 -73,0 -140,-3 -148,-6 z"          id="path10" />       <path          d="m 785,2248 c -28,-16 -35,-28 -35,-64 0,-57 19,-64 181,-64 159,0 175,5 185,55 4,22 0,38 -14,55 -19,24 -25,25 -159,28 -92,1 -145,-2 -158,-10 z"          id="path12-8" />       <path          d="m 772,1694 c -26,-18 -30,-69 -8,-100 13,-17 29,-19 146,-22 73,-2 143,-1 156,2 51,13 67,81 28,120 -23,23 -289,23 -322,0 z"          id="path14-2" />       <path          d="m 772,1124 c -16,-11 -22,-25 -22,-54 0,-63 19,-70 183,-70 133,0 139,1 162,25 14,13 25,34 25,45 0,12 -11,32 -25,45 -23,24 -29,25 -162,25 -109,0 -143,-3 -161,-16 z"          id="path16" />     </g>   </g> </svg></g><text text-anchor="middle" x="46" y="53" style="fill:hsl(196,100%,70%)"><tspan style="font-size:16px;font-weight:bold;">68</tspan></text><text text-anchor="middle" x="46" y="64" style="fill:hsl(196,100%,70%)"><tspan style="font-size:10px;">%</tspan></text></g></svg>
Attributes:
   room       Dummy´s
   setList    20 21 21.5 21.25 23.99


im Raw definition sind die ; => ;;
Ich hatte einfach die svg von dir genommen und die ; durch ;; ersetzt,
und mit setreading in den dummy ins svg geschrieben.

[content] => fetcht
file = file

könnte dir das noch anbieten als intervalfunktion:

Code Auswählen Erweitern


<ftui-content [content]="dummy:svg | v=>{setInterval(()=>fhemService.sendCommand(`{getSVGuiTable('xxx','DI_2')}`), 10000),this.element.innerHTML=v}"></ftui-content>


[Adimarantis]

Danke. Mit meinem ersten SVG Beispiel kann ich das jetzt auch nachvollziehen. Also geht es zumindest mal prinzipiell.
Ich hatte es mit dem etwas komplexeren "Diesel" Beispiel versucht (attached). Das hatte eben nicht geklappt.
Wenn ich allerdings alles nochmal in extra <svg> </svg> Tags einbette geht es plötzlich. Eine Idee warum?
Denn die Version funktioniert dann mit ftui-image wieder nicht mehr.
Allerdings nur mit deiner Methode, wenn ich es mir direkt in die Readings schreibe, dann ist irgendwas wieder anders...

Bliebe noch die Premium Variante in der man den Funktion-Call einbetten kann, damit man weder Reading noch Zwischendatei braucht.
Bin mir jetzt nicht sicher, ob ich richtig verstanden habe wo man diesen Perlaufruf überall einbetten kann.
Ginge das auch im ftui-content?

Danke
Jörg

[mr_petz]

Zum Nachstellen müsstest du schon mehr vorzeigen und oder Dateien bereitstellen, wegen dem extra <svg>.
Ja du kannst eigentlich das @click überall verwenden und einen js-Code reinschreiben...
Im ftui-content ist der ganze content dann cklickbar (pointerevent).
LG

[Adimarantis]

Sorry, hatte mich beim Attachment verklickt. Das "Problem-SVG" hängt jetzt an.

Das @click triggert ja nur den Funktionsaufruf. Für die Variante die als return-code dann das SVG als String zurückliefert, müsste eben dieser return-code "angezeigt" werden.
Ich könnte das @click also nach meinem Verständnis nur nutzen um Benutzergesteuert ein neues Reading oder File zu erzeugen.
Was ich suche ist eine Möglichkeit "on load" und dann periodisch wieder (wie beim image interval) eine Funktion aufzurufen und deren Rückgabewert darzustellen.
Quasi:

Code Auswählen Erweitern

        <ftui-image src="sendFhem(`{getSVGuiTable("","DI_2");;}`)" interval="1" nocache></ftui-image>

Edit: Ich denke ich habs gefunden. Hatte was mit dem € Zeichen zu tun. Noch ein

Code Auswählen Erweitern

$svgdata=encode_utf8($svgdata);
und es geht über das reading.

[mr_petz]

Also bei mir wird es auch dargestellt im content wie beim ersten.
Nur die Semikolons doppelt gesetzt.
LG

ps.
Hast du das getestet?:

Code Auswählen Erweitern


<ftui-content [content]="dummy:svg | v=>{setInterval(()=>fhemService.sendCommand(`{getSVGuiTable('xxx','DI_2')}`), 10000),this.element.innerHTML=v}"></ftui-content>

Hier brauchst du zwar den dummy mit reading, aber es läuft der Interval von 10sec mit deiner Funktion...
Und bei event-on-change wird das Bild auch neu geschrieben...

Edit: und kannst du auch die table als html holen?:
https://forum.fhem.de/index.php/topic,115259.msg1212122.html#msg1212122

[Adimarantis]

Cool. Nahezu perfekt:

Code Auswählen Erweitern

<ftui-label [text]="xxx | sendCommand(`{getSVGuiTable('','DI_collect,val=Diesel')}`)"></ftui-label>
funktioniert.

Jetzt müsste man das nur noch Skalieren können - kommt irgendwie immer in der selben Größe an und orientiert sich nicht an der Zelle, wie image es tut.

Dein Copy&Paste und setreading korrigiert übrigens anscheinend die Sonderzeichenkodierung. Ich schreibe es direkt von meiner Funktions ins reading, daher brauche ich wohl die utf8 Umwandlung.

[mr_petz]

...
Jetzt müsste man das nur noch Skalieren können - kommt irgendwie immer in der selben Größe an und orientiert sich nicht an der Zelle, wie image es tut.
...

Das wird an den Einträgen in der svg liegen:

Code Auswählen Erweitern


<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 75" width="63" height="75" style="width:63px; height:75px;">

Wenn du hier nicht mit style="" arbeitest, sondern eine class mitgiebst, kannst du es besser an ftui anpassen....
LG

[Adimarantis]

Weil DOIF uiTable eben diese fixen width/height Einträge macht, filtere ich die inzwischen weg, bevor ich es an FTUI weitergebe.
D.h. es schaut jetzt nur noch so aus:

Code Auswählen Erweitern

<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 75">
Das klappt in der Variante über die Datei via image super - der skaliert es sauber hoch.
Beim Icon klappt es auch einigermassen, muss man eben manuell mit "size" einstellen.

Nur in der  ftui-label Variante

<ftui-label [text]="xxx | sendCommand(`{getSVGuiTable('','DI_collect,val=Diesel')}`)"></ftui-label>

habe ich keinen Weg gefunden sauber zu skalieren.
Bin jetzt leider mit HTML und SVG nicht so bewandert, daher stelle ich mich hier jetzt ein wenig an. Ich verarbeite nur was ich vom DOIF bekomme.
Genauso wie ich die width/height Parameter rauswerfe, könnte ich diese natürlich verändern oder ein anderes Tag (transform?) einflechten, welches das SVG skaliert. Einen Zoom Faktor könnte man dann im Aufruf mitgeben, also z.B.

<ftui-label [text]="xxx | sendCommand(`{getSVGuiTable('','DI_collect,val=Diesel,zoom=200')}`)"></ftui-label>

für auf 200% vergrößern.

[Adimarantis]

So, ich denke es funktioniert genug, dass es gerne auch mal andere ausprobieren können.
Ich werde die Version jetzt mal noch nicht ins fhem svg legen.
Einfach das aktuelle Signalbot Modul von
https://github.com/bublath/FHEM-Signalbot/blob/main/50_Signalbot.pm
holen, die aktuelle Version überschreiben und mit "reload 50_Signalbot" aktivieren.
Es sollte IMHO nicht nötig sein ein Device anzulegen, allein durch die Einbindung des Moduls sollten die Funktionen verfügbar sein.

Folgende Optionen:

Code Auswählen Erweitern

getSVGuiTable("<DOIF device und parameter>");
readSVGuiTable("<DOIF device und parameter>","<device:reading>");
saveSVGuiTable("<DOIF device und parameter>","<filename>);

<DOIF device und parameter>:
Das Format ist im Signalbot Wiku unter https://wiki.fhem.de/wiki/Signalbot#Details_zum_Versenden_von_Plots beschrieben.
Im einfachsten Fall (nur ein uiTable pro DOIF device) reicht es den Namen des DOIF Device anzugeben.

<device:reading>:
Ein Device und Reading in das die SVG Daten geschrieben werden sollen

<filenname>:
Dateiname relativ zum FHEM Homedirectory in das das SVG als Datei geschrieben werden soll. Damit FTUI/FHEMWEB darauf zugreifen kann sollte das unter "www" liegen.

Achtung: sollen die Funktionen in einem DOIF (z.B. periodisch oder getriggert verwendet werden, dann ist noch package main; anzugeben - also z.B.

Code Auswählen Erweitern

([+:5] ({
package main;
readSVGuiTable("DI_collect,val=Diesel","dummy:svg");
saveSVGuiTable("DI_collect,val=Diesel","www/ftui/uitable.svg");
})


in FTUI gibt es dann folgende Anwedungsmöglichkeiten:

Code Auswählen Erweitern

<ftui-label [text]="dummy| sendCommand(`{getSVGuiTable('DI_collect,val=Diesel')}`)"></ftui-label>
<ftui-icon name="uitable" path="./" color="dark" size="11"></ftui-icon>
<ftui-image src="http://192.168.1.108:8083/fhem/ftui/uitable.svg" interval="1" nocache></ftui-icon>

Das Beste Ergebnis erzielt meiner Ansicht nach derzeit die Variante mit ftui-image, da sie schön skaliert und sich automatisch aktualisiert.
Meine bevorzugte Variante wäre mit "sendCommand", da hier weder eine Datei noch ein Reading benötigt wird, allerdings klappt hier die Aktualisierung und Skalierung noch nicht so. Hilfreiche Anregungen sind willkommen.

Viel Spass beim Ausprobieren.

Gruß,
Jörg

[Damian]

Man kann inzwischen statt uiTable das Attribut uiState nutzen. Dann hat man die Tabelle im Status des DOIFs und braucht kein zusätzliches Reading.

[Adimarantis]

Man kann inzwischen statt uiTable das Attribut uiState nutzen. Dann hat man die Tabelle im Status des DOIFs und braucht kein zusätzliches Reading.

uiState wird unterstützt - einfach noch "state" an die Liste der Optionen anhängen. z.B.

Code Auswählen Erweitern

saveSVGuiTable("DI_collect,val=Diesel,state","www/ftui/uitable.svg");

Zu Weihnachten wünsche ich mir von dir dann eine API in DOIF um die SVG's einfach abzuholen ohne sie aus internen Strukturen (die sich ändern könnten) rauszupfriemeln

[Damian]

Wäre es nicht besser für FTUI3 den Inhalt einer Zelle der Tabelle jeweils zu visualisieren und nicht die ganze Tabelle?

Das sollte auch mit card funktionieren. Bsp:

Code Auswählen Erweitern

defmod di_devstaticon DOIF ##
attr di_devstaticon devStateIcon {ui_Table::card(ReadingsVal("di_devstaticon","co2",0),undef,"air\@silver",400,1200,120,0,"ppm",[(600,120,1000,60,1200,0)],"0,,fill:silver","130,,1,0,1",'0,,1')}
attr di_devstaticon event_Readings co2:[MQTT2_DVES_D90D08:MHZ19B_CarbonDioxide:col3d]

Wenn es mit devStateIcon funktioniert: dann muss es auch in FTUI3 funktionieren. Die Größe der Grafik lässt sich direkt im Aufruf angeben (hier: 130)

Das DOIF hier mit dem Attribut event_Readings muss dennoch definiert sein, damit dort die Daten gesammelt werden.