Farbgebung bei SVG-Plots

[Damian]

Ich war mit den vordefinierten Farben nicht zufrieden, insbesondere wenn man einen "dunklen" Style verwendet (hier f18).

Dazu habe ich mir erstmal die svg_defs und svg_style zurecht gepatcht (Ergebnis siehe Anhang) - beim nächsten Update sind diese natürlich wieder überschrieben.

Gibt es einen eleganten Weg die svg_defs bzw svg_style zu erweitern?

Additional_CSS scheint nicht zu funktionieren.

[rudolfkoenig]

Man legt entweder einen eigenen Style an, oder man setzt die modifizierten Dateien auf exclude_from_update

[Damian]

Man legt entweder einen eigenen Style an, oder man setzt die modifizierten Dateien auf exclude_from_update

klar, eigentlich wollte ich das Rad nicht neu erfinden und beim f18-Style bleiben, weil er sonst schon recht flexibel konfigurierbar ist. Zusätzlich müsste ich den Plot-Editor anpassen, wenn ich zusätzliche Farbkombinationen auswählen wollte. Oder holt er sich die aus der entsprechenden svg_style.css?

[rudolfkoenig]

Oder holt er sich die aus der entsprechenden svg_style.css?

Soweit ich es auf die schnelle beurteilen kann, ja.
Da gab es noch ein Problem mit dem alten default-style (und dessen f11-Umbenennung von gestern), das habe ich jetzt (hoffentlich) gefixt.

[xenos1984]

Die Farben der Plot-Linien komfortabel anpassen zu können (und vielleicht noch noch weitere hinzuzufügen), zumindest bei f18, wäre tatsächlich nicht schlecht. Von Natur aus ist f18 ja schon recht flexibel und konfigurierbar. Wenn man allerdings z.B. bei den Stil-Einstellungen "Preset: dark" auswählt, sind die Plots mit dunklen Linien auf dunklem Grund etwas suboptimal. Soll heißen, einerseits wird dem Benutzer mit den Presets eine schnelle und einfache Möglichkeit gegeben, zwischen hellen und dunklen Layouts zu wechseln, aber wenn man dann auch noch die Plots im neuen Layout "hübsch" haben möchte, braucht es doch wieder mehr Bastelei...

[rudolfkoenig]

Ich habe damals auch die Linien umfaerben wollen, habe aber fuer dark keine schoenen Farben gefunden => wenn Du welche hast, bitte verraten.
Weiterhin ist mir nichts Elegantes eingefallen, so viele Farben zu setzen, und ich wollte die Benutzer nicht erschlagen.

Ansonsten gibts beim dynamischen SVG-Einfaerben noch ein "race condition", es funktioniert nicht zuverlaessig bei mir.
Weiss nur nicht so recht, was ich anders machen soll.

[xenos1984]

Ich habe damals auch die Linien umfaerben wollen, habe aber fuer dark keine schoenen Farben gefunden => wenn Du welche hast, bitte verraten.

Wenn ich mir die Grafiken von Damian im ersten Beitrag ansehe, würde ich sagen, die Farben sehen dort schon mal besser aus. Mein Ansatz auf dunklem Hintergrund wäre z.B. Achsen und Schrift weiß oder hellgrau zu machen, und für die Graphen CMY / RGB / Regenbogenfarben. Vielleicht RGB aufhellen, z.B. #ff8080. Oder Zwischenstufen, wie #ff8000, zwischen rot und gelb etc. - so käme man auf 12+ Farben.

Weiterhin ist mir nichts Elegantes eingefallen, so viele Farben zu setzen, und ich wollte die Benutzer nicht erschlagen.

Ansonsten gibts beim dynamischen SVG-Einfaerben noch ein "race condition", es funktioniert nicht zuverlaessig bei mir.
Weiss nur nicht so recht, was ich anders machen soll.

Ich habe mir schon einmal angesehen, wie der Code funktioniert. Vielleicht fällt mir etwas dazu ein.

[Damian]

Wenn ich mir die Grafiken von Damian im ersten Beitrag ansehe, würde ich sagen, die Farben sehen dort schon mal besser aus. Mein Ansatz auf dunklem Hintergrund wäre z.B. Achsen und Schrift weiß oder hellgrau zu machen, und für die Graphen CMY / RGB / Regenbogenfarben. Vielleicht RGB aufhellen, z.B. #ff8080. Oder Zwischenstufen, wie #ff8000, zwischen rot und gelb etc. - so käme man auf 12+ Farben.

Ich habe mir schon einmal angesehen, wie der Code funktioniert. Vielleicht fällt mir etwas dazu ein.

Bei dunklen Styles würde ich den Hintergrund dunkler wählen, z.B. rgb(32,32,32) (siehe erster Post).

Schöner sieht natürlich ein Hintergrund mit leichtem Helligkeitsverlauf, z. B.:

Code Auswählen Erweitern

'<linearGradient id="gradbackbar" x1="0" y1="1" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(32,32,32);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(64, 64, 64);stop-opacity:0.7"/></linearGradient>';

siehe: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_eines_Zahlenwertes_mit_Hilfe_der_universellen_SVG-Funktion_bar

Ich weiß nicht, ob es der richtige Ansatz ist, so viel feste Kombinationen vorzugeben, es ist jetzt schon unübersichtlich und trotzdem geht vieles nicht oder passt nicht zur Anwendung.

Neben der Auswahl einer css-Klasse, könnte man im Eingabefeld eine Kombination aus:

<Plot-Typ>,<Farbe der Linie>,<optionale Füllung <von Farbe>,<Transparanz>-<bis Farbe>:<Transparanz>>

angeben.

z.B.

fill,@red,@red:0.3-@red:0

Daraus kann man eine eindeutige def zur Laufzeit bilden, hier:

Code Auswählen Erweitern

  <linearGradient id="fill_red_0.3_red_0" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset=  "0%" style="stop-color:red; stop-opacity:0.3"/>
    <stop offset="100%" style="stop-color:red; stop-opacity:0"/>
  </linearGradient>

Das ist übrigens die Definition für Strom-Bezug im ersten Post.

So arbeite ich z. B. bei den svg-uiTable-Funktionen, dort verwende ich keine css-Klassen, sondern erzeuge aufgrund solcher Anwenderangaben eindeutige def-ids zur Laufzeit, die das Aussehen der Grafik beeinflussen.

[xenos1984]

So arbeite ich z. B. bei den svg-uiTable-Funktionen, dort verwende ich keine css-Klassen, sondern erzeuge aufgrund solcher Anwenderangaben eindeutige def-ids zur Laufzeit, die das Aussehen der Grafik beeinflussen.

Das hat natürlich den Vorteil, dass man für jede Linie den Stil individuell festlegen kann - Farbe, Füllung etc.

Nachteilig ist dann allerdings, dass man in jedem Plot die Farben anpassen muss, wenn man den Stil wechselt. Und wenn man mehrere FHEMWEB-Instanzen hat, die verschiedene Stile haben (z.B. für mehrere Benutzer), bekommen trotzdem alle die gleichen Linienstile.

Von daher denke ich, eine Trennung von Daten / inhaltlicher Plot-Definition und Stil, wie es jetzt der Fall ist, wäre schon eher sinnvoll. Also Farben als Teil des Stils, nicht des Plot-Inhalts.

[Damian]

Das hat natürlich den Vorteil, dass man für jede Linie den Stil individuell festlegen kann - Farbe, Füllung etc.

Nachteilig ist dann allerdings, dass man in jedem Plot die Farben anpassen muss, wenn man den Stil wechselt. Und wenn man mehrere FHEMWEB-Instanzen hat, die verschiedene Stile haben (z.B. für mehrere Benutzer), bekommen trotzdem alle die gleichen Linienstile.

Von daher denke ich, eine Trennung von Daten / inhaltlicher Plot-Definition und Stil, wie es jetzt der Fall ist, wäre schon eher sinnvoll. Also Farben als Teil des Stils, nicht des Plot-Inhalts.

ja, leider wird für f18 hell und f18 dunkel die gleiche svg_def.css-Datei verwendet. Damit wird man beim Wechsel des f18-Styles vermutlich ohnehin auch die Plots anpassen müssen, damit man wieder alles gut sehen kann.

[rudolfkoenig]

Mein Problem ist nicht das "wie anpassen" (das passiert jetzt schon mit dem Hintergrund), sondern "woher nehme ich sinnvolle Farben".

[Damian]

Mein Problem ist nicht das "wie anpassen" (das passiert jetzt schon mit dem Hintergrund), sondern "woher nehme ich sinnvolle Farben".

Und ich denke, dass man es nicht beantworten kann, weil es subjektiv ist und anwendungsabhängig.

[xenos1984]

Ich würde es so ähnlich machen wie bisher bei den Presets: Die Liste der dort konfigurierbaren CSS-Eigenschaften erweitern, und für die Plot-Farben "sinnvolle Vorschläge" machen, indem die bisher vorhandenen Presets erweitert werden. Also z.B. wenn der Benutzer "dark" auswählt, werden als Vorgabe helle Plot-Farben ausgewählt.

Was die konkrete Wahl der Farben angeht, würde ich es machen wie oben schon vorgeschlagen, oder zumindest ähnlich. Hier meine Liste von Farbvorschlägen:

Code Auswählen Erweitern


00ffff
40c0ff
8080ff
c040ff
ff00ff
ff40c0
ff8080
ffc040
ffff00
c0ff40
80ff80
40ffc0


Apropos: So wie ich das sehe, wird die Liste der Farben ziemlich oft wiederholt. In der svg_style.css für jeden Linienstil, in der svg_defs.svg für die Gradienten und in f18style.css in der Farbgebung der Auswahlliste im Plot-Editor. Vielleicht kann man das auch bündeln indem man jede Linienfarbe nur einmal spezifizieren muss (+ noch eine zweite Farbe für den Gradienten bei gefüllten Plots)?

[Damian]

Hier mein Farb-Vorschlag für dark. Bleibe aber der Meinung, dass je 9 feste Vorgaben nicht flexibel genug sind.

[Damian]

Wie wär es mit einem neuen Plottyp?