Hallo,
ich nutze eine .gplot-Datei mit 2 verschiedenen Graphen, ähnlich beigefügtem Beispielbild:
shit.jpg
Wie kann ich die Farbe des rechten und linken Labels ändern?
Also Beispielsweise den jetzt ganz links gekippt stehenden grünen Text "Temperatur" in einen roten Text "Temperatur" ändern und natürlich auch den im Bild ganz rechts gekippt stehenden grünen Text "Luftfeuchtigkeit" in einen blauen Text "Luftfeuchtigkeit"
Muss ich dazu in der .gplot-Datei etwas ändern oder zufügen?
ZitatMuss ich dazu in der .gplot-Datei etwas ändern oder zufügen?
Nein, das ist Sache von CSS, in f18 z.Bsp. unter "Additional CSS":
text.ylabel[text-anchor=middle] { fill:red; }
text.y2label { fill:green; }Falls das nur fuer einen bestimmten SVG gelten soll, dann muessen die Zeilen mit div.<SVGNAME> + Leerzeichen beginnen.
Korrektur: die erste Zeile muss so lauten:
text.ylabel[transform] { fill:red; }
sonst erwischt man auch manche Elemente der waagerechten Beschriftung.
Für den "normalen" Style, so wie im Bild am Anfang, ist das f11?
Ich finde keine Datei f11.css?
Aber auch in der Datei /opt/fhem/www/pgm2/f18style.css finde ich kein "Additional CSS"?
Kannst Du mir die zu ändernde Datei benennen?
Und was ich als Beispiel in dieser Datei an welcher Stelle einfügen müsste?
Additional CSS gibts nur in f18 und ist eigentlich nur ein Link, welcher das "Eingabefeld" des Attribut Css im WEB Device direkt öffnet/anzeigt.
In f11 gibst du die gezeigten Beispiele einfach in dem Css-Attribut des WEB-Device ein.
Bitte, ein wenig konkreter wenn möglich.
Welche Datei, welche Ergänzung, an welcher Stelle?
So.
Mit:
attr WEB Css text.ylabel[text-anchor=middle] { fill:red;; }\
text.y2label { fill:blue;; }in der fhem.cfg bekomme ich in
allen Graphen die Labels farbig.
Da ich aber verschiedene Graphen mit verschiedenen Farben habe, möchte ich die einzelnen beeinflussen.
Mit:
attr WEB Css SVG_SensorEsszimmer text.ylabel[text-anchor=middle] { fill:red;; }\
SVG_SensorEsszimmer text.y2label { fill:blue;; }für den bewusst gewählten einzelnen Graphen SVG_SensorEsszimmer klappt es nicht!
Oder habe ich jetzt:
Zitat<SVGNAME> + Leerzeichen
falsch interpretiert?
Wenn ich Rudi richtig verstanden habe, werden die Änderungen in den css-files vorgenommen, nicht in der FHEM Konfiguration.
text.ylabel[transform] { fill:red; }
text.y2label { fill:blue; }in der der Art und Weise nach Bildschirmaufzeichnung von TomLee funktioniert. Funktioniert auch bei Änderung nur in der fhem.cfg. Aber nur für alle Graphen.
SVG_SensorEsszimmer text.ylabel[transform] { fill:red; }
SVG_SensorEsszimmer text.y2label { fill:green; }geht nicht, weder nach Bildschirmaufzeichnung von TomLee noch bei Änderung nur in der fhem.cfg.
ZitatFalls das nur fuer einen bestimmten SVG gelten soll, dann muessen die Zeilen mit div.<SVGNAME> + Leerzeichen beginnen.
Bitte div. nicht weglassen.
div.<SVGNAME> bedeutet: ein div Tag mit der Klasse <SVGNAME>
<SVGNAME> bedeutet: ein Tag mit dem Namen <SVGNAME> => gibts nicht, funktioniert auch nicht.
@betateilchen:
erst wird die CSS Datei eingelesen, und danach das optionale Css Attribut.
D.h. mit dem Attribut kann man Einstellungen aus der Datei ueberschreiben.
div.SVG_SensorEsszimmer text.ylabel[transform] { fill:red; }
div.SVG_SensorEsszimmer text.y2label { fill:blue; }funktioniert nicht.
div.<SVG_SensorEsszimmer> text.ylabel[transform] { fill:red; }
div.<SVG_SensorEsszimmer> text.y2label { fill:blue; }funktioniert nicht.
div.<SVG_SensorEsszimmer> + text.ylabel[transform] { fill:red; }
div.<SVG_SensorEsszimmer> + text.y2label { fill:blue; }funktioniert nicht.
Wie müsste es lauten?
Es ist die erste Variante, vor dem SVG-Namen muss aber SVG_ vorangestellt werden (mein Fehler).
D.h. im angehaengten Bild heisst die SVG wl_0, und um die Texte zu faerben musste ich Folgendes setzen:
div.SVG_wl_0 text.ylabel[transform] { fill:red; }
div.SVG_wl_0 text.y2label { fill:green; }
Ok. So funktioniert es. Prima. Danke! ;D
mit:
attr WEB Css div.SVG_SVG_SensorEsszimmer text.ylabel[transform] { fill:red;; }\
div.SVG_SVG_SensorEsszimmer text.y2label { fill:blue;; }im fhem.cfg funktioniert es.
Doppelt SVG, da mein Device schon SVG_SensorEsszimmer heißt.
Hallo,
ich habe das mal für mein FHEM fertig gestrickt. Ist ein ganz schöner Aufwand:
attr WEB Css \
div.SVG_SVG_SensorEsszimmer text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorEsszimmer text.y2label { fill:red;; } \
div.SVG_SVG_SensorKellerBuero text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorKellerBuero text.y2label { fill:red;; } \
div.SVG_SVG_TaupunktFeuchte text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_TaupunktFeuchte text.y2label { fill:black;; } \
div.SVG_SVG_Luftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_Luftdruck text.y2label { fill:magenta;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorHuhnTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorHuhnDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorHuhnDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.y2label { fill:magenta;; }
#
attr WEBphone Css \
div.SVG_SVG_SensorEsszimmer text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorEsszimmer text.y2label { fill:red;; } \
div.SVG_SVG_SensorKellerBuero text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorKellerBuero text.y2label { fill:red;; } \
div.SVG_SVG_TaupunktFeuchte text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_TaupunktFeuchte text.y2label { fill:black;; } \
div.SVG_SVG_Luftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_Luftdruck text.y2label { fill:magenta;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorHuhnTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorHuhnDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorHuhnDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.y2label { fill:magenta;; }
#
attr WEBtablet Css \
div.SVG_SVG_SensorEsszimmer text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorEsszimmer text.y2label { fill:red;; } \
div.SVG_SVG_SensorKellerBuero text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorKellerBuero text.y2label { fill:red;; } \
div.SVG_SVG_TaupunktFeuchte text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_TaupunktFeuchte text.y2label { fill:black;; } \
div.SVG_SVG_Luftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_Luftdruck text.y2label { fill:magenta;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorHuhnTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorHuhnDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorHuhnDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.y2label { fill:magenta;; }
#
attr WEBtv Css \
div.SVG_SVG_SensorEsszimmer text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorEsszimmer text.y2label { fill:red;; } \
div.SVG_SVG_SensorKellerBuero text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorKellerBuero text.y2label { fill:red;; } \
div.SVG_SVG_TaupunktFeuchte text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_TaupunktFeuchte text.y2label { fill:black;; } \
div.SVG_SVG_Luftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_Luftdruck text.y2label { fill:magenta;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorWaschkuecheTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorWaschkuecheDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnTemHum text.ylabel[transform] { fill:green;; } \
div.SVG_SVG_SensorHuhnTemHum text.y2label { fill:red;; } \
div.SVG_SVG_SensorHuhnDewAbs text.ylabel[transform] { fill:blue;; } \
div.SVG_SVG_SensorHuhnDewAbs text.y2label { fill:black;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.ylabel[transform] { fill:magenta;; } \
div.SVG_SVG_SensorHuhnLuftdruck text.y2label { fill:magenta;; }
#
Ist machbar, aber einfacher wäre schöner.
Hallo zusammen!
Vielen Dank für die Eingangsfrage und die Beschreibung der Lösung des Problems! :)
Bei mir sieht ein Beispiel so aus:
thz 2023-11-08 155859.png
Die fhem.cfg Datei dazu sieht so aus (die letzte Zeile - hier umgebrochen - ist relevant für die Farbgebung der Y/Y2-Achsenbeschriftungen):
define Mythz_Plot2_HC1Offset_Integral SVG FileLog_Mythz:thz2:CURRENT
attr Mythz_Plot2_HC1Offset_Integral captionPos auto
attr Mythz_Plot2_HC1Offset_Integral label sprintf("HC1_Soll - HC1_Ist %0.1fK, Integralwert %0.1f Kmin", $data{currval1}, $data{currval2})
attr Mythz_Plot2_HC1Offset_Integral plotsize 900,225
attr Mythz_Plot2_HC1Offset_Integral room Heizung_Plot
attr WEB Css div.SVG_Mythz_Plot2_HC1Offset_Integral text.ylabel[transform] { fill:blue;; }\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.y2label { fill:red;; }
Nun frage ich Euch, ob eine einfachere Möglichkeit der Farbgebung möglich ist, d.h. dass die Farben der Beschriftungen der Y/Y2-Achsen sich automatisch an den Farben der Plots orientieren (=diesen gleich ist).
In meinem o.g. Beispiel sieht die .gplot Datei so aus:
# Created by FHEM/98_SVG.pm, 2023-11-08 15:58:00
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<L1>'
set ytics
set y2tics
set grid ytics
set ylabel "K"
set y2label "Kmin"
set yrange [-7:30]
set y2range [-200:200]
#FileLog_Mythz 17:Mythz.sHC1\x3a:0:$fld[16]-$fld[14]
#FileLog_Mythz 11:Mythz.sHC1\x3a:0:
#FileLog_Mythz 17:Mythz.sHC1\x3a:0:$fld[16]-$fld[16]
plot "<IN>" using 1:2 axes x1y1 title 'HC1_Soll - HC1_Ist' ls l2 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Integralwert' ls l0 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 title ' ' ls l5 lw 1 with lines
'HC1_Soll - HC1_Ist': y1 = Y-Achse links; l2 = blau
'Integralwert': y2 = Y-Achse rechts; l0 = rot
Da damit klar ist, dass der Plot für 'HC1_Soll - HC1_Ist' blau ist und an der Y(1)-Achse links orientiert ist, wäre es schön, wenn daraus programmatisch ableitbar wäre, dass die Y(1)-Achsenbeschriftung auch blau ist (entsprechend für Y2 dann in diesem Beispiel rot).
Ist das möglich oder ist der Aufwand dafür zu groß (im Vergleich zum möglichen Nutzen)?
Herzlichen Dank für FHEM, die vielen tollen Möglichkeiten, die sich einem damit bieten und die nette und hilfsbereite Gemeinschaft des/der Entwickler und Nutzer hier im Forum! ❤️
ZitatIst das möglich oder ist der Aufwand dafür zu groß (im Vergleich zum möglichen Nutzen)?
Moeglich ist vieles, ob der Aufwand zu gross ist muss der Programmierer entscheiden.
Fuer mich antworte ich mit ja, weil ich das nicht haben will :), und es ist definitiv mehr als ein "Einzeiler".
Es sind mehrere Labels pro Achse moeglich, und auch mehr als 2 Achsen, auch wenn Letzteres vom Plot-Editor nicht unterstuetzt wird.
Vielen Dank, Rudolf, für Deine Rückmeldung! 🤗 Es ist ja durchaus machbar, das manuell hinzubekommen. :)
Zitat von: rudolfkoenig am 19 September 2023, 21:49:43Es ist die erste Variante, vor dem SVG-Namen muss aber SVG_ vorangestellt werden (mein Fehler).
D.h. im angehaengten Bild heisst die SVG wl_0, und um die Texte zu faerben musste ich Folgendes setzen:
div.SVG_wl_0 text.ylabel[transform] { fill:red; }
div.SVG_wl_0 text.y2label { fill:green; }
Wieso steht
[transform] nur beim
ylabel, nicht aber beim
y2label?