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

[Damian]

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.

[cwagner]

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:

Code Auswählen Erweitern

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

[Damian]

neue icon_bar-svg-Funktionen sind fertig (DOIF-Version 0.6 im ersten Post)

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

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)

[Damian]

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:

Code Auswählen Erweitern

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):

Code Auswählen Erweitern

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)

[Damian]

Hier ein weiteres Anwendungsbeispiel: Abfall mal anders

[Damian]

Neue DOIF-Version wurde eingecheckt. Im Laufe der nächsten Woche werde ich die Wiki-Seite aktualisieren.

[Reinhart]

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?

Code Auswählen Erweitern

{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

[Damian]

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?

Code Auswählen Erweitern

{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:

Code Auswählen Erweitern

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.

[Reinhart]

ah Danke, das wars!

LG

[Damian]

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.

[Reinhart]

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

[Damian]

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. 

[Damian]

Ich habe mal Infos meiner Therme nur mit icon_rings ohne Text visualisiert.

[Reinhart]

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.

Code Auswählen Erweitern

{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

[Damian]

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.

Code Auswählen Erweitern

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)\
##"&nbsp"\
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])