neue svg-Funktion: card

KernSani · 13 April 2021, 14:54:25

Zitat von: Damian am 13 April 2021, 07:54:47
Das Thema hatten wir schon öfters bei den ring-Funktionen. Ich habe immer wieder damit experimentiert und habe mich bewusst dagegen entschieden. Das Problem ist die dynamische Farbgebung, die dazu führt, dass bestimmte Farben auf hellen Hintergründen nicht gut sichtbar sind. Ich habe die Deckung des Hintergrunds bei card auf 90 % eingestellt, dabei wird bereits rot/lila beim hellen Style schon kritisch . Man könnte die Farben zwar abdunkeln, aber dann kann man sie auch nicht mehr gut unterscheiden.

Die Erkennbarkeit mancher Farben ist in der Tat ein Problem, wie man ja auch an meinem Screenshot erkennen kann. Vielleicht experimentiere ich mal noch ein bisschen weiter...

Zitat
Ich finde die dunklen cards auf hellen Hintergründen wirken sogar besser, als die in der Luft hängend wirkenden dunklen Ringe.

Ich mag meine in der Luft hängenden Kugeln

Damian · 13 April 2021, 15:43:26

Für die Timerangaben werde ich bestimmt noch SVG-Attribute einbauen, wie jetzt schon beim Header. Ich habe einen Trenner dazwischen geklemmt, damit sollte die Zuordnung besser erkennbar sein.

Damian · 13 April 2021, 16:05:54

So sieht es mit lightgray statt white als Default aus.

Damian · 13 April 2021, 17:56:49

Neue Version eingecheckt. Jetzt wird der Bereich unter oder oberhalb der x-Achse ausgeblendet, wenn dort keine Daten vorkommen. Das ist insbesondere bei Temperaturen interessant, die sowohl im positiven als auch im negativen Bereich vorkommen können. Damit wird die y-Skalierung besser ausgenutzt.

Damian · 13 April 2021, 20:17:58

Und so sieht es aus. Die gleiche Definition (-10 bis 30) mit positiven und negativen Werten und nur mit positiven Werten.

jkriegl · 14 April 2021, 12:23:40

Bei mir vor/nach update so. Benutze F8 unverändert.
Der negative Sonnen/Mond-Stand war doch nicht so schlecht.
Bei Tanke, etwas das ein/ausgeschaltet wird, wäre statt Linie Step deutlich besser, da so etwas nicht linear abfällt oder anhebt

Damian · 14 April 2021, 13:18:57

Zitat von: jkriegl am 14 April 2021, 12:23:40
Bei mir vor/nach update so. Benutze F8 unverändert.
Der negative Sonnen/Mond-Stand war doch nicht so schlecht.
Bei Tanke, etwas das ein/ausgeschaltet wird, wäre statt Linie Step deutlich besser, da so etwas nicht linear abfällt oder anhebt

Du hast keine negativen Werte, daher wird der negative Bereich nicht angezeigt. Wenn du welche hast, dann wirst du den auch sehen, so wie vorhin.

Für Step braucht man doppelt so viele Punkte, ich weiß nicht ob das nötig ist.

Warum ist die Schrift bei dir Schwarz?

jkriegl · 14 April 2021, 13:33:30

negative Werte: dann habe ich die Änderungsbeschreibung nicht verstanden - abwarten.
Steps: wenn man bei einem neuen Wert alte Werte in den nicht gefüllten slots weiterführt? s. Tanke-Beispiel
schwarze Schrift?? keine Ahnung: f18, anbei mystyle

Damian · 14 April 2021, 13:54:26

Die Schriftattribute für die Zeiten werden intern vergeben und haben nichts mit dem Style zu tun. Schau mal, ob es evtl. mit dem Browser zusammen hängt.

jkriegl · 14 April 2021, 16:00:15

Browser: - Firefox aktuell, Themes Standard
- MS Edge gleiches Bild
- android firefox gleiches Bild

edit: Windows Internet Explorer gleiches Bild

rabehd · 14 April 2021, 16:22:30

Zitat von: Damian am 13 April 2021, 17:56:49
Neue Version eingecheckt. Jetzt wird der Bereich unter oder oberhalb der x-Achse ausgeblendet, wenn dort keine Daten vorkommen. Das ist insbesondere bei Temperaturen interessant, die sowohl im positiven als auch im negativen Bereich vorkommen können. Damit wird die y-Skalierung besser ausgenutzt.

Finde ich nicht optimal. Das reine Ausblenden des positiven oder negativen Bereiches ist für mich eine Krücke.
Schöner fände ich die Skalierung der y-Achse anhand der min/max Werte.
Da mir eine y-Achse bei Temperaturen von -20 bis 40 nicht gefällt, habe ich erstmal die min/max Werte der letzten 7 Tage genommen. Später soll da noch eine Funktion schönere Werte bilden.

Damian · 14 April 2021, 16:31:12

Zitat von: rabehd am 14 April 2021, 16:22:30
Finde ich nicht optimal. Das reine Ausblenden des positiven oder negativen Bereiches ist für mich eine Krücke.
Schöner fände ich die Skalierung der y-Achse anhand der min/max Werte.
Da mir eine y-Achse bei Temperaturen von -20 bis 40 nicht gefällt, habe ich erstmal die min/max Werte der letzten 7 Tage genommen. Später soll da noch eine Funktion schönere Werte bilden.

Eine dynamisch Anpassung mit (min/max) habe ich schon programmiert. Das wird wahrscheinlich optional kommen.

Damian · 14 April 2021, 16:48:13

Zitat von: jkriegl am 14 April 2021, 16:00:15
Browser: - Firefox aktuell, Themes Standard
- MS Edge gleiches Bild
- android firefox gleiches Bild

edit: Windows Internet Explorer gleiches Bild

Merkwürdig, dann bin ich gespannt, ob das Problem noch bei anderen auftritt.

jkriegl · 14 April 2021, 17:13:09

Das mit einem dynamischen min/max Wert funktioniert bei svg-plot sehr gut. (Bei den Spritpreisen verschiebt sich die Bandbreite häufiger.)
Hier verwende ich [device:min-Wert], also keinen absoluten Wert. Soweit ich gesehen habe muss man neu initialisieren, falls sich der min-Wert geändert hat. Habe noch nicht getestet, ob mit einem event auf min-Wert aktualisiert wird.

Damian · 14 April 2021, 17:33:11

Zitat von: jkriegl am 14 April 2021, 17:13:09
Das mit einem dynamischen min/max Wert funktioniert bei svg-plot sehr gut. (Bei den Spritpreisen verschiebt sich die Bandbreite häufiger.)
Hier verwende ich [device:min-Wert], also keinen absoluten Wert. Soweit ich gesehen habe muss man neu initialisieren, falls sich der min-Wert geändert hat. Habe noch nicht getestet, ob mit einem event auf min-Wert aktualisiert wird.

Das würde wahrscheinlich sogar funktionieren, aber dann würdest du auch die Farbzuordnung verändern - also auch nur eine Krücke.

Ich muss mir noch überlegen, in welchem Argument ich weitere Eigenschaften von card unterbringe - da werden bestimmt noch einige kommen

Der eine mag es so, der andere so. Ich habe auch eine Zeit lang dynamische svg-plots benutzt, man kann besser kleine Änderungen erkennen, der Nachteil ist wieder, dass man nicht intuitiv die Größenordnung wahrnimmt - man muss genau auf die Skalenbeschreibung achten.

Ein weiterer Nachteil bei SVG-Plots ist, dass bei mehrfarbigen Plots, der höchste Punkt immer die gleiche Farbe annimmt, damit kann man sich nicht an den Farben orientieren. Bei card hat der gleiche Wert immer die gleiche Farbe, egal wie die Grafik skaliert ist.