Gemischt-farbige Titel von Plots

sunrise · 13 November 2023, 11:17:45

Hallo zusammen!

Mich hat das Thema "Andersfarbige Labels in Plots" 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

Du darfst diesen Dateianhang nicht ansehen.

Der ist momentan so in fhem.cfg definiert:

Code Auswählen

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?

Code Auswählen

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:

Code Auswählen

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?

Code Auswählen

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! 👍

rudolfkoenig · 13 November 2023, 12:05:28

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 ").

sunrise · 13 November 2023, 12:06:36

Sorry, ich verstehe nur Bahnhof! 🫢

Ich bin kein CSS-Experte, daher hier nur ein stümperhafter Ansatz (Pseudo-Code):

Code Auswählen

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

rudolfkoenig · 13 November 2023, 13:00:01

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.

sunrise · 13 November 2023, 13:04:23

Sorry, das ist mir zu hoch. Den Thread kann man von mir aus schließen. 🤔

rudolfkoenig · 13 November 2023, 14:11:38

Es war so gedacht:

Code Auswählen

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.

sunrise · 13 November 2023, 15:24:21

Hilft bzgl. < und > der Backslash?

rudolfkoenig · 13 November 2023, 15:39:39

Nein.

sunrise · 13 November 2023, 16:25:01

dann kann man den Thread schließen

rudolfkoenig · 14 November 2023, 14:01:56

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:

Code Auswählen

attr SVG label "<html><tspan style='fill:red'>Min $data{min1}</tspan> <tspan style='fill:green'>Max $data{max1}</tspan></html>"