neue svg-Funktionen: icon_ring, icon_bar, cylinder_bars, icon_ring2

[Damian]

Ich muss schauen, wie ich es geschickt in das bestehende Ring-Ökosystem einbaue - ich habe da aber schon Ideen.

So, Idee umgesetzt.

Man kann jetzt bei ring/icon_ring-Funktionen Farben abschnittsweise definieren.

Die Änderungen sind abwärtskompatibel. Hier am Beispiel der icon_ring/icon_mring-Funktion erklärt.

Die Syntax ist geblieben:

icon_ring ($icon,$value,$min,$max,$minColor,$maxColor,$unit,$decFont,$size, $colorFunc,$gradient,$light,$lightnumber)

Anstatt einer Farbfunktion, kann man jetzt auch eine Referenz auf ein Array angeben.

Das Array hat folgenden Aufbau:

[(<erste Wertgrenze>,<Farbwert>,<zweite Wertgrenze,<Farbwert>,...,<letzte Wertgrenze>,<Farbwert>)]

Übrigens die Syntax für Arrayreferenzangaben [(...)] ist mal nicht von mir erfunden, sondern ist reine Perlsyntax.

Code Auswählen Erweitern

defmod di_pool DOIF ##
attr di_pool uiTable { package ui_Table}\
icon_mring("humidity",6.5,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])|\
icon_mring("humidity",7,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])|\
icon_mring("humidity",7.3,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])\
\
icon_ring("humidity",6.5,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])|\
icon_ring("humidity",7,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])|\
icon_ring("humidity",7.3,6,8,undef,undef,"PH",1,100,[(6.8,0,7.2,120,8,0)])\
\
icon_mring("weather_barometric_pressure",0.9,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_mring("weather_barometric_pressure",1.2,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_mring("weather_barometric_pressure",1.6,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_mring("weather_barometric_pressure",2,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])\
\
icon_ring("weather_barometric_pressure",0.9,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_ring("weather_barometric_pressure",1.2,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_ring("weather_barometric_pressure",1.6,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])|\
icon_ring("weather_barometric_pressure",2,0,3,undef,undef,"bar",1,100,[(0.8,0,1,60,1.5,120,1.7,60,3,0)])

[Robothaler]

Unglaublich! -> Wenn das nicht gezaubert ist...

Das ist Perfekt!

Vielen Dank für die schnelle Umsetzung!!!!

[Damian]

Evtl. ist es besser, wenn der Innenring weniger aufdringlich ist, damit der Hauptring besser zur Geltung kommt. Hier ist der Innenring etwas dunkler und schmaler.

Oder als Außenring.

[Robothaler]

Der schmale Innenring gefällt mir auch deutlich besser.

Damit ist die Gewichtung eher auf dem eigentlichen Wert.

[Damian]

Ich habe die neue DOIF-Version mit schmalen Innenring eingecheckt. Doku werde ich im Wiki aktualisieren.

https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1

PS Nebenbei habe ich eine Ungenauigkeit korrigiert - die Ringe konnten je nach Wert etwas auseinander laufen. Jetzt ist es auf ein hundertstel genau, da läuft nichts mehr auseinander.

[Robothaler]

Ich habe das bei mir schonmal eingearbeitet.

Du bist echt genial!
Die neue zusätzliche Funktion ist ein Mehrwert! Grenzwerte können damit sehr anschaulich visualisiert werden.

Vielen Dank für die prompte Entwicklung!

[Damian]

Ich habe das bei mir schonmal eingearbeitet.

Du bist echt genial!
Die neue zusätzliche Funktion ist ein Mehrwert! Grenzwerte können damit sehr anschaulich visualisiert werden.

Vielen Dank für die prompte Entwicklung!

Ich denke die neue Darstellung können viele gut gebrauchen.

Ich plane zu Ostern neue mächtige SVG-Funktionen

[Robothaler]

Ich plane zu Ostern neue mächtige SVG-Funktionen

Da bin ich aber gespannt was da auf uns zukommt! 

[Damian]

Da bin ich aber gespannt was da auf uns zukommt! 

Die Idee: Infocards mit Statistik, Mini-Plots, Ringen ohne Log-Dateien und ohne zusätzliche Module als einfacher Perlfunktionenaufruf.

[Robothaler]

Das hört sich vielversprechend an.   

[Sany]

Hallo Damian,

da wird Ostern ja wie Weihnachten! Auch ich freue mich über die stetige Weiterentwicklung.
Zu den farbigen Skalen, wo man mehrere Bereiche angeben kann, fänd ich einen "Zeiger" fast noch besser abzulesen, als einen weiteren farbigen Ring. Das muss ja nur ein kleiner Strich senkrecht durch den Skalenring sein, selbe Farbe wie der Wert, der z.B nach Funktion eingefärbt wird oder nach der Bereichsfarbe. Auch schön wären Werte für Anfang und Ende der Skala, evtl. kleine "Ticks" am Skalenrand als Skala.
Was hälst Du von einer (oder mehrerer) globalen Variable für Farben? Ich habe z.B. in meiner Datei, in der ich meine eigenen Funktionen zu DOIF ablege (my_uiTable.tpl) Farbvariablen eingetragen, unter anderm:

Code Auswählen Erweitern

$_colorIconOFF = "dimgray"; ## Icons im Off-Zustand
$_colorBGlabel = "#202020";
$_colorLegend      = "#CCCCCC";

in den uiTables kann ich die nun direkt verwenden für Texte, SVGs z.B. Ausser bei den Farben, die als hue geliefert werden müssen klappt das prima. Sollte ich mal ein anderes Farbschema wollen kann ich dann zentral die Farbe ändern. Gerade für die Legenden wie Units oder Skalenwerte wäre das super. Andererseits kann man das dann auch in jeder uiTable unabhängig vergeben.

Vielleicht passt da ja was für Deine Vorhaben.

Freu mich drauf!

Viele Grüße

Sany

[Damian]

So sieht es aus mit kleinen Markierungen - ist unauffälliger, obwohl mir dir andere Variante auch gut gefällt, mal schauen - vielleicht optional.

Ein zentrales Farbschema wäre vermutlich besser in CSS-Dateien aufgehoben, muss alles sauber durchdacht sein, sonst hat man schnell eine Sackgasse, die schwer wieder rückgängig zu machen ist.

[Sany]

mit Skala und kleinen Ticks meinte ich so etwas in der Art wie auf den Bildern.
Bin schon gespannt, was da so kommt.

[Damian]

mit Skala und kleinen Ticks meinte ich so etwas in der Art wie auf den Bildern.
Bin schon gespannt, was da so kommt.

Meine Umsetzung von gestern hast du schon gesehen?

[Sany]

Ja, hatte ich. Das ist aber irgendwie "andersrum". Ich denke, ein (feiner) Ring mit Farben für die Wertebereiche, also üblicherweise grün, gelb, rot, ein hellgrauer Skalenrand mit Ticks (nicht viele) oder nur Ticks, ein "Zeiger" wie auf den Beispielen, also ein Strich senkrecht zur Skala, so dass er auf beiden Seiten etwas übersteht, der Wert als Zahl in der Farbe des Bereichs, in dem er sich befindet, die Unit und Anfang/Ende der Skala in hellgrau.
Viele Worte, ich habs mal versucht zu Zeichnen