neue svg-Funktion: card

[Damian]

Beispiel zur Visualisierung von Energie-Statistik mit Hilfe von card im uiTable-Attribut über Templates realisiert:

https://wiki.fhem.de/wiki/DOIF/Automatisierung#Tages-.2C_Monats-_und_Jahresstatistik_f.C3.BCr_Strom-.2C_Gas-.2C_Wasserz.C3.A4hler_und_andere_Z.C3.A4hler

[Damian]

Card-Doku um Anwendungsbeispiele erweitert:

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Anwendungsbeispiele_mit_card

[GoldenAmerican]

Hallo zusammen,

bin durch Zufall auf die uiTables gestoßen. Sieht klasse aus und steckt sicher auch nicht wenig Hirnschmalz und Arbeit drin -> Hut ab!
Allerdings habe ich dazu ein paar Fragen die sich mir da auftun:
1. Wie man auf dem Bild sehen kann, hab ich 5 Sensoren pro Zimmer. in den oberen Zeilen sind die einzeln, bei dem unteren wollte ich alles in eine Card bringen. Jedoch wird bei dem Innenring nicht richtig dargestellt und auch die Farben sollten, entsprechend der Anwendungsbeispiele mit Card, anders sein (rechts bei Wohn- und Schlafzimmer auch, da sollten die \&temp_hue und \&hum_hue Farben verwendet werden).
Dann bekomme ich nur eine Scala im Chart angezeigt (kann man das irgendwo hinterlegen? Habe schon probiert sie zu hinterlegen, dann versschwinden die Halbkreisanzeigen oben)
2. Die drei Halbkreise oben haben verschiedene Scalenwerte, kann man die separat hinterlegen? Einer sollte ja von 400-1200, einer von 0-1 und einer von 0-3 gehen. Die Definition hänge ich mal an, damit man sieht was ich da verzapft habe.

Code: [Auswählen]

{package ui_Table;
 }
card([MQTT2_WP6003_WZ11:CO2:col1d],undef,"feinstaub",400,1200,120,0,"CO2",[400,60,800,120,1000,60,1200,0],0,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_WP6003_WZ11:HCHO:col1d],undef,"feinstaub",0.0,1,120,0,"HCHO",[0.3,120,0.7,60,1,0],2,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_WP6003_WZ11:TVOC:col1d],undef,"feinstaub",0.0,3,120,0,"TVOC",[0.2,60,0.3,120,3,0],2,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_Wohnzimmer:Temperature:col1d],"Wohnzimmer","temp_inside",10,35,undef,undef,"°C",\&temp_hue,"1","130,,,,,,300",undef,undef,
[MQTT2_Wohnzimmer:Humidity:col1d],0,100,undef,undef,"%rH",\&hum_hue,"0")
card([MQTT2_WP6003_SZ1:CO2:col1d],undef,"feinstaub",400,1200,120,0,"CO2",[400,60,800,120,1000,60,1200,0],0,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_WP6003_SZ1:HCHO:col1d],undef,"feinstaub",0.0,1,120,0,"HCHO",[0.3,120,0.7,60,1,0],2,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_WP6003_SZ1:TVOC:col1d],undef,"feinstaub",0.0,3,120,0,"TVOC",[0.2,60,0.3,120,3,0],2,"130,,,,,,300",'0,1,1',"50,35,45,35,50,35")|
card([MQTT2_Schlafzimmer:Temperature:col1d],"Schlafzimmer","temp_inside",10,35,undef,undef,"°C",\&temp_hue,"1","130,,,,,,300",undef,undef,
[MQTT2_Schlafzimmer:Humidity:col1d],0,100,undef,undef,"%rH",\&hum_hue,"0")
"Temp_AUSSEN" | ring([Wetter:TemperaturC],-10,40,250,0,'°C',"150,1",[(-9,250,10,180,22,120,40,0)],1,'0,0,1,0')|
"Temp_SZ" | ring([MQTT2_WP6003_SZ1:temperature],10,40,undef,undef,'°C',"150,1",[(18,60,28,120,40,0)],1,'0,0,1,0')
card([[MQTT2_Wohnzimmer:Temperature:144col1d],[MQTT2_Wohnzimmer:Humidity:144col1d]],"Wohnzimmer","fa_bolt\@silver",1,100,undef,undef,["°C","%rH"],
[(30,0,60,25,90,50,75,120)],"2,,fill:silver","130,,1,0,1,,300","1,,1,0,1",undef, [[MQTT2_WP6003_WZ11:CO2],[MQTT2_WP6003_WZ11:HCHO],[MQTT2_WP6003_WZ11:TVOC]],0,1200,120,0,
["CO2","HCHO","TVOC"],[(600,120,1000,60,1200,0)],"2,,fill:silver")

[Damian]

Also man kann bei card nur zwei verschiedene Einheiten (mit entsprechenden Farbverläufen) hinterlegen. Ursprünglich waren auch nur zwei Readings möglich (beim Plot linke Einheit und rechte Einheit). Man kann inzwischen zwar beliebig viele Readings angeben, aber bei zwei verschiedenen Einheit-Definitionen ist es geblieben.

[GoldenAmerican]

Hallo Damian,

schade, muss ich halt doch mehrere Cards anlegen und laufenlassen.
Bleibt dennoch die Frage, warum die Farbe der Cards nicht richtig angezeigt wird, da ich ja die Variablen benutzt habe, die auch in der Doku verwendet werden und dort richtig dargestellt werden.
Im vorliegenden Fall die Karte "Schlafzimmer" in der zweiten Reihe. Der Code ist doch 1:1 aus der Doku.

Code: [Auswählen]

card([MQTT2_Schlafzimmer:Temperature:col1d],"Schlafzimmer","temp_inside",10,35,undef,undef,"°C",[color=red]\&temp_hue[/color],"1","130,,,,,,300",undef,undef,[MQTT2_Schlafzimmer:Humidity:col1d],0,100,undef,undef,"%rH",[color=red]\&hum_hue[/color],"0")
Wenn ich den Code richtig interpretiere, sollte hinter den Variablen doch schon eine Farbe/Farbverläufe hinterlegt sein.

[Damian]

Es funktioniert alles wie programmiert.

Die Farbzuordnung für Temperatur und Feuchte entspricht der zugeordneten Farbe aus den Funktionen temp_hue, hum_hue, sie ist abhängig vom jeweiligen Wert.

[Damian]

neue Version eingecheckt:

Die Parameter $prop und $ringmodel/$model wurden um Klartext-Angaben erweitert. Statt Zahlen können nun Schlüsselwörter zur besseren Lesbarkeit angegeben werden.

Beispiel:

card([MQTT2_DVES_D90D08:MHZ19B_CarbonDioxide:col2d],undef,"air\@silver",400,1200,120,0,"ppm",[(600,120,1000,60,1200,0)],"0,,fill:silver","130,,1,0,1",'0,,1')

entspricht

[card([MQTT2_DVES_D90D08:MHZ19B_CarbonDioxide:col2d],undef,"air\@silver",400,1200,120,0,"ppm",[(600,120,1000,60,1200,0)],"0,,fill:silver","130,autoscaling,nosteps,footer,noycolor",'nogradient,nominmaxvalue,innerring,nopointer,minmax')

Die Version ist wie immer abwärtskompatibel.

Doku zu card und  zu den ring-Funktionen wurde angepasst:

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

[Bartimaus]

Guten Morgen,

bei der Darstellung eines Readingwertes mit aktuellem Reading nebst Verlauf, gibt es ja die Möglichkeit den Verlauf mittels "col52w" für ein Jahr bzw. 52Wochen anzeigen zu lassen. So weit so gut. Gibt es auch die Möglichkeit feste Zeiträume zu definieren ? (01.01.-31.12.) Wenn nicht, was würdest Du davon halten ?

Und ich hätte noch einen Wunsch, bzw. Idee... in der Fusszeile werden die Min/Max-Werte eines Readings dargestellt, ich fände auch den Durchschnittswert super....

Justmy2cents

[Damian]

Es wird demnächst eine Balkendarstellung geben. Die wird man dann auch für ein ganzes Jahr nutzen können. Es soll dann auch eine Trendlinie als Durchschnittsverbrauch geben.

[Damian]

neue Version eingecheckt:

card im Originaldevice wird jetzt offiziell. Mit der neuen Version bleibt ebenso wie bei uiTable der Verlauf auch nach einem Neustart erhalten.

siehe neuer Wiki-Beitrag dazu:

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#card_im_Status_des_Originaldevices

[Bartimaus]

Moin,

ich habe jetzt für einen Sensor 3 verschiedene Cards angelegt.
So sind die definiert:

Code: [Auswählen]

card([WeatherScreenPro:temperature:col1w],"Dach-Woche","temp_outside",0,35,undef,undef,"°C",\&temp_hue,"1","130,,,,",undef,undef,[WeatherScreenPro:humidity:col1w],0,100,undef,undef,"%",\&hum_hue,"0")|
card([WeatherScreenPro:temperature:col4w],"Dach-Monat","temp_outside",0,35,undef,undef,"°C",\&temp_hue,"1","130,,,,",undef,undef,[WeatherScreenPro:humidity:col4w],0,100,undef,undef,"%",\&hum_hue,"0")|
card([WeatherScreenPro:temperature:col52w],"Dach-Jahr","temp_outside",0,35,undef,undef,"°C",\&temp_hue,"1","130,,,,",undef,undef,[WeatherScreenPro:humidity:col52w],0,100,undef,undef,"%",\&hum_hue,"0")|
Der einzige Unterschied besteht in der Definition der "Laufzeit".
Dennoch ist das Diagramm beim 3. Card mit einer unterschiedlichen Skala. Bug oder feature ?

 

[Damian]

Dennoch ist das Diagramm beim 3. Card mit einer unterschiedlichen Skala. Bug oder feature ?

feature, wenn du die Zeitskalierung meinst

[Bartimaus]

Meine die Temperaturskalierung… 

[Damian]

Meine die Temperaturskalierung… 

Das ist auch normal. Du hast autoscaling gewählt, das kann erst bestimmt werden, wenn es zwei Werte gibt. Bei einem Jahr musst du etwas länger warten

[jkriegl]

Verständnisfrage zu "fixedscaling": Bei negativer Temperatur, also -10 bis 40 müsste die Scallierung bei -10 beginnen, beginnt aber bei Null. Muss man -10 speziell eingeben?