SVG-uiTable-Funktionen (DOIF-Web-Interface)

[mumpitzstuff]

Weil mich das Feature mal interessiert hat und ich ein Gefühl dafür kriegen möchte wie sich damit was umsetzen lässt. Es ist dann immer ganz angenehm, wenn sich Ergebnisse vergleichen lassen... Wenn ich den Dreh mal raus habe, kann ich mir mehr solcher Dinge basteln, für die noch kein Gegenstück existiert. Außerdem konnte ich damit zumindest eine Routine aus den myUtils raus werfen, sowas mag ich nicht sonderlich.

[Damian]

Du kannst eine Tabelle mit gleich strukturierten Zeilen viel einfacher definieren, wenn du dir zuvor ein Template definierst  z. B.:

Code Auswählen Erweitern

## Template-Definition für eine Zeile
DEF TPL_Abfall (style([ABFALL_LEERUNG:$1_weekday], textColor([ABFALL_LEERUNG:$1_days]))|
style(convDate([ABFALL_LEERUNG:$1_date], [ABFALL_LEERUNG:$1_days]), textColor([ABFALL_LEERUNG:$1_days]))|
style([ABFALL_LEERUNG:$1_text], textColor([ABFALL_LEERUNG:$1_days]))|
ic("dustbin\@$2", [ABFALL_LEERUNG:$1_days], [ABFALL_LEERUNG:$1_daysnext]))

## Tabellendefinition
TPL_Abfall (Restmuell,red)
TPL_Abfall (Rund,green)
TPL_Abfall (Flach,limegreen)
TPL_Abfall (Biogut,yellow)


oder Tabellendefinition als Einzeiler:

Code Auswählen Erweitern

FOR (qw(Restmuell,red Rund,green Flach,limegreen Biogut,yellow),TPL_Abfall($_))

[mumpitzstuff]

Oh. Schönes Feature. Vielen Dank!

[xenos1984]

In der Funktion ui_Table::bar scheint sich ein Fehler in der SVG-Syntax eingeschlichen zu haben, und zwar in dieser Zeile:

Code Auswählen Erweitern

4087   $out.= sprintf('<text text-anchor="end" x="%d" y="%d" style="fill:%s";><tspan style="font-size:18px;font-weight:bold;">%s</tspan><tspan dx="2" style="font-size:10px">%s</tspan></text>',$bwidth+6, $height/2+11,color($currColor),sprintf($format,$value),$unit);
Das Semikolon vor dem ersten > (Ende des öffnenden Tags von text) gehört da nicht hin. Das sollte wohl vor das Anführungszeichen? FireFox und RSVG beschweren sich.

[Damian]

In der Funktion ui_Table::bar scheint sich ein Fehler in der SVG-Syntax eingeschlichen zu haben, und zwar in dieser Zeile:

Code Auswählen Erweitern

4087   $out.= sprintf('<text text-anchor="end" x="%d" y="%d" style="fill:%s";><tspan style="font-size:18px;font-weight:bold;">%s</tspan><tspan dx="2" style="font-size:10px">%s</tspan></text>',$bwidth+6, $height/2+11,color($currColor),sprintf($format,$value),$unit);
Das Semikolon vor dem ersten > (Ende des öffnenden Tags von text) gehört da nicht hin. Das sollte wohl vor das Anführungszeichen? FireFox und RSVG beschweren sich.

Danke, ich werde es beheben.

[mumpitzstuff]

Ich habe jetzt versucht mein TV Programm mit DOIF darzustellen und verwende dabei in mehreren Zellen diese Funktion:

Code Auswählen Erweitern

sub rgUnfold
  {
    my ($title, $desc) = @_;
    $title = 'na' if (!defined($title));
    $desc = 'na'."\n\n".'na' if (!defined($desc));

    $title =~ s/(.{1,45}|\S{46,})(?:\s[^\S\r\n]*|\Z)/$1<br>/g;
    $desc =~ s/<br>/\n/g;
    $desc =~ s/(.{1,65}|\S{66,})(?:\s[^\S\r\n]*|\Z)/$1<br>/g;
    $desc =~ s/[\r\'\"]/ /g;
    $desc =~ s/[\n]|\\n/<br>/g;
    return "<a href=\"#!\" onclick=\"FW_okDialog('".$desc."')\">".$title."</a>";
  }

Dummerweise wird die erste Zeile eines Linktextes eingerückt, nachfolgende Zeilen aber nicht. Am FHEM Style kann es irgendwie nicht liegen, da DOIF und readingsgroup Tabelle auf der selben Seite dargestellt werden und die Links ebenfalls gleich generiert werden. Bei der Readingsgroup wird bei den Links nicht die erste Zeile eingerückt. Ich vermute das hier irgendein DOIF Style da was überlagert, finde aber nicht entsprechendes.

[Damian]

Du müsstest im Browser den Code analysieren. Ich vermute, dass es mit der style-Funktion zusammenhängt. Die style-Funktion kann man auch direkt mit HTML-Code abbilden, dann müsste das Problem sich beheben lassen.

[Damian]

Du müsstest im Browser den Code analysieren. Ich vermute, dass es mit der style-Funktion zusammenhängt. Die style-Funktion kann man auch direkt mit HTML-Code abbilden, dann müsste das Problem sich beheben lassen.

Teste mal die Version im Anhang. Ich habe das style-Attribut display:inline gegen display:inline-table ersetzt.

[mumpitzstuff]

Die style Funktion benutze ich gar nicht:

Code Auswählen Erweitern

{
  package ui_Table;

  $SHOWNOSTATE=1;

  $TR{0} = "style='color:yellow;text-align:center;font-weight:bold;'";
  $TD{0..29}{0,2,4} = "style='border-right-style:solid;border-color:#CCCCCC;align:left;'";

  sub rgUnfold
  {
    my ($title, $desc) = @_;
    $title = 'na' if (!defined($title));
    $desc = 'na'."\n\n".'na' if (!defined($desc));

    $title =~ s/(.{1,45}|\S{46,})(?:\s[^\S\r\n]*|\Z)/$1<br>/g;
    $desc =~ s/<br>/\n/g;
    $desc =~ s/(.{1,65}|\S{66,})(?:\s[^\S\r\n]*|\Z)/$1<br>/g;
    $desc =~ s/[\r\'\"]/ /g;
    $desc =~ s/[\n]|\\n/<br>/g;
    return "<a href=\"#!\" onclick=\"FW_okDialog('".$desc."')\">".$title."</a>";
  }
}

DEF TPL_TV(ICON("tv/$3")|[$1:next_$2_000_btime]|rgUnfold([$1:next_$2_000_title],[$1:next_$2_000_stitle]."\n\n".[$1:next_$2_000_desc])|[$1:next_$2_001_btime]|rgUnfold([$1:next_$2_001_title],[$1:next_$2_001_stitle]."\n\n".[$1:next_$2_001_desc])|[$1:next_$2_002_btime]|rgUnfold([$1:next_$2_002_title],[$1:next_$2_002_stitle]."\n\n".[$1:next_$2_002_desc]))

"Sender"|"ab"|"Aktuelle Sendung"|"ab"|"Nächste Sendung"|"ab"|"Sendung"
"test"|"12:00"|"test1<br>test2<br>test3"|"13:00"|"test"|"14:00"|"test"
TPL_TV(dmy_TV,ARD,ard)
TPL_TV(dmy_TV,ZDF,zdf)
TPL_TV(dmy_TV,Sat1,sat1)
TPL_TV(dmy_TV,RTL,rtl)
TPL_TV(dmy_TV,RTL2,rtl2)
TPL_TV(dmy_TV,Pro7,pro7)
TPL_TV(dmy_TV,DMax,dmax)
TPL_TV(dmy_TV,Vox,vox)
TPL_TV(dmy_TV,Kabel,kabel1)
TPL_TV(dmy_TV,KabelEinsClassic,kabel1classic)
TPL_TV(dmy_TV,13thStreet,13thstreet)
TPL_TV(dmy_TV,Silverline,silverline)
TPL_TV(dmy_TV,TNTFilm,tntfilm)
TPL_TV(dmy_TV,AXN,axn)
TPL_TV(dmy_TV,SonyEntertainmentTV,sonytv)
TPL_TV(dmy_TV,Kinowelt,kinowelt)
TPL_TV(dmy_TV,ProSiebenMaxx,pro7maxx)
TPL_TV(dmy_TV,Sixx,sixx)
TPL_TV(dmy_TV,TNTSerie,tntserie)
TPL_TV(dmy_TV,SciFi,syfy)
TPL_TV(dmy_TV,ntv,ntv)
TPL_TV(dmy_TV,N24Doku,n24)
TPL_TV(dmy_TV,History,history)
TPL_TV(dmy_TV,PLANET,planet)
TPL_TV(dmy_TV,KabelEinsDoku,kabel1doku)
TPL_TV(dmy_TV,AnimalPlanet,animalplanet)
TPL_TV(dmy_TV,NatGeoHD,natgeo)
TPL_TV(dmy_TV,TLC,tlc)
TPL_TV(dmy_TV,AandE,ae)

Eins ist mir aber schon mal aufgefallen. Binde ich z.B. eine Uhrzeit mittels Reading ein mit:

Code Auswählen Erweitern

[dmy_TV:next_RTL_000_btime]

dann ist im HTML Code die Formatierung so:

Code Auswählen Erweitern

<td><div class="dval" doifid="doif_TVNEXT_uiTable_c_5_5_0_0" style="display:inline;">00:55:00</div></td>

Binde ich das ganze als normalen Text ein:

Code Auswählen Erweitern

"00:55:00"

dann sieht das so aus:

Code Auswählen Erweitern

<td>00:55:00</td>

Durch das zusätzlich eingefügte div wird der Text oder Link dann irgendwie komisch eingerückt.

Im Bild sieht man oben die Uhrzeit als Reading eingebunden ([...]) und unten als normaler Text ("...").

[mumpitzstuff]

Mit der Version hat sich leider nichts geändert. Im HTML Code steht aber auch immer noch:

Code Auswählen Erweitern

style="display:inline;"

Vermutlich fehlt in der Funktion DOIF_Widget_Register noch etwas...

PS: Habs jetzt mal wieder besseren Wissens in den Funktionen DOIF_Widget_Update und DOIF_Widget_Register ersetzt und jetzt sieht es gut aus. Die Einrückung ist komplett verschwunden. Damit klebt dann aber auch der Text direkt am Border dran (siehe untere Uhrzeit im Bild vom Beitrag davor). Das wird man vermutlich aber mit Styles lösen können. Zur Sicherheit sollte aber normaler Text ebenfalls mit dem zusätzlichen div versehen werden, nur um Unterschiede auszuschliessen.

[Damian]

Mit der Version hat sich leider nichts geändert. Im HTML Code steht aber auch immer noch:

Code Auswählen Erweitern

style="display:inline;"

Vermutlich fehlt in der Funktion DOIF_Widget_Register noch etwas...

PS: Habs jetzt mal wieder besseren Wissens in den Funktionen DOIF_Widget_Update und DOIF_Widget_Register ersetzt und jetzt sieht es gut aus. Die Einrückung ist komplett verschwunden. Damit klebt dann aber auch der Text direkt am Border dran (siehe untere Uhrzeit im Bild vom Beitrag davor). Das wird man vermutlich aber mit Styles lösen können. Zur Sicherheit sollte aber normaler Text ebenfalls mit dem zusätzlichen div versehen werden, nur um Unterschiede auszuschliessen.

Ich habe jetzt auch die restlichen display:inline auf display:inline-table umgestellt. Dann wollen wir hoffen, dass sich keiner beschwert

Einrückungen bei div sind normal und dürften vom FHEM-Style abhängen.

[mumpitzstuff]

Ich bin jetzt wieder zurück auf den dark Style gegangen, anstatt den f18 Style zu verwenden. Bei letzterem sieht alles einfach irgendwie extrem bescheiden aus. Das scheint aber vielfach am Style und nicht an uiTable zu liegen.

Das lag wirklich am f18 Style. Dort ist anders als im darkmode Style generell bei allen TD margin auf 0 gesetzt. Mit folgenden Additional CSS Settings kann man das Bild dann wieder dem darkmode angleichen und dann sieht das Ganze schon viel brauchbarer aus, ohne jede uiTable mühsam anpassen zu müssen:

Code Auswählen Erweitern

body.touch a { font-size: 16px; }
body.touch #menu { font-size: 16px; } /* for the menuTree icon */
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }

[Damian]

Ich habe die neue DOIF-Version mit display:inline-table eingecheckt. Damit ist das Layout einheitlich bei Zeilenumbrüchen innerhalb einer Zelle. Möchte man Abstände zwischen den Zellen definieren, dann ist die vorgeschlagene Lösung über Additonal CSS für f18-Style die einfachste Vorgehensweise. Ansonsten kann man innerhalb einer uiTable-Definition Style-Attribute für bestimme Zellen mit Hilfe der CSS-Variablen $TC oder $TD separat definieren, siehe: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#CSS-Variablen_und_Steuerungsattribute

z. B.

Code Auswählen Erweitern

attr di_myDOIF uiTable {package ui_Table;
## für alle Zellen der Spalten 1 bis 4 Abstände definieren
$TC{0..3} ="style='padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;'";
}

[mumpitzstuff]

Bei SVG-uiTable-Funktion bar fehlt im Wiki auf der rechten Seite die Beschreibung von $header.

Könnte man darüber hinaus bei den ganzen Widgets auch einen String als default Wert zulassen, vorzugsweise "na"? Momentan wird "na" zu 0.0.
Das hätte den Vorteil, das ich sofort sehen würde, wenn ein Sensor ausgefallen ist und das nicht anhand des unplausiblen Wertes erraten müsste.

[Damian]

Bei SVG-uiTable-Funktion bar fehlt im Wiki auf der rechten Seite die Beschreibung von $header.

Könnte man darüber hinaus bei den ganzen Widgets auch einen String als default Wert zulassen, vorzugsweise "na"? Momentan wird "na" zu 0.0.
Das hätte den Vorteil, das ich sofort sehen würde, wenn ein Sensor ausgefallen ist und das nicht anhand des unplausiblen Wertes erraten müsste.

Doku habe ich angepasst. Da nur Zahlen zulässig sind, kann ich na als default einbauen, kommt dann ins nächste Update.