Andersfarbige Labels in Plots

Begonnen von Bracew, 18 September 2023, 20:40:42

Vorheriges Thema - Nächstes Thema

Bracew

Hallo,

ich nutze eine .gplot-Datei mit 2 verschiedenen Graphen, ähnlich beigefügtem Beispielbild:
Du darfst diesen Dateianhang nicht ansehen.

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?
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

rudolfkoenig

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.

rudolfkoenig

Korrektur: die erste Zeile muss so lauten:
text.ylabel[transform] { fill:red; }
sonst erwischt man auch manche Elemente der waagerechten Beschriftung.

Bracew

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?
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

TomLee

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.

Bracew

Bitte, ein wenig konkreter wenn möglich.
Welche Datei, welche Ergänzung, an welcher Stelle?
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

TomLee


Bracew

#7
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?
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

betateilchen

Wenn ich Rudi richtig verstanden habe, werden die Änderungen in den css-files vorgenommen, nicht in der FHEM Konfiguration.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

Bracew

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.
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

rudolfkoenig

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.

Bracew

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?
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

rudolfkoenig

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; }

Bracew

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.
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe

Bracew

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.
FHEM auf Raspberry Pi
für z.B. Lichtsteuerung, Temperaturmessung, Balkonkraftwerk,
Öltankfüllstandsmessung und für Hühnerstall Hühnerklappe