neue svg-Funktionen: icon_ring, icon_bar, cylinder_bars, icon_ring2

[Damian]

Den Tabellenhintergrund kann ich ändern. Ist es auch möchlich die Farbe im Inneren z.B. eines rings zu ändern - also nicht nur schwarz?

Ist z. Zt. nicht vorgesehen. Die meisten svg-Funktionen bestimmen die Farbe der Werte, Ringe, Balken, Icons selbstständig aufgrund des Wertes (z. B. temp, hum) und da sind viele Farben (z.B. Gelb) auf hellem Hintergrund nicht gut zu erkennen.

Wer die svg-Funktionen nutzen möchte, sollte über einen dunklen Style nachdenken - dunkle Style sind aus gutem Grund wieder modern

[Damian]

So würde ein light-Style aussehen. Manche Farben sind, wie schon gesagt, nicht gut erkennbar.

[xenos1984]

Ich habe mir die Skalierung der Icons noch mal angeschaut. Es liegt nicht am Hintergrund, sondern an der definierten Größe des Icons. Das Icon wird im Ring in ein Rechteck mit 22x22 Pixeln skaliert. Dazu wird mit viewBox eine Größe definiert. Diese müsste mit der originalen Größe des Icons übereinstimmen, die aber an der Stelle nicht bekannt ist. Die Frage nach der automatischen Skalierung habe ich schon mal hier gestellt:

http://forum.fhem.de/index.php/topic,118329.msg1127687.html#msg1127687

leider ohne Antwort.

Ich werde damit auch mal ein wenig rumprobieren. Ich habe zwar schon einiges mit SVG gemacht, aber symbol habe ich bisher nicht benutzt bzw. auf diese Weise SVG aus anderen Quellen eingebunden. Eigentlich sollte das doch machbar sein...

Wenn ein Icon nicht hineinpasst, dann ist sein Hintergrund größer als das Icon selbst. Das lässt sich über Skalierung und Position anpassen, siehe Doku: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Feuchtigkeitsanzeige_mit_Hilfe_der_SVG-Funktionen_icon_hum_ring.2Ficon_hum_mring

Von Hand geht es. Ich hatte gehofft, du hättest schon eine Lösung für o.g. Problem gefunden - und bevor ich nun alle Icons einzeln skaliere...

Fehlende Icons sind selbstgebastelt.

Würde es dir etwas ausmachen, die ins SVN einzuchecken? Da ist bestimmt das eine oder andere interessante Fall dabei, und stilistisch passen die gut zu den übrigen.

[Damian]

Ich werde damit auch mal ein wenig rumprobieren. Ich habe zwar schon einiges mit SVG gemacht, aber symbol habe ich bisher nicht benutzt bzw. auf diese Weise SVG aus anderen Quellen eingebunden. Eigentlich sollte das doch machbar sein...

Von Hand geht es. Ich hatte gehofft, du hättest schon eine Lösung für o.g. Problem gefunden - und bevor ich nun alle Icons einzeln skaliere...

Würde es dir etwas ausmachen, die ins SVN einzuchecken? Da ist bestimmt das eine oder andere interessante Fall dabei, und stilistisch passen die gut zu den übrigen.

Bei SVGs kann man viewbox in viewbox definieren, das mache ich mir zunutze.

An dieser Stelle:

    $out.='<symbol id="Image_'.$ic.'" x="'.$ix.'" y="'.$iy.'" viewBox="0 0 '.int(640/$iscale).' '.int(640/$iscale).'">';
    $out.= ::FW_makeImage($ic);
    $out.='</symbol>';
    ##$out.='<g stroke="rgb(128,128,128)" >';
    $out.='<use href="#Image_'.$ic.'" height="22" width="22" />';

müsste man im Ergebnis von ::FW_makeImage nach viewBox, height und width suchen und gegen die gleichen Werte meiner viewBox ersetzen.

Was Besseres habe ich bisher nicht gefunden.

Ich habe das air-Icon einem aus dem Internet nachgemalt, ich weiß nicht wie es mit den Copyrightrechten aussieht.

[xenos1984]

Ich habe mal ein wenig rumprobiert und mit folgendem "Rezept" passt die Skalierung bei mir:

• Kopiere die viewBox aus dem eingebundenen Icon svg Element in das umschließende symbol Element.
• Beim eingebundenen Icon svg Element, ersetze die Einheit pt bei width und height durch px, oder entferne width und height beim eingebundenen Icon svg Element komplett.

Damit erhalte ich ein perfekt skaliertes und zentriertes Icon. Anscheinend wird beim umschließenden symbol Element die viewBox als Pixel interpretiert, und das geht schief, wenn das originale svg mehr als 640 Pixel hat.

Edit: Und so funktioniert auch die Skalierung mit korrekt zentriertem Icon: Statt x und y am symbol Element zu setzen, benutze ich im use Element:

Code Auswählen Erweitern


<use href="#Image_'.$ic.'" height="22" width="22" transform="translate($ix, $iy) translate(11, 11) scale($iscale) translate(-11, -11)"/>


Also 22px großes Icon in den Ursprung des des Koordinatensystems schieben, skalieren, zurück schieben, auf Endposition schieben.

Edit 2: Es geht auch ganz ohne viewBox am symbol Element.

Code Auswählen Erweitern


    $out.='<symbol id="Image_'.$ic.'">';
    $out.= ::FW_makeImage($ic);
    $out.='</symbol>';
    ##$out.='<g stroke="rgb(128,128,128)" >';
    $out.='<use href="#Image_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';


[Damian]

Edit 2: Es geht auch ganz ohne viewBox am symbol Element.

und das sagst du mir jetzt erst, nachdem ich mit Suchen und Ersetzen alles fertig programmiert habe.

Ich teste noch etwas und checke es morgen ein.

[xenos1984]

und das sagst du mir jetzt erst, nachdem ich mit Suchen und Ersetzen alles fertig programmiert habe.

Ich war davon ausgegangen, dass die viewBox in der viewBox, die du dir zunutze machst, einen mir noch unbekannten Nutzen hat

Ich teste noch etwas und checke es morgen ein.

Danke!

[Damian]

Ich war davon ausgegangen, dass die viewBox in der viewBox, die du dir zunutze machst, einen mir noch unbekannten Nutzen hat

Danke!

Tja, leider zu früh gefreut

Die meisten Icons werden bei mir ohne eine viewBox nicht angezeigt, bzw. nicht skaliert.

[xenos1984]

Die meisten Icons werden bei mir ohne eine viewBox nicht angezeigt, bzw. nicht skaliert.

Ja, sieht so aus... Ich hatte es mit temp_temperature und ein paar anderen probiert - da ging es. Aber z.B. mit scene_livingroom nicht. Da funktioniert aber mein "Rezept" mit dem viewBox kopieren und pt durch px ersetzen.

[Damian]

Ja, sieht so aus... Ich hatte es mit temp_temperature und ein paar anderen probiert - da ging es. Aber z.B. mit scene_livingroom nicht. Da funktioniert aber mein "Rezept" mit dem viewBox kopieren und pt durch px ersetzen.

meine aktuelle Lösung sieht jetzt so aus:

Code Auswählen Erweitern


    my $svg_icon=::FW_makeImage($ic);
    $svg_icon =~ s/height="[^"]*"//;
    my $viewBox='viewBox = "0 0 640 640"';
    $out.='<symbol id="Image_ring_'.$ic.'" '.$viewBox.'>';
    $out.= $svg_icon;
    $out.='</symbol>';
    $out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';

Es reicht also nur die Höhe (Breite) im Original-SVG zu entfernen, damit es sauber funktioniert.

Warum ausgerechnet 640er viewBox-Größe am besten passt, ist mir allerdings schleierhaft.

[xenos1984]

Stimmt, das hatte ich vergessen - ich hatte auch width und height aus dem Original-SVG entfernt. Wenn ich das mache, geht es bei mir auch ohne viewBox am symbol (jedenfalls bei den Icons, die ich bisher getestet habe, aber u.a. auch scene_livingroom):

Code Auswählen Erweitern


    my $svg_icon=::FW_makeImage($ic);
    $svg_icon =~ s/height="[^"]*"//;
    $svg_icon =~ s/width="[^"]*"//;
    $out.='<symbol id="Image_ring_'.$ic.'">';
    $out.= $svg_icon;
    $out.='</symbol>';
    $out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';


Falls du noch eins hast, bei dem es nicht mit diesem Code ohne viewBox geht, kann ich das auch gerne noch mal testen.

[Damian]

Stimmt, das hatte ich vergessen - ich hatte auch width und height aus dem Original-SVG entfernt. Wenn ich das mache, geht es bei mir auch ohne viewBox am symbol (jedenfalls bei den Icons, die ich bisher getestet habe, aber u.a. auch scene_livingroom):

Code Auswählen Erweitern


    my $svg_icon=::FW_makeImage($ic);
    $svg_icon =~ s/height="[^"]*"//;
    $svg_icon =~ s/width="[^"]*"//;
    $out.='<symbol id="Image_ring_'.$ic.'">';
    $out.= $svg_icon;
    $out.='</symbol>';
    $out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';


Falls du noch eins hast, bei dem es nicht mit diesem Code ohne viewBox geht, kann ich das auch gerne noch mal testen.

Bei mir scheinen alle Icons mit dieser Lösung auch zu funktionieren. Das Setzen einer viewBox dürfte allerdings performanter sein, als das zusätzliche Ersetzen der Breite. Diese Lösung ist wohl die "elegantere", obwohl ich das Patchen von bestehenden Definition grundsätzlich als nicht elegant bezeichnen würde - alles andere war leider nicht erfolgreich gewesen.

Eine zweite Sache, die mich stört, sind die id-Definitionen. Diese gelten wohl immer für die ganze HTML-Seite, obwohl ich sie nur für die jeweilige Funktion bräuchte.

Deswegen muss ich alle Def-ids immer eindeutig machen, sonst haben alle Grafiken die gleiche Definition (hier also das gleiche Icon) der ersten Grafik auf der aktuellen HTML-Seite - das ist unschön, besser wäre die Def-id nur lokal zu definieren, wenn es ginge.

[xenos1984]

Dann mal ein Versuch, beides auf einmal zu lösen:

Code Auswählen Erweitern


    my $svg_icon=::FW_makeImage($ic);
    $svg_icon =~ s/height="[^"]*"/height="22"/;
    $svg_icon =~ s/width="[^"]*"/width="22"/;
    $out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
    $out.= $svg_icon;
    $out.='</g>';


Unter Benutzung dieses Mechanismus, dass width und height bei einem eingebetteten SVG Element anders interpretiert werden als beim äußersten, nämlich als die Größe des Rechtecks, in den das SVG gerendert werden soll (und das ist ja das Ziel - von daher denke ich, dass patchen von width und height hier absolut Sinn macht, denn wir wollen ja nicht die Original-Größe des Icons):

width = "<length>"
    For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded 'svg' elements, the width of the rectangular region into which the 'svg' element is placed.
    A negative value is an error (see Error processing). A value of zero disables rendering of the element.
    If the attribute is not specified, the effect is as if a value of '100%' were specified.
    Animatable: yes.
height = "<length>"
    For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded 'svg' elements, the height of the rectangular region into which the 'svg' element is placed.
    A negative value is an error (see Error processing). A value of zero disables rendering of the element.
    If the attribute is not specified, the effect is as if a value of '100%' were specified.
    Animatable: yes.

Richtig, id ist ein Attribut, das dokumentweit gilt, d.h. im kompletten HTML der Seite.

[Damian]

Dann mal ein Versuch, beides auf einmal zu lösen:

Code Auswählen Erweitern


    my $svg_icon=::FW_makeImage($ic);
    $svg_icon =~ s/height="[^"]*"/height="22"/;
    $svg_icon =~ s/width="[^"]*"/width="22"/;
    $out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
    $out.= $svg_icon;
    $out.='</g>';


Unter Benutzung dieses Mechanismus, dass width und height bei einem eingebetteten SVG Element anders interpretiert werden als beim äußersten, nämlich als die Größe des Rechtecks, in den das SVG gerendert werden soll (und das ist ja das Ziel - von daher denke ich, dass patchen von width und height hier absolut Sinn macht, denn wir wollen ja nicht die Original-Größe des Icons):

Richtig, id ist ein Attribut, das dokumentweit gilt, d.h. im kompletten HTML der Seite.

Ohne <symbol> zu arbeiten wäre am elegantesten, zumal ältere Browser damit nicht klarkommen. Leider werden bestimmte Icons (z.B. Fahrrad: fa__486) mit dieser Lösung nicht herunter skaliert.

[xenos1984]

Leider werden bestimmte Icons (z.B. Fahrrad: fa__486) mit dieser Lösung nicht herunter skaliert.

Nanu? Das Icon kenne ich gar nicht und finde es weder in meinem FHEM, noch im SVN.

Falls das Original-SVG kein width / height haben sollte, funktioniert das Patchen in der Tat nicht. Den Fall müsste man also abfangen und stattdessen width / height zusätzlich beim eingefügten SVG setzen.