neue svg-Funktion: card

[Damian]

Wie bereits angekündigt, ist der Prototyp der neuen svg-Funktion fertiggestellt.

Mit folgender Definition wird das angehängte Layout erzeugt. Die Besonderheit ist ein neues Argument col<Anzahl Stunden> bei der Angabe des Readings. Dadurch werden Daten des Readings gesammelt und für die Erzeugung eines Plots zur Verfügung gestellt - es sind keine weiteren Definitionen erforderlich. Dabei wird besonders sparsam mit der Datensammlung umgegangen, es werden maximal 60 Werte (in Timeslots) gespeichert, unabhängig davon wie lange die Zeitspanne ist und wie oft die Daten ankommen.

Im Beispiel wird 12 Stunden gesammelt, ebenso können größere Zeitintervalle angegeben werden z. B. 24 Stunden

Code Auswählen Erweitern

defmod di_Wetter DOIF ##
attr di_Wetter uiTable {package ui_Table;;}\
##  card ($collect,$header,$icon,$min,$max,$minColor,$maxColor,$unit,$colorRef,$decfont,$size,$model,$lightness)\
\
card([Wetter:TemperaturC:col12],undef,"temp_outside",-10,30,undef,undef,"°C",\&temp_hue)|\
card([Wetter:Feuchtigkeit:col12],undef,"temperature_humidity",0,100,undef,undef,"%",\&hum_hue)|\
card([Wetter:WindKm:col12],undef,[Wetter:WindKm] > 0 ? "wind".",1,0,0,".[Wetter:WindrichtungGrad]:"no_wind",0,30,120,0,"km/h",undef,1)\
card([Wetter:RegenMm:col12],undef,"weather_rain_gauge",0,10,180,270,"mm/h")|\
card([Wetter:UV:col12],undef,"sani_solar",,0,7,200,0,"UV",undef,0)|\
card([Wetter:LuftdruckHpa:col12],undef,"weather_barometric_pressure",980,1047,undef,undef,"hPa",[(1008.5,0,1018.5,270,1047,190)],0,undef,'0,1,1,6',",40,45,45,,45")

Wenn ich meine Tests abgeschlossen habe, werde ich die neue Version hier zum Ausprobieren hochladen.

Vorschläge zum Design oder zu weiteren Infos der "Infokarte" können hier gemacht werden - noch ist nichts in Blei gegossen.

PS Es ist kein Ersatz für SVG-Plots, die Daten werden lediglich temporär im Modul gespeichert.

Edit: aktuelle Version wurde eingecheckt

aktuelle Doku siehe: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Anzeige_eines_Werteverlaufs_und_des_aktuellen_Wertes_mit_Hilfe_der_SVG-Funktion_card

[KernSani]

Nice. Hänge mich mal mit rein...

[Damian]

Version 0.1

Syntax:

Code Auswählen Erweitern

card ($collected_reading,$title,$icon,$min,$max,$minColor,$maxColor,$unit,$func,$decfont,$model,$lightness)

Parameter entsprechen weitgehend den Parametern der bisherigen svg-Funktionen (siehe wiki)

Bsp:

Code Auswählen Erweitern

defmod di_collect DOIF ##
attr di_collect uiTable {package ui_Table;;}\
card([ESPEasy_Eingang_CO2:PPM:col24],"Schlafzimmer","air",400,1200,120,0,"ppm",undef,0)|\
card([Aussensensor:temperature:col24],"Außen","temp_outside",-10,45,undef,undef,"°C",\&temp_hue)

Geplant sind ebenfalls Plots im Ring siehe: https://forum.fhem.de/index.php/topic,118329.msg1143877.html#msg1143877
oder card2 für zwei Werte in einer Karte.

Edit: aktuelle Version im ersten Post

[cwagner]

Das Bessere ist des Guten Feind: Und schon ist meine schöne Luftdruckstatistik mit den Cylinders "Gechichte".

Tolle Erweiterung des DOIF-Kosmos!

Eine Anregung: Wäre es denkbar, wenn ich $title und $icon "undef" setze, dass die leere Zeile dann ausgeblendet wird? Und was hältst Du davon, Maximum und Minimum durch Max und Min oder durch ▼ und ▲ abzukürzen und auf diese Weise daraus eine Zeile zu machen? Damit könnte man Höhe gewinnen.

Christian

[Damian]

Jetzt etwas kompakter, siehe Version 0.2 im ersten Post.

Beispiele mit/ohne Titel, mit/ohne icon in Kombination:

Code Auswählen Erweitern

defmod di_collect DOIF ##
attr di_collect uiTable {package ui_Table;;}\
card([ESPEasy_Eingang_CO2:PPM:col1],"Schlafzimmer",undef,400,1200,120,0,"ppm",undef,0)|\
card([Aussensensor:temperature:col1],"Außen","temp_outside",-10,45,undef,undef,"°C",\&temp_hue)\
card([ESPEasy_Eingang_CO2:PPM:col1],undef,undef,400,1200,120,0,"ppm",undef,0)|\
card([Aussensensor:temperature:col1],undef,"temp_outside",-10,45,undef,undef,"°C",\&temp_hue)

[cwagner]

Ich werde elektrisch! Kaum ist die Idee aufgeschrieben, schon kann ich sie anwenden. Super und vielen Dank. Eine dritte Anregung habe ich noch: In vielen Deiner DOIF-Features ist es so, dass wenn ein Begriff (hier wäre es im $title, bei Cylinders nennst Du es $header) mit einem Device-Namen matched, dass FHEM ihn dann als Link zur Detail-Seite des Device auszeichnet. Wäre hier auch praktisch, um direkt ins Device zu springen.

Bei Mischung der verschiedenen Elemente mit einer Card in einer Zeile habe ich jetzt für Ringe 155 px Höhe, für Cylinders 87

Christian

[Damian]

Ich werde elektrisch! Kaum ist die Idee aufgeschrieben, schon kann ich sie anwenden. Super und vielen Dank. Eine dritte Anregung habe ich noch: In vielen Deiner DOIF-Features ist es so, dass wenn ein Begriff (hier wäre es im $title, bei Cylinders nennst Du es $header) mit einem Device-Namen matched, dass FHEM ihn dann als Link zur Detail-Seite des Device auszeichnet. Wäre hier auch praktisch, um direkt ins Device zu springen.

Bei Mischung der verschiedenen Elemente mit einer Card in einer Zeile habe ich jetzt für Ringe 155 px Höhe, für Cylinders 87

Christian

Intern heißt der Parameter nicht title, sondern header, ich werde es im Wiki Eintrag einheitlich mit header benennen.

An der Stelle klappt es mit den Links nicht gut, weil es ein Text innerhalb der SVG-Elemente ist.

Ich habe noch einen Parameter $size wie bei anderen svg-Funktionen eingebaut (siehe Ver. 0.3 im ersten Post).

Code Auswählen Erweitern

defmod di_collect DOIF ##
attr di_collect uiTable {package ui_Table;;}\
card([ESPEasy_Eingang_CO2:PPM:col1],"Schlafzimmer",undef,400,1200,120,0,"ppm",undef,0,80)|\
card([Aussensensor:temperature:col1],"Aussenssensor","temp_outside",-10,45,undef,undef,"°C",\&temp_hue,undef,80)\
card([ESPEasy_Eingang_CO2:PPM:col1],undef,undef,400,1200,120,0,"ppm",undef,0,150)|\
card([Aussensensor:temperature:col1],undef,"temp_outside",-10,45,undef,undef,"°C",\&temp_hue,undef,150)\

[Damian]

Version 0.4 unterstützt jetzt konsequent die neuen Features der ring-Funktionen: colorRef, model, lightness

Code Auswählen Erweitern

card([ESPEasy_Eingang_CO2:PPM:col24],undef,"air",400,1200,120,0,"ppm",[(600,120,1000,60,1200,0)],0,100,'0,1,1',"50,35,45,35,50,35")

[cwagner]

 :)Das wäre mein vierter Wunsch gewesen, aber hier sagt, dreimal ist Bremer Recht .-)

Funktioniert klasse.
Christian

[Damian]

siehe: https://forum.fhem.de/index.php/topic,119612.msg1145903.html#msg1145903

[jkriegl]

Ein schönes Ostergeschenk. Funktioniert super. Vielen Dank!

Habe folgendes festgestellt. Im Graphen besteht links ein kleines gap, da vermutlich nur die Daten zwischen 17:43 und 18:43 (Beispiel-1) verwendet werden. Vergleichbar addlog müsste der letzte Eintrag vor 17:43 mit verwendet werden.

[Damian]

Ein schönes Ostergeschenk. Funktioniert super. Vielen Dank!

Habe folgendes festgestellt. Im Graphen besteht links ein kleines gap, da vermutlich nur die Daten zwischen 17:43 und 18:43 (Beispiel-1) verwendet werden. Vergleichbar addlog müsste der letzte Eintrag vor 17:43 mit verwendet werden.

Es werden nur Daten dargestellt, die seit der Definition oder Änderung der DOIF-Definition im Modul gesammelt wurden, wenn du noch etwas wartest, dann wird der Graph vollständig dargestellt.

Edit: Wenn es sich nicht füllt, dann liegt es daran, dass die Auflösung des Plots höher ist, als das Sendeintervall, damit werden bestimmte Timeslots nicht belegt. Hier macht es Sinn ein längeres Zeitintervall zu nehmen, damit die Auflösung des Plots voll ausgeschöpft wird. 

[jkriegl]

Habe lange genug gewartet. s. 2. Beispiel (2 Stunden).
An der Zeit des min/max-Wertes sehe ich welche frühesten Werte verwendet werden. Das gap wird mal grösser, mal kleiner. Mein Intervall im Beispiel ist 900 sec. (Habe zum Testen rereads gemacht, um Daten zu erhalten)

Noch etwas, jetzt sind die Graphen linear. Man bräuchte ev. steps z. B. für die Spritpreisanzeige.

[Damian]

Habe lange genug gewartet. s. 2. Beispiel (2 Stunden).
An der Zeit des min/max-Wertes sehe ich welche frühesten Werte verwendet werden. Das gap wird mal grösser, mal kleiner. Mein Intervall im Beispiel ist 900 sec. (Habe zum Testen rereads gemacht, um Daten zu erhalten)

Noch etwas, jetzt sind die Graphen linear. Man bräuchte ev. steps z. B. für die Spritpreisanzeige.

ja, man muss wissen, dass je nach Intervallgröße auch Werte unterschlagen werden.

Beispiel:
bei 1h ist ein Timeslot eine Minute,
bei 6h ist ein Timeslot 6 Minuten,
bei 24h ist ein Timeslot 24 Minuten usw.

In einem Timeslot wird immer nur ein Wert gespeichert. Wenn z. B. der Sprit bei einem 24h-Intervall innerhalb von 24 Minuten zwei Mal geändert wird, dann wird man das im Plot nicht sehen - es wird immer der letzte Wert des Timeslots genommen. Alternativ könnte man auch einen Durchschnitt der Werte nehmen oder den maximalen oder minimalen eines Timeslots - es werden in jedem Fall Daten unterschlagen.

Das festgehaltene Minimum bzw. Maximum mit der dazugehörigen Zeit ist dagegen immer korrekt.

Für eine grobe Darstellung reicht es alle Male, wer Daten statistisch auswerten will oder noch genauer untersuchen möchte, der muss sie halt loggen und per Plot darstellen.

Es ist und bleibt immer ein Kompromiss. Hier geht es um hohe Darstellungsgeschwindigkeit und geringen Speicherbedarf im Modul.

[Damian]

Habe lange genug gewartet. s. 2. Beispiel (2 Stunden).
An der Zeit des min/max-Wertes sehe ich welche frühesten Werte verwendet werden. Das gap wird mal grösser, mal kleiner. Mein Intervall im Beispiel ist 900 sec. (Habe zum Testen rereads gemacht, um Daten zu erhalten)

Version 0.6 im ersten Post behebt dieses Verhalten.