[Patch 98_SVG.pm] <div> für SVG Plot Link / Name

[fhainz]

Hallo Rudi,

würdest du folgenden Patch akzeptieren?

Code Auswählen Erweitern

### Eclipse Workspace Patch 1.0
#P fhemSVN
Index: FHEM/98_SVG.pm
===================================================================
--- FHEM/98_SVG.pm (revision 6740)
+++ FHEM/98_SVG.pm (working copy)
@@ -116,7 +116,7 @@

   my $ret = ($nobr ? "" : "<br>");
   $ret .= "$text " if($text);
-  $ret .= FW_pHPlain("detail=$d", $alias) if(!$FW_subdir);
+  $ret .= FW_pH("detail=$d", $alias, 0, "SVGlink", 1, 0) if(!$FW_subdir);
   $ret .= "<br>";
   return $ret;
}


Grund: Ich würde mir gerne alle SVG Plots und auch die zugehörigen Links unter den Plots im Portrait Modus auf dem Smartphone ausblenden lassen. Die Links erwische ich aber ohne den Patch nicht.

Grüße

[rudolfkoenig]

Habs eingecheckt. Zusaetzlich kriegt jedes Label und Plot einen weiteren Eintrag im class, was den Namen der SVG-Instanz beinhaltet, damit kann man einzelne Plots unterschiedlich stylen.

[fhainz]

Danke!

[Bubbles71]

Hallo Rudi,

ich freue mich, dass man nun die Plots unterschiedlich stylen kann.

Das versuche ich auch gerade.

Zwei Frage dazu (um mein Trial-and-Error abzukürzen):

1) Wo Ändere ich die Style Daten? In der .css der Seite (z.B. des spezifischen Floorplans) oder z.B. in der darksvg_style.css?

2) Die SVG Instanz ist, denke ich, der Name des Plots in define, z.B.  SVG_FileLog_TempSens1_1
Wie ändere ich nun konkret die styles? Ich habe es mit dem Hintergrund der Plots versucht
.border für die generelle definition und
#SVG_FileLog_TempSens1_1.border für den spezifischen plott. Sowohl man in der css des Floorplans als auch in der zugrundeliegenden darksvg_style.css.
Leider ohne Erfolg.

Code Auswählen Erweitern

.border { stroke:black; fill:url(#gr_bg);}
#SVG_FileLog_TempSens1_1.border { stroke:black; fill:url(#gr_bg);fill-opacity: 0; }

Wie muss ich die styles korrekt definieren?

Vielen Dank,

Roland

[rudolfkoenig]

Per Voreinstellung werden die SVG-Plots ueber ein embed Tag geladen: frueher war das die einzige Moeglichkeit SVG zu laden, weiterhin werden die Plots einer Seite so parallel geladen, was mit plotfork und einem Mehrprozessor-Server schnellere Ladezeiten bedeutet. Nachteil: die "aeusseren" CSS Dateien haben innerhalb von embed keine Wirkung, und deshalb muss man die www/pgm2/*svg_style.css Dateien direkt aendern. Und damit hat man keine Moeglichkeit, einzelne SVGs unterschiedlich zu stylen.

Falls man das embed Tag mit "attr WEB plotEmbed 0" ausschaltet, dann wird das Laden serialisiert (und damit manchmal langsamer), aber man kann die "aeusseren" CSS Dateien verwenden. Dazu definiert man am besten das CssFiles WEB Attribut, und ueber die so spezifizierte Datei kann man einzelne SVGs ansprechen:

Code Auswählen Erweitern

div.SVGplot.SVG_wl_15 svg rect.border { fill:gray; stroke:white; }

[Bubbles71]

Hallo Rudi,

danke für die Antwort. Funktioniert fast so .

An die einzelnen Style Attribute komme ich nun in der .css nun so heran (ein paar Beispiele, helfen vielleicht anderen weiter):

Code Auswählen Erweitern

#SVG_FileLog_TempSens1_1 svg.Zoom-in {height:0px; width:0px; visibility:hidden; }
#SVG_FileLog_TempSens1_1 svg.Zoom-out {height:0px; width:0px; visibility:hidden; }
#SVG_FileLog_TempSens1_1 svg.Prev {height:0px; width:0px; visibility:hidden; }
#SVG_FileLog_TempSens1_1 svg.Next {height:0px; width:0px; visibility:hidden; }
#SVG_FileLog_TempSens1_1 svg text.ylabel { fill:#FF9966;  font-size:12px; }
#SVG_FileLog_TempSens1_1 svg rect.border { fill:gray; stroke:#FF9900; stroke-width:0px; fill-opacity: 0;}
#SVG_FileLog_TempSens1_1 svg .hgrid { stroke:#FF9900; stroke-opacity: 0; }
#SVG_FileLog_TempSens1_1 svg .vgrid { stroke:#FF9900; stroke-opacity: 0; }

Setzt man aber "attr WEB plotEmbed 0", hat dies nicht nur Einfluss auf die SVG Plots sondern auch auf die SVG Icons, wenn man in diesen <Text> verwendet. Dann werden nämlich die in der SVG Datei des Icons definierten Attribute für den Text durch die 'svg_style.css" überschrieben.

Code Auswählen Erweitern

text { font-family:Arial, Helvetica, sans-serif; font-size:8px; fill:#CCCCCC;}

Kommentiere ich diese Zeile in der CSS aus, ist wieder alles mit den Icons OK.

LG,

Roland

[rudolfkoenig]

Setzt man aber "attr WEB plotEmbed 0", hat dies nicht nur Einfluss auf die SVG Plots sondern auch auf die SVG Icons

Das glaube ich erstmal nicht.
Das CSS sollte unabhaengig vom plotEmbed Attribut die SVG-Icons aendern, da diese nicht via embed gelden werden.

[Bubbles71]

Hallo Rudi,

zumindest verhält es sich bei mir so. Die ersten Zeilen der darksvg_style.css:

Code Auswählen Erweitern

/* Author: Volker */
/* text { font-family:Arial, Helvetica, sans-serif; font-size:8px; fill:#CCCCCC;} */
text.title {font-family:Arial, Helvetica, sans-serif; font-size:16px; fill:#CCCCCC;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
text.ylabel { fill:#CCCCCC; }

Ist der Eintrag text ... auskommentiert, dann sieht mein Floorplan so aus, wie in Bild 2.
Ist der Eintrag text ... nicht auskommentiert, dann so wie in Bild 1. Hier haben die svg Grafiken die Eigenschaften von text angenommen.

Meine svg Grafiken habe ich folgendermaßen definiert (ein Beispiel):

Code Auswählen Erweitern

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40px" width="160px">
        <g>
                <path d="m23,00 c-30,00 -30,40 00,40 h3 v-40 z" fill="#000000" />
                <rect x="60" y="0" width="110" height="40" fill="#9999FF" />
                <text x="42" y="32"  text-anchor="middle" font-size="30" font-family="lcars" fill="#000000">ON</text>
                <text x="155" y="34"  text-anchor="end" font-size="22" font-family="lcars" fill="#000001">Warmwasser</text>
        </g>
</svg>


Liebe Grüße,

Roland

[rudolfkoenig]

Du sollst beide Saetze die ich geschrieben habe, lesen

Ich bezweifle nicht, dass das CSS Einfluss auf deine SVGs hat, sondern dass das mit plotEmbed zu tun hat.
Eigentlich finde ich komisch, dass das CSS die im SVG definierten styles ueberschreibt, ich dachte letzteres haette Vorrang. Weiterhin vermute ich, dass die auskommentierte Zeile selbst ein Bug ist, da in HTML kein text Element gibt, und SVG war damals in FHEM noch nicht en-vogue.

Ich schlage vor in deinem CSS (siehe FHEMWEB/CssFiles Attribut) eine mit mehr Tags/Klassen definierte CSS Anweisung fuer deine Grafiken zu spezifizieren, damit dieser Vorrang hat.
Notfalls musst du dem SVG oder den Textelementen noch CSS-Klassen spendieren.