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

[Sany]

Moin Damian,

Barometer mit Farbabschnitten sieht auch nicht schlecht aus

In unserer Standardatmosphäre ist der Standard-Luftdruck mit 1013,25 hPa definiert. Drüber ist hoher, drunter niedriger Luftdruck. In unseren Breiten üblicherweise max 1050 und minimal irgendwo bei 970. Wenns wirklich mal so weit runter geht sollte man sie Rollläden festhalten, da kommt dann richtig Sturm . Bei 1050 hilft die  , das ist dann meist richtig geiles Hochdruckwetter. Manche Barometer haben dann "Bereiche" dargestellt mit Sturm, Regen, wechselhaft, trocken oder so. Könnte man mit Farben umsetzen.
Noch 2 andere Sachen: heute morgen Update gemacht und ausprobiert. Sehr schön, wie sich die Parameter einzeln einstellen lassen. Für die Skalenwerte Min/Max würde ich die Nachkommastellen nicht darstellen. Das ist auf analogen Anzeigen auch nicht, die Skalenbeschriftung sind Ganzzahlen, dazwischen gibts dann die Striche für die Zehntel.
Und beim Wert mit Nachkommastellen habe ich mal 80% als Größe ausprobiert und finde, das sieht besser aus. Mit 85 ist der Unterschied nur wenig wahrnehmbar und die verkleinerte Nachkommastelle soll ja die "geringe Wichtigkeit" der Nachkommastelle unterstreichen. Sie gibt eher eine tendenz/einen Trend wieder. Ich nutze "font-weight:100" für eine "dünne" Schrift.

Viele Grüße

Sany

[Damian]

Moin Damian,In unserer Standardatmosphäre ist der Standard-Luftdruck mit 1013,25 hPa definiert. Drüber ist hoher, drunter niedriger Luftdruck. In unseren Breiten üblicherweise max 1050 und minimal irgendwo bei 970. Wenns wirklich mal so weit runter geht sollte man sie Rollläden festhalten, da kommt dann richtig Sturm . Bei 1050 hilft die  , das ist dann meist richtig geiles Hochdruckwetter. Manche Barometer haben dann "Bereiche" dargestellt mit Sturm, Regen, wechselhaft, trocken oder so. Könnte man mit Farben umsetzen.
Noch 2 andere Sachen: heute morgen Update gemacht und ausprobiert. Sehr schön, wie sich die Parameter einzeln einstellen lassen. Für die Skalenwerte Min/Max würde ich die Nachkommastellen nicht darstellen. Das ist auf analogen Anzeigen auch nicht, die Skalenbeschriftung sind Ganzzahlen, dazwischen gibts dann die Striche für die Zehntel.
Und beim Wert mit Nachkommastellen habe ich mal 80% als Größe ausprobiert und finde, das sieht besser aus. Mit 85 ist der Unterschied nur wenig wahrnehmbar und die verkleinerte Nachkommastelle soll ja die "geringe Wichtigkeit" der Nachkommastelle unterstreichen. Sie gibt eher eine tendenz/einen Trend wieder. Ich nutze "font-weight:100" für eine "dünne" Schrift.

Viele Grüße

Sany

ja, das war einfach ein Beispiel für Abschnitte, ich habe mich anhand von Barometern (suche "Luftdruck" als Bilder) orientiert.

Edit: Das Format für Min/Max entspricht dem Format dem dargestellten Hauptwert, die Anzahl der Nachkommastellen ist einstellbar

[Sany]

du könntest ja min/max unformatiert durchreichen. Oft ist es ja 0..100 oder wie in meinem Beispiel der "übliche" Temperaturbereich. Als Skala und für die Internen Berechnungen reicht der Ganzzahlwert, der angezeigte Wert bekommt dann die gewünschten Nachkommastellen. Im Anfängerfragen-Bereich möchte jemand die Netzfrequenz messen, da könnte min/max natürlich 49.5-50.5 oder so sein. Das sollte dann auch so an der Skala sein.

[Damian]

Spätestens mit der Einführung von Min/Max-Beschriftung außerhalb der Grafik muss man sich Gedanken um helle Styles machen.

Ein Hintergrund könnte das Problem einfach lösen.

[Damian]

Idee verworfen, bei nicht zusammenhängenden Ringen sieht es nicht gut aus.

[Damian]

Neue Version eingecheckt.

-Einige Helligkeitsanpassungen der Hintergründe (bei hellen Styles waren sie zu hell - man konnte Farben schlecht erkennen)
-Min/Max-Angaben ohne Formatierung

Man kann jetzt für alle Elemente die Helligkeit separat steuern. Das wird über den $ligthness-Parameter definiert:

icon_uring ($model,$icon,$value,$min,$max,$minColor,$maxColor, $unit,$decFont,$size,$colorRef,$lightness)

$lightness:"ring,innenring,minmax,unit,number,icon"

Die Angaben erfolgen zwischen 0 und 100, 50 ist Standard.

Beispiele:

Code Auswählen Erweitern

icon_uring("0,1,1,4","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)],"50,40,70,100,50,80")

Code Auswählen Erweitern

icon_uring ('0,1,1',"air",[ESPEasy_Eingang_CO2:PPM],400,1200,undef,undef,'ppm',0,130,[(600,120,1000,60,1200,0)],"50,35,40,35,50,35")

[Sany]

Hi Damian,

funktioniert super, somit sind eigentlich alle Parameter beliebig zu konfigurieren.
Eine Sache ist mir noch aufgefallen:
Wenn der Sensorwert max überschreitet wird an der Skala der max-Wert auf diesen Sensorwert gesetzt. Bei einer definierten Farbeinteilung kommt dann irgendeine Farbe (wurde statt rot dann so hellblau) und der Farbring wird auch anders aufgebaut. Nun ist das ja vermutlich eine Konstellation, die eher sehr selten aufritt. Ist mir bei meinem CO2 Sensor aufgefallen. Der kann halt bis 40000ppm anzeigen, das will ich aber gar nicht. Sondern eine Skala von, sagen wir mal 0..2000. Wenn jetzt aber, durch welche Umstände auch immer, der Sensor Werte über 2000 liefert sollte die Skala trotzdem bei 2000 enden. Man könnte evtl. den Pointer ausblenden, der Sensorwert wird trotzdem mit dem aktuellen Wert angezeigt. Wie gesagt, eine seltene Konstellation, sollte aber nicht die Skala verändern. Wenn ich z.B. noch einen Farbwert für den Ring definiere, der oberhalb von max liegt, dann bekomme ich weitere Skalenring-ausschnitte irgendwo angezeigt. Also Skalenwerte und Farbring(innerer Ring) sollten fix sein und bleiben, wenn sie definiert sind.

Andere Frage noch: zur besseren Übersicht nehme ich manchmal DOIF_Readings um z.B. Icons je nach Wert auszuwählen (myIcon=([Sensor:wert] > 10)?"icon1\@farbe1" : ([Sensor:wert] > 5)?"icon2\@farbe2" : "icon3\@farbe3". Die baue ich dann per [$SELF:myIcon] im uiTable ein. Ist das sinnvoll, im Bezug auf events/Systemlast? Ist ja doch irgendwie ein Zwischenschritt, und eigentlich nur, um die uiTable Definition nicht kilometerlang werden zu lassen. Meinst Du, es gäbe eine Möglichkeit, diese langen ui-Table Definitionen irgendwie untereinander zu schreiben (so ähnlich wie bei ftui, also eigentlich css)

Gruß

[Damian]

Ich werde da mal eine Begrenzung für den maximalen Wert einbauen.

Wenn du größere Abfragen als Parameter übergeben willst, dann bietet sich an das in eine Funktion auszulagern, die dir das entsprechende Icon liefert.

Code Auswählen Erweitern

{packag ui_Table;
sub myicon {

if ...
elsif ...
else ...

}

icon_ring(myicon([dev:reading],.....)

Bsp:

Code Auswählen Erweitern

defmod Umwelt DOIF ##
attr Umwelt uiTable {package ui_Table;;\
\
sub prod_icon{\
  my ($produktion)=@_;;\
  \
  if ($produktion > 0) {\
   return("sani_solar\@colorVal1")\
  } else {\
   return ("fa_bolt\@colorVal2")\
  }\
}\
}\
icon_ring2([zaehler:l-Produktion] > 0 ? "sani_solar\@colorVal1":"fa_bolt\@colorVal2",[zaehler:l-Produktion],0,3.6,30,60,"PV kW",130,undef,"1,,font-size:50%",[zaehler:l-Bezug,0],0,1.5,120,0,"Netz kW",undef,"1,,font-size:50%")\
\
icon_ring2(prod_icon([zaehler:l-Produktion]),[zaehler:l-Produktion],0,3.6,30,60,"PV kW",130,undef,"1,,font-size:50%",[zaehler:l-Bezug,0],0,1.5,120,0,"Netz kW",undef,"1,,font-size:50%")

Beides liefert das gleiche Ergebnis.

[Sany]

Ja, super. Das "produziert" dann auch die wenigsten Events, sprich den Event vom "Sensor" brauche ich, damit die ui-Table die Anzeige Ändert, der Wert/Icon etc. wird "on-the-fly" gerechnet. Der Zwischenschritt DOIF_Readings oder event_Reading entfällt.

Danke für den Tipp!

[jkriegl]

Bin am Suchen wie ich eine Zeitsteuerung optimal darstellen kann.
Die Einstellung ist Komfort von - bis  (3x), sonst Absenkung.
Beispiel: 07:20;08:40;15:00;15:00;17:20;21:10;selected
Der mittlere Bereich ist ungenutzt

[Damian]

Neue Version eingecheckt.

-Min/Max-Begrenzung

[Sany]

Moin Damian,

Neue Version eingecheckt.

-Min/Max-Begrenzung

das funktioniert genau wie gewünscht. Vielen Dank

Aus einem andern Post:

Man kann jetzt auch SVG-Group-Attribute für den Innenring angeben.

ich hab da mal gesucht, was das bedeutet, bin aber nicht schlau draus geworden. Für SVG Group-Attribute finde ich nur so etwas wie stroke, stroke-width, opacity, aber alles was ich probiert habe zeigt keine Wirkung. Hättest Du da Beispiele oder vllt. einen Link zu einer Referenz?
Anders gefragt: kann ich die Breite des Innenrings beeinflussen? Da wollte ich mal rumprobieren, wie gut das aussieht.

Gruß

Sany

[Damian]

Aus einem andern Post:ich hab da mal gesucht, was das bedeutet, bin aber nicht schlau draus geworden. Für SVG Group-Attribute finde ich nur so etwas wie stroke, stroke-width, opacity, aber alles was ich probiert habe zeigt keine Wirkung. Hättest Du da Beispiele oder vllt. einen Link zu einer Referenz?
Anders gefragt: kann ich die Breite des Innenrings beeinflussen? Da wollte ich mal rumprobieren, wie gut das aussieht.

Die SVG-Group- und SVG-Text-Attribute sind leider unterschiedlich, siehe SVG-Referenz im Internet.

Ich hatte in der Doku bereits ein Beispiel dazu gemacht:

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_eines_Icons_mit_einem_Zahlenwert_mit_Hilfe_der_universellen_SVG-Funktion_icon_ring.2Ficon_mring.2Ficon_uring

Man kann auch die Breite angeben, irgendwann überlappen sich aber die Ringe, der Radius wird an einer anderen Stelle definiert - der ist nicht veränderbar.

Code Auswählen Erweitern

icon_uring ('0,font-weight:bold,stroke-width="2" opacity="0.4"',([vaillant:Pumpenstatus] eq '4' ? 'sani_buffer_temp_down@Darkorange' : 'sani_buffer_temp_down@white'),[vaillant:Umlaufmenge],0,20,120,0,'l/min')|

[Sany]

kaum macht man es richtig, schon gehts!
hatte mich an der Schreibweise vom min/max (fill:white) orientiert, es muss aber z.B. stroke="2" heißen. Damit muß die Gruppe "model" dann in Singel-quotes.
bei einfachen Angaben so:
"0,1,0,4" Farbverlauf, min/max anzeigen,kein Innenring, Zeiger 4px (ok, vielleicht ist die Kombi nicht soo sinnvoll, nur zur Demo)
bei Angaben, die in Double-Quotes stehen müssen:
'1,fill:white,stroke-width="2",4'  monochrome, min/max in weiß, Innenring 2px breit, Zeiger 4px.
das führt dann zu
'1,fill:'.$_myTextColor.',stroke-width="3",4' wenn man eine Variable mit einbauen möchte.
soweit klappt das jetzt.

[Damian]

kaum macht man es richtig, schon gehts!
hatte mich an der Schreibweise vom min/max (fill:white) orientiert, es muss aber z.B. stroke="2" heißen. Damit muß die Gruppe "model" dann in Singel-quotes.
bei einfachen Angaben so:
"0,1,0,4" Farbverlauf, min/max anzeigen,kein Innenring, Zeiger 4px (ok, vielleicht ist die Kombi nicht soo sinnvoll, nur zur Demo)
bei Angaben, die in Double-Quotes stehen müssen:
'1,fill:white,stroke-width="2",4'  monochrome, min/max in weiß, Innenring 2px breit, Zeiger 4px.
das führt dann zu
'1,fill:'.$_myTextColor.',stroke-width="3",4' wenn man eine Variable mit einbauen möchte.
soweit klappt das jetzt.

Ich habe eben die SVG-Attribute vereinheitlicht. Es wird jetzt auch für den Ring das Style-Attribut, wie bei der Schrift verwendet. Damit hat man einheitliche Syntax, sonst wäre es unnötig kompliziert mit verschiedener Syntax umzugehen. Ebenso entfällt das Problem mit den doppelten Anführungszeichen.

Du müsstest die Syntax bei dir dann nochmal anpassen:

"1,fill:white,stroke-width:2,4"  monochrome, min/max in weiß, Innenring 2px breit, Zeiger 4px.