unterschiedliche Farben im SVG je nach Refresh

[andi11]

Hallo,
seit einiger Zeit habe ich ein komisches Phänomen bei meinen SVGs
Manchmal wenn ich mir die Seite anschaue hat sie statt dem normalen hellgrauen Hintergrund einen gelben Hintergrund.
Meistens:
Wenn auf eine Seite mit einem SVG gehe, hat sie beim ersten Aufruf eine dunkelgrüne Linie. F5 auf die Seite, dann ist die Linie hellgrün. Nochmal F5 bleibt hellgrün.
Erst wenn ich auf eine andere Seite gehe, und dann wieder auf die Ursprungsseite fängt es wieder mit dunkelgrün an.

ob es ein SVG Thema oder fhemweb ist weiß ich nicht. Hab mich für SVG entschieden da mir bei sonst keinem Element so komisches Verhalten aufgefallen ist.

Styleconfig

Code Auswählen Erweitern

attr WEB plotsize 1200,300
attr WEB styleData {\
"flex": {\
  "colorPreset": {},\
  "menuOrder": {},\
  "devices": {\
   "c81a00ca87acfa70eac3b6065fced1e7": {\
    "color": {\
     "HeaderBG": "#2E5E87",\
     "HeaderIcon": "#FFF",\
     "HeaderText": "#FFF",\
     "HeaderBorder": "#2E5E87",\
     "MenuBG": "#000",\
     "MenuBorder": "#2E5E87",\
     "MenuIcon": "#FFF",\
     "MenuIconBG": "#2E5E87",\
     "MenuRoomIcon": "#FFF",\
     "MenuText": "#FFF",\
     "MenuHoverLink": "#2E5E87",\
     "MainBG": "#EEE",\
     "TableHeaderBG": "#2E5E87",\
     "TableHeaderText": "#FFF",\
     "TableBorder": "#2E5E87",\
     "TableOdd": "#EEE",\
     "TableEven": "#DDD",\
     "TableText": "#000",\
     "TableLink": "#000",\
     "TableLinkFirstCol": "#000",\
     "TableHoverRow": "#AAA",\
     "TableHoverLink": "#2E5E87",\
     "TableNewEvent": "#F00",\
     "TableIcon": "#2E5E87",\
     "TableShadow": "#000",\
     "SetGetAttrBG": "#CCC",\
     "SubmitButtonBG": "#2E5E87",\
     "SubmitButtonBorder": "#2E5E87",\
     "SubmitButtonText": "#FFF",\
     "WidgetBorder": "#2E5E87",\
     "WidgetText": "#000",\
     "WidgetHighlight": "#2E5E87",\
     "LogDate": "#000",\
     "LogTime": "#000",\
     "LogVerbose0": "#000",\
     "LogVerbose1": "#F00",\
     "LogVerbose2": "#FFA500",\
     "LogVerbose3": "#008000",\
     "LogVerbose4": "#1E90FF",\
     "LogVerbose5": "#00F",\
     "plotBG": "#EEE",\
     "plotBGgradient": "#EEE",\
     "plotBorder": "#2E5E87",\
     "plotText": "#000",\
     "plotGrid": "#555",\
     "plotMarker": "#F00",\
     "plotLine0": "#F00",\
     "plotLine1": "#0F0",\
     "plotLine2": "#00F",\
     "plotLine3": "#F0F",\
     "plotLine4": "#A52A2A",\
     "plotLine5": "#000",\
     "plotLine6": "#808000",\
     "plotLine7": "#808080",\
     "plotLine8": "#FF0",\
     "plotLinePasted": "#000"\
    },\
    "title": "fhem",\
    "myUtilsFileName": "99_myUtils.pm",\
    "plotMinWidth": "250px",\
    "plotMaxWidth": "100%",\
    "fontFamily": "Arial",\
    "showClock": true,\
    "showLogoButton": false,\
    "showRebootButton": true,\
    "showUpdateButton": true,\
    "showUpdateCheckButton": true,\
    "showRereadIconsButton": false,\
    "showRawInputButton": true,\
    "showSaveButton": true,\
    "showRoomDeviceName": true,\
    "showMenuAlways": true,\
    "showFirstColBold": true,\
    "enableCommandHistory": true,\
    "enableDeviceSearch": true,\
    "hideWebcmdOnSmallScreen": false,\
    "colorOptionsDetailed": false,\
    "multiColumnLayout": "dual",\
    "enableAnimations": false,\
    "improvePerformance": false,\
    "enableLogLineWrap": true,\
    "enableRoundedEdges": true,\
    "enableTableShadow": false,\
    "showRoomIconsRight": false,\
    "enableCodeMirror": true,\
    "enableDayTimeStyle": false,\
    "enableExperimental": false,\
    "dayStyle": "bright",\
    "nightStyle": "dark",\
    "currentStyle": "bright",\
    "newSettings": {},\
    "scalePage": "1",\
    "enableTableBehaviour": false\
   }\
  }\
}\
}
attr WEB stylesheetPrefix flex


[rudolfkoenig]

Das ist ein flex-Problem, was auch f18 betrifft.

Die FHEMWEB-Styles flex und f18 ermoeglichen benutzerdefinierte Farben auf der Seite, u.a. fuer die SVG-Plots. Diese Farben werden nicht im CSS gespeichert, sondern im FHEMWEB Attribut (s.u.). Die CSS-Werte der SVG werden mit JavaScript geaendert, wenn das Laden abgeschlossen ist, bzw. wenn ein SVG nachtraeglich von svg.js als geladen gemeldet wird. Die Ursache des Fehlers duerfte entweder eine ausgebliebene oder zu fruehe Benachrichtigung sein. Ich habe das bei der Entwicklung von f18 auch gesehen, konnte es aber nicht reproduzieren. Ich gehe z.Zt. davon aus, dass es von vielen Umstaenden abhaengt, wie Browser, OS, momentane Auslastung der CPU, etc.
Werde es versuchen zu fixen, wenn ich was Nachstellbares bekomme.

[betateilchen]

Ich habe das Problem seit f18 regelmäßig, wenn ich von SVG gerenderte plots in InfoPanel einbinde. Da lässt sich nie voraussagen, wie der plot dann im Infopanel aussieht.

Beispiel siehe Screenshots. Der erste Screenshot ist die Darstellung in FHEM, der zweite ist der gleiche plot, eingebunden in ein InfoPanel. Die Beschriftungen fehlen nicht wirklich, sie sind nur aufgrund von merkwürdigen Farbkombinationen plötzlich unsichtbar.

Allerdings hatte ich noch keine Zeit, der Sache weiter nachzugehen, um die Ursache zu finden.

Nachtrag: meine Versuche, das Problem dadurch zu umgehen, dass ich eine FHEMWEB Instanz definiere, in der gar kein f18 vorkommt, haben nicht zum Erfolg geführt.

[Beta-User]

Vielleicht komplett falsche Assoziation, aber findet da ggf. irgendwo ein for(each)-Durchlauf über ein Hash statt? => "sort" an der passenden Stelle?

[andi11]

ich weiß nicht ob es zusammenhängt, aber mir ist noch was aufgefallen:

Wenn ich "display plot values" in der Legende für einen Plot anwähle, passiert im ersten Moment vermeintlich nichts, obwohl im Chart jetzt der Punkt dargestellt wird.
Danach ist mir aufgefallen dass es nur viel zu weit oben dargestellt wird.

=> Ein einzelnes SVG auf einer Seite > Darstellung passt
=> andere Devices oder SVGs auf der Seite oberhalb von dem gewählten SVG, bei dem die Werte angezeigt werden sollen > Darstellung berücksichtig nicht den Offset.

#svgmarker ist laut CSS auf position:absolute und ergibt z.b. Werte wie Top 190px => es landet auf der Seite ziemlich weit oben.

Evl müsste das Parent div auf position:relative bzw die Klasse? Bei mir in Chrome über die Entwicklungswerkzeuge temporär angepasst sieht es dann besser aus.

[rudolfkoenig]

@andi11

ich weiß nicht ob es zusammenhängt [...]

Ich bin der Ansicht, dass es nicht zusammenhaengt.
#1 es waere befremdlich, wenn man mit "position:absolute" Farben aendern koennte.
#2 dieses Problem wurde schon gemeldet, und ich meine es auch behoben zu haben, siehe https://forum.fhem.de/index.php?topic=114602
Wenn nach einem FHEM update und Browser-Cache loeschen(!) immer noch Probleme gibt: bitte die "raw definition" der betroffenen FHEMWEB Instanz in der verlinkten Diskussion anhaengen.

@Beta-User
Was genau bedeutet " in der gar kein f18 vorkommt" ? Die Voreinstellung ist f18, und flex hat vmtl. das gleiche Problem.
f11 und dark stellen die Farben nicht nachtraeglich um, damit sollte das Problem nicht vorkommen.

[betateilchen]

@Beta-User

Falschen Benutzer angesprochen 

Was genau bedeutet " in der gar kein f18 vorkommt" ?

Das beschreibt (in meinen Worten) eine FHEMWEB Instanz in meinem FHEM, bei der ich f18 NICHT als Voreinstellung gewählt habe.
In meinen FHEM Installationen gibt es immer mehrere komplett unterschiedlich konfigurierte FHEMWEB Instanzen.

Inzwischen habe ich auch eine Vermutung, wo das Problem im Zusammenspiel zwischen SVG und InfoPanel herkommen könnte. Ein Reihenfolgenproblem der definierten FHEMWEB Instanzen im Zusammenhang mit dem nachträglichen Ändern der Farben. Der Sache muss ich bei Gelegenheit im InfoPanel noch tiefer nachgehen. Offenbar hat sich schon vor längerer Zeit das Verhalten von SVG_showLog() geändert und InfoPanel hat sich damit noch nicht auseinandergesetzt.

f11 und dark stellen die Farben nicht nachtraeglich um, damit sollte das Problem nicht vorkommen.

Zumindest für dark kann ich das bestätigen, f11 verwende ich nicht.