Hallo zusammen!
Mich hat das Thema "Andersfarbige Labels in Plots (https://forum.fhem.de/index.php?topic=135023)" inspiriert. Wie Ihr in meinem Screenshot seht, sind die Y/Y2-Achsen entsprechend der Parameter und Plot-Verläufe unterschiedlich gefärbt.
Gibt es eine CSS-Möglichkeit, den Plot-Titel entsprechend Parameter-/Wert-weise unterschiedlich (gemischt-farbig) zu färben? Es geht z.B. um folgenden Titel:
HC1_Soll - HC1_Ist 21.1K, Integralwert 60.0 Kmin
[url="https://forum.fhem.de/index.php?action=dlattach;attach=174411;type=preview;file"]thz 2023-11-13 105353.png[/url]
Der ist momentan so in fhem.cfg definiert:
attr Mythz_Plot2_HC1Offset_Integral label sprintf("HC1_Soll - HC1_Ist %0.1fK, Integralwert %0.1f Kmin", $data{currval1}, $data{currval2})
Ich würde gerne die Farben des Titels so anpassen:
HC1_Soll - HC1_Ist 21.1K, Integralwert 60.0 Kmin
Wie kann ich das hier noch unterbringen?
attr WEB Css\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.ylabel[transform] { fill:blue;; }\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.y2label { fill:red;; }
Über text.title (3. div Zeile) erscheint natürlich der ganze Titel in einer Farbe, so dass es vermutlich nicht die richtige Stelle zur Anpassung ist - zumindest nicht, wenn man im Titel gemischte Farben haben möchte:
attr WEB Css\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.ylabel[transform] { fill:blue;; }\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.y2label { fill:red;; }\
div.SVG_Mythz_Plot2_HC1Offset_Integral text.title { fill:blue };;
Ist es möglich, CSS Code für den Titel stattdessen hier unterzubringen, so dass man den einzelnen Parametern/Werten unterschiedliche Farben zuordnen kann?
attr Mythz_Plot2_HC1Offset_Integral label sprintf("HC1_Soll - HC1_Ist %0.1fK, Integralwert %0.1f Kmin", $data{currval1}, $data{currval2})
Falls ja, kann mir bitte jemand einen Tipp geben, wie das geht? Schonmal danke für Eure Hilfe! 👍
Der Text wird in einem SVG-Text-Tag dargestellt.
Solche Tags koennen tspan Elemente enthalten, die man mit einer CSS Klasse versehen, und dadurch per CSS einfaerben kann.
Wenn ich richtig sehe, wird <> im Inhalt nicht ersetzt (nur & und ").
Sorry, ich verstehe nur Bahnhof! 🫢
Ich bin kein CSS-Experte, daher hier nur ein stümperhafter Ansatz (Pseudo-Code):
<text>
<tspan style="font-color:blue;">Parameter und Wert in Blau</tspan><tspan style="font-color:red;">Parameter und Wert in Rot</tspan>
</text>
Die korrekte Syntax ist mir unklar.
Und wo in fhem.cfg kommt das dann rein? Zu attr WEB oder zu attr Mythz_Plot1_Temp label?
Es gibt mW kein font-color in SVG, nur fill und stroke.
Sonst: label Attribut (oder plotReplace)
Den <text> "Klammer" mit Koordinate generiert das SVG Modul, siehe rechte Maustaste, Inspect.
Sorry, das ist mir zu hoch. Den Thread kann man von mir aus schließen. 🤔
Es war so gedacht:
attr SVG label "<tspan style='fill:red'>Min $data{min1}</tspan> <tspan style='fill:green'>Max $data{max1}</tspan>"
Leider wird < und > in SVG.pm doch geschuetzt (escaped), insofern funktioniert diese Methode nicht.
Bleibt noch JavaScript, was das Ganze zwei Stufen komplizierter macht.
Hilft bzgl. < und > der Backslash?
Nein.
dann kann man den Thread schließen
Damit das Ganze nicht so traurig endet: ich habe Escaping abgeschaltet, falls der Text in <html></html> eingeschlossen ist.
Das ist an diversen anderen Stellen in FHEM auch ueblich. Damit muss man das Attribut so setzen:
attr SVG label "<html><tspan style='fill:red'>Min $data{min1}</tspan> <tspan style='fill:green'>Max $data{max1}</tspan></html>"