Autor Thema: SVG-uiTable-Funktionen (DOIF-Web-Interface)  (Gelesen 1219 mal)

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen
« Antwort #15 am: 15 Mai 2020, 14:55:22 »
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.

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen
« Antwort #16 am: 15 Mai 2020, 22:40:42 »
Du kannst eine Tabelle mit gleich strukturierten Zeilen viel einfacher definieren, wenn du dir zuvor ein Template definierst  z. B.:

## 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:

FOR (qw(Restmuell,red Rund,green Flach,limegreen Biogut,yellow),TPL_Abfall($_))
« Letzte Änderung: 15 Mai 2020, 23:01:26 von Damian »
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen
« Antwort #17 am: 16 Mai 2020, 01:08:32 »
Oh. Schönes Feature. Vielen Dank!

Offline xenos1984

  • Full Member
  • ***
  • Beiträge: 138
Antw:SVG-uiTable-Funktionen
« Antwort #18 am: 18 Mai 2020, 21:43:56 »
In der Funktion ui_Table::bar scheint sich ein Fehler in der SVG-Syntax eingeschlichen zu haben, und zwar in dieser Zeile:
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.

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen
« Antwort #19 am: 18 Mai 2020, 21:50:49 »
In der Funktion ui_Table::bar scheint sich ein Fehler in der SVG-Syntax eingeschlichen zu haben, und zwar in dieser Zeile:
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.
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #20 am: 23 Mai 2020, 23:11:19 »
Ich habe jetzt versucht mein TV Programm mit DOIF darzustellen und verwende dabei in mehreren Zellen diese Funktion:

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.

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #21 am: 23 Mai 2020, 23:21:22 »
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.
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #22 am: 23 Mai 2020, 23:56:39 »
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.
« Letzte Änderung: 24 Mai 2020, 07:39:51 von Damian »
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #23 am: 24 Mai 2020, 00:36:15 »
Die style Funktion benutze ich gar nicht:

{
  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:

[dmy_TV:next_RTL_000_btime]
dann ist im HTML Code die Formatierung so:

<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:

"00:55:00"
dann sieht das so aus:

<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 ("...").

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #24 am: 24 Mai 2020, 00:37:09 »
Mit der Version hat sich leider nichts geändert. Im HTML Code steht aber auch immer noch:

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.
« Letzte Änderung: 24 Mai 2020, 01:18:59 von mumpitzstuff »

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #25 am: 24 Mai 2020, 07:39:06 »
Mit der Version hat sich leider nichts geändert. Im HTML Code steht aber auch immer noch:

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.
« Letzte Änderung: Gestern um 16:10:51 von Damian »
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

Offline mumpitzstuff

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1693
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #26 am: Gestern um 01:20:35 »
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:

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 }
« Letzte Änderung: Gestern um 02:04:50 von mumpitzstuff »

Online Damian

  • Moderator
  • Hero Member
  • ***
  • Beiträge: 7237
Antw:SVG-uiTable-Funktionen (DOIF-Web-Interface)
« Antwort #27 am: Gestern um 16:17:28 »
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.
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;'";
}
« Letzte Änderung: Gestern um 16:42:27 von Damian »
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-Web, THRESHOLD, FHEM-Befehl: IF

 

decade-submarginal