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

Damian · 30 Januar 2021, 20:03:18

Ich habe eine neue svg-Funktion kreiert.

Edit: Die letzte Version wurde eingecheckt.

Aktuelle Doku siehe:

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#icon_ring-Funktionen

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#icon_bar-Funktionen

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Balkendarstellung_mehrerer_Zahlenwerte_mit_Hilfe_der_universellen_SVG-Funktion_cylinder_bars

LexPoud · 30 Januar 2021, 23:07:29

Hallo, wie genau sieht die Funktion denn aus?

Damian · 30 Januar 2021, 23:47:10

Zitat von: LexPoud am 30 Januar 2021, 23:07:29
Hallo, wie genau sieht die Funktion denn aus?

Der Aufbau wird dem der bisherigen ring-Funktionen entsprechen https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#SVG-uiTable-Funktionen.
Es gibt einen zusätzlichen Parameter, das ist der Name des Icons.

Ich bin noch am testen. Ich werde dann hier eine Version zum Testen mit Kurzdoku hochladen.

Damian · 31 Januar 2021, 12:48:48

So, die erste Version ist fertig, siehe Anhang:

Es gibt neue Funktionen:

icon_ring
icon_temp_ring
icon_hum_ring

und ohne Farbverlauf (monochrom)

icon_mring
icon_temp_mring
icon_hum_mring

Die Syntax entspricht der bisherigen der ring-Funktion ohne icon (siehe: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#SVG-uiTable-Funktionen)

Sie wurde um einen neuen Parameter icon erweitert.

hier z. B. für icon_temp_ring und icon_temp_mring

Zitaticon_temp_ring/icon_temp_mring ($icon,$temp_value,$temp_min,$temp_max,$size,$lightring,$lightnumber)

$icon # Icon
$temp_value # Temperatur
$temp_min, # minimale Temperatur, optional, default=-20
$temp_max, # maximale Temperatur, optional, default=60
$size, # Größe der Grafik, optional, default=100
$lightring, # Helligkeit des Ringes (0-100), optional, default=50
$lightnumber # Helligkeit der Zahl (0-100), optional, default=50

Leider lassen sich nicht alle FHEM-Icons einheitlich skalieren.

Dafür lässt sich der Parameter icon mit weiteren optionalen kommagetrennten Angaben definieren:

"Iconname,Skalierungsfaktor,x-Position,y-Position"

Skalierungsfaktor und die Positionen sind optional.

Beispieldefinition (Output siehe Anhang):

Code Auswählen

defmod di_icon_ring DOIF ##
attr di_icon_ring uiTable {package ui_Table;;}\
icon_ring ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",undef,undef,2)|\
icon_hum_mring ("weather_humidity,0.7,2",[Aussensensor:humidity])|\
icon_temp_mring ("temp_outside",[Aussensensor:temperature])|\
icon_temp_mring ("temp_temperature,0.7,5",[TH_Bad_HM:measured-temp])

Vielleicht kennt sich jemand besser aus mit html und weiß wie man diesen Teil so definiert, dass ein Icon immer sauber hineinpasst ohne es skalieren zu müssen:

Code Auswählen

  if (defined $icon) {
    $out.=sprintf('<symbol id="Image'."_$ic".'" x="%d" y="%d" viewBox="0 0 %d %d">',$ix, $iy,640/$iscale,640/$iscale);
    $out.= ::FW_makeImage($ic);
    $out.='</symbol>';
    $out.='<g stroke="rgb(128,128,128)" >';
    $out.='<use href="#Image'."_$ic".'" height="18" width="18" />';
    $out.='</g>';
  }

Damian · 31 Januar 2021, 19:04:14

Ich habe noch etwas am Layout gebastelt. Durch einen schmaleren Ring habe ich etwas mehr Platz für ein größeres Icon geschaffen.

Im Anhang der Vergleich alt und neu.

Edit: Aktuelle Version im ersten Post.

Damian · 31 Januar 2021, 20:27:29

Man kann jetzt auch Zustände anzeigen, indem man selbst die Farbe des Icons vorgibt.

Wo ich bisher zwei Icons brauchte, komme ich jetzt mit einem aus.

Beispiel für Zirkulationspumpe mit Temperaturanzeige. Das Iconsymbol verfärbt sich abhängig, ob die Pumpe läuft oder nicht:

Code Auswählen

icon_temp_mring(([Zirk] eq "off"?"sani_pump\@white":"sani_pump\@Darkorange"),[ESPEasy_ESP_Temp_Zirkulation:Temperature],15,70)

Im Anhang alte Darstellung mit zwei Symbolen und neue mit der obigen Definition.

Damian · 31 Januar 2021, 20:32:33

Als nächstes werde ich mir die bar-Funktion vornehmen. Jetzt kann man drei mal raten, wie die neue icon_bar aussehen wird. Im Anhang meine bisherige Darstellung.

Damian · 31 Januar 2021, 21:11:14

Ich glaube weniger ist mehr, ich habe mal die Kontur-Linien rausgenommen (Version 0.4).

cwagner · 02 Februar 2021, 12:52:04

Klasse, das ermöglicht eine erhebliche Informationsverdichtung und Verbesserung der Verständlichkeit, wie ich finde. Habe sofort ein Mini-Dashboard für meine Heizungssteuerung zusammengestellt:
Von links nach rechts zeigen die Symbole, ob der Kessel feuert, die Umwälzpumpe läuft, die Heizkörper sollten warm sein, die Rücklaufanhebung aus der Solarthermie steuert was bei, die Pumpe für Warmwasser ist eingeschaltet und die Pumpe für die Fußbodenheizkreisläufe ist an.
Die Temperaturen sind die Kesseltemperatur, der Vorlauf, der Rücklauf, der Speicher für die Rücklaufanhebung (hier sieht man meinen Fake, denn hier habe ich das Symbol bei OFF eingeblendet, um es zeigen zu können; tatsächlich ist der Rücklauf zu hoch und die Rücklaufanhebung müsste in diesem Moment ausgeschaltet sein), dann die Temperatur des solargespeisten Warmwasserspeichers und schließlich die Vorlauftemperatur der Fußbodenheizung (heute Morgen kurz nach Start, ein bisschen niedrig noch).

Danke, Damian, für diese weitere Bereicherung des DOIF-Ökosystems.

Herzliche Grüße

Christian

Damian · 02 Februar 2021, 14:02:18

Zitat von: cwagner am 02 Februar 2021, 12:52:04
Klasse, das ermöglicht eine erhebliche Informationsverdichtung und Verbesserung der Verständlichkeit, wie ich finde. Habe sofort ein Mini-Dashboard für meine Heizungssteuerung zusammengestellt:
Von links nach rechts zeigen die Symbole, ob der Kessel feuert, die Umwälzpumpe läuft, die Heizkörper sollten warm sein, die Rücklaufanhebung aus der Solarthermie steuert was bei, die Pumpe für Warmwasser ist eingeschaltet und die Pumpe für die Fußbodenheizkreisläufe ist an.
Die Temperaturen sind die Kesseltemperatur, der Vorlauf, der Rücklauf, der Speicher für die Rücklaufanhebung (hier sieht man meinen Fake, denn hier habe ich das Symbol bei OFF eingeblendet, um es zeigen zu können; tatsächlich ist der Rücklauf zu hoch und die Rücklaufanhebung müsste in diesem Moment ausgeschaltet sein), dann die Temperatur des solargespeisten Warmwasserspeichers und schließlich die Vorlauftemperatur der Fußbodenheizung (heute Morgen kurz nach Start, ein bisschen niedrig noch).

Danke, Damian, für diese weitere Bereicherung des DOIF-Ökosystems.

Herzliche Grüße

Christian

sieht gut aus

Du kannst natürlich den minimalen Temperaturwert runtersetzen, damit auch kleinere Werte sinnvoll angezeigt werden. Das letzte Symbol könntest du per Y-Position etwas tiefer setzen, wenn du willst. Die einfarbigen mring Funktionen kennst du bestimmt auch - wenn es einem zu bunt wird. Sie habe ja die gleiche Syntax.

In der aktuellen Version 0.5 im ersten Post, habe ich bei allen ring-Funktionen die Ringdicke etwas vereinheitlicht. Die Konturlinien sind jetzt bei allen ring-Funktionen nicht mehr dabei.

Bei der zukünftigen icon_bar-Funktion wird man auch die Überschrift im Widget einblenden können.

Damian · 02 Februar 2021, 20:51:54

So sieht eine icon_bar-Funktion aus. Wenn es einem zu bunt ist, so werden sich die Farbverläufe und die Farben wie bei der ring-Funktion individuell anpassen lassen.

Damian · 02 Februar 2021, 21:35:27

Auch hier: weniger ist mehr - bar ohne Konturlinie und schmaler.

cwagner · 04 Februar 2021, 08:53:40

Ist eine auch eine indirekte Zuweisung von Icons möglich? Ich habe einen Fall mit vier Zuständen, den ich plakativ und sehr platzsparend mit einem Iconring darstellen könnte:

Ich stelle mir das in etwa so vor:

Code Auswählen

icon_temp_ring(([$SELF] eq "an"?[$SELF:Icon]:""),[T_Kollektor:temperature:d1],-10,120)|

Das Reading "Icon" beinhaltet dann je nachdem ob das Dreiwegeventil auf Speicher 1 oder Speicher 2 steht ein anderes Icon in der Form

Code Auswählen

sani_heating\@green oder eben

Code Auswählen

sani_water_tap\@green

Wenn das DOIF auf "aus" steht, würde kein Icon angezeigt.

Christian

Damian · 04 Februar 2021, 09:39:42

Zitat von: cwagner am 04 Februar 2021, 08:53:40
Ist eine auch eine indirekte Zuweisung von Icons möglich? Ich habe einen Fall mit vier Zuständen, den ich plakativ und sehr platzsparend mit einem Iconring darstellen könnte:

Ich stelle mir das in etwa so vor:
Code Auswählen Erweitern
icon_temp_ring(([$SELF] eq "an"?[$SELF:Icon]:""),[T_Kollektor:temperature:d1],-10,120)|

Das Reading "Icon" beinhaltet dann je nachdem ob das Dreiwegeventil auf Speicher 1 oder Speicher 2 steht ein anderes Icon in der Form
Code Auswählen Erweitern
sani_heating\@green oder eben
Code Auswählen Erweitern
sani_water_tap\@green

Wenn das DOIF auf "aus" steht, würde kein Icon angezeigt.

Christian

Es handelt sich hier um eine Perlfunktionen, der erste Parameter ist das Icon, hier kannst du beliebig das Icon definieren, also beliebig mit dem Ternär-Operator schachteln:

icon_temp_ring((<erste Bedingung>?<icon1>

<dritte Bedingung>?<icon3>:<icon4>):<icon5>):<icon6),weitere Parameter)

cwagner · 04 Februar 2021, 12:48:25

Wie geil ist das denn? Jetzt habe ich es kapiert, Damian. Fehlt nur noch Sonnenschein, um die Varianten live zu sehen!
Vielen Dank für diese weitere Fortbildung in Sachen Möglichkeiten. Wenn ich fertig bin, poste ich die Variante hier.

Ausblenden des Icons bei Nichterfüllung der Bedingung mache ich aktuell immer durch einfärben in der Hintergrundfarbe oder durch Aufruf eines leeren Icon-Namen (" ") Falls es da eine elegantere Variante gibt, bin ich wissbegierig.

Christian