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

Begonnen von fiedel, 10 November 2013, 10:20:50

Vorheriges Thema - Nächstes Thema

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

Zitat von: fiedel am 23 Januar 2014, 09:57:20
In der zugehörigen / zugewiesenen fp- CSS- Datei:

#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.
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

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:
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
#table-SVG_FileLog_Office_Sensor_1 svg {height:0px; width:0px;}

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

#19
Probier mal: #\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.
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

tux75at

Ich hab mich herumgespielt und herrausgefunden dass es einige IDs gibt:
#div-SVG_FileLog_Office_Sensor_1
#table-SVG_FileLog_Office_Sensor_1
#SVG_FileLog_Office_Sensor_1


Welche ist die richtige?

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

fiedel

Zitat von: tux75at am 01 September 2019, 21:23:34
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.
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

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:

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

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


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


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

#23
Noch ein wenig weiter Probiert ....


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

#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.
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

Humbs

Hallo zusammen,

hab eure Beiträge versucht umzusetzen und an die
/opt/fhem/www/pgm2/svg_style.css
folgendes angehängt

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

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

aber dennoch keine Änderung

die Markierten Schaltsymbole hätte ich gerne aus Platzgründen auf dem Display verborgen

rudolfkoenig

Die Anweisungen mit img gelten fuer die alte Suchreihenfolge, mit dem Verzeichnis default vor fhemSVG (siehe iconPath)
Da mit der aktuellen Reihenfolge SVG statt png/jpg verwendet wird, muss man fuer die CSS Adressierung z.Bsp so vorgehen:
svg.Zoom-in,svg.Zoom-out,svg.Next,svg.Prev { display:none }

rudolfkoenig

Nachtrag: statt die Anweisung an /opt/fhem/www/pgm2/svg_style.css anzuhaengen empfehle ich das im CSS FHEMWEB Attribut zu speichern, am einfachsten ueber "Select style, f18, Additional CSS

Humbs

Hallo rudolfkoenig,

vielen Dank für die blitzartige Antwort.
Der Ansatz funktioniert!  8)

leider leider leider werden mit

#SVG_FileLog_Heizung_2 svg.Next,svg.Prev,svg.Zoom-in,svg.Zoom-out { display:none }
#SVG_FileLog_Stromzaehlerdaten_1 svg.Next,svg.Prev,svg.Zoom-in,svg.Zoom-out { display:none }

die Schaltflächen global nicht mehr angezeigt, nicht nur in der Gruppe dieser beiden Plots.

Und das Ziel, den Platz für die Schaltflächen auf dem 7 Zoll Bildschirm einzusparen leider auch nicht erreicht.
Der Plot rutscht nicht nach oben, der Platz bleibt leider leer.