[gelöst] Merkwürdiges Verhalten von ls, lw und "with steps" im Plot

[gichtl]

Die Linienbreite und Farbe wird im Plot nicht wie erwartet umgesetzt, und das Diagramm wirkt damit etwas verwaschen. In der Vergrößerung sieht man die unsauber gerenderte Graphik

Ein einfaches Beispiel mit l5 (schwarz), lw 1 und steps

Code Auswählen Erweitern

plot "<IN>" using 1:2 axes x1y2 title 'Leistung W' ls l5 lw 1 with steps,\
und der vergrößerte Screenshot im Anhang.

Die Linie ist nicht schwarz sondern dunkelgrau und durchgängig zwei Pixel breit anstatt einem. Also im Prinzip aneinandergereihte Rechtecke, und dort wo sich zwei solche "Rechtecke" überlappen sieht man dann einen dunkleren Punkt. Auch das Raster ist kein einzelner knackiger Punkt, sondern immer ein Rechteck aus 2x2 Pixeln, und auch die Linienbreite der Steps auf der x-Achse ist immer 2 Pixel breit. Damit wirkt alles recht verwaschen.
Bei den Diagrammen aus dem Wiki (z.B. https://wiki.fhem.de/wiki/SVG) tritt das ebenfalls auf.


Gibt es die Möglichkeit die Plots grundsätzlich schärfer und knackiger ohne diese künstliche Überzeichnung darzustellen, also eine echte 1 Pixel breite Linie in tiefschwarz und nicht nur dunkelgrau, und auch ein schlankes Raster mit einzelnen Pixeln anstatt der breiten Klötzchen?

[rudolfkoenig]

Gibt es die Möglichkeit die Plots grundsätzlich schärfer und knackiger ohne diese künstliche Überzeichnung darzustellen.

Mir ist keine bekannt.
Ein "workaround" waere ein hoeher aufloesendes Bildschirm.

[gichtl]

Der "workaround" führt leider nicht zum Ziel, da auch auf einem höher auflösenden Bildschirm die Pixel exakt identisch dargestellt werden, die Linie also nach wie vor zwei Pixel breit ist.

Wenn man den Link im Wiki Erklärung für die Linetypes folgt ist bei den Beispielen die Diagrammlinie für "lines", "dots" und "steps" genau 1 Pixel breit und tiefrot. Scheinbar macht also das FHEM Frontend daraus 2 Pixel und ändert die Farbsättigung.

[Damian]

Der "workaround" führt leider nicht zum Ziel, da auch auf einem höher auflösenden Bildschirm die Pixel exakt identisch dargestellt werden, die Linie also nach wie vor zwei Pixel breit ist.

Wenn man den Link im Wiki Erklärung für die Linetypes folgt ist bei den Beispielen die Diagrammlinie für "lines", "dots" und "steps" genau 1 Pixel breit und tiefrot. Scheinbar macht also das FHEM Frontend daraus 2 Pixel und ändert die Farbsättigung.

Auch wenn in FHEM eine SVG-Linie 1 Pixel breit definiert wurde, dann ist sie im Browser noch lange nicht 1 Pixel dick, das hängt vom Skalierungsfaktor des Browsers ab. Wenn etwas unscharf wirkt, dann hat ggf. auch das Betriebssystem etwas skaliert - ein häufiges Verhalten unter Windows.

[rudolfkoenig]

Scheinbar macht also das FHEM Frontend daraus 2 Pixel und ändert die Farbsättigung.

FHEM setzt einfach das "stroke-width" Atribut im SVG auf dem ls Wert, und malt nicht selber, geschweige denn implementiert Anti-Alias.
Mit Anti-Alias versucht man die Treppenartigkeit einer Linie zu vermeiden, deshalb gibt es die unscharfen Linien bzw. die Punkte mit der geringeren Farbsaettigung.

Gerade gelernt: im CSS kann man

Code Auswählen Erweitern

.SVGplot.l0 { shape-rendering:crispedges; }
setzen, dann werden die Linien mit dem Stil l0 wieder so gemalt, wie in den 80-ern.

[gichtl]

Perfekt!

Damit wirken die Diagramme viel eleganter und leichter, und auch die Farbe ist nun tiefes sattes schwarz.
Ich habe gleich mal

Code Auswählen Erweitern

.SVGplot { shape-rendering:crispedges; }
gesetzt, und damit sind auch alle Unschärfeprobleme vom Rahmen, der x-Steps und der Gitterpunkte passé.

Einziges "Manko" ist die fehlende Schraffierung bei l0fill_stripe. Dort ist für stroke-width="0.5" angegeben, und halbe Pixel funktionieren nun mal schlecht. Also dafür noch geschwind ein zusätzliches shape-rendering:geometricPrecision; hinterhergeschoben, damit das wie bislang gerendert wird.

Somit wird nun alles exakt gezeichnet wie vorgegeben, und man sieht plötzlich viel mehr Details. Am Android Telefon (smallscreen) ist der visuelle Unterschied enorm, fast als ob man die "Handbremse" gelöst hat und von qHD mit 540x960 auf ein echtes Full-HD Display umsteigt.

Im Anhang zum Vergleich der ursprüngliche Screenshot mit dem verbesserten Rendering.

[Damian]

Dann musst du sehr gute Augen haben oder mit einer niedrigen Auflösung arbeiten.

Bei diesem Beispiel:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

ist der erste Kreis auf einem FullHD-Monitor runder

Auf meinem 4K-Monitor kann ich kaum Unterschiede sehen.