[gelöst] Im Floorplan SVG Plot ohne Steuerelemente anzeigen

[stefantaust1]

Danke... hat funktioniert... hab jetzt überalle die neuen Pfeile

attr WEBtablet iconPath fhemSVG:openautomation:default

jetzt möchte ich alle Pfeile und Zoom abschalten das sie nicht angezeigt werden....

[stefantaust1]

so, habs geschafft....

in der css zum Floorplan folgenden Eintrag abgeändert. Höhe und Breit auf 0 gesetzt

svg { height:0px; width:0px; vertical-align:middle; margin:2px 0; }
svg:not([fill]) { fill:#fff; }
g.on { fill:red; }

und schon ist alles ohne Pfeile :-)

[fiedel]

In der zugehörigen / zugewiesenen fp- CSS- Datei:

Code: [Auswählen]

#table-01_Alarm svg { height:0px; width:0px; visibility:hidden; }

Achtung: Seit ca. einem Jahr habe ich jetzt mal wieder Updates gemacht und musste feststellen, dass der Eintrag "visibility:hidden;" nun zum verschwinden des ganzen Plot (im Floorplan) führt.
"height:0px; width:0px" funktioniert aber noch, sodass nur "visibility:hidden;" gelöscht werden muss um den Plot ohne Zoombuttons anzuzeigen.

[tux75at]

Ich bin auch gerade dabei diese Icons vom SVG Plot zu entfernen.
Leider schaffe ich es nicht.

Bei mir heißt der Plot "SVG_FileLog_Office_Sensor_1"

Folgendermaßen Eingebunden:

Code: [Auswählen]

attr SVG_FileLog_Office_Sensor_1 fp_EG 62,960,0
attr SVG_FileLog_Office_Sensor_1 plotsize 455,105
Im darksvg_style.css habe ich kombinationen mit und ohne visibility versucht

Code: [Auswählen]

#table-SVG_FileLog_Office_Sensor_1 svg {height:0px; width:0px;}

Code: [Auswählen]

#table-SVG_FileLog_Office_Sensor_1 svg.Zoom-in {height:0px; width:0px;}
#table-SVG_FileLog_Office_Sensor_1 svg.Zoom-out {height:0px; width:0px;}
#table-SVG_FileLog_Office_Sensor_1 svg.Prev {height:0px; width:0px;}
#table-SVG_FileLog_Office_Sensor_1 svg.Next {height:0px; width:0px;}
Das einzige was ich geschafft habe, war den gesamten Plot unsichtbar zu machen.

mit dem Code von oben kann ich nix anfangen:

Code: [Auswählen]

svg { height:0px; width:0px; vertical-align:middle; margin:2px 0; }
svg:not([fill]) { fill:#fff; }
g.on { fill:red; }
Iconpath habe ich auch versucht, damit habe ich geschafft all meine Icons und den Plot unsichtbar zu machen und die Plot Icons waren immer noch da.
Vermutlich muss ich beim Iconpath noch etwas machen, aber ich habe leider keine Ahnung was ich noch probieren kann.

[fiedel]

Probier mal:

Code: [Auswählen]

#\30 SVG_FileLog_Office_Sensor_1 svg { height:0px; width:0px; }
Der Thread stammt noch aus der Zeit, als ich den Selektor per probieren ermittelt hatte.
Funktioniert bei mir aber trotzdem noch.

Der korrekte Weg wäre im Browser "F12" (Entwicklerwerkzeuge) -> mit dem Selektionstool
das Objekt auswählen und klicken. Auf die Zeile die dann im angezeigten Quelltext blau markiert
wurde Rechtsklick -> Kopieren -> CSS-Selektor. Dann hast du den genauen Selektor in der
Zwischenablage . Ich verwende Firefox.

[tux75at]

Ich hab mich herumgespielt und herrausgefunden dass es einige IDs gibt:

Code: [Auswählen]

#div-SVG_FileLog_Office_Sensor_1
#table-SVG_FileLog_Office_Sensor_1
#SVG_FileLog_Office_Sensor_1
Welche ist die richtige?

in deiner Zeile:

Code: [Auswählen]

#\30 SVG_FileLog_Office_Sensor_1 svg { height:0px; width:0px; }wofür ist am begin "\30"?

[fiedel]

wofür ist am begin "\30"?

Keine Ahnung, das gibt mein Dev.- Tool so aus, wenn ich "Selektor kopieren" bei meinen
Plots mache. Die haben auch alle die 30 davor. Das kommt aber nicht aus dem Plotnamen.

[tux75at]

Fiedel, danke für die Unterstützung leider benötige ich da noch etwas mehr Hilfe.

Ich habe mich mit Firefox, Google Chrome in Linux und Windows gespielt.
In Windows bekomme ich etwas mehr vom Selektor:

Code: [Auswählen]

#SVG_FileLog_Office_Sensor_1 > td > div.SVGlabel
#SVG_FileLog_Office_Sensor_1 > td > div.SVGlabel > a:nth-child(1)
#SVG_FileLog_Office_Sensor_1 > td > div.SVGlabel > a:nth-child(1) > img
#SVGPLOT_SVG_FileLog_Office_Sensor_1
Die ersten drei Zeilen sind der Versuch des Zoom In Buttons den CSS Selector zu erhalten. Der Entspricht bei mir dem ID Tag.
Die Letzte Zeile dürfte der SVG Plot sein.

Unter linux erhalte ich nur #SVG_FileLog_Office_Sensor_1 bzw #SVGPLOT_SVG_FileLog_Office_Sensor_1

Jetzt weiss ich trotzdem noch nicht welchen Code ich in die svg_style.css reingeben soll.

erster Teil ist der CSS Selector, svg kommt bei mir leider so gut wie nirgends vor (ausser beim Plot selbst) und das dürfte das Problem sein.
In klammern sind dann die zu ändernden Attribute?

Code: [Auswählen]

#SVG_FileLog_Office_Sensor_1 div.SVGlabel { height:0px; width:0px; }Diese Zeile hat etwas bewirkt. Die Section mit den Symbolen ist kleiner geworden und hat mir das Diagramm nach oben geschoben. Die Symbole sind aber leider immer noch da.

Kann es sein, dass es mit den Default Symbolen eventuell nicht geht? irgendwo hab ich mal gelesen dass jemand auf andere Symbole umgestellt hat und dann hat er es geschafft.

Code: [Auswählen]

#SVG_FileLog_Office_Sensor_1 svg.Zoom-in { height:1px; width:1px; }


Code: [Auswählen]

attr WEB iconPath default:fhemSVG:openautomation

Wenn ich beim WEB iconPath "default" weglösche, dann zerschiese ich mir alles, habe aber nicht die standard Symbole sondern jene die nur aus weißen Linien bestehen.
Ich würde die Symbole gegen kleine unsichtbare Symbole tauschen, wenn ich wüsste wie man das am besten anstellt. ein Zoom-in aus einem anderen WEB iconPath wird nicht verwendet, da hätte ich schon kleine unsichtbare Symbole drinnen.

[tux75at]

Noch ein wenig weiter Probiert ....

Code: [Auswählen]

#SVG_FileLog_Office_Sensor_1 img.Zoom-in { height:1px; width:1px; }
#SVG_FileLog_Office_Sensor_1 img.Zoom-out { height:1px; width:1px; }
#SVG_FileLog_Office_Sensor_1 img.Prev { height:1px; width:1px; }
#SVG_FileLog_Office_Sensor_1 img.Next { height:1px; width:1px; }

Damit ist es gelöst, keine Symbole mehr, es fällt nicht unter "svg" (vielleicht mit anderen Symbolen) sondern unter "img".
Mein SVG Hintergrund und andere SVG Symbole sind dadurch unverändert.

Leider nicht ganz, statt der Symbole habe ich jetzt Punkte, aber das ist schon viel besser

[tux75at]

Für jene die späte auf diesen Thread stoßen hier noch ein Beitrag von mir.

Die Lösung für mich:

Code: [Auswählen]

#SVG_FileLog_Office_Sensor_1 img.Zoom-in { height:0px; width:0px; }
#SVG_FileLog_Office_Sensor_1 img.Zoom-out { height:0px; width:0px; }
#SVG_FileLog_Office_Sensor_1 img.Prev { height:0px; width:0px; }
#SVG_FileLog_Office_Sensor_1 img.Next { height:0px; width:0px; }

Warum ich dann nicht gleich 0px probiert hab weiss ich auch nicht, mit svg statt img hat 1px etwas bewirkt aber 0px nicht, klappte aber auch nur einmal kurz.
Die Änderung auf img und 1px hat dann sofort gewirkt und jetzt 0px erfolgreich ausprobiert.

[fiedel]

Cool! Das macht dann auch Sinn: Ich hab SVG- Buttons und du hattest offenichtlich noch diese kleinen "runden Lupen" (.jpg).
Damit hatte ich nicht gerechnet, da ich die aus der Anfangszeit von FHEM schon verdrängt hatte. 
Das Entwicklerwekzeug müsste dann aber die richtige Lösung zeigen, indem es "img" statt "svg" im Selektor liefert.