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
Hallo, wie genau sieht die Funktion denn aus?
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.
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_mringDie 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):
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:
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>';
}
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.
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:
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.
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.
Ich glaube weniger ist mehr, ich habe mal die Kontur-Linien rausgenommen (Version 0.4).
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
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.
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.
Auch hier: weniger ist mehr - bar ohne Konturlinie und schmaler.
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:
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 Formsani_heating\@green oder eben sani_water_tap\@green
Wenn das DOIF auf "aus" steht, würde kein Icon angezeigt.
Christian
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:
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 Formsani_heating\@green oder eben 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>:(<zweite Bedingung>?<icon2>:(<dritte Bedingung>?<icon3>:<icon4>):<icon5>):<icon6),weitere Parameter)
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
kein Icon ist noch nicht ausprogrammiert. " " funktioniert, weil die FHEM-Routine FW_makeImage kein passendes Icon findet. Ich werde zukünftig aber bei undef und "" kein Icon darstellen.
Da mit Sonne auch in den kommenden Tagen hier nicht zu rechnen ist, habe ich die frisch gelernte Anwendung der "Ternär-Operatoren"anstelle des Solar-Thermie-Dashboards gleich mal in einer weiteren Verdichtung der Betriebsdarstellung meiner Heizungssteuerung umgesetzt:
Oben zeigt der linke icon-ring, dass der Kessel feuert. Der Ein- und der Ausschaltwert aus dem Steuerungs-DOIF für bedarfsgerechte Vorlauf-Bestimmung, Brennerstarts, Warmwasserbereitung, Pumpensteuerung etc. werden hier als Min- und Max-Werte für den Kreisbogen verwendet. Somit wird der Fortschritt des Brennertaktes visualisiert.
Das mittlere Beispiel zeigt die Pause zwischen zwei Takten (Symbol Heizpumpe läuft). Wenn der Balken verschwunden ist, muss der Brenner wieder starten und der Balken wird "aufgeladen".
Im dritten Beispiel ist der Wärmebedarf des Hauses gedeckt, System ist in Pause (kein Feuern, keine Heizpumpe also kein Symbol).
Jeweils rechts zeigt ein ring2 die jeweilige Vor- und Rücklauftemperatur.
Mehr Information geht kaum auf so wenig Bildschirmplatz --- und das in zwei Zeilen:
icon_temp_ring((([Switch_Heizkeller:Brenner]) eq "ON"?"sani_boiler_temp\@red":([SW_03_Heizpumpe]) eq "on"?"sani_pump\@red":" "),[T_Heizung:temperature:d1],[Vorlauf:state],[Vorlauf:state]+25,110)|
ring2([T_Vorlauf:temperature],30,90,undef,undef,"°VL",120,\&temp_hue,1,[T_Ruecklauf:temperature],30,90,undef,undef,"°RL",\&temp_hue,1)|
Christian
neue icon_bar-svg-Funktionen sind fertig (DOIF-Version 0.6 im ersten Post)
temp_bar ($value,$min,$max,$header,$width,$height,$size,$lightbar,$lightnumber)
temp_mbar ($value,$min,$max,$header,$width,$height,$size,$lightbar,$lightnumber)
icon_temp_bar ($icon,$value,$min,$max,$header,$width,$height,$size,$lightbar,$lightnumber)
icon_temp_mbar ($icon,$value,$min,$max,$header,$width,$height,$size,$lightbar,$lightnumber)
hum_bar ($value,$header,$width,$height,$size,$lightbar,$lightnumber)
hum_mbar ($value,$header,$width,$height,$size,$lightbar,$lightnumber)
icon_hum_bar ($icon,$value,$header,$width,$height,$size,$lightbar,$lightnumber)
icon_hum_mbar ($icon,$value,$header,$width,$height,$size,$lightbar,$lightnumber)
bar ($val,$min,$max,$header,$minColor,$maxColor,$unit,$bwidth,$bheight,$size,$func,$dec,$model,$lr,$ln,$icon)
Beispiel:
defmod di_temp_hum DOIF ##
attr di_temp_hum uiTable {package ui_Table}\
\
"mit Farbverlauf"|hum_bar([Aussensensor:humidity])|temp_bar([Aussensensor:temperature])\
"mit Farbverlauf"|icon_hum_bar("temp_outside",[Aussensensor:humidity])|icon_temp_bar("temp_outside",[Aussensensor:temperature])\
"monochrom"|icon_hum_mbar("temp_outside",[Aussensensor:humidity])|icon_temp_mbar("temp_outside",[Aussensensor:temperature])\
"aufgehellt"|icon_hum_bar("temp_outside",[Aussensensor:humidity],undef,undef,undef,undef,80)|icon_temp_bar("temp_outside",[Aussensensor:temperature],undef,undef,undef,undef,undef,undef,80)\
"mit Überschrift"|icon_hum_bar("temp_outside",[Aussensensor:humidity],"Außen")|icon_temp_bar("temp_outside",[Aussensensor:temperature],undef,undef,"Außen")\
"höher"|icon_hum_bar("temp_outside",[Aussensensor:humidity],undef,undef,100)|icon_temp_bar("temp_outside",[Aussensensor:temperature],undef,undef,undef,undef,100)\
"breiter"|icon_hum_bar("temp_outside",[Aussensensor:humidity],undef,60)|icon_temp_bar("temp_outside",[Aussensensor:temperature],undef,undef,undef,70)\
"größer"|icon_hum_bar("temp_outside",[Aussensensor:humidity],undef,undef,undef,130)|icon_temp_bar("temp_outside",[Aussensensor:temperature],undef,undef,undef,undef,undef,130)
Hier noch abschließend eine Gegenüberstellung der neuen icon-Funktionen als Inspiration - die Bedeutung braucht dank Icons keiner Beschreibung :)
Die neue DOIF-Version wird demnächst eingecheckt. Beschreibung erfolgt über die Wiki-Seite: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg
Beispieldefinition:
defmod di_icon_svg DOIF ##
attr di_icon_svg uiTable {package ui_Table;;$TC{1..6} = "align='center'";;}\
icon_ring ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|\
icon_hum_mring ("weather_humidity,0.8,2",[Aussensensor:humidity])|\
icon_temp_ring ("temp_outside",[Aussensensor:temperature])|\
icon_ring ("air",[ESPEasy_Eingang_CO2:PPM],400,1200,120,0,"ppm",0)|\
icon_ring ("Zisterne",([Wasserzisterne]/3.4),0,100,0,120,"%",0)|\
icon_ring ("measure_water_meter",[Wasserverbrauch:heute],0,600,120,0,"l",0)\
\
icon_bar ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|\
icon_hum_mbar ("weather_humidity,0.8,2",[Aussensensor:humidity])|\
icon_temp_bar ("temp_outside",[Aussensensor:temperature])|\
icon_bar ("air",[ESPEasy_Eingang_CO2:PPM],400,1200,120,0,"ppm",0,undef,65)|\
icon_bar ("Zisterne",([Wasserzisterne]/3.4),0,100,0,120,"%",0)|\
icon_bar ("measure_water_meter",[Wasserverbrauch:heute],0,600,120,0,"l",0)
Hier noch die Syntax für die allgemeinen Funktionen: icon_ring und icon_bar bzw. icon_mring und icon_mbar für monochrom (ab Version 0.7):
icon_ring/icon_mring ($icon,$val,$min,$max,$minColor,$maxColor,$unit,$dec,$size,$func,$lightring,$lightnumber)
icon_bar/icon_mbar ($icon,$val,$min,$max,$minColor,$maxColor,$unit,$dec,$header,$bwidth,$bheight,$size,$func,$lightbar,$lightnumber)
Hier ein weiteres Anwendungsbeispiel: Abfall mal anders
Neue DOIF-Version wurde eingecheckt. Im Laufe der nächsten Woche werde ich die Wiki-Seite aktualisieren.
Hallo Damian!
Deine Funktionen sind genial und peppen das Erscheinungsbild ganz schön auf!
Ich habe hier ein Problem wo du sicher einen Rat hast, ich kann bei dem "icon_ring" die Größe ( 120 ) nicht steuern. "icon_temp_ring" hingegen ist mit 120 größer und läßt sich auch ändern. Ich habe sie im Bild untereinander gestellt das man es besser sieht. Mach ich da in der Parameterdefinition was falsch?
{package ui_Table;;$TC{1..2} = "align='center'";;}\
icon_temp_ring((([Fanspeed:Fanspeed]) >=0?"sani_boiler_temp\@red":""),[VorlaufSoll:VorlaufSoll:d1],20,60,120)|
icon_temp_ring("sani_supply_temp",[Vorlauf:Vorlauf],20,60,120)
icon_ring((([Fanspeed:Fanspeed]) >=10?"vent_ventilation_level_3\@red":"vent_ventilation_level_0\@gray"),[Fanspeed:Fanspeed],0,3000,160,0,"upm",0)|
icon_ring((([PumpeWatt:PumpeWatt]) >=10?"sani_pump\@red":"sani_pump\@gray"),[PumpeWatt:PumpeWatt],0,100,120,0,"Watt",0)
LG
Reinhart
Zitat von: Reinhart am 09 Februar 2021, 11:24:41
Hallo Damian!
Deine Funktionen sind genial und peppen das Erscheinungsbild ganz schön auf!
Ich habe hier ein Problem wo du sicher einen Rat hast, ich kann bei dem "icon_ring" die Größe ( 120 ) nicht steuern. "icon_temp_ring" hingegen ist mit 120 größer und läßt sich auch ändern. Ich habe sie im Bild untereinander gestellt das man es besser sieht. Mach ich da in der Parameterdefinition was falsch?
{package ui_Table;;$TC{1..2} = "align='center'";;}\
icon_temp_ring((([Fanspeed:Fanspeed]) >=0?"sani_boiler_temp\@red":""),[VorlaufSoll:VorlaufSoll:d1],20,60,120)|
icon_temp_ring("sani_supply_temp",[Vorlauf:Vorlauf],20,60,120)
icon_ring((([Fanspeed:Fanspeed]) >=10?"vent_ventilation_level_3\@red":"vent_ventilation_level_0\@gray"),[Fanspeed:Fanspeed],0,3000,160,0,"upm",0)|
icon_ring((([PumpeWatt:PumpeWatt]) >=10?"sani_pump\@red":"sani_pump\@gray"),[PumpeWatt:PumpeWatt],0,100,120,0,"Watt",0)
LG
Reinhart
Im Post #19 habe ich die Parameter der icon_ring-Funktion gepostet:
icon_ring/icon_mring ($icon,$val,$min,$max,$minColor,$maxColor,$unit,$dec,$size,$func,$lightring,$lightnumber)Daran kann man erkennen, dass $size an neunter Stelle vorkommt, also muss die 120 hinter $dec (Anzahl der Nachkommastellen)
Dann sollte es schon funktionieren. Eine komplette Beschreibung der neuen Funktionen wird noch im Wiki erstellt.
ah Danke, das wars!
LG
Ich habe gerade eine neue Version eingecheckt. Ich habe den Ring bei den icon_ring-Funktionen einen Pixel dünner gestaltet, damit wirkt er in Kombination mit Icons nicht so aufdringlich.
sehr schön, passt optisch sehr gut, Danke dir!
Hast du dir schon einmal überlegt ob es irgendwie möglich wäre mit Mausklick auch Kommandos abzusetzen? Ich weiß das dies keine Tablet UI ist, aber ich erwische mich immer wieder das ich draufklicke weil die Icons optisch ja dazu regelrecht verführen. Ich habe das halt jetzt so, dass ich in der zweiten Zeile dann die Kommandos ausführe, wie hier im Bild der Sollwert ans Thermostat.
LG
Es gibt ja bereits Funktionen, die man in uiTable bedienen kann, z. B. https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Schaltbares_Icon_mit_Hilfe_der_Funktion_switch
sowie jedes FHEM-Widget.
Ich wollte, wenn ich mal viel Zeit habe ;) , weitere bedienbare SVG-Widgets für Werte basteln - bin bisher aber nicht weiter gekommen.
Ein schaltbares Icon im Ring geht z. Zt. noch nicht, wäre aber prinzipiell machbar.
Ich habe mal Infos meiner Therme nur mit icon_rings ohne Text visualisiert.
ah sehr schön, kannst du die Definition posten wie du die Sollwerteingabe da definiert hast!
Danke für den Link, habe das jetzt auch so danach eingebaut, aber die Größe vom "temp_knop" läßt sich leider nicht dazu anpassen. Aber das reicht mir schon, nur finde ich deine Lösung mit dem DropDown Listenfeld besser weil das kleine Icon schon etwas frickelig zu bedienen ist. Die Pumpe läßt sich so klicken und auch der Sollwert geht zu verstellen.
{package ui_Table}
"Badez"|icon_temp_ring("sani_heating",[Th_Bad_Clima:measured-temp],15,30,100)|
icon_temp_ring("temp_control",[Th_Bad_Clima:desired-temp],15,30,100)|
icon_hum_ring("weather_humidity,0.8,2",[Th_Bad_Clima:humidity])|
switch([HM_6C9670:state],"sani_pump\@DarkOrange","sani_pump\@grey","on","off")|
temp_knob([Th_Bad_Clima:desired-temp],"orange")
LG
Reinhart
Ja, ich hatte den temp_knop auch vorher drin, habe mir aber damit am Tablet ständig die Temperatur verstellt, deswegen denke ich, Dropdown ist da besser, auch wenn es nicht so schön aussieht. Man kann das Select-Widget auch drüber oder drunter mit Komma statt mit | hängen, ich habe nur die freien Felder daneben damit ausgefüllt. Man kann die Sache sicherlich etwas schöner strukturieren.
Ich experimentiere immer noch mit der Dicke des Ringes. Ich glaube je schmaler desto eleganter. Bei meinem letzten angehängten Bild ist der Ring nochmal ein Pixel schmaler.
Mein DOIF macht noch etwas mehr, als nur die Visualisierung. Es holt auch die entsprechenden Werte zyklisch von der Therme. Die Berechnung des letzten Tagesverbrauchs mache ich noch in einem anderen DOIF. Das Setzen der Zeiten ist schon vorbereitet aber noch nicht über UI einstellbar. Dafür ist schon eine Feiertags-Automatik programmiert, da die Therme ja nur Wochenende, aber keine Feiertage kennt.
defmod di_vaillant DOIF ##{[+00:01];;foreach (qw(FanSpeed Flame PumpPower Storageloadpump PrimaryCircuitFlowrate FlowTempDesired PumpHours HcHours HcPumpStarts)) {fhem_set("MQTT2_FHEM_Server publish ebusd/bai/$_/get")}}\
{[+00:00:30];;foreach (qw(Flame PrimaryCircuitFlowrate)) {fhem_set("MQTT2_FHEM_Server publish ebusd/bai/$_/get")}}\
{[00:01];;foreach (qw(PrEnergyCountHc1 PrEnergyCountHwc1 FanHours HcHours HwcHours HcStarts HwcStarts )) {fhem_set("MQTT2_FHEM_Server publish ebusd/bai/$_/get")}}\
##{[+[1]:01];;foreach (qw(PrEnergySumHc1 PrEnergySumHwc1)) {fhem_set("MQTT2_FHEM_Server publish ebusd/bai/$_/get")}}\
{[+01:00];;foreach (qw(z1OpMode WaterPressure z1NightTemp z1DayTemp Hc1HeatCurve HwcLockTime HolidayStartPeriod HolidayEndPeriod)) {fhem_set("MQTT2_FHEM_Server publish ebusd/700/$_/get")}}\
{if ([00:05|WE]) {fhem_set("MQTT2_FHEM_Server publish ebusd/700/BankHolidayStartPeriod/set $mday.$month.$year");;fhem_set("MQTT2_FHEM_Server publish ebusd/700/BankHolidayEndPeriod/set $mday.$month.$year")}}\
{\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Monday/set 04:00;;09:00;;13:00;;22:00;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Tuesday/set 04:00;;09:00;;13:00;;22:00;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Wednesday/set 04:00;;09:00;;13:00;;22:00;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Thursday/set 04:00;;09:00;;13:00;;22:00;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Friday/set 04:00;;09:00;;13:00;;22:00;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Sunday/set 05:00;;10:00;;12:00;;22:30;;-:-;;-:-"\
fhem_set "MQTT2_FHEM_Server publish ebusd/700/z1Timer.Saturday/set 05:00;;10:00;;12:00;;22:30;;-:-;;-:-"\
}
attr di_vaillant event-on-change-reading .*
attr di_vaillant uiTable {\
package ui_Table;;\
##$TC{0..10}="style='padding-left: 2px;;padding-right: 2px'";;\
$TC{0..8}="align='center'";;\
}\
\
icon_temp_ring("temp_outside",[vaillant:Aussentemp],-15,40)|\
icon_temp_mring(([vaillant:Flame] eq "off"?"sani_boiler_temp\@white":"sani_boiler_temp\@Darkorange"),[vaillant:Vorlauf],15,70)|\
icon_temp_mring(([vaillant:Pumpenstatus] eq "4" ? "sani_buffer_temp_down\@Darkorange" : "sani_buffer_temp_down\@white"),[vaillant:WWSpeicher],15,70)|\
icon_temp_mring(([Zirk] eq "off"?"sani_pump\@white":"sani_pump\@Darkorange"),[ESPEasy_ESP_Temp_Zirkulation:Temperature],15,70)|\
icon_temp_mring(([vaillant:Pumpenstatus] eq "on" ? "sani_floor_heating\@Darkorange" : "sani_floor_heating_neutral\@white"),[ESPEasy_ESP_Temp_Vorlauf:Temperature],15,70)|\
icon_temp_mring("sani_floor_heating_neutral\@white",[ESPEasy_ESP_Temp_Keller_Ruecklauf:Temperature],15,70)|""\
\
icon_ring("sani_pump\@Darkorange",[vaillant:Umlaufmenge],0,20,120,0,"l/min")|\
icon_ring("weather_barometric_pressure",[vaillant:Wasserdruck],0,3,0,180,"bar")|\
icon_ring("sani_floor_heating_neutral",[Heizenergie:Vortag_hc],0,150,120,0,"kWh")|\
icon_ring("sani_water_tap",[Heizenergie:Vortag_hwc],0,20,120,0,"kWh")|\
icon_ring("sani_floor_heating_neutral",[vaillant:HcHours_hoursum2_value],0,10000,120,0,"h",0)|\
icon_ring("sani_water_tap",[vaillant:HwcHours_hoursum2_value],0,2000,120,0,"h",0)\
##" "\
WID([vaillant:HeizKennlinie],"selectnumbers,0.4,.1,1,1,lin","set")|icon_ring("time_graph",[vaillant:HeizKennlinie],0.4,1,120,0,"HK",1)|\
WID([vaillant:TagSolltemp],"selectnumbers,15,1,25,1,lin","set")|icon_temp_mring("scene_day\@yellow",[vaillant:TagSolltemp])|\
WID([vaillant:NachtSolltemp],"selectnumbers,15,1,25,1,lin","set")|icon_temp_mring("scene_night\@#3464eb",[vaillant:NachtSolltemp])
Die Knobs habe ich bei mir mal etwas fingerfreundlicher (:-)) gemacht. Vielleicht ist das eine Anregung...
...
$TPL{HKnob}="knob,min:15,max:25,width:40,height:35,step:1,fgColor:#33cc00,bgcolor:#3399ff,anglearc:270,angleOffset:225,thickness:.5";
}
"CC_Wohnzimmer".":",[CC_Wohnzimmer]|temp2([T.Wohnzimmer:temperature:d1],12),hum2([TF.Wohnzimmer:humidity:d0],12)|"Δ:".[RR_Wohnzimmer:delta:d1],"SP: ".[RR_Wohnzimmer:setpoint]."%"|WID([RR_Wohnzimmer:setpointTemp],$TPL{HKnob},"set")
"CC.Ute".":",[CC.Ute]|temp2([TF.Ute:temperature:d1],12),hum2([TF.Ute:humidity:d0],12)|"autark","VL: ".[RR_Ute:feedTemp]."°","SP: ".[RR_Ute:setpoint]."%"|WID([RR_Ute:setpointTemp],$TPL{HKnob},"set")
...
Christian
gute Idee mit einem dickeren Ring, danke für die Anregung!
LG
@Damian
du hast da schon eine ziemlich komplexe Funktion realisiert da auch die Timersteuerung für die Busabfrage inkludiert ist.
Die Verwendung des Beistrich als Zeilensprung finde ich gut und habe das gleich einmal getestet. So kann man natürlich auch sehr gut beschriften, dann kompensiert sich auch die Verschiebung der vertikal Zentrierung.
Schade das ich deinen Thread erst so spät entdeckt habe, gerade im Heizungsbereich läßt sich die Funktion sehr gut einsetzen.
LG
Da hat es wohl keinen interessiert ;)
https://forum.fhem.de/index.php/topic,116836.msg1111936.html#msg1111936
ich habe das ganz ehrlich auch nicht gekannt und habe es im aktuellen eBus Thread jetzt in der ersten Seiten verlinkt, da wird es jetzt hoffentlich gefunden!
Wäre schade wenn das übersehen wird da diese Funktionen genau wie geschaffen für diesen Zweck sind. So manch einer überlegt sich ob da noch ein eigenes Tablett-Ui überhaupt notwendig ist. Der Aufwand mit dem DOIF hält sich ja in Grenzen wenn man weiß wies es funktioniert und man hat sofort einen ansprechenden Output.
Danke auf jeden Fall das du dich da so in das Thema hinein stürzt!
LG
Zitat von: Reinhart am 10 Februar 2021, 22:16:35
ich habe das ganz ehrlich auch nicht gekannt und habe es im aktuellen eBus Thread jetzt in der ersten Seiten verlinkt, da wird es jetzt hoffentlich gefunden!
Wäre schade wenn das übersehen wird da diese Funktionen genau wie geschaffen für diesen Zweck sind. So manch einer überlegt sich ob da noch ein eigenes Tablett-Ui überhaupt notwendig ist. Der Aufwand mit dem DOIF hält sich ja in Grenzen wenn man weiß wies es funktioniert und man hat sofort einen ansprechenden Output.
Danke auf jeden Fall das du dich da so in das Thema hinein stürzt!
LG
ja, das Standard-Design von FHEM lässt stark zu Wünschen übrig, damit kann man es wenigsten etwas aufpeppen.
Im Übrigen übernehmen die meisten meiner aktuellen DOIF-Definitionen inzwischen sowohl die Steuerung als auch das UI in einem Device.
Zitat von: Damian am 10 Februar 2021, 20:40:04
Da hat es wohl keinen interessiert ;)
https://forum.fhem.de/index.php/topic,116836.msg1111936.html#msg1111936
Nun, ich bastele auf Basis Deiner Umsetzung an Statistiken für Ölverbrauch (schäm), Stromverbrauch, Solarproduktion und Thermosolar-Wärmezähler. Also einen weiteren hat's interessiert :)
Christian
Hier ist eine aktuelle Version davon, die cylinder-Funktion kann man auch durch andere svg-Funktion ersetzen.
defmod Heizenergie DOIF subs {\
sub day \
{\
my ($type,$mday,$yday)=@_;;\
set_Reading("gesamt_Vortag_$type",get_Reading("gesamt_$type"));;\
set_Reading("Vortag_$type",get_Reading("Tagesverbrauch_$type"),1);;\
set_Reading("Tagesverbrauch_$type",get_Reading("heute_$type"),1);;\
set_Reading("Monat_$type",get_Reading("heute_$type")+get_Reading("Monat_$type"));;\
set_Reading("Jahr_$type",get_Reading("heute_$type")+get_Reading("Jahr_hc"));;\
set_Reading("heute_$type",0);;\
if ($mday == 1) {\
set_Reading("Vormonat_$type",get_Reading("Monatsverbrauch_$type"),1);;\
set_Reading("Monatsverbrauch_$type",get_Reading("Monat_$type"),1);;\
set_Reading("Monat_$type",0);;\
}\
if ($yday == 1) {\
set_Reading("Vorjahr_$type",get_Reading("Jahresverbrauch_$type"),1);;\
set_Reading("Jahresverbrauch_$type",get_Reading("Jahr_$type"),1);;\
set_Reading("Mahr",0);;\
}\
}\
\
sub resettype {\
my ($type)=@_;;\
#set_Reading ("heute_$type",0);;\
#set_Reading ("Monat_$type",0);;\
#set_Reading ("Jahr_$type",0);;\
#set_Reading ("Tagesverbrauch_$type",0);;\
#set_Reading ("Monatsverbrauch_$type",0);;\
#set_Reading ("Jahresverbrauch_$type",0);;\
set_Reading ("Vortag_$type",0);;\
set_Reading ("Vormonat_$type",0);;\
set_Reading ("Vorjahr_$type",0);;\
\
}\
}\
\
{[+[1]:01];;foreach (qw(PrEnergySumHc1 PrEnergySumHwc1 HcHours HwcHours)) {fhem_set("MQTT2_FHEM_Server publish ebusd/bai/$_/get")}}\
\
{ [00:02];;\
day("hc",$mday,$yday);;\
day("hwc",$mday,$yday);;\
day("hour_hc",$mday,$yday);;\
day("hour_hwc",$mday,$yday);;\
} \
\
{\
set_Reading("gesamt_hc",[vaillant:PrEnergySumHc1_0_value]/100000,0);;\
set_Reading("heute_hc",get_Reading("gesamt_hc")-get_Reading("gesamt_Vortag_hc"),1);;\
}\
\
{\
set_Reading("gesamt_hwc",[vaillant:PrEnergySumHwc1_0_value]/100000,0);;\
set_Reading("heute_hwc",get_Reading("gesamt_hwc")-get_Reading("gesamt_Vortag_hwc"),1);;\
}\
\
{\
set_Reading("gesamt_hour_hc",[vaillant:HcHours_hoursum2_value],0);;\
set_Reading("heute_hour_hc",get_Reading("gesamt_hour_hc")-get_Reading("gesamt_Vortag_hour_hc"),1);;\
}\
\
{\
set_Reading("gesamt_hour_hwc",[vaillant:HwcHours_hoursum2_value],0);;\
set_Reading("heute_hour_hwc",get_Reading("gesamt_hour_hwc")-get_Reading("gesamt_Vortag_hour_hwc"),1);;\
}\
\
\
reset {\
##set_Reading ("gesamt_Vortag_hc",[?vaillant:PrEnergySumHc1_0_value]);;\
##set_Reading ("gesamt_Vortag_hwc",[?vaillant:PrEnergySumHwc1_0_value]);;\
resettype ("hc");;\
resettype ("hwc");;\
resettype ("hour_hc");;\
resettype ("hour_hwc");;\
}
attr Heizenergie group Aktuell
attr Heizenergie room test6,Ebus
attr Heizenergie uiTable {package ui_Table;;\
$TC{0..4}="style='padding-left: 3px;;padding-right: 3px'"\
}\
"Heizung"|""|""|""\
\
cylinder("Tag",0,100,"kWh",undef,undef,undef,1,[$SELF:Vortag_hc],0,"vorletzter",[$SELF:Tagesverbrauch_hc],30,"letzter",[$SELF:heute_hc],60,"aktuell")|\
cylinder("Monat",0,3000,"kWh",undef,undef,undef,1,[$SELF:Vormonat_hc],0,"vorletzter",[$SELF:Monatsverbrauch_hc],30,"letzter",[$SELF:Monat_hc],60,"akuell")|\
cylinder("Jahr",0,20,"MWh",undef,undef,undef,3,[$SELF:Vorjahr_hc]/1000,0,"vorletzter",[$SELF:Jahresverbrauch_hc]/1000,30,"letztes",[$SELF:Jahr_hc]/1000,60,"aktuell")\
"Wasser"|""|""|""\
cylinder("Tag",0,30,"kWh",undef,undef,undef,1,[$SELF:Vortag_hwc],0,"vorletzter",[$SELF:Tagesverbrauch_hwc],30,"letzter",[$SELF:heute_hwc],60,"aktuell")|\
cylinder("Monat",0,300,"kWh",undef,undef,undef,1,[$SELF:Vormonat_hwc],0,"vorletzter",[$SELF:Monatsverbrauch_hwc],30,"letzter",[$SELF:Monat_hwc],60,"akuell")|\
cylinder("Jahr",0,5,"MWh",undef,undef,undef,3,[$SELF:Vorjahr_hwc]/1000,0,"vorletztes",[$SELF:Jahresverbrauch_hwc]/1000,30,"letztes",[$SELF:Jahr_hwc]/1000,60,"aktuell")
Ja, Säulen sind ideal zur Gegenüberstellung!
Du musst deine Einheiten noch etwas überarbeiten, denn ein Verbrauch von 100Kwh erscheint mir ein bisschen hoch!
Schade das die Readings "PrEnergy.." nicht bei allen Heizgeräten aktiv sind, bei meiner Therme geht das nicht, aber ich habe dafür einen Reedkontakt am Gaszähler montiert.
LG
Zitat von: Reinhart am 11 Februar 2021, 18:18:18
Ja, Säulen sind ideal zur Gegenüberstellung!
Du musst deine Einheiten noch etwas überarbeiten, denn ein Verbrauch von 100Kwh erscheint mir ein bisschen hoch!
Schade das die Readings "PrEnergy.." nicht bei allen Heizgeräten aktiv sind, bei meiner Therme geht das nicht, aber ich habe dafür einen Reedkontakt am Gaszähler montiert.
LG
Das stimmt ziemlich genau mit dem Gasverbrauch, den ich separat messe, überein.
Mit Säulen, die sich nicht überlappen, kann man es noch besser erkennen.
Ja, nebeneinander ist die Gegenüberstellung noch besser ersichtlich.
Kannst du mir sagen wie man die Farbe der Beschriftung beeinflusst? Hier hat sie sich selbst auf orange gesetzt, vermutlich von der letzten Farbe des Ringes.
{package ui_Table;;
$TC{0..4}="align='center'";;}
icon_temp_ring((([Fanspeed:Fanspeed]) >=0?"sani_boiler_temp\@red":""),[VorlaufSoll:VorlaufSoll:d1],20,60,120),"SollTemp"|
icon_temp_ring("sani_supply_temp",[Vorlauf:Vorlauf],20,60,120),"Vorlauf"|
icon_temp_ring("sani_return_temp",[Ruecklauf:Ruecklauf],20,60,120),"Rücklauf"|
icon_temp_ring ("sani_water_hot",[WarmW.Temp.:WarmW.Temp.],20,60,120),"Warmwasser"|
WID([WarmWasserEinstellen:state],"selectnumbers,55,0.5,60,1,lin","set"),"Warmwasser"
icon_ring((([Fanspeed:Fanspeed]) >=10?"vent_ventilation_level_3\@red":"vent_ventilation_level_0\@gray"),[Fanspeed:Fanspeed],0,3000,140,0,"upm",0,120),"Ventilator"|
icon_ring((([PumpeWatt:PumpeWatt]) >=10?"sani_pump\@red":"sani_pump\@gray"),[PumpeWatt:PumpeWatt],0,100,120,0,"Watt",0,120),"Pumpe"|
icon_ring ("weather_barometric_pressure",[Druck:Druck],0,2,120,0,"Bar",1,120),"Druck"|
icon_ring ("temp_control",[HKurve:HKurve],0,2,120,0,"Curve",1,120),"Hkurve"|
WID([HeizkurveEinstellen:state],"0.20,0.40,0.50,0.60,0.70,0.80,0.90,1.00,1.10,1.20,1.30,1.40,1.50,1.60,1.70","set"),"Heizkurve"
Druck ist bei dir ein Device, deswegen wird es als Link angezeigt und ist damit auch anklickbar. Die Farbe kommt von deinem f18-Style für Links.
Wenn man keine anklickbaren Links haben will, dann lässt sich das mit der Variablen $SHOWNODEVICELINK abstellen:
{package ui_Table;;
$SHOWNODEVICELINK=1;
$TC{0..4}="align='center'";;}
Farbige Texte kann man selbstverständlich auch definieren:
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Textformatierungen_mit_Hilfe_der_Funktion_style
oh Mann, das ist klar, das gleiche bei Vorlauf! Die Farbe kommt ja vom Fhem Style wie dort ein Link definiert ist und dort ist er mit "FF9900" ( orange ) eingestellt.
Danke für die Aufklärung!
LG
Dokumentation zu SVG-Funktionen aktualisiert: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#SVG-uiTable-Funktionen
Super Danke, vor allem die vielen Beispieldefinitionen machen es wesentlich leichter und das Wiki ist schön übersichtlich gestaltet!
Ist eigentlich ein ganz schöner Umfang den du da realisiert hast, eigentlich deckt das jetzt alle Anwendungen aus Fhem ab!
Ich bin mitten drinnen und hübsche jetzt meine gesamten Ansichten in Fhem auf!
LG
Reinhart
ja, GUI ist nur die eine Sache, die nächste Stufe ist UI mit Automatisierung zu verbinden, auf einer Abstraktionsebene, die es einem erlaubt mit jeweils einer Definitionszeile neue Szenarien zu definieren, siehe https://wiki.fhem.de/wiki/DOIF/Automatisierung#Beschattungssteuerung_abh.C3.A4ngig_von_der_Zimmertemperatur_und_Sonneneinstrahlung_f.C3.BCr_mehrere_Szenarien_mit_Visualisierung
Zitat von: Reinhart am 13 Februar 2021, 09:29:49
Super Danke, vor allem die vielen Beispieldefinitionen machen es wesentlich leichter und das Wiki ist schön übersichtlich gestaltet!
Ist eigentlich ein ganz schöner Umfang den du da realisiert hast, eigentlich deckt das jetzt alle Anwendungen aus Fhem ab!
Ich bin mitten drinnen und hübsche jetzt meine gesamten Ansichten in Fhem auf!
LG
Reinhart
Falls jemand nur in einem Device die Statuszeile mit Hilfe der SVG-Funktionen aufhübschen will, der kann das auch direkt über das devStateIcon-Attribut ohne eine DOIF/uiTable-Definition tun:
defmod Aussensensor CUL_WS 5
attr Aussensensor alias Aussen
attr Aussensensor devStateIcon {ui_Table::temp_hum_ring(ReadingsVal($name,"temperature",0),ReadingsVal($name,"humidity",0))}
angeregt durch dein Beispiel mit dem Attribut "devStateIcon" habe ich das jetzt getestet.
Kann es sein, das ich hier die Ringstärke beim temp_ring nicht beeinflussen kann? Der ist nämlich zu dick, die vordefinierten "temp" und "hum" passen nicht oder habe ich hier noch einen Parameter übersehen.
{ui_Table::temp_ring(ReadingsVal($name,"Aussentemp",0),-10,30,100)}
{ui_Table::icon_ring("temp_control",(ReadingsVal($name,"HKurve",0)),0,2,90,0,"Hc",1,100)}
LG
ja, die Ringstärken sind bei allen Funktionen vordefiniert, die ist z. Zt. nicht veränderbar. ring-Funktionen mit einem Wert sind kleiner (80 Prozent), haben einen dickeren Ring (5 Pixel) und eine größere Zahl. ring-Funktionen mit zwei Werten oder mit einem Icon haben einen dünneren Ring von 2 Pixeln. Für ein einheitliches Aussehen würde ich immer den gleichen ring-Typ verwenden. Hier also bei Außentemperatur auch ein icon_ring einsetzen.
Edit: Bei icon_ring-Funktionen kann man beim icon-Parameter auch "" angeben, dann wird kein Icon dargestellt.
Zitat von: Damian am 13 Februar 2021, 20:23:37
Für ein einheitliches Aussehen würde ich immer den gleichen ring-Typ verwenden. Hier also bei Außentemperatur auch ein icon_ring einsetzen.
ah ja danke, das ist wohl der bessere und einfache Weg!
LG
Ich habe jetzt eingebaut, dass wenn man bei icon_ring-Funktionen icon="" angibt, die Zahlen mittig dargestellt werden, hier der Vergleich:
icon_ring ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|
icon_ring ("",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|
ring([Tankstelle:Diesel],1.10,1.30,120,0,"€",undef,undef,2)|
Neue Version eingecheckt.
Angaben ohne Skalierung:
temp_hum_ring([Aussensensor:temperature],[Aussensensor:humidity])|
temp_ring([Aussensensor:temperature])|
icon_temp_ring("temp_outside",[Aussensensor:temperature])|
icon_temp_ring("",[Aussensensor:temperature])|
icon_temp_ring(" ",[Aussensensor:temperature])
Diese Option finde ich super - in meinem Dashboard bringe ich nämlich inzwischen in einem Ring mehrere Infos mit unterschiedlichen Status unter, darunter auch "Pumpe ist aus" durch Verschwinden des Symbols Pumpe im Ring, dann rückt die Temperatur in die Mitte. Sehr schön!
Mein Screenshot zeigt das schon mal gezeigte, nun erweiterte Dashboard aus einer uiTable, von links:
Kesseltemperatur, hier ist gerade die Heizpumpe an und der rote Kreis wandert weiter nach unten, was der nächste Startpunkt für den Brenner ist (dann erscheint das Brenner-Symbol)
Daneben Vorlauf/Rücklauf in der Heizungsanlage (wir haben aktuell -14 Grad außen bei Super-Sonnenschein)
Die Rücklaufanhebung ist aus (kein Symbol), Speichertemperatur ist 27,8 Grad.
Warmwasserpumpe ist aus (kein Symbol), Warmwasser ist aber reichlich im oberen Segement des Speicher
Die Fußbodenheizung ist angelaufen, aber der "verschwundende" Ring zeigt: wir sind noch unter der Wunschtemperatur
Die Solarthermie ist angesprungen und erwärmt den Warmwasserspeicher (Symbol Wasser, bei Erwärmen des Rücklaufanhebungsspeichers Symbol Heizkörper), wenn sie nicht arbeitet, kein Symbol
Vorlauf/Rücklauf der Solarthermie im Anlauf (erst 2° Unterschied)
Die unteren Temperaturen in den beiden Schichtenspeichern für Warmwasser (22 Grad) und Rücklaufanhebung (23,5), weswegen sich das Steuerungs-DOIF entschieden hat, erst einmal dem Warmwasser-Vorrang zu folgen...
Christian
Zitat von: cwagner am 14 Februar 2021, 10:22:55
Diese Option finde ich super - in meinem Dashboard bringe ich nämlich inzwischen in einem Ring mehrere Infos mit unterschiedlichen Status unter, darunter auch "Pumpe ist aus" durch Verschwinden des Symbols Pumpe im Ring, dann rückt die Temperatur in die Mitte. Sehr schön!
Mein Screenshot zeigt das schon mal gezeigte, nun erweiterte Dashboard aus einer uiTable, von links:
Kesseltemperatur, hier ist gerade die Heizpumpe an und der rote Kreis wandert weiter nach unten, was der nächste Startpunkt für den Brenner ist (dann erscheint das Brenner-Symbol)
Daneben Vorlauf/Rücklauf in der Heizungsanlage (wir haben aktuell -14 Grad außen bei Super-Sonnenschein)
Die Rücklaufanhebung ist aus (kein Symbol), Speichertemperatur ist 27,8 Grad.
Warmwasserpumpe ist aus (kein Symbol), Warmwasser ist aber reichlich im oberen Segement des Speicher
Die Fußbodenheizung ist angelaufen, aber der "verschwundende" Ring zeigt: wir sind noch unter der Wunschtemperatur
Die Solarthermie ist angesprungen und erwärmt den Warmwasserspeicher (Symbol Wasser, bei Erwärmen des Rücklaufanhebungsspeichers Symbol Heizkörper), wenn sie nicht arbeitet, kein Symbol
Vorlauf/Rücklauf der Solarthermie im Anlauf (erst 2° Unterschied)
Die unteren Temperaturen in den beiden Schichtenspeichern für Warmwasser (22 Grad) und Rücklaufanhebung (23,5), weswegen sich das Steuerungs-DOIF entschieden hat, erst einmal dem Warmwasser-Vorrang zu folgen...
Christian
Irgendwie fehlt bei dir der Hintergrund bei den icon-Funktionen.
bei mir hat das Update offensichtlich nicht funktioniert.
98_DOIF.pm 23728 2021-02-12 20:56:22Z Damian $
habe noch diese Version!
LG
Die Icons geben die Betriebszustände an: Beispielsweise Kessel feuert (dann läuft in der Logik auch die Pumpe). Kessel feuert nicht, dann erscheint das Pumpensymbol. Wenn die Heizung nicht gebraucht wird, also auch die Pumpe aus ist, verschwindet dieses Symbol.
Das Dreiwege-Ventil wird umgeschaltet, wenn die Rücklauftemperatur unter der Temperatur der oberen Schicht des Speichers Rücklaufanhebung ist. Dann erscheint das Symbol bei RLA...
Die Heizung muss Warmwasser erzeugen, das Symbol Warmwasserpumpe erscheint.
Die Fußbodenheizung heizt, das Symbol FBH erscheint.
Die Solaranlage beschickt entweder die untere Schicht des Warmwasser-Speichers (Symbol Wasserhahn) oder die untere Schicht des Speichers für Rücklaufanhebung (Symbol Heizkörper) oder sie ist aus (kein Symbol).
Rot ist immer Wärmeeintrag/-bedarf, grün ist etwas läuft
So, ich habe jetzt alle Ringe gleichgezogen, sowohl die Ringstärke ist bei allen gleich, als auch die Größe bei 100 % Skalierung.
Bei der neuen cylinder_bars-Funktion habe ich weitere Optimierungen vorgenommen, wenn mehr als 4 Balken dargestellt werden sollen, dann wird die Legende mit Werten nebeneinander dargestellt. Damit wird die Grafik nicht beliebig in die Höhe gezogen.
Doku cylinder_bars: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Balkendarstellung_mehrerer_Zahlenwerten_mit_Hilfe_der_universellen_SVG-Funktion_cylinder_bars
aktuelle Version siehe: https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1
Zitat von: cwagner am 14 Februar 2021, 11:18:29
Die Icons geben die Betriebszustände an: Beispielsweise Kessel feuert (dann läuft in der Logik auch die Pumpe). Kessel feuert nicht, dann erscheint das Pumpensymbol. Wenn die Heizung nicht gebraucht wird, also auch die Pumpe aus ist, verschwindet dieses Symbol.
Das Dreiwege-Ventil wird umgeschaltet, wenn die Rücklauftemperatur unter der Temperatur der oberen Schicht des Speichers Rücklaufanhebung ist. Dann erscheint das Symbol bei RLA...
Die Heizung muss Warmwasser erzeugen, das Symbol Warmwasserpumpe erscheint.
Die Fußbodenheizung heizt, das Symbol FBH erscheint.
Die Solaranlage beschickt entweder die untere Schicht des Warmwasser-Speichers (Symbol Wasserhahn) oder die untere Schicht des Speichers für Rücklaufanhebung (Symbol Heizkörper) oder sie ist aus (kein Symbol).
Rot ist immer Wärmeeintrag/-bedarf, grün ist etwas läuft
Danke für die Erklärung. Ich glaube wir haben uns missverstanden. Als Hintergrund meinte ich den grauen Hintergrund der Ringe in deiner Grafik. Teste bitte mal die aktuelle Version von heute.
Ah, da hast Du aber genau hingeschaut. In der Tat gibt es da noch zwei Unsauberkeiten: Ich benutzte # $Id: 98_DOIF.pm 23740 2021-02-14 11:23:37Z Damian $ und habe einen Restart gemacht.
- Danach stelle ich zwei Dinge fest: Erstens sind der dritte und vierte Ring kleiner (da habe ich die Skalierung auf 110 mal rausgenommen). Hatte die auf etwa gleiche Größe durch Skalierung "getrimmt".
- Der Hintergrund|Transparenz wird unterschiedlich behandelt. Habe mal f18 auf hellen Modus gestellt (siehe Screenshot)
Hier Die Definition der der 8 Ringe:
## Heizung
"DI_Brenner"|" "|"DI_RLA"|"DI_Warmwasser"|"DI_FBH_Betrieb"|"DI_Solarthermie"|" "|"Speicher unten"
icon_temp_ring((([Switch_Heizkeller:Brenner]) eq "ON"?"sani_boiler_temp\@red":([SW_03_Heizpumpe]) eq "on"?"sani_pump\@red":""),[T_Heizung:temperature:d1],[Vorlauf:state],[Vorlauf:state]+25,110)|
ring2([T_Vorlauf:temperature],30,90,undef,undef,"°VL",120,\&temp_hue,1,[T_Ruecklauf:temperature],30,90,undef,undef,"°RL",\&temp_hue,1)|
icon_temp_ring(([SW_01_RL_Anhebung] eq "off"?"":"sani_return_temp\@red"),[T_RL_Anhebung:temperature:d1],10,80)|
icon_temp_ring(([SW_02_WW_Pumpe] eq "off"?"":"sani_water_cold\@red,1.1,-1,4"),[T_Warmwasser:temperature:d1],30,60)|
icon_temp_ring(([SW_04_FBH_Pumpe] eq "off"?"":"sani_floor_heating\@red"),[TF_Galerie:temperature:d1],[RR_Galerie]-15,[RR_Galerie]+5,110)|
## Solarthermie
icon_temp_ring((([DI_Solarthermie:state]) eq "Warmwasser"?"sani_water_tap\@green":([DI_Solarthermie:state]) eq "RLA"?"sani_heating\@green":""),[T_Kollektor:temperature:d1],-10,120)|
ring2([T_VL_Kollektor:temperature],10,120,undef,undef,"°VL",120,\&temp_hue,1,[T_RL_Kollektor:temperature],10,120,undef,undef,"°RL",\&temp_hue,1)|
ring2([T_Solarspeicher_1:temperature],10,60,undef,undef,"°WW",120,\&temp_hue,1,[T_Solarspeicher_2:temperature],10,100,undef,undef,"°RLA",\&temp_hue,1)(Fußbodenheizung ist inzwischen aus)
Christian
Zitat von: Damian am 14 Februar 2021, 10:31:39
Irgendwie fehlt bei dir der Hintergrund bei den icon-Funktionen.
Könnte man den vielleicht auch von der Farbe / Transparenz her ändern oder konfigurierbar machen, bzw. per CSS Stil setzen? Auf hellem Hintergrund sehen die dunklen Ringe eher suboptimal aus. Bei den Icons ist mir außerdem aufgefallen, dass manche unten abgeschnitten sind und teilweise nicht zentriert (z.B. beim Thermometer). Hier ein Beispiel:
{
ui_Table::icon_ring("temp_temperature",ReadingsNum($name,"temperature",0),-35,35,240,0,"°C",1,160) .
ui_Table::icon_ring("weather_humidity",ReadingsNum($name,"humidity",0),0,100,60,180,"%",0,160) .
ui_Table::icon_ring("weather_wind_speed",ReadingsNum($name,"wind_speed_ms",0),0,50,180,0,"m/s",1,160) .
ui_Table::icon_ring("weather_barometric_pressure",ReadingsNum($name,"pressure",0),950,1050,180,0,"hPa",0,160)
}
Zitat von: xenos1984 am 14 Februar 2021, 13:48:24
Könnte man den vielleicht auch von der Farbe / Transparenz her ändern oder konfigurierbar machen, bzw. per CSS Stil setzen? Auf hellem Hintergrund sehen die dunklen Ringe eher suboptimal aus. Bei den Icons ist mir außerdem aufgefallen, dass manche unten abgeschnitten sind und teilweise nicht zentriert (z.B. beim Thermometer). Hier ein Beispiel:
{
ui_Table::icon_ring("temp_temperature",ReadingsNum($name,"temperature",0),-35,35,240,0,"°C",1,160) .
ui_Table::icon_ring("weather_humidity",ReadingsNum($name,"humidity",0),0,100,60,180,"%",0,160) .
ui_Table::icon_ring("weather_wind_speed",ReadingsNum($name,"wind_speed_ms",0),0,50,180,0,"m/s",1,160) .
ui_Table::icon_ring("weather_barometric_pressure",ReadingsNum($name,"pressure",0),950,1050,180,0,"hPa",0,160)
}
Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.
Zitat von: cwagner am 14 Februar 2021, 13:38:14
Ah, da hast Du aber genau hingeschaut. In der Tat gibt es da noch zwei Unsauberkeiten: Ich benutzte # $Id: 98_DOIF.pm 23740 2021-02-14 11:23:37Z Damian $ und habe einen Restart gemacht.
- Danach stelle ich zwei Dinge fest: Erstens sind der dritte und vierte Ring kleiner (da habe ich die Skalierung auf 110 mal rausgenommen). Hatte die auf etwa gleiche Größe durch Skalierung "getrimmt".
- Der Hintergrund|Transparenz wird unterschiedlich behandelt. Habe mal f18 auf hellen Modus gestellt (siehe Screenshot)
Hier Die Definition der der 8 Ringe:
## Heizung
"DI_Brenner"|" "|"DI_RLA"|"DI_Warmwasser"|"DI_FBH_Betrieb"|"DI_Solarthermie"|" "|"Speicher unten"
icon_temp_ring((([Switch_Heizkeller:Brenner]) eq "ON"?"sani_boiler_temp\@red":([SW_03_Heizpumpe]) eq "on"?"sani_pump\@red":""),[T_Heizung:temperature:d1],[Vorlauf:state],[Vorlauf:state]+25,110)|
ring2([T_Vorlauf:temperature],30,90,undef,undef,"°VL",120,\&temp_hue,1,[T_Ruecklauf:temperature],30,90,undef,undef,"°RL",\&temp_hue,1)|
icon_temp_ring(([SW_01_RL_Anhebung] eq "off"?"":"sani_return_temp\@red"),[T_RL_Anhebung:temperature:d1],10,80)|
icon_temp_ring(([SW_02_WW_Pumpe] eq "off"?"":"sani_water_cold\@red,1.1,-1,4"),[T_Warmwasser:temperature:d1],30,60)|
icon_temp_ring(([SW_04_FBH_Pumpe] eq "off"?"":"sani_floor_heating\@red"),[TF_Galerie:temperature:d1],[RR_Galerie]-15,[RR_Galerie]+5,110)|
## Solarthermie
icon_temp_ring((([DI_Solarthermie:state]) eq "Warmwasser"?"sani_water_tap\@green":([DI_Solarthermie:state]) eq "RLA"?"sani_heating\@green":""),[T_Kollektor:temperature:d1],-10,120)|
ring2([T_VL_Kollektor:temperature],10,120,undef,undef,"°VL",120,\&temp_hue,1,[T_RL_Kollektor:temperature],10,120,undef,undef,"°RL",\&temp_hue,1)|
ring2([T_Solarspeicher_1:temperature],10,60,undef,undef,"°WW",120,\&temp_hue,1,[T_Solarspeicher_2:temperature],10,100,undef,undef,"°RLA",\&temp_hue,1)
(Fußbodenheizung ist inzwischen aus)
Christian
Die Skalierung hat sich etwas geändert, jetzt sind alle Ringe bei 100 % gleich groß.
Bei dir fehlt offenbar immer der graue Hintergrund bei Ringen mit Icons. Verschiebe deine Definition in einen neuen Raum und schaue mal ob das Problem noch besteht. Es könnte auch ein Browser-Problem sein. Ich habe das Problem nicht.
Also: Die Größen sind jetzt auch bei mir einheitlich und die Hintergründe sind in einem frisch kreierten Raum "Damian" solange auch einheitlich (also NICHT grau), solange ich nicht mit $SHOWNODEVICELINE = "Aktuell|Damian"; die Device-Zeile ausblende. Dann haben die ring2 einen anders gefärbten Hintergrund.
Reproduziert mit Edge, Edge-Chrome und mit Google-Chrome
Zitat von: cwagner am 14 Februar 2021, 14:29:07
Also: Die Größen sind jetzt auch bei mir einheitlich und die Hintergründe sind in einem frisch kreierten Raum "Damian" solange auch einheitlich (also NICHT grau), solange ich nicht mit $SHOWNODEVICELINE = "Aktuell|Damian"; die Device-Zeile ausblende. Dann haben die ring2 einen anders gefärbten Hintergrund.
Reproduziert mit Edge, Edge-Chrome und mit Google-Chrome
Dann stimmt bei dir etwas nicht, denn der graue Hintergrund wird immer gezeichnet.
Zitat von: Damian am 14 Februar 2021, 13:58:48
Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.
Wenn ich den grauen Außenring ein Pixel größer zeichnen lasse, dann lässt sich der farbige Ring auf weißem Hintergrund etwas besser erkennen.
Zitat von: Damian am 14 Februar 2021, 15:02:02
Dann stimmt bei dir etwas nicht, denn der graue Hintergrund wird immer gezeichnet.
habe jetzt die gesamten Einträge von f18 weggeworden, den Raum weggeworfen, einen weiteren angelegtt eine weitere FHEMWEB-Instanz gemacht, den default-Style von FHEM genommen. Ich komme immer wieder zum Ergebnis:
icon_temp_ring verliert seinen grauen Hintergrund immer dann, wenn ich $SHOWNODEVICELINE in der uiTable für einen Raum festlege.
OHNE: Wie von Dir beschrieben
MIT: sind die
icon-temp-rings ohne Hintergrund.
Es macht auch keinen Unterschied, ob ich die Ringe in einer geraden oder ungeraden (dunkelgrauer, schwarzer Hintergrund) platziere.
Zitat von: Damian am 14 Februar 2021, 15:48:20
Wenn ich den grauen Außenring ein Pixel größer zeichnen lasse, dann lässt sich der farbige Ring auf weißem Hintergrund etwas besser erkennen.
Ja, mir war die jüngste Verschlankung auch etwas zu elegant geraten :-)
Zitat von: cwagner am 14 Februar 2021, 17:42:09
habe jetzt die gesamten Einträge von f18 weggeworden, den Raum weggeworfen, einen weiteren angelegtt eine weitere FHEMWEB-Instanz gemacht, den default-Style von FHEM genommen. Ich komme immer wieder zum Ergebnis:
icon_temp_ring verliert seinen grauen Hintergrund immer dann, wenn ich $SHOWNODEVICELINE in der uiTable für einen Raum festlege.
OHNE: Wie von Dir beschrieben
MIT: sind die icon-temp-rings ohne Hintergrund.
Es macht auch keinen Unterschied, ob ich die Ringe in einer geraden oder ungeraden (dunkelgrauer, schwarzer Hintergrund) platziere.
Tja, bei mir leider nicht reproduzierbar
Beispiel:
defmod Umwelt DOIF ##
attr Umwelt group Aktuell
attr Umwelt room Status,test9
attr Umwelt sortby 01
attr Umwelt uiTable {package ui_Table;;\
$SHOWNOSTATE=1;;\
$SHOWNODEVICELINE = "test9|test4";; \
}\
icon_ring ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|\
temp_hum_ring([Aussensensor:temperature],[Aussensensor:humidity],undef,undef,100)|\
icon_ring ("air",[ESPEasy_Eingang_CO2:PPM],400,1200,120,0,"ppm",0)|\
icon_ring ("Zisterne",([Wasserzisterne]/3.4),0,100,0,120,"%",0)|\
icon_ring ("measure_water_meter",[Wasserverbrauch:heute],0,600,120,0,"l",0)Ob im Status-Raum oder im test9-Raum, der Hintergrund ist immer da - getestet mit der eingecheckten Version von heute.
Aber nun kann ich es nachvollziehen. Danke, dass Du Dein Listing eingefügt hattest.
Ergänze ich meine Definition nämlich noch mit $SHOWNOSTATE=1;, dann habe ich vollständige Kreise. Damit verliere ich zwar die neu gelernte Statusanzeige im Heizungsraum mit ring im DevStateIcon. Aber das ist das kleine Übel. $SHOWNODEVICELINE = "Aktuell"; war also nicht signifikant.
Eine weitere Beobachtung brachte mich zum Ziel: Die Hintergründe und die grauen Ringe gehen dann immer noch verloren beim Update der Ringe solange das Attribut devStateIcon {ui_Table::temp_ring(ReadingsVal("T_Heizung","temperature",0))} gesetzt ist.
Lösche ich dieses Attribut, dann löpt et, wie der Rheinländer so sächt.
Vielen Dank für Deine Geduld
Christian
Zitat von: Damian am 14 Februar 2021, 13:58:48
Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.
Das stimmt allerdings - wenn man helle Farben für Schrift und Icons benutzt. (Ich habe sonst eher dunkle Icons auf hellem Grund im Einsatz.) Ich probiere mal weiter damit herum.
Bezüglich des Icons: Lässt sich das vielleicht automatisch zentrieren / passend skalieren? Oder muss man das bei Bedarf zwangsläufig von Hand machen?
Apropos, die beiden Symbole air und Zisterne (ohne Füllung / Zahlenangabe) sind nicht standardmäßig enthalten, oder? Woher kommen denn die?
Bald kann ich keine Ringe mehr sehen :)
Ich habe eine neue Version gerade eingecheckt. Ringe sind einheitlich und als Kompromiss 3 Pixel dick, Der graue Randring ist 4 Pixel dick. Damit sollte es besser auf hellem Hintergrund zu sehen sein. Wahrscheinlich sind die bar-Funktionen für einen hellen Hintergrund besser geeignet.
@xenos1984
Wenn ein Icon nicht hineinpasst, dann ist sein Hintergrund größer als das Icon selbst. Das lässt sich über Skalierung und Position anpassen, siehe Doku: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Feuchtigkeitsanzeige_mit_Hilfe_der_SVG-Funktionen_icon_hum_ring.2Ficon_hum_mring
Fehlende Icons sind selbstgebastelt.
@cwagner
Da hast du wohl eine Kombination erwischt. Offenbar wird durch das Ausblenden der Statuszeile, auch die zuvor gemachte Definition des Ringes über devStatIcon ausgeblendet - das ist ungünstig. Vielleicht finde ich zukünftig eine Lösung dafür.
Ich habe mir die Skalierung der Icons noch mal angeschaut. Es liegt nicht am Hintergrund, sondern an der definierten Größe des Icons. Das Icon wird im Ring in ein Rechteck mit 22x22 Pixeln skaliert. Dazu wird mit viewBox eine Größe definiert. Diese müsste mit der originalen Größe des Icons übereinstimmen, die aber an der Stelle nicht bekannt ist. Die Frage nach der automatischen Skalierung habe ich schon mal hier gestellt:
https://forum.fhem.de/index.php/topic,118329.msg1127687.html#msg1127687
leider ohne Antwort.
Deswegen habe ich den Skalierungsfaktor definiert. Eine automatische Anpassung wäre natürlich besser.
Zitat von: Damian am 14 Februar 2021, 20:42:51
Bald kann ich keine Ringe mehr sehen :)
@cwagner
Da hast du wohl eine Kombination erwischt. Offenbar wird durch das Ausblenden der Statuszeile, auch die zuvor gemachte Definition des Ringes über devStatIcon ausgeblendet - das ist ungünstig. Vielleicht finde ich zukünftig eine Lösung dafür.
Mit den Ringen kann ich verstehen: Dieses Projekt erreicht inzwischen Dimensionen, die meist ganze Teams beschäftigen.
Und "meine" Kombination ist ja schon wirklich gemein. Schön, dass es aufgeklärt ist. Ich denke, mit dieser Nebenwirkung kann man leben. Sie ist ja nun bekannt.
Ich wage es kaum zu fragen: In Deinem Beispiel mit der Thermostat-Regelung: Baust Du Doppel-Ringe, die auch "setten" können? Das wäre nämlich aus meiner Sicht die ideale Vollendung: Ein Doppelring, der den Istwert in einem Raum zeigt und gleichzeitig setter für den Sollwert ist, der meine "fetten" Ringe auf Basis von HKnob ablösen könnte? Er zeigte gleichzeitig auch die Differenz zum Wunschwert.
Christian
Zitat von: cwagner am 14 Februar 2021, 22:14:22
Mit den Ringen kann ich verstehen: Dieses Projekt erreicht inzwischen Dimensionen, die meist ganze Teams beschäftigen.
Und "meine" Kombination ist ja schon wirklich gemein. Schön, dass es aufgeklärt ist. Ich denke, mit dieser Nebenwirkung kann man leben. Sie ist ja nun bekannt.
Ich wage es kaum zu fragen: In Deinem Beispiel mit der Thermostat-Regelung: Baust Du Doppel-Ringe, die auch "setten" können? Das wäre nämlich aus meiner Sicht die ideale Vollendung: Ein Doppelring, der den Istwert in einem Raum zeigt und gleichzeitig setter für den Sollwert ist, der meine "fetten" Ringe auf Basis von HKnob ablösen könnte? Er zeigte gleichzeitig auch die Differenz zum Wunschwert.
Christian
SVG-Funktionen-Widgets zum Setzen von Werten gibt es noch nicht. Sie dienen lediglich der Anzeige. Ich habe zwar damit angefangen und auch schon erfolgreich einen Ring aus Perl in Javascript übersetzt, aber dann nicht mehr die Geduld aufgebracht es zu Ende zu programmieren.
Naja, nachdem ich mir nun Perl durch FHEM angeeignet habe, werde ich mir wohl durch FHEM auch noch Javascript beibringen müssen - man lernt eben nie aus :)
SVG-Widgets stehen zumindest auf meiner todo-Liste :)
Zitat von: Damian am 14 Februar 2021, 22:34:29
SVG-Widgets stehen zumindest auf meiner todo-Liste :)
Das freut mich! Bis dahin gehe ich schon mal den ersten Schritt. 1. Doppelring ist nix besonders, Temp/Hum, der 2. Doppelring gibt die Differenz zum Sollwert (12 Uhr wäre, "es passt"; aktuell ist der Raum wärmer als gewünscht) und als zweiten Wert die Öffnung des Ventils (aktuell 1%) und der dritte ist mein fetter Setter für manuellen Override der Planwerte aus dem DI_Clima-Control.
Christian
Den Tabellenhintergrund kann ich ändern. Ist es auch möchlich die Farbe im Inneren z.B. eines rings zu ändern - also nicht nur schwarz?
Zitat von: jkriegl am 16 Februar 2021, 16:07:43
Den Tabellenhintergrund kann ich ändern. Ist es auch möchlich die Farbe im Inneren z.B. eines rings zu ändern - also nicht nur schwarz?
Ist z. Zt. nicht vorgesehen. Die meisten svg-Funktionen bestimmen die Farbe der Werte, Ringe, Balken, Icons selbstständig aufgrund des Wertes (z. B. temp, hum) und da sind viele Farben (z.B. Gelb) auf hellem Hintergrund nicht gut zu erkennen.
Wer die svg-Funktionen nutzen möchte, sollte über einen dunklen Style nachdenken - dunkle Style sind aus gutem Grund wieder modern ;)
So würde ein light-Style aussehen. Manche Farben sind, wie schon gesagt, nicht gut erkennbar.
Zitat von: Damian am 14 Februar 2021, 22:03:24
Ich habe mir die Skalierung der Icons noch mal angeschaut. Es liegt nicht am Hintergrund, sondern an der definierten Größe des Icons. Das Icon wird im Ring in ein Rechteck mit 22x22 Pixeln skaliert. Dazu wird mit viewBox eine Größe definiert. Diese müsste mit der originalen Größe des Icons übereinstimmen, die aber an der Stelle nicht bekannt ist. Die Frage nach der automatischen Skalierung habe ich schon mal hier gestellt:
http://forum.fhem.de/index.php/topic,118329.msg1127687.html#msg1127687
leider ohne Antwort.
Ich werde damit auch mal ein wenig rumprobieren. Ich habe zwar schon einiges mit SVG gemacht, aber symbol habe ich bisher nicht benutzt bzw. auf diese Weise SVG aus anderen Quellen eingebunden. Eigentlich sollte das doch machbar sein...
Zitat von: Damian am 14 Februar 2021, 20:42:51
Wenn ein Icon nicht hineinpasst, dann ist sein Hintergrund größer als das Icon selbst. Das lässt sich über Skalierung und Position anpassen, siehe Doku: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Feuchtigkeitsanzeige_mit_Hilfe_der_SVG-Funktionen_icon_hum_ring.2Ficon_hum_mring
Von Hand geht es. Ich hatte gehofft, du hättest schon eine Lösung für o.g. Problem gefunden - und bevor ich nun alle Icons einzeln skaliere...
Zitat
Fehlende Icons sind selbstgebastelt.
Würde es dir etwas ausmachen, die ins SVN einzuchecken? Da ist bestimmt das eine oder andere interessante Fall dabei, und stilistisch passen die gut zu den übrigen.
Zitat von: xenos1984 am 16 Februar 2021, 20:51:21
Ich werde damit auch mal ein wenig rumprobieren. Ich habe zwar schon einiges mit SVG gemacht, aber symbol habe ich bisher nicht benutzt bzw. auf diese Weise SVG aus anderen Quellen eingebunden. Eigentlich sollte das doch machbar sein...
Von Hand geht es. Ich hatte gehofft, du hättest schon eine Lösung für o.g. Problem gefunden - und bevor ich nun alle Icons einzeln skaliere...
Würde es dir etwas ausmachen, die ins SVN einzuchecken? Da ist bestimmt das eine oder andere interessante Fall dabei, und stilistisch passen die gut zu den übrigen.
Bei SVGs kann man viewbox in viewbox definieren, das mache ich mir zunutze.
An dieser Stelle:
$out.='<symbol id="Image_'.$ic.'" x="'.$ix.'" y="'.$iy.'" viewBox="0 0 '.int(640/$iscale).' '.int(640/$iscale).'">';
$out.= ::FW_makeImage($ic);
$out.='</symbol>';
##$out.='<g stroke="rgb(128,128,128)" >';
$out.='<use href="#Image_'.$ic.'" height="22" width="22" />';
müsste man im Ergebnis von ::FW_makeImage nach viewBox, height und width suchen und gegen die gleichen Werte meiner viewBox ersetzen.
Was Besseres habe ich bisher nicht gefunden.
Ich habe das air-Icon einem aus dem Internet nachgemalt, ich weiß nicht wie es mit den Copyrightrechten aussieht.
Ich habe mal ein wenig rumprobiert und mit folgendem "Rezept" passt die Skalierung bei mir:
- Kopiere die viewBox aus dem eingebundenen Icon svg Element in das umschließende symbol Element.
- Beim eingebundenen Icon svg Element, ersetze die Einheit pt bei width und height durch px, oder entferne width und height beim eingebundenen Icon svg Element komplett.
Damit erhalte ich ein perfekt skaliertes und zentriertes Icon. Anscheinend wird beim umschließenden symbol Element die viewBox als Pixel interpretiert, und das geht schief, wenn das originale svg mehr als 640 Pixel hat.
Edit: Und so funktioniert auch die Skalierung mit korrekt zentriertem Icon: Statt x und y am symbol Element zu setzen, benutze ich im use Element:
<use href="#Image_'.$ic.'" height="22" width="22" transform="translate($ix, $iy) translate(11, 11) scale($iscale) translate(-11, -11)"/>
Also 22px großes Icon in den Ursprung des des Koordinatensystems schieben, skalieren, zurück schieben, auf Endposition schieben.
Edit 2: Es geht auch ganz ohne viewBox am symbol Element.
$out.='<symbol id="Image_'.$ic.'">';
$out.= ::FW_makeImage($ic);
$out.='</symbol>';
##$out.='<g stroke="rgb(128,128,128)" >';
$out.='<use href="#Image_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';
ZitatEdit 2: Es geht auch ganz ohne viewBox am symbol Element.
und das sagst du mir jetzt erst, nachdem ich mit Suchen und Ersetzen alles fertig programmiert habe. :)
Ich teste noch etwas und checke es morgen ein.
Zitat von: Damian am 16 Februar 2021, 23:21:24
und das sagst du mir jetzt erst, nachdem ich mit Suchen und Ersetzen alles fertig programmiert habe. :)
Ich war davon ausgegangen, dass die viewBox in der viewBox, die du dir zunutze machst, einen mir noch unbekannten Nutzen hat :D
Zitat
Ich teste noch etwas und checke es morgen ein.
Danke!
Zitat von: xenos1984 am 17 Februar 2021, 07:38:19
Ich war davon ausgegangen, dass die viewBox in der viewBox, die du dir zunutze machst, einen mir noch unbekannten Nutzen hat :D
Danke!
Tja, leider zu früh gefreut :(
Die meisten Icons werden bei mir ohne eine viewBox nicht angezeigt, bzw. nicht skaliert.
Zitat von: Damian am 17 Februar 2021, 08:26:11
Die meisten Icons werden bei mir ohne eine viewBox nicht angezeigt, bzw. nicht skaliert.
Ja, sieht so aus... Ich hatte es mit temp_temperature und ein paar anderen probiert - da ging es. Aber z.B. mit scene_livingroom nicht. Da funktioniert aber mein "Rezept" mit dem viewBox kopieren und pt durch px ersetzen.
Zitat von: xenos1984 am 17 Februar 2021, 09:30:52
Ja, sieht so aus... Ich hatte es mit temp_temperature und ein paar anderen probiert - da ging es. Aber z.B. mit scene_livingroom nicht. Da funktioniert aber mein "Rezept" mit dem viewBox kopieren und pt durch px ersetzen.
meine aktuelle Lösung sieht jetzt so aus:
my $svg_icon=::FW_makeImage($ic);
$svg_icon =~ s/height="[^"]*"//;
my $viewBox='viewBox = "0 0 640 640"';
$out.='<symbol id="Image_ring_'.$ic.'" '.$viewBox.'>';
$out.= $svg_icon;
$out.='</symbol>';
$out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';Es reicht also nur die Höhe (Breite) im Original-SVG zu entfernen, damit es sauber funktioniert.
Warum ausgerechnet 640er viewBox-Größe am besten passt, ist mir allerdings schleierhaft.
Stimmt, das hatte ich vergessen - ich hatte auch width und height aus dem Original-SVG entfernt. Wenn ich das mache, geht es bei mir auch ohne viewBox am symbol (jedenfalls bei den Icons, die ich bisher getestet habe, aber u.a. auch scene_livingroom):
my $svg_icon=::FW_makeImage($ic);
$svg_icon =~ s/height="[^"]*"//;
$svg_icon =~ s/width="[^"]*"//;
$out.='<symbol id="Image_ring_'.$ic.'">';
$out.= $svg_icon;
$out.='</symbol>';
$out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';
Falls du noch eins hast, bei dem es nicht mit diesem Code ohne viewBox geht, kann ich das auch gerne noch mal testen.
Zitat von: xenos1984 am 17 Februar 2021, 09:47:53
Stimmt, das hatte ich vergessen - ich hatte auch width und height aus dem Original-SVG entfernt. Wenn ich das mache, geht es bei mir auch ohne viewBox am symbol (jedenfalls bei den Icons, die ich bisher getestet habe, aber u.a. auch scene_livingroom):
my $svg_icon=::FW_makeImage($ic);
$svg_icon =~ s/height="[^"]*"//;
$svg_icon =~ s/width="[^"]*"//;
$out.='<symbol id="Image_ring_'.$ic.'">';
$out.= $svg_icon;
$out.='</symbol>';
$out.='<use href="#Image_ring_'.$ic.'" height="22" width="22" transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)"/>';
Falls du noch eins hast, bei dem es nicht mit diesem Code ohne viewBox geht, kann ich das auch gerne noch mal testen.
Bei mir scheinen alle Icons mit dieser Lösung auch zu funktionieren. Das Setzen einer viewBox dürfte allerdings performanter sein, als das zusätzliche Ersetzen der Breite. Diese Lösung ist wohl die "elegantere", obwohl ich das Patchen von bestehenden Definition grundsätzlich als nicht elegant bezeichnen würde - alles andere war leider nicht erfolgreich gewesen.
Eine zweite Sache, die mich stört, sind die id-Definitionen. Diese gelten wohl immer für die ganze HTML-Seite, obwohl ich sie nur für die jeweilige Funktion bräuchte.
Deswegen muss ich alle Def-ids immer eindeutig machen, sonst haben alle Grafiken die gleiche Definition (hier also das gleiche Icon) der ersten Grafik auf der aktuellen HTML-Seite - das ist unschön, besser wäre die Def-id nur lokal zu definieren, wenn es ginge.
Dann mal ein Versuch, beides auf einmal zu lösen:
my $svg_icon=::FW_makeImage($ic);
$svg_icon =~ s/height="[^"]*"/height="22"/;
$svg_icon =~ s/width="[^"]*"/width="22"/;
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Unter Benutzung dieses Mechanismus (http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElementWidthAttribute), dass width und height bei einem eingebetteten SVG Element anders interpretiert werden als beim äußersten, nämlich als die Größe des Rechtecks, in den das SVG gerendert werden soll (und das ist ja das Ziel - von daher denke ich, dass patchen von width und height hier absolut Sinn macht, denn wir wollen ja nicht die Original-Größe des Icons):
Zitat
width = "<length>"
For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded 'svg' elements, the width of the rectangular region into which the 'svg' element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.
height = "<length>"
For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded 'svg' elements, the height of the rectangular region into which the 'svg' element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.
Richtig, id ist ein Attribut, das dokumentweit gilt, d.h. im kompletten HTML der Seite.
Zitat von: xenos1984 am 17 Februar 2021, 12:34:21
Dann mal ein Versuch, beides auf einmal zu lösen:
my $svg_icon=::FW_makeImage($ic);
$svg_icon =~ s/height="[^"]*"/height="22"/;
$svg_icon =~ s/width="[^"]*"/width="22"/;
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Unter Benutzung dieses Mechanismus (http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElementWidthAttribute), dass width und height bei einem eingebetteten SVG Element anders interpretiert werden als beim äußersten, nämlich als die Größe des Rechtecks, in den das SVG gerendert werden soll (und das ist ja das Ziel - von daher denke ich, dass patchen von width und height hier absolut Sinn macht, denn wir wollen ja nicht die Original-Größe des Icons):
Richtig, id ist ein Attribut, das dokumentweit gilt, d.h. im kompletten HTML der Seite.
Ohne <symbol> zu arbeiten wäre am elegantesten, zumal ältere Browser damit nicht klarkommen. Leider werden bestimmte Icons (z.B. Fahrrad: fa__486) mit dieser Lösung nicht herunter skaliert.
Zitat von: Damian am 17 Februar 2021, 12:56:05
Leider werden bestimmte Icons (z.B. Fahrrad: fa__486) mit dieser Lösung nicht herunter skaliert.
Nanu? Das Icon kenne ich gar nicht und finde es weder in meinem FHEM, noch im SVN.
Falls das Original-SVG kein width / height haben sollte, funktioniert das Patchen in der Tat nicht. Den Fall müsste man also abfangen und stattdessen width / height zusätzlich beim eingefügten SVG setzen.
Da gibt es ganz viel von:
https://forum.fhem.de/index.php/topic,12605.msg795076.html#msg795076
Hallo Damian,
mal wieder großes Lob und vielen Dank für die ständige Weiterentwicklung von DOIF, speziell jetzt uiTable. Die SVGs ring und cylinder/balken sehen immer besser aus, jetzt vor allem mit den Icons. Das spart "Erklärtext".
Ich habe schon vor eine Weile rumprobiert, wie ich die Werteanzeigen meiner Meinung nach besser darstellen kann: große Zahlen vor dem Punkt und etwas kleiner die Nachkommastellen. Im Anhang mal ein Bild, wie das aussieht.
Ich habe mir dann deine Funktionen abgeändert, z.B. style, wie in der Zeile "Zähler" zu sehen. Bisher war es so, dass der Wert, der an die Funktion übergeben wird, im richtigen Format sein muss (hier eben mit Nachkommastellen, eine Ganzzahl hätte einen Punkt.
Bei den beiden Ringen für Wasser und Strom ist es jetzt eine modifizierte ring-funktion, wo es egal ist, wie der Eingangswert aussieht, also so wie im Original.
Basiert auf "98_DOIF.pm 23744 2021-02-14 20:12:01Z Damian"
So sieht die aus:
sub my_ring
{
my ($val,$min,$max,$minColor,$maxColor,$unit,$size,$func,$dec,$model,$lr,$ln,$icon) = @_;
my $out;
my ($ic,$iscale,$ix,$iy)=();
if (defined ($icon)) {
($ic,$iscale,$ix,$iy,)=split(",",$icon);
if (defined ($ix)) {
$ix+=30;
} else {
$ix=30;
};
if (defined ($iy)) {
$iy+=9;
} else {
$iy=9;
};
$iscale=1 if (!defined($iscale));
$ic="" if (!defined($ic));
}
my ($format,$value);
if (defined $lr) {
if (!defined $ln) {
$ln=$lr;
}
}
$min=0 if (!defined $min);
$max=100 if (!defined $max);
$dec=1 if (!defined $dec);
($format,$value,$val)=format_value($val,$min,$dec);
if (defined $func) {
$minColor=&{$func}($min);
$maxColor=&{$func}($max);
} else {
$minColor=120 if (!defined $minColor);
$maxColor=0 if (!defined $maxColor);
}
$max=$value if($value>$max);
$min=$value if ($value<$min);
$size=100 if (!defined $size);
my $prop=($value-$min)/($max-$min);
my ($x1,$y1,$x2,$y2);
($x1,$y1,$x2,$y2)=($prop*100,0,0,(1-$prop)*100);
my $val1=int($prop*100)+20;
my $currColor;
if (defined $func) {
if (defined($model)) {
$minColor=&{$func}($value);
}
$currColor=&{$func}($value);
} else {
if ($minColor < $maxColor) {
$currColor=$prop*($maxColor-$minColor)+$minColor;
} else {
$currColor=(1-$prop)*($minColor-$maxColor)+$maxColor;
}
if (defined($model)) {
$minColor=$currColor;
}
}
if (defined $icon and $icon ne "") {
$ic="$ic\@".color($currColor,$ln) if ($icon !~ /@/);
}
$out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 58 " style="width:%dpx; height:%dpx;">',$size/100*63,$size/100*58);
$out.= '<defs>';
$out.= '<linearGradient id="gradbackring" x1="0" y1="1" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:0.8"/><stop offset="1" style="stop-color:rgb(32, 32, 32);stop-opacity:0.9"/></linearGradient>';
$out.= sprintf('<linearGradient id="grad_ring1_%d_%d_%d" x1="%d%%" y1="%d%%" x2="%d%%" y2="%d%%"><stop offset="0" style="stop-color:%s; stop-opacity:1"/>\
<stop offset="1" style="stop-color:%s;stop-opacity:0.5"/></linearGradient>',$currColor,$minColor,(defined $lr ? $lr:0),$x1,$y1,$x2,$y2,color($currColor,$lr),color($minColor,$lr));
$out.= '<linearGradient id="grad_stroke3" x1="1" y1="0" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(80,80,80); stop-opacity:0.6"/>\
<stop offset="1" style="stop-color:rgb(48,48,48); stop-opacity:0.8"/><linearGradient>';
$out.='</defs>';
$out.='<circle cx="41" cy="30" r="26.5" fill="url(#gradbackring)" />';
$out.='<g stroke="url(#grad_stroke3)" fill="none" stroke-width="4">';
$out.=describeArc(41, 30, 28, 0, 280);
$out.='</g>';
$out.=sprintf('<g stroke="url(#grad_ring1_%d_%d_%d)" fill="none" stroke-width="3">',$currColor,$minColor,(defined $lr ? $lr:0));
$out.=describeArc(41, 30, 27.5, 0, int($prop*280));
$out.='</g>';
if (defined $icon and $icon ne "" and $icon ne " ") {
$out.='<symbol id="Image_'.$ic.'" x="'.$ix.'" y="'.$iy.'" viewBox="0 0 '.int(640/$iscale).' '.int(640/$iscale).'">';
$out.= ::FW_makeImage($ic);
$out.='</symbol>';
##$out.='<g stroke="rgb(128,128,128)" >';
$out.='<use href="#Image_'.$ic.'" height="22" width="22" />';#height="18" width="18"
##$out.='</g>';
}
##################################################
if ($val !~ /(-?\d+\.\d+)/) {
#### diese Zeile entspricht dem Original (bis auf font-weight gelöscht)
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:%spx;">%s</text>',((defined ($icon) and $icon ne "") ? 43:34),color($currColor,$ln),(defined ($icon) ? 14:18),sprintf($format,$val)); ## font-weight:thin;
} else {
my $valInt = 0;
my $valDec = 0;
($valInt,$valDec) = split(/\./,$val);
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:%spx;"><tspan>%s<tspan dx="-1" dy="0" style="fill:%s;font-size:70%%;font-weight:thin;">.%s</tspan></text>',(defined ($icon) ? 43:34),color($currColor,$ln),(defined ($icon) ? 14:18),$valInt,color($currColor,$ln),$valDec); ## font-weight:thin;
}
##################################################
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:10px;">%s</text>',((defined ($icon) and $icon ne "") ? 53:47),color($currColor,$ln),$unit) if (defined $unit);
$out.= '</svg>';
return ($out);
}
Ich habe markiert, was geändert ist.
Vielleicht gefällt es Dir ja und weil Du ja eh gerade alles überarbeitest vielleicht hast Du ja Lust, das zu übernehmen.
Viele Grüße
Sany
Zitat von: Damian am 17 Februar 2021, 14:08:50
Da gibt es ganz viel von:
https://forum.fhem.de/index.php/topic,12605.msg795076.html#msg795076
Oh, die kannte ich tatsächlich nicht - wieder etwas dazu gelernt.
Wie ich vermutet hatte, die Datei hat tatsächlich kein width und kein height. Vielleicht in dem Fall so ein Ansatz?
my $svg_icon=::FW_makeImage($ic);
if(!($svg_icon =~ s/height="[^"]*"/height="22"/)) {
$svg_icon =~ s/svg/svg height="22"/ }
if(!($svg_icon =~ s/width="[^"]*"/width="22"/)) {
$svg_icon =~ s/svg/svg width="22"/ }
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Wenn kein width / height vorhanden sind, wird ins svn Tag eins eingebaut.
Zitat von: Sany am 17 Februar 2021, 14:13:30
Hallo Damian,
mal wieder großes Lob und vielen Dank für die ständige Weiterentwicklung von DOIF, speziell jetzt uiTable. Die SVGs ring und cylinder/balken sehen immer besser aus, jetzt vor allem mit den Icons. Das spart "Erklärtext".
Ich habe schon vor eine Weile rumprobiert, wie ich die Werteanzeigen meiner Meinung nach besser darstellen kann: große Zahlen vor dem Punkt und etwas kleiner die Nachkommastellen. Im Anhang mal ein Bild, wie das aussieht.
Ich habe mir dann deine Funktionen abgeändert, z.B. style, wie in der Zeile "Zähler" zu sehen. Bisher war es so, dass der Wert, der an die Funktion übergeben wird, im richtigen Format sein muss (hier eben mit Nachkommastellen, eine Ganzzahl hätte einen Punkt.
Bei den beiden Ringen für Wasser und Strom ist es jetzt eine modifizierte ring-funktion, wo es egal ist, wie der Eingangswert aussieht, also so wie im Original.
Basiert auf "98_DOIF.pm 23744 2021-02-14 20:12:01Z Damian"
So sieht die aus:
sub my_ring
{
my ($val,$min,$max,$minColor,$maxColor,$unit,$size,$func,$dec,$model,$lr,$ln,$icon) = @_;
my $out;
my ($ic,$iscale,$ix,$iy)=();
if (defined ($icon)) {
($ic,$iscale,$ix,$iy,)=split(",",$icon);
if (defined ($ix)) {
$ix+=30;
} else {
$ix=30;
};
if (defined ($iy)) {
$iy+=9;
} else {
$iy=9;
};
$iscale=1 if (!defined($iscale));
$ic="" if (!defined($ic));
}
my ($format,$value);
if (defined $lr) {
if (!defined $ln) {
$ln=$lr;
}
}
$min=0 if (!defined $min);
$max=100 if (!defined $max);
$dec=1 if (!defined $dec);
($format,$value,$val)=format_value($val,$min,$dec);
if (defined $func) {
$minColor=&{$func}($min);
$maxColor=&{$func}($max);
} else {
$minColor=120 if (!defined $minColor);
$maxColor=0 if (!defined $maxColor);
}
$max=$value if($value>$max);
$min=$value if ($value<$min);
$size=100 if (!defined $size);
my $prop=($value-$min)/($max-$min);
my ($x1,$y1,$x2,$y2);
($x1,$y1,$x2,$y2)=($prop*100,0,0,(1-$prop)*100);
my $val1=int($prop*100)+20;
my $currColor;
if (defined $func) {
if (defined($model)) {
$minColor=&{$func}($value);
}
$currColor=&{$func}($value);
} else {
if ($minColor < $maxColor) {
$currColor=$prop*($maxColor-$minColor)+$minColor;
} else {
$currColor=(1-$prop)*($minColor-$maxColor)+$maxColor;
}
if (defined($model)) {
$minColor=$currColor;
}
}
if (defined $icon and $icon ne "") {
$ic="$ic\@".color($currColor,$ln) if ($icon !~ /@/);
}
$out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 58 " style="width:%dpx; height:%dpx;">',$size/100*63,$size/100*58);
$out.= '<defs>';
$out.= '<linearGradient id="gradbackring" x1="0" y1="1" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(64,64,64);stop-opacity:0.8"/><stop offset="1" style="stop-color:rgb(32, 32, 32);stop-opacity:0.9"/></linearGradient>';
$out.= sprintf('<linearGradient id="grad_ring1_%d_%d_%d" x1="%d%%" y1="%d%%" x2="%d%%" y2="%d%%"><stop offset="0" style="stop-color:%s; stop-opacity:1"/>\
<stop offset="1" style="stop-color:%s;stop-opacity:0.5"/></linearGradient>',$currColor,$minColor,(defined $lr ? $lr:0),$x1,$y1,$x2,$y2,color($currColor,$lr),color($minColor,$lr));
$out.= '<linearGradient id="grad_stroke3" x1="1" y1="0" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(80,80,80); stop-opacity:0.6"/>\
<stop offset="1" style="stop-color:rgb(48,48,48); stop-opacity:0.8"/><linearGradient>';
$out.='</defs>';
$out.='<circle cx="41" cy="30" r="26.5" fill="url(#gradbackring)" />';
$out.='<g stroke="url(#grad_stroke3)" fill="none" stroke-width="4">';
$out.=describeArc(41, 30, 28, 0, 280);
$out.='</g>';
$out.=sprintf('<g stroke="url(#grad_ring1_%d_%d_%d)" fill="none" stroke-width="3">',$currColor,$minColor,(defined $lr ? $lr:0));
$out.=describeArc(41, 30, 27.5, 0, int($prop*280));
$out.='</g>';
if (defined $icon and $icon ne "" and $icon ne " ") {
$out.='<symbol id="Image_'.$ic.'" x="'.$ix.'" y="'.$iy.'" viewBox="0 0 '.int(640/$iscale).' '.int(640/$iscale).'">';
$out.= ::FW_makeImage($ic);
$out.='</symbol>';
##$out.='<g stroke="rgb(128,128,128)" >';
$out.='<use href="#Image_'.$ic.'" height="22" width="22" />';#height="18" width="18"
##$out.='</g>';
}
##################################################
if ($val !~ /(-?\d+\.\d+)/) {
#### diese Zeile entspricht dem Original (bis auf font-weight gelöscht)
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:%spx;">%s</text>',((defined ($icon) and $icon ne "") ? 43:34),color($currColor,$ln),(defined ($icon) ? 14:18),sprintf($format,$val)); ## font-weight:thin;
} else {
my $valInt = 0;
my $valDec = 0;
($valInt,$valDec) = split(/\./,$val);
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:%spx;"><tspan>%s<tspan dx="-1" dy="0" style="fill:%s;font-size:70%%;font-weight:thin;">.%s</tspan></text>',(defined ($icon) ? 43:34),color($currColor,$ln),(defined ($icon) ? 14:18),$valInt,color($currColor,$ln),$valDec); ## font-weight:thin;
}
##################################################
$out.= sprintf('<text text-anchor="middle" x="41" y="%s" style="fill:%s;font-size:10px;">%s</text>',((defined ($icon) and $icon ne "") ? 53:47),color($currColor,$ln),$unit) if (defined $unit);
$out.= '</svg>';
return ($out);
}
Ich habe markiert, was geändert ist.
Vielleicht gefällt es Dir ja und weil Du ja eh gerade alles überarbeitest vielleicht hast Du ja Lust, das zu übernehmen.
Viele Grüße
Sany
ja, aber damit wäre die Funktion nicht abwärtskompatibel, da ja alle Kommazahlen dann anders dargestellt wären.
Zitat von: xenos1984 am 17 Februar 2021, 14:21:03
Oh, die kannte ich tatsächlich nicht - wieder etwas dazu gelernt.
Wie ich vermutet hatte, die Datei hat tatsächlich kein width und kein height. Vielleicht in dem Fall so ein Ansatz?
my $svg_icon=::FW_makeImage($ic);
if(!($svg_icon =~ s/height="[^"]*"/height="22"/)) {
$svg_icon =~ s/svg/svg height="22"/ }
if(!($svg_icon =~ s/width="[^"]*"/width="22"/)) {
$svg_icon =~ s/svg/svg width="22"/ }
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Wenn kein width / height vorhanden sind, wird ins svn Tag eins eingebaut.
fast, damit würde sogar mein Android 4.3 Wandtablet funktionieren, wenn es da nicht Icons gäbe, die man wieder besonders behandeln müsste z. B. das von mir gebastelte Icon "fuel", was zum FHEM-Standard gehört.
Zitat von: Damian am 17 Februar 2021, 15:23:14
fast, damit würde sogar mein Android 4.3 Wandtablet funktionieren, wenn es da nicht Icons gäbe, die man wieder besonders behandeln müsste z. B. das von mir gebastelte Icon "fuel", was zum FHEM-Standard gehört.
Mühsam ernährt sich das Eichhörnchen... Ja, fuel hat kein width / height, aber später im Icon inkscape:window-width="... Gut, dann muss man wohl auf ein reines width / height ohne etwas davor testen...
my $svg_icon=::FW_makeImage($ic);
if(!($svg_icon =~ s/\sheight="[^"]*"/ height="22"/)) {
$svg_icon =~ s/svg/svg height="22"/ }
if(!($svg_icon =~ s/\swidth="[^"]*"/ width="22"/)) {
$svg_icon =~ s/svg/svg width="22"/ }
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Damit wird nur noch ersetzt, wenn vor dem Attribut ein \s Zeichen kommt.
Zitat von: xenos1984 am 17 Februar 2021, 15:40:00
Mühsam ernährt sich das Eichhörnchen... Ja, fuel hat kein width / height, aber später im Icon inkscape:window-width="... Gut, dann muss man wohl auf ein reines width / height ohne etwas davor testen...
my $svg_icon=::FW_makeImage($ic);
if(!($svg_icon =~ s/\sheight="[^"]*"/ height="22"/)) {
$svg_icon =~ s/svg/svg height="22"/ }
if(!($svg_icon =~ s/\swidth="[^"]*"/ width="22"/)) {
$svg_icon =~ s/svg/svg width="22"/ }
$out.='<g transform="translate('.$ix.', '.$iy.') translate(11, 11) scale('.$iscale.') translate(-11, -11)">';
$out.= $svg_icon;
$out.='</g>';
Damit wird nur noch ersetzt, wenn vor dem Attribut ein \s Zeichen kommt.
OK. Jetzt noch alle anderen Icons durchtesten (vor allem die animierten Wetter-Icons) und dann kann ich einchecken. Ich sag ja, die Patcherei hinterlässt bei mir kein gutes Bauchgefühl, aber ist besser als die bisherige Lösung.
Zitat von: Damian am 17 Februar 2021, 15:59:06
OK. Jetzt noch alle anderen Icons durchtesten (vor allem die animierten Wetter-Icons) und dann kann ich einchecken. Ich sag ja, die Patcherei hinterlässt bei mir kein gutes Bauchgefühl, aber ist besser als die bisherige Lösung.
Geht mir ähnlich. Annahmen an Eingaben (in dem Fall die Original-SVG) zu machen ist nie schön.
Noch eine andere Frage: Wäre es möglich, eine logarithmische Skalierung einzubauen, oder wäre die mit dem aktuellen Code schon möglich? Mein typischer Anwendungsfall wäre eine Anzeige der Netzwerkdatenrate. Wenn man da eine lineare Skala bis z.B. 100 MB/s hat, sieht man unter 1 MB/s praktisch keinen Unterschied mehr.
(Man könnte natürlich als numerischen Wert den Logarithmus an icon_ring übergeben, aber dann wird eben auch der als Zahl angezeigt und nicht mehr der eigentlich gewünschte Zahlenwert.)
Animierte SVG-Icons z. B. "cloudy" funktionieren auch.
Für logarithmische Anzeige könntest du den maximalen Wert, als Parameter der SVG-Funktion nicht fest vorgeben, sondern über eine Logarithmusfunktion abhängig vom Wert bestimmen. Auch die Farbfunktion kannst du selbst programmieren und als Parameter übergeben. Intern wird aber linear skaliert.
Zitat von: Damian am 17 Februar 2021, 19:01:32
Für logarithmische Anzeige könntest du den maximalen Wert, als Parameter der SVG-Funktion nicht fest vorgeben, sondern über eine Logarithmusfunktion abhängig vom Wert bestimmen. Auch die Farbfunktion kannst du selbst programmieren und als Parameter übergeben. Intern wird aber linear skaliert.
Gute Idee, funktioniert perfekt! :)
Ich habe die Icon-Darstellung bei den icon_bar-Funktionen gleichgezogen und neue DOIF-Version eingecheckt.
Zitat von: Damian am 17 Februar 2021, 19:38:49
Ich habe die Icon-Darstellung bei den icon_bar-Funktionen gleichgezogen und neue DOIF-Version eingecheckt.
Danke - sieht gut aus! Jetzt machen Wetteranzeige und Computerstatus gleich mehr her 8)
Zitat von: xenos1984 am 18 Februar 2021, 08:05:15
Danke - sieht gut aus! Jetzt machen Wetteranzeige und Computerstatus gleich mehr her 8)
Es ist aber ziemlich kalt bei dir :)
Zitat von: Damian am 18 Februar 2021, 08:21:27
Es ist aber ziemlich kalt bei dir :)
Oh ja - aber nicht ungewöhnlich für den Winter in Tartu / Estland ;) Bis -30°C habe ich schon erlebt. Meistens hält es nicht lange an, unter -20°C selten mehr als ein paar Tage, aber -15°C durchaus mal ein paar Wochen.
Zitat von: xenos1984 am 18 Februar 2021, 09:59:14
Oh ja - aber nicht ungewöhnlich für den Winter in Tartu / Estland ;) Bis -30°C habe ich schon erlebt. Meistens hält es nicht lange an, unter -20°C selten mehr als ein paar Tage, aber -15°C durchaus mal ein paar Wochen.
Dann dauert es bei dir noch bis ein Frühlingsgefühl aufkommt - bei uns sind am Wochenende +17°C mit Sonnenschein angesagt, dann werden sich meine Ringe eher gelb verfärben :)
Zwei in einem ist gut, drei in einem ist besser :)
Ich bastle gerade an icon_ring2.
Ich habe jetzt bei allen Ring-Funktionen die Option eingebaut Schrift-Attribute zu verändern. Ich habe die Idee von Sany übernommen und lasse die Nachkommastellen etwas kleiner erscheinen. Ich denke, dass es besser aussieht und nebenbei mehr Platz verschafft.
Zitat von: Damian am 18 Februar 2021, 12:28:04
Dann dauert es bei dir noch bis ein Frühlingsgefühl aufkommt - bei uns sind am Wochenende +17°C mit Sonnenschein angesagt, dann werden sich meine Ringe eher gelb verfärben :)
+17°C ist auf meiner Skala schon fast orange :D
Was mir gerade noch als Wunsch einfällt wäre ein drehbares Icon oder irgendwas ähnliches um eine Windrose zu realisieren (wenn schon Windgeschwindigkeit angezeigt wird, warum dann nicht auch die Richtung). Falls du dazu eine Idee hast, das geschickt umzusetzen, wäre das super. Vielleicht entweder, indem man ein Icon dreht (also neben scale(...) noch ein rotate(...)), oder als komplett eigenes Widget, das dann statt der Gradzahl die Windrichtung als N oder NW oder WNW anzeigt. (Wenn man eines der _ring Widgets benutzt, kann man N / NW / WNW etc. natürlich als Einheit mit übergeben, und bekäme dann z.B. 45° NE angezeigt - das wäre flexibler als das im Modul fest zu kodieren.)
Zitat von: xenos1984 am 19 Februar 2021, 19:10:02
+17°C ist auf meiner Skala schon fast orange :D
Was mir gerade noch als Wunsch einfällt wäre ein drehbares Icon oder irgendwas ähnliches um eine Windrose zu realisieren (wenn schon Windgeschwindigkeit angezeigt wird, warum dann nicht auch die Richtung). Falls du dazu eine Idee hast, das geschickt umzusetzen, wäre das super. Vielleicht entweder, indem man ein Icon dreht (also neben scale(...) noch ein rotate(...)), oder als komplett eigenes Widget, das dann statt der Gradzahl die Windrichtung als N oder NW oder WNW anzeigt. (Wenn man eines der _ring Widgets benutzt, kann man N / NW / WNW etc. natürlich als Einheit mit übergeben, und bekäme dann z.B. 45° NE angezeigt - das wäre flexibler als das im Modul fest zu kodieren.)
Es gibt da mehrere Möglichkeiten:
1) Eine Animation kann man in ein Icon einbauen, ein selbst drehendes Etwas habe ich irgendwo bei den Wettericons schon gesehen.
2 Eine bestimmte Drehrichtung eines Icons lässt sich einfach als ein weiterer Parameter beim Icon selbst einbauen: "icon, scale,x,y,rotation"
3) Unterschiedliche Icons je nach Zustand geht ja jetzt schon mit dem ternären Operator:
icon_ring ([wind:state] eq "NE" ? "icon_NN" : ([wind:state] eq "NW" ? "icon_NW":....
Es gibt Windrichtungsicons s. oben #74
icon_ring ("weather_wind_directions_".[muc:windDirIcon],[muc:windSpeed],0,120,120,0,[muc:windDirText],1,120)
Man bräuchte bessere, nicht nur einen einfachen Pfeil.
Ich habe icon_ring2 noch mal umgebaut, jetzt sieht es aufgeräumter aus. Die Schrift-Attribute der Werte sind jetzt anpassbar:
"icon_ring2"| icon_ring2("car,1.5,0,-3",[tesla:Strom],0,16,120,0,"A",120,undef,"2,font-weight:normal",[tesla:Kapazitaet],0,100,0,120,"%",undef,"1,font-weight:normal",)|
icon_temp_hum_ring("temp_outside",[Aussensensor:temperature],[Aussensensor:humidity],undef,undef,120)|
icon_temp_temp_ring(([vaillant:Pumpenstatus] eq "on" ? "sani_floor_heating\@Darkorange" : "sani_floor_heating_neutral\@white"),[ESPEasy_ESP_Temp_Vorlauf:Temperature],[ESPEasy_ESP_Temp_Keller_Ruecklauf:Temperature],15,70,120)
Neue Funktionen:
icon_ring2 ($icon,$val,$min,$max,$minColor,$maxColor,$unit,$size,$func,$decfont1,$val2,$min2,$max2,$minColor2,$maxColor2,$unit2,$func2,$decfont2,$lr,$ln)
icon_temp_hum_ring ($icon,$value,$value2,$min,$max,$size,$lightring,$lightnumber,$decfont1,$decfont2)
icon_temp_temp_ring ($icon,$value,$value2,$min,$max,$size,$lightring,$lightnumber,$decfont1,$decfont2)
Beispiele siehe Post davor.
$decfont1/2 hat den Aufbau:
<Anzahl der Nachkommastellen>
oder
<Anzahl der Nachkommastellen>,<font-Attribute>
Beispiel: Eine Nachkommastelle und normale Schrift (nicht fett)
"1,font-weight:normal"
Bei allen anderen ring-Funktionen entspricht der bisherige Parameter $dec dem Parameter $decfont, dh. neben der Anzahl der Nachkommastellen, lässt sich bei allen Ringen jetzt die Schrift der angezeigten Werte anpassen.
$icon hat jetzt einen weiteren Parameter für Rotation bekommen:
<iconname>,<scale>,<x>,<y>,<rotate>
Beispiel für Rotation:
icon_temp_ring("sani_floor_heating_neutral,1,0,0,0",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,90",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,180",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,270",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,360",14.8)
Ich habe es erst einmal mit diesem Ansatz probiert:
Zitat von: Damian am 19 Februar 2021, 19:30:25
3) Unterschiedliche Icons je nach Zustand geht ja jetzt schon mit dem ternären Operator:
Zitat von: jkriegl am 19 Februar 2021, 20:01:21
Es gibt Windrichtungsicons s. oben #74
icon_ring ("weather_wind_directions_".[muc:windDirIcon],[muc:windSpeed],0,120,120,0,[muc:windDirText],1,120)
Man bräuchte bessere, nicht nur einen einfachen Pfeil.
Siehe Bildanhang. Geht vom Prinzip her, aber die Icons könnten wirklich besser sein. Statt eines kleinen Pfeils wäre etwas größeres besser, das mehr Aussagekraft hat - mit einem großen Pfeil ist es besser.
Zitat von: Damian am 19 Februar 2021, 21:39:26
$icon hat jetzt einen weiteren Parameter für Rotation bekommen:
<iconname>,<scale>,<x>,<y>,<rotate>
Beispiel für Rotation:
icon_temp_ring("sani_floor_heating_neutral,1,0,0,0",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,90",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,180",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,270",14.8)|
icon_temp_ring("sani_floor_heating_neutral,1,0,0,360",14.8)
Sehr cool! 8)
Habe mal auf die Schnelle ein Icon wind gebastelt:
Bsp.:
icon_ring("wind\@white,1,0,0,".[wind:richtung],[wind:richtung],0,360)
Die Farben sind nicht gesetzt.
Daran hatte ich gerade gedacht ;)
Cool wäre es noch, wenn ich bei Windstärke=0 ein anderes Icon wählen könnte; oder auch eine andere Farbe.
Obwohl der Zeiger zwar technisch in eine (willkürliche) Richtung zeigt, kann man da nicht wirklich von einer Windrichtung sprechen.
Zitat von: CQuadrat am 19 Februar 2021, 23:15:05
Daran hatte ich gerade gedacht ;)
Cool wäre es noch, wenn ich bei Windstärke=0 ein anderes Icon wählen könnte; oder auch eine andere Farbe.
Obwohl der Zeiger zwar technisch in eine (willkürliche) Richtung zeigt, kann man da nicht wirklich von einer Windrichtung sprechen.
Warum willkürliche Richtung? Der Zeiger zeigt auf ein Grad genau die Windrichtung an.
Man könnte auch abhängig von der Richtung als Einheit unten die Richtung N, NE, ... anzeigen :)
Edit: Statt der Windrichtung kann man natürlich auch zusätzlich die Windstärke anzeigen, was sicherlich noch sinnvoller wäre.
Hier mal eine andere Beispieldefinition:
icon_ring("wind,1,0,0,".[Wind:Richtung],[Wind:Geschwindigkeit],0,50,120,0,"km/h")
und mit der neuen Funkton icon_ring2
icon_ring2("wind,1,0,0,".[Wind:Richtung],[Wind:Geschwindigkeit],0,50,120,0,"km/h",undef,undef,1,[Wind:Richtung],361,361,60,60,[Wind:Richtungswert],undef,0)
Der Pfeil zeigt genau die Windrichtung an und hat die Farbe der Geschwindigkeit von grün bis rot.
Zitat von: Damian am 19 Februar 2021, 23:17:43
Warum willkürliche Richtung? Der Zeiger zeigt auf ein Grad genau die Windrichtung an.
War zu spät gestern. Ich unterstellte irrtümlich (ohne genau hinzusehen), dass die Ring die Geschwindigkeit darstellt.
In Kombination Ring=Geschwindigkeit und Symbol=Richtung finde ich schon, dass bei Windgeschwindigkeit=0 der Zeiger "anders" aussehen sollte. Er zeigt ja zwar eine Richtung an, aber es gibt doch gar keinen Wind. Ergo auch keine Windrichtung. Ich habe noch nie gehört: Windstille aus Nordwest. Naja, egal.
Zitat
Edit: Statt der Windrichtung kann man natürlich auch zusätzlich die Windstärke anzeigen, was sicherlich noch sinnvoller wäre.
Ebend.
Und danke für die ganzen optischen Gestaltungsmöglichkeiten. Peppt alles sehr gut auf.
Zitat von: CQuadrat am 20 Februar 2021, 10:47:26
War zu spät gestern. Ich unterstellte irrtümlich (ohne genau hinzusehen), dass die Ring die Geschwindigkeit darstellt.
In Kombination Ring=Geschwindigkeit und Symbol=Richtung finde ich schon, dass bei Windgeschwindigkeit=0 der Zeiger "anders" aussehen sollte. Er zeigt ja zwar eine Richtung an, aber es gibt doch gar keinen Wind. Ergo auch keine Windrichtung. Ich habe noch nie gehört: Windstille aus Nordwest. Naja, egal.
Ebend.
Und danke für die ganzen optischen Gestaltungsmöglichkeiten. Peppt alles sehr gut auf.
Bei absoluter Windstille kannst du dir ein anderes Symbol einblenden ;)
Hi Damian,
vielen Dank fürs Übernehmen von meinem Vorschlag. Finde auch, dass es besser aussieht und ein wenig die "Nicht-so-Wichtigkeit" der Nachkommastellen darstellt.
Die Windanzeige ist auch klasse, nur der Windpfeil, finde ich, sollte anders herum sein. Eine Wetterfahne zeigt in die Richtung, aus der der Wind kommt, auf Wetterkarten ist eigentlich der Wind so dargestellt, wie er weht (also in Pfeilrichtung). Kann man aber auch bei der Werteübergabe umrechnen.
Viele Grüße
Sieht gut aus, vor allem mit icon_ring2 :)
Ich habe mal wieder fertig!
Neue Version eingecheckt:
https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1
Dokumentation im Wiki folgt ...
Dann wollen wir gleich mal die neuen Features auf die Probe stellen :)
defmod di_wind DOIF ##
attr di_wind uiTable {package ui_Table;;\
\
sub himmelsrichtung {\
my ($richtung)=@_;;\
my $element=int($richtung/22.5);;\
my @h=(qw"N NNO NO ONO O OSO SO SSO S SSW SW WSW W WNW NW NNW");;\
return($h[$element]);;\
}\
}\
icon_ring2(([Wind:Geschwindigkeit]>0 ? "wind":"no_wind").",1,0,0,".[Wind:Richtung],[Wind:Geschwindigkeit],0,50,120,0,"km/h",undef,undef,1,[Wind:Richtung],361,361,192,192,([Wind:Geschwindigkeit]>0?himmelsrichtung([Wind:Richtung]):"--"),undef,0)
Angezeigt wird: Windrichtung, Windstärke, Himmelsrichtung, bei keinem Wind, wird keine Windrichtung angezeigt.
Doku zu neuen Funktionen ist fertiggestellt:
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Temperatur-_und_Feuchtigkeitsanzeige_mit_einem_Icon_mit_Hilfe_der_SVG-Funktion_icon_temp_hum_ring
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_von_zwei_Temperaturwerten_mit_einem_Icon_mit_Hilfe_der_SVG-Funktion_icon_temp_temp_ring
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_von_zwei_Zahlenwerten_mit_einem_Icon_mit_Hilfe_der_universellen_SVG-Funktion_icon_ring2
Hier ein Beispiel für eine komprimierte Informationsdichte.
Neben Temperatur und Feuchtigkeit, kann man erkennen, ob Fenster im Zimmer offen ist und ob gerade geheizt wird. Was rot bedeutet, kann man ohne Worte erkennen.
defmod Heizung DOIF ##
attr Heizung uiTable {\
package ui_Table;;\
$SHOWNOSTATE=1;;\
$ATTRIBUTESFIRST = 1;;\
$TC{1..4}="align='center'";;\
}\
\
DEF TPL_raum (icon_temp_hum_ring([$1_Fenster:state] eq "closed" ? ([H_$1:state] eq "off" ? "fts_window_1w\@white":"fts_window_1w\@Darkorange"):([H_$1:state] eq "off" ? "fts_window_1w_open\@lime":"fts_window_1w_open\@red"),[TH_$1_HM:measured-temp],[TH_$1_HM:humidity],undef,undef,130))\
\
style("DG","Darkorange")|"DG_Zi."|""|""|""\
""|TPL_raum (DG)\
style("1. GE","Darkorange")|"Bad"|"Kind Ost"|"Kind West"|""\
""|TPL_raum (Bad)|TPL_raum (Kz_o)|TPL_raum (Kz_w)\
style("Erdge.","Darkorange")|"Wohnzi."|"Küche"|""|""\
""|TPL_raum (WZ)|TPL_raum (Kueche)\
style("Keller","Darkorange")|"Schlafzi."|"Werkzi."|""|""\
""|TPL_raum (Keller)|TPL_raum (AKeller)
Zitat von: Damian am 20 Februar 2021, 13:33:09
Dann wollen wir gleich mal die neuen Features auf die Probe stellen :)
Da muss nun mein 20zeiliges DOIF in Rente, mit dem ich bisher die Windrichtung ausschließlich als Kürzel dargestellt habe. Wirklich super gelöst und mit dem Pfeil so viel intuitiver.
Jetzt fehlt mir eigentlich nur noch ein "Mitnehmer" auf dem Kreis, der Min/Max zum Beispiel der Windstärke markiert. :-) Klar, das muss dann beim Datumswechsel zurückgesetzt werden.
Herzliche Grüße
Christian
Sehr schön! Meine Wetteranzeige ist auch ausgebaut :)
Zitat von: xenos1984 am 21 Februar 2021, 18:58:17
Sehr schön! Meine Wetteranzeige ist auch ausgebaut :)
Schön zu sehen, dass die neuen Funktionen gute Anwendungsmöglichkeiten finden.
Mit über Null Grad scheint dort im Norden auch schon Frühling anzukommen ;)
Zitat von: Damian am 21 Februar 2021, 19:09:47
Mit über Null Grad scheint dort im Norden auch schon Frühling anzukommen ;)
Das muss noch nichts heißen - heute Abend sind es schon wieder -6,8°C :D Manchmal liegt der Schnee bis April.
Mir ist gerade noch ein kleiner, aber entscheidender Fehler an zwei Stellen aufgefallen:
4757 $out.= '<linearGradient id="grad_stroke3" x1="1" y1="0" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(80,80,80); stop-opacity:0.6"/>\
4758 <stop offset="1" style="stop-color:rgb(48,48,48); stop-opacity:0.8"/><linearGradient>';
4911 $out.= '<linearGradient id="grad_stroke3" x1="1" y1="0" x2="0" y2="0"><stop offset="0" style="stop-color:rgb(80,80,80); stop-opacity:0.6"/>\
4912 <stop offset="1" style="stop-color:rgb(48,48,48); stop-opacity:0.8"/><linearGradient>';
Beim schließenden Tag <
/linearGradient> fehlt der Schrägstrich. Firefox scheint sich innerhalb einer HTML-Seite (= im HTML-Modus) nicht zu beschweren, wohl aber, wenn man die SVG für sich alleine (= XML-Modus) anzeigen möchte, und auch librsvg verschluckt sich daran. Leztere mag auch die Größenangabe nicht, und nimmt stur die Werte aus der viewBox stattdessen:
4751 $out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 58 " style="width:%dpx; height:%dpx;">',$size/100*63,$size/100*58);
4902 $out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 57 " style="width:%dpx; height:%dpx;">',$size/100*63,$size/100*57);
Damit hat die mit librsvg konvertierte Grafik immer die Maße 63 * 57 Pixel. Damit dagegen geht es:
4751 $out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 58 " width="%dpx" height="%dpx">',$size/100*63,$size/100*58);
4902 $out.= sprintf('<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 63 57 " width="%dpx" height="%dpx">',$size/100*63,$size/100*57);
Das sollte auch die SVG-konforme Skalierungsmethode sein. librsvg wird vom RSS-Modul benutzt, um SVG nach PNG zu konvertieren.
Nachtrag: Das style-Attribut zur Größenangabe braucht man doch noch (zusätzlich), um die Größe auch im FHEMWEB Frontend richtig zu bekommen...
Danke für den Tipp.
Ich werde es heute Abend beheben.
Benutze ein sub und bekomme bei attr der uiTable log-Eintragungen, obwohl alles richtig funktioniert und verbose=2 ist.
In [vhk:Wer] steht z.B. "eco 17.0 Therme" (od. Solar, keiner)
Muss ich noch etwas einstellen?
2021.02.23 17:11:21 3: system return value: Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
icon_ring((wer_hzt([vhk:wer])eq"solar"?"sani_solar_temp\@yellow":(wer_hzt([vhk:wer])eq"therme"?"sani_boiler_temp\@darkorange":"")),(wer_hzt([vhk:wer])eq"keiner"?"keiner":([var:wert])),20,60,120,0,"vl",1,120)
style(wer_hzt([vhk:wer])), try help.defmod di_ui_hz DOIF ###
attr di_ui_hz room 1.5 uiTest
attr di_ui_hz uiTable {package ui_Table;;\
\
sub wer_hzt {my ($str)=@_;;\
my @words=split / /,$str;;\
return($words[2]);;}\
}\
\
icon_ring((wer_hzt([vhk:Wer])eq"Solar"?"sani_solar_temp\@yellow":(wer_hzt([vhk:Wer])eq"Therme"?"sani_boiler_temp\@Darkorange":"")),(wer_hzt([vhk:Wer])eq"keiner"?"keiner":([Var:Wert])),20,60,120,0,"VL",1,120)\
\
style(wer_hzt([vhk:Wer]))
attr di_ui_hz verbose 2
Ich sehe keinen Fehler.
Bei mir wird korrekterweise eine Tabelle mit "c" angezeigt:
Internals:
CFGFN
DEF ###
FUUID 603541cd-f33f-c0d4-848f-ceb782fc33184505
MODEL FHEM
NAME di_ui_hz
NOTIFYDEV global
NR 6186
NTFY_ORDER 50-di_ui_hz
STATE initialized
TYPE DOIF
READINGS:
2021-02-23 18:56:29 cmd 0
2021-02-23 18:56:29 mode enabled
2021-02-23 18:56:29 state initialized
Regex:
accu:
condition:
do:
0:
helper:
DEVFILTER ^global$
NOTIFYDEV global
globalinit 1
last_timer 0
sleeptimer -1
uiTable:
package package ui_Table;
table:
0:
0:
0:
0 package ui_Table;style(wer_hzt("a b c"))
tc:
td:
0:
tr:
Attributes:
room 1.5 uiTest
uiTable {package ui_Table;
sub wer_hzt {my ($str)=@_;
my @words=split / /,$str;
return($words[2]);}
}
style(wer_hzt("a b c"))
Es geht um den Eintrag im Log, der unschön ist.
Der Rückgabewert wird bei mir auch korrekt angezeigt.
Zitat von: jkriegl am 23 Februar 2021, 19:44:09
Es geht um den Eintrag im Log, der unschön ist.
Der Rückgabewert wird bei mir auch korrekt angezeigt.
Bei mir kommt kein Eintrag im Log bei der geposteten Definition von mir.
Zitat von: Damian am 23 Februar 2021, 13:09:33
Danke für den Tipp.
Ich werde es heute Abend beheben.
Korrigierte Version eingecheckt:
https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1
Mit der Korrektur des LinearGradienten funktioniert jetzt wieder mein altes Wandtablet :)
Zitat von: Damian am 23 Februar 2021, 21:17:43
Mit der Korrektur des LinearGradienten funktioniert jetzt wieder mein altes Wandtablet :)
Perfekt! Und ich kann es jetzt über das RSS-Modul auf mein TFT-Display schieben :)
@Damian: Habe Deine gepostete Version genommen.
Im list ist bei mir zusätzlich:
VERSION 23810 2021-02-23 20:14:35
Internals:
CFGFN
DEF ###
FUUID 603633d4-f33f-9f96-551c-39efe6767b7842d3
MODEL FHEM
NAME di_ui_test
NOTIFYDEV global
NR 131
NTFY_ORDER 50-di_ui_test
STATE initialized
TYPE DOIF
VERSION 23810 2021-02-23 20:14:35
READINGS:
2021-02-24 12:09:08 cmd 0
2021-02-24 12:09:08 mode enabled
2021-02-24 12:09:08 state initialized
Regex:
accu:
condition:
do:
0:
helper:
DEVFILTER ^global$
NOTIFYDEV global
globalinit 1
last_timer 0
sleeptimer -1
uiTable:
package package ui_Table;
table:
0:
0:
0:
0 package ui_Table;style(wer_hzt("a b c"))
tc:
td:
0:
tr:
Attributes:
room 1.5 uiTest
uiTable {package ui_Table;
sub wer_hzt {my ($str)=@_;
my @words=split / /,$str;
return($words[2]);}
}
style(wer_hzt("a b c"))
2021.02.24 12:21:39 3: trigger system change: attr di_ui_test uitable {package ui_table;
sub wer_hzt {my ($str)=@_;
my @words=split / /,$str;
return($words[2]);}
}
style(wer_hzt("a b c")) : Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt("a, try help.
2021.02.24 12:21:39 3: system return value: Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt("a, try help.
Muss wohl damit leben, attr device uiTable macht man nicht so oft. Das Ergebnis ist ja richtig oder ich löse das ohne sub.
Das verbose zieht nicht, hat das Log einen anderen Ursprung?
Auch mal von mir: Vielen Dank für Deine tolle Arbeit!
Irgendwie kann ich das alles nicht glauben. Vielleicht ist da ein Zeichen drin, was ich nicht erkennen kann.
Versuch mal die Raw-Definition ohne Änderung über das Pluszeichen zu übernehmen:
defmod di_ui_hz DOIF ###
attr di_ui_hz room 1.5 uiTest
attr di_ui_hz uiTable {package ui_Table;;\
sub wer_hzt {my ($str)=@_;;\
my @words=split / /,$str;;\
return($words[2]);;}\
}\
\
style(wer_hzt([vhk:wer]))
Wann kommt die Meldung? Bei der Definition oder beim Trigger?
Kann es sein, dass irgendwo in der Definition ein Leerzeichen hinter einem \ versteckt ist? In dem Fall würde der \ nämlich das Leerzeichen escapen und nicht den Zeilenumbruch, und FHEM interpretiert die nächste Zeile als eigenes Kommando, dass es nicht kennt (my, sub...).
Log kommt auf Editor-Fenster ok und attr <device> usw
mit "+" ausgeführt und einmal uiTable geöffnet, ok, attr ...
2021.02.24 19:24:21 1: PERL WARNING: Use of uninitialized value $text in concatenation (.) or string at ./FHEM/98_DOIF.pm line 4147.
2021.02.24 19:24:21 3: di_ui_hz:Warning in DOIF_RegisterCell:package ui_Table;.style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer')))
2021.02.24 19:24:21 3: trigger system change: attr di_ui_hz uitable {package ui_table;
sub wer_hzt {my ($str)=@_;
my @words=split / /,$str;
return($words[2]);}
}
style(wer_hzt([vhk:wer])) : Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt([vhk:wer])), try help.
2021.02.24 19:24:21 3: system return value: Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt([vhk:wer])), try help.
2021.02.24 19:24:41 3: di_ui_hz:Warning in DOIF_RegisterEvalAll:package ui_Table;::DOIF_Widget($hash,$reg,'di_ui_hz_uiTable_c_0_0_0_0',style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer'))),"")
2021.02.24 19:24:46 3: di_ui_hz:Warning in DOIF_RegisterEvalAll:package ui_Table;::DOIF_Widget($hash,$reg,'di_ui_hz_uiTable_c_0_0_0_0',style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer'))),"")
2021.02.24 19:28:56 3: di_ui_hz:Warning in DOIF_RegisterEvalAll:package ui_Table;::DOIF_Widget($hash,$reg,'di_ui_hz_uiTable_c_0_0_0_0',style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer'))),"")
2021.02.24 19:29:26 3: di_ui_hz:Warning in DOIF_RegisterCell:package ui_Table;.style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer')))
2021.02.24 19:29:26 3: trigger system change: attr di_ui_hz uitable {package ui_table;
sub wer_hzt {my ($str)=@_;
my @words=split / /,$str;
return($words[2]);}
}
style(wer_hzt([vhk:wer])) : Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt([vhk:wer])), try help.
2021.02.24 19:29:26 3: system return value: Unknown command sub, try help.
Unknown command my, try help.
Unknown command return($words[2]), try help.
Unknown command }
}
style(wer_hzt([vhk:wer])), try help.
2021.02.24 19:29:26 3: di_ui_hz:Warning in DOIF_RegisterEvalAll:package ui_Table;::DOIF_Widget($hash,$reg,'di_ui_hz_uiTable_c_0_0_0_0',style(wer_hzt(::ReadingValDoIf($hash,'vhk','wer'))),"")
Sehr merkwürdig?
Die Meldung kommt mir unbekannt vor: trigger system change
Sie kommt nicht von DOIF.
Dann musst du dich an das Problem herantasten:
Anfangen kannst du damit:
defmod di_ui_hz DOIF ###
attr di_ui_hz room 1.5 uiTest
attr di_ui_hz uiTable {package ui_Table;;\
sub my_test_sub {\
my ($str)=@_;;\
return($str);;\
}\
}\
\
style(my_test_sub([vhk:wer]))
Zu bedenken ist auch, dass alle DOIF-Module mit gleichem ui_Table-Raum arbeiten, dh. wenn du in irgend einem anderen DOIF die gleiche Funktion definierst, so wird die ursprüngliche überschrieben.
Ich glaube, daß "changelog" der Verursacher ist.
Mit inactive setzen ist Ruhe.
Danke für Eure Hilfe.
Habe icon_ring2 vollgepumpt und $unit1/2 für andere Zwecke missbraucht.
Die Farbe entspricht natürlich der entsprechenden Ringfarbe.
Kann man die $unit-Farbe ev. manipulieren? Im Beispiel z.B. "auto*" oder "18:48"
Zitat von: jkriegl am 06 März 2021, 19:09:51
Habe icon_ring2 vollgepumpt und $unit1/2 für andere Zwecke missbraucht.
Die Farbe entspricht natürlich der entsprechenden Ringfarbe.
Kann man die $unit-Farbe ev. manipulieren? Im Beispiel z.B. "auto*" oder "18:48"
leider nein, weil es als Einheit zum Wert gedacht ist, hat es die gleiche Farbe, wie der Wert selbst.
PS Die Breite der bar-Funktion kannst du anpassen.
Zitat von: Damian am 06 März 2021, 19:36:19
leider nein, weil es als Einheit zum Wert gedacht ist, hat es die gleiche Farbe, wie der Wert selbst.
jetzt, doch :)
der Parameter
$decfont hat neues Argument erhalten
$decfont: "<Anzahl der Nachkommastellen>, <Schrift SVG-Attribute Wert>,<Schrift SVG-Attribute Einheit>"
Wenn einem die Farbe, die Größe oder sonst etwas bei der Einheit (unit) nicht passt, der kann es demnächst anpassen.
Bsp.:
defmod di_icon_ring2 DOIF ##
attr di_icon_ring2 uiTable {package ui_Table;;\
\
"Strom"|icon_ring2("sani_solar",[zaehler:l-Produktion],0,3.6,0,120,"PV kW",120,undef,undef,[zaehler:l-Bezug,0],0,1,120,0,"Netz kW",undef,undef)\
"Strom"|icon_ring2("sani_solar",[zaehler:l-Produktion],0,3.6,0,120,"PV kW",120,undef,"1,,font-size:7px;;fill:white",[zaehler:l-Bezug,0],0,1,120,0,"Netz kW",undef,"1,,font-size:7px;;fill:white")
und eingecheckt
Doku angepasst:
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_von_zwei_Zahlenwerten_mit_einem_Icon_mit_Hilfe_der_universellen_SVG-Funktion_icon_ring2
Super - Danke!
man kann jetzt beim icon_ring2 die Farbe des Icons auch vom zweiten Wert einstellen
Syntax:
"<iconname>\@colorVal2"
"<iconname>\@colorVal1" entspricht "<iconname>" wie bisher.
Natürlich bleibt die allgemeine FHEM-Syntax für Farbgebung von Icons weiterhin bestehen.
Beispiel:
icon_ring2([zaehler:l-Produktion] > 0 ? "sani_solar\@colorVal1":"fa_bolt\@colorVal2",[zaehler:l-Produktion],0,3.6,20,120,"PV kW",150,undef,"1,,font-size:50%",[zaehler:l-Bezug,0],0,2,120,0,"Netz kW",undef,"1,,font-size:50%")
Das Icon färbt sich mit der Farbe des Solarertrags, wenn Ertrag vorhanden, sonst wird ein anderes Symbol mit Farbe des Strombezugs angezeigt.
Neue Version wurde eingecheckt.
Ich habe wieder etwas zum Thema Wetter gebastelt: https://forum.fhem.de/index.php/topic,119612.msg1140489.html#msg1140489
Hallo Damian,
vielen Dank für die neuen Funktionen!
Ich versuche gerade die Verdunstung mit icon_ring darzustellen, leider wird das icon welches ich in den SVG Ordner eingepflegt habe nur manchmal und dann meistens anders als der Wert und die Einheit eingefärbt. Mache ich hier etwas falsch, oder ist das icon dafür nicht geeignet?
{package ui_Table;
$SHOWNOSTATE=1;
$ATTRIBUTESFIRST = 1;
$TC{1..8}="align='center'";
sub himmelsrichtung {
my ($richtung)=@_;
my $element=int($richtung/22.5);
my @h=(qw"N NNO NO ONO O OSO SO SSO S SSW SW WSW W WNW NW NNW");
return($h[$element]);
}
}
icon_ring2("weather_sun",[Wetter:fc0_sun],0,100,0,180,"%",130,undef,1,[Wetter:fc0_uv],0,20,180,270,"UV",undef,1)|
icon_ring2("weather_rain_light",[Wetter:fc0_chOfRainDay],0,10,180,270,"%",130,undef,1,[Wetterg:fc0_rain],0,10,180,270,"mm",undef,1)|
icon_ring ("evaporation",[Wetter:fc0_evapor],undef,undef,undef,undef,"mm",undef,130)
icon_ring ("sani_solar",[Wetter:fc0_rad],undef,undef,undef,undef,"W/m²",undef,130) |
icon_ring ("weather_frost",[Wetter:fc0_frost],undef,undef,undef,undef,"%",undef,130)
Dein Icon ist bereits eingefärbt, die SVG-Icons, die man selbst einfärbt, müssen schwarze Farbe haben. Dann hast du keine min, max-Grenzen für die Werte definiert und keine Farbzuordnung, siehe: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_eines_Icons_mit_einem_Zahlenwert_mit_Hilfe_der_universellen_SVG-Funktion_icon_ring
Ich habe das Icon und die Definition angepasst:
icon_ring ("evaporation2",[Wetter:fc0_evapor],0,10,270,180,"mm",undef,130)
Die Obergrenze 10 musst du ggf. anpassen.
Hammer!
danke Dir.
Ich habe die Standardhöhe der icon_bar-Funktion nun auf 80 75 gesetzt (siehe Zeile 2). Ab einer Höhe von 80 75-Pixel gibt es genug Platz um die Angaben untereinander zu schreiben, das geschieht nun automatisch - diese werden dann auch zentriert. Möchte man das bisherige Verhalten erreichen, so muss man bei den icon_bar-Funktionen den Parameter $height mit 60 angeben (siehe Zeile 1)
Bei der bar-Funktion (ohne Icon) ist die Standardhöhe bei 60 geblieben (siehe Zeile 3). Hier werden die Angaben jetzt auch untereinander geschrieben, da genügen Platz da ist. Wenn man die Höhe unter 50 angibt, dann werden die Angaben nebeneinander geschrieben (siehe Zeile 4) - wie bisher.
Neuer Version: https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1
Hallo Damian,
ich finde die neuen SVG-Funktionen echt genial!
Meine Pool-Steuerung habe ich schon weitestgehend mit den neuen Funktionen visualisiert.
Der PH- und Redox-Wert wird aktuell mit der icon_ring-Funktion dargestellt, leider kann ich da aber keinen "optimalen" Grenzbereich einstellen.
Bedeutet, dass ich gerne einen Wertebereich für den PH-Wert von 6,8-7,2 eingeben möchte.
In diesem Bereich sollten die Werte grün sein und alles was darunter oder darüber liegt sollte rot eingefärbt werden.
Kann ich das mit den aktuellen Funktionen umsetzen?
Bisher habe ich da keine Möglichkeit entdeckt.
Grüße,
Robothaler
Meine Idee des "Max"-Mitnehmers realisiere ich aktuell ja über die ring2-Funktion. Eine Variante ist, dass ich den Max-Wert in der Funktion durch den jeweiligen Maximal-Wert setze und somit steht der Ring immer im Verhältnis zum (Tages-)Höchstwert.
Aus der analogen Welt kenne ich den Höchstwert-Mitnehmer (z.B.) bei Druckanzeigen. Das habe ich mal visualisiert...
Christian
Eigentlich gibt es ja zwei Grenzwerte die dargestellt werden sollten.
Die Darstellung sollte ja für den Laien leicht verständlich sein, da bietet sich halt die farbliche Eingrenzung sehr gut an.
So wie auf einem Monometer da sieht man auch ganz gut ob die Werte im grünen Bereich sind.
Man kann mit einer eigenen Color-Funktion den Farbbereich scharf abgrenzen. Das funktioniert dann so:
defmod di_pool DOIF ##
attr di_pool uiTable { package ui_Table;;\
sub phcolor {\
my ($ph)=@_;;\
if ($ph < 6.8 or $ph > 7.2) {\
return (0);;\
} else {\
return (120);;\
}\
}\
}\
icon_mring("Icon_Fisch",[pool:ph],5,9,undef,undef,"PH",1,undef,\&phcolor)
Auch einen gelben Übergangsbereich bei 6.8 bzw. 7.2 könntest du auf diese Art und Weise realisieren.
Eine Unter- oder Obergrenze könntest du (beides gleichzeitig geht nicht), wie gerade von Christian vorgeschlagen mit icon_ring2 realisieren.
Die Wassertropfen habe ich als SVG-Grafik nicht gefunden :(
Ich bin beeindruckt, wie schnell du Lösungsvorschläge lieferst! 👍🏻
Deinen Vorschlag muss ich mir genauer ansehen. Damit kann ich auch bei anderen Werten die Farbe besser abgrenzen. z.B. Bei meinen Stellmotoren.
Für den PH- und Redox-Wert ist das schonmal besser als jetzt.
Vielen Dank schonmal.
PS: Das Tropfen-SVG ist im FHEM-Standard zu finden. Name = ,,humidity"
Zitat von: Robothaler am 20 März 2021, 21:27:47
Ich bin beeindruckt, wie schnell du Lösungsvorschläge lieferst!
Wie wäre mit (ist noch nicht offiziell) :)
Das wäre genial! 👍🏻
Hammer wie du das aus dem Hut zauberst!
Zitat von: Damian am 20 März 2021, 21:52:07
Wie wäre mit (ist noch nicht offiziell) :)
Wenn der pH-Wert im roten Bereich ist, muss der Fisch aber kopfüber an der Oberfläche treiben! :D
Zitat von: Damian am 20 März 2021, 21:52:07
Wie wäre mit (ist noch nicht offiziell) :)
Ey, super, das bietet viele weitere Anwendungsoptionen.
Das Bild "aus dem Hut zaubern" ist hier wirklich angebracht: Wie auf der Bühne, "noch ein buntes Tuch, noch ein buntes Tuch und noch eines, und wieder eines..."
Christian
Zitat von: xenos1984 am 20 März 2021, 23:57:40
Wenn der pH-Wert im roten Bereich ist, muss der Fisch aber kopfüber an der Oberfläche treiben! :D
Den kann man doch per Icon-Rotation drehen - ok, dann läuft aber das Wasser aus dem Aquarium :)
Zitat von: cwagner am 21 März 2021, 07:54:34
Ey, super, das bietet viele weitere Anwendungsoptionen.
Ich muss schauen, wie ich es geschickt in das bestehende Ring-Ökosystem einbaue - ich habe da aber schon Ideen.
Zitat von: Damian am 21 März 2021, 09:16:27
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.
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)])
Unglaublich! -> Wenn das nicht gezaubert ist... ;-)
Das ist Perfekt!
Vielen Dank für die schnelle Umsetzung!!!!
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.
Der schmale Innenring gefällt mir auch deutlich besser.
Damit ist die Gewichtung eher auf dem eigentlichen Wert.
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.
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!
Zitat von: Robothaler am 21 März 2021, 20:46:16
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 :)
Zitat von: Damian am 21 März 2021, 20:56:05
Ich plane zu Ostern neue mächtige SVG-Funktionen :)
Da bin ich aber gespannt was da auf uns zukommt! ;D
Zitat von: Robothaler am 21 März 2021, 21:03:46
Da bin ich aber gespannt was da auf uns zukommt! ;D
Die Idee: Infocards mit Statistik, Mini-Plots, Ringen ohne Log-Dateien und ohne zusätzliche Module als einfacher Perlfunktionenaufruf.
Das hört sich vielversprechend an. :)
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:
$_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
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.
mit Skala und kleinen Ticks meinte ich so etwas in der Art wie auf den Bildern.
Bin schon gespannt, was da so kommt.
Zitat von: Sany am 22 März 2021, 08:46:02
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?
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
Muss ich schauen, wo ich die Option geschickt unterbringe.
Hi Damian,
das sieht schon sehr schick aus. Die Schrift für den Wert evtl. anpassbar machen (wie bei Ring2). Ansonsten freue ich mich auf die Ergebnisse!
Gruß
Zitat von: Sany am 22 März 2021, 13:32:07
Hi Damian,
das sieht schon sehr schick aus. Die Schrift für den Wert evtl. anpassbar machen (wie bei Ring2). Ansonsten freue ich mich auf die Ergebnisse!
Gruß
Die Schrift für Zahl und Einheit ist schon länger anpassbar, wie bei ring2, ist auch im Wiki dokumentiert.
Man wird bei allen ring-Funktionen den Hauptring als "Zeiger" einstellen können.
Die Beschriftung für Min/Max kann ich auch einblenden, allerdings wird es bei größeren Zahlen problematisch sein da unten noch Platz zu finden.
Da freu' ich mich auf die neuen Möglichkeiten und präsentiere hier dann mal die Zusammenschau aus 2 Ringe mit Farbsegmentierung und einem wechselnden Icon: Eine Variante der CO2-Ampel. Das Icon für das Symbol ist das finder.svg, das ich für die bad-Variante etwas angepasst habe.
Christian
Und sieht es aus mit min/max-Angaben
WOW!
Das entwickelt sich ja sehr rasant!
Ich finde den kleinen Strich zur Wertedarstellung auch ganz gut.
Neue Version eingecheckt.
Ich habe bei der ring-Funktion, auf der alle anderen ring-Funktionen aufbauen, den Parameter
$mode erweitert:
$mode hat jetzt folgenden Aufbau
"<monochrom>,<minMax>,<innerRing>,<pointer>"<pointer> is die Dicke des Zeigers, bei anderen Parametern 1 als Flag setzen
Alle Parameter sind kombinierbar.
Die neue universelle
icon_uring-Funktion hat folgende Parameterliste:
icon_uring (
$mode,$icon,$val,$min,$max,$minColor,$maxColor,$unit,$decfont,$size,$func,$lr,$ln)
Ohne Berücksichtigung der Zeigerdicke ergeben sich damit bereits 16 verschiedene Kombinationen der Darstellung, mit linear bzw. mit eigener Farbfunktion sind es dann schon 32 Kombinationen :)
defmod di_pool DOIF ##
attr di_pool uiTable { package ui_Table}\
## abschnittsweise definierte Farbgebung\
icon_uring("0,1","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_uring("1,1","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_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)])|\
icon_uring("0,1,1","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)])\
##linearer Farbverlauf\
icon_uring("0,0,1,4","weather_barometric_pressure",1.2,0,3,0,120,"bar")|\
icon_uring("0,1,1,4","weather_barometric_pressure",1.2,0,3,0,120,"bar")|\
icon_uring("0,1,1","weather_barometric_pressure",1.2,0,3,0,120,"bar")|\
icon_uring("0,1,0,4","weather_barometric_pressure",1.2,0,3,0,120,"bar")Edit: Funktionen vereinheitlicht, neue Version eingecheckt,
die vorherige eingecheckte Zwischenversion verliert ihre Bedeutung
Moin,
sehr schön gelöst. Respekt!
Ich habe mal eine Version getestet. Das klappt super.
Ich bin mir immer noch nicht ganz sicher mit den Farben für die Unit und die Skalenwerte. Ich denke, das ist mir ein bissl zu bunt. Ich sehe das so auf einer Oberfläche: die Farbe ist erst mal der "Exe-catcher". In meinem Beispiel mit rot, gelb, grün (was für viele Anzeigen wohl gehen könnte) sieht man, selbst ohne Brille, allein durch das grüne Icon schon den Bereich, wo der Wert ist, also alles im grünen Bereich. Genauso natürlich bei Werten in anderen Bereichen. Bei genauerer Betrachtung lese ich dann die Zahl für den absoluten Wert, der Blick auf den Zeiger ergibt mir den relativen Wert zu min/max. Bei dieser Betrachtung lenken mir die roten Skalenwerte aber zu sehr von der Eigentlichen Information ab. Die würde ich neutral halten. Bei der Unit ist es nicht ganz so wild, da die ja direkt beim Wert steht, finde es sieht aber besser aus, wenn sie nicht eingefärbt ist. Bleibt das Problem, welche Farbe oder wie konfigurierbar. Ich habe en dunkles Design, da passt ein helles grau halt gut, das würde man aber bei einem hellen Design nicht erkennen.
Gruß
Zitat von: Sany am 23 März 2021, 10:33:54
Moin,
sehr schön gelöst. Respekt!
Ich habe mal eine Version getestet. Das klappt super.
Ich bin mir immer noch nicht ganz sicher mit den Farben für die Unit und die Skalenwerte. Ich denke, das ist mir ein bissl zu bunt. Ich sehe das so auf einer Oberfläche: die Farbe ist erst mal der "Exe-catcher". In meinem Beispiel mit rot, gelb, grün (was für viele Anzeigen wohl gehen könnte) sieht man, selbst ohne Brille, allein durch das grüne Icon schon den Bereich, wo der Wert ist, also alles im grünen Bereich. Genauso natürlich bei Werten in anderen Bereichen. Bei genauerer Betrachtung lese ich dann die Zahl für den absoluten Wert, der Blick auf den Zeiger ergibt mir den relativen Wert zu min/max. Bei dieser Betrachtung lenken mir die roten Skalenwerte aber zu sehr von der Eigentlichen Information ab. Die würde ich neutral halten. Bei der Unit ist es nicht ganz so wild, da die ja direkt beim Wert steht, finde es sieht aber besser aus, wenn sie nicht eingefärbt ist. Bleibt das Problem, welche Farbe oder wie konfigurierbar. Ich habe en dunkles Design, da passt ein helles grau halt gut, das würde man aber bei einem hellen Design nicht erkennen.
Gruß
Das kriegen wir auch noch konfigurierbar hin, denn es gibt Konstellationen, da könnte die Farbe eine gewisse Aussagekraft haben.
ZitatDas kriegen wir auch noch konfigurierbar hin
da bin ich mir aber sowas von sicher ;) ;)
Zitat, denn es gibt Konstellationen, da könnte die Farbe eine gewisse Aussagekraft haben.
das stimmt.
Ich habe mal noch die Skalenwerte etwas weiter auseinander dargestellt, passt gut und sieht nicht so gedrängelt aus bei der Unit.
(nur per Bildbearbeitung gemacht!)
Ich hoffe, das alles kommt jetzt nicht "kleinlich" rüber, soll nur als Input dienen.
Auch mal wieder (kann man nicht genug wiederholen):
Vielen Dank für die tollen Funktionen!!
Bin dann auf Ostern gespannt!
Gruß
Sany
Schon fertig. Man kann jetzt beim Parameter minMax nicht nur 0, 1 angeben, sondern beliebige SVG-Attribute. Damit kann man so ziemlich alles ändern.
icon_uring("0,fill:white,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)])
Hammer,
du baust das schneller ein als ich das ausprobieren kann..... ;) ;) :D
Für Icon, Wert und Unit kann man ja jetzt schon die Farben individuell anpassen. Damit habe ich jetzt keine offenen Wünsche mehr.
Neue Version eingecheckt. Ich habe auch Min/Max etwas auseinander gezogen, aber nicht zu viel, denn es müssen auch größere Angaben passen. Man kann natürlich auch die lightness-Parameter für alle Angaben verwenden.
https://svn.fhem.de/trac/browser/trunk/fhem/FHEM?order=date&desc=1
Doku aktualisiert.
Man kann jetzt auch SVG-Group-Attribute für den Innenring angeben.
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
Barometer mit Farbabschnitten sieht auch nicht schlecht aus: https://forum.fhem.de/index.php/topic,119612.msg1142567.html#msg1142567
Moin Damian,
ZitatBarometer 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 :o. Bei 1050 hilft die 8), 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
Zitat von: Sany am 24 März 2021, 09:47:50
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 :o. Bei 1050 hilft die 8), 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
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.
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.
Idee verworfen, bei nicht zusammenhängenden Ringen sieht es nicht gut aus.
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:
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")
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")
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ß
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.
{packag ui_Table;
sub myicon {
if ...
elsif ...
else ...
}
icon_ring(myicon([dev:reading],.....)
Bsp:
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.
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!
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
Neue Version eingecheckt.
-Min/Max-Begrenzung
Moin Damian,
ZitatNeue Version eingecheckt.
-Min/Max-Begrenzung
das funktioniert genau wie gewünscht. Vielen Dank
Aus einem andern Post:
ZitatMan 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
Zitat von: Sany am 27 März 2021, 10:10:10
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.
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')|
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. :) ;D
Zitat von: Sany am 27 März 2021, 11:24:16
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. :) ;D
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.
sehr schön, gerade das Update gemacht und getestet. Funktioniert wie erwartet.
Vielen Dank.
Ein kleiner Vorgeschmack auf Ostern :)
Hallo Damian,
das wird echt richtig cool! 8)
Da freue ich mich schon darauf.
Grüße,
Jürgen
Zitat von: Robothaler am 29 März 2021, 20:42:05
Hallo Damian,
das wird echt richtig cool! 8)
Da freue ich mich schon darauf.
Grüße,
Jürgen
siehe: https://forum.fhem.de/index.php/topic,120088.msg1145615.html#msg1145615
Hallo Damian,
ich kann deinen Link nicht öffnen!
Gesperrter Bereich?
Gruß
Zitat von: kabanett am 07 April 2021, 17:25:19
Hallo Damian,
ich kann deinen Link nicht öffnen!
Gesperrter Bereich?
Gruß
Keine Ahnung, warum der Thread gelöscht wurde.
Edit: Ich habe ihn wieder zurückgeholt.
was muss ich denn eingeben, um die Darstellung des angezeigten Wertes zu vergrößern?
{ui_Table::ring(ReadingsVal("Rollos_Ladegeraet","myVerbrauch",0),1,10000, 120, 360,"W", 100,undef, 0,undef,50,50)}
Hier sind die Übergabeparameter beschrieben:
https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Anzeige_eines_Zahlenwertes_mit_Hilfe_der_universellen_SVG-Funktion_ring
ring ($value,$min,$max,$minColor,$maxColor,$unit, $sizeHalf,$colorRef,$decFont,$model,$lightness)
Danke, hat geklappt.
Hallo,
versuche es trotz Stille.
mit folgendem :
devStateIcon on:sani_pump@#FF00BB off:sani_pump@#00FFBB
und zeige damit den Betriebszustand der Umwälzpumpe an.
Ist es möglich ein Icon einzurichten das bei dem Zustand :
up=on
in roter Farbe dreht und bei "off" in blau stoppt ?
Gruß Peter
Normalerweise haben FHEM-Icons keine Animation. Man könnte sich ein animiertes gif basteln.
Ich habe in der card-Funktion eine SVG-Animation drin gehabt, die ich wieder abgeschaltet habe, weil der Browser dann verhältnismäßig viel Performance verbraten hat.