neue svg-Funktion: card

[Tobias]

Hi Damian,

aber verstehe ich es dann nicht so dass den ganzen Tag nichts passiert und erst zu Mitternacht der Balken gesetzt wird?

Analog der Monatsbalken erst am 31. und vorher nichts?

Ja. So ist es bei last...-Readings gelöst. Die Werte werden erst am Ende des Tages gesetzt. Um genau zu sein:

Day muss irgendwann am Ende des Tages zurückgesetzt werden und zuvor in last_day gesichert werden. Ich mache das in der Definition eine Minute nach Mitternacht. Das hat den Vorteil, dass ich einfach erkennen kann, wann eine Periode (Tag, Monat, Jahr) zu ende ist und eine neue anfängt.

Damit last_day aber in der richtigen Periode landet, wird es mit -300 definiert (z. B. [...bar2month-300]), damit es 5 Minuten in die Vergangenheit gespeichert wird. day wird dagegen ohne Zeitverschiebung gespeichert. Es wird im ersten Diagramm dargestellt. Dort kann man, im Gegensatz zu last_day, die bisherige verbrauchte Menge des Tages erkennen.

Hi Damian,

ich habe den Fehler gefunden.  Natürlich funktioniert es mit *.day im card und *.last_day in der get_data funktion. Der Fehler lag in der ZEitverschiebung von 300s in der Carddefinition. DIe muss man setzen wenn man last_day verwendet. Aber bei Nutzung von *.day darf diese nicht mit rein.

Code Auswählen Erweitern

card([[PM_Solardach:power:col:$_ >= 0 ? $_ / 1000 : 0],[SEN_EM_Elektro:000_EM_All_usage:col:$_ >= 0 ? $_ / 1000 : 0]],"Energie",[PM_Solardach:power]>0?"sani_solar\@colorVal1":"fa_bolt\@colorVal2",0,6,0,120,["PV","Netz"],undef,"2","130,,,,1,,210","0,0,0,0",undef,
     [[DOIF_counter:PM_Solardach.Consumption.day],[DOIF_counter:PM_Solardach.Consumption.month],[DOIF_counter:PM_Solardach.Consumption.year]],0,0,0,120,["Day","Month","Year"],[(-10,0,-0.01,30,10,60,25,90)],"1,,fill:silver") |
card([DOIF_counter:PM_Solardach.Consumption.day:bar1month],"Solarenergie in kWh pro Tag","solar_icon",0,30,0,120,"kwh",undef,"0","130,,0,,1,,200","0,0,0,0") |
card([DOIF_counter:PM_Solardach.Consumption.month:bar2year],"Solarenergie in kWh pro Monat","solar_icon",0,600,0,120,"kwh",undef,"0","130,fixedscaling,,,1,,200","0,0,0,0") |
card([DOIF_counter:PM_Solardach.Consumption.year:bar2decade],"Solarenergie in kWh pro Jahr","solar_icon",0,3000,0,120,"kwh",undef,"0","130,fixedscaling,,,1,,200","gradient,nominmaxvalue,noinnerring,nopointer,minmax")

damit funktioniert es nun wie gewünscht. Jeder Tag wird sauber kwh für kwh hochgezählt und bleibt dann ab mitternacht sauber stehen

[Damian]

damit funktioniert es nun wie gewünscht. Jeder Tag wird sauber kwh für kwh hochgezählt und bleibt dann ab mitternacht sauber stehen

Bis auf die Tatsache, dass bei day in der ersten Minute des neuen Tages noch der Wert des Vortages rein kommen kann, falls in dieser Minute ein Event vom Sensor kommt, danach wird er ja auf 0 gesetzt und ist nicht mehr sichtbar.

[Tobias]

damit funktioniert es nun wie gewünscht. Jeder Tag wird sauber kwh für kwh hochgezählt und bleibt dann ab mitternacht sauber stehen

Bis auf die Tatsache, dass bei day in der ersten Minute des neuen Tages noch der Wert des Vortages rein kommen kann, falls in dieser Minute ein Event vom Sensor kommt, danach wird er ja auf 0 gesetzt und ist nicht mehr sichtbar.

Stimmt, aber sicherlichbei PV zu Mitternacht vernachlässigbar.

Andere Frage:
im ersten Chart habe ich PV und Netzbezug zusammen damit ich die oberen 3 Halbkreise bekomme (du hattest ja gesagt das die Halbkreise erst kommen wenn 2 Werte im Vollkreis unten stehen)
Bekommt ich das irgendwie hin das die Linien von PV und Netz jeweils andere Farben und auch farbverläufe bekommen?

aktuell habe ich es so definiert:

Code Auswählen Erweitern

card([[PM_Solardach:power:col:$_ >= 0 ? $_ / 1000 : 0],[SEN_EM_Elektro:000_EM_All_usage:col:$_ >= 0 ? $_ / 1000 : 0]],"Energie",[PM_Solardach:power]>0?"sani_solar\@colorVal1":"fa_bolt\@colorVal2",0,6,0,120,["PV","Netz"],undef,"2","130,,,,1,,210","0,0,0,0",undef,
     [[DOIF_counter:PM_Solardach.Consumption.day],[DOIF_counter:PM_Solardach.Consumption.month],[DOIF_counter:PM_Solardach.Consumption.year]],0,0,0,120,["Day","Month","Year"],[(-10,0,-0.01,30,10,60,25,90)],"1,,fill:silver") |


Du darfst diesen Dateianhang nicht ansehen.

[Damian]

Du kannst der Diagrammlinie eine feste Farbe vergeben (siehe Doku zu card). Sonst gibt es nur zwei mögliche Definitionen für Farbverläufe. Beide hast du wohl schon ausgeschöpft.

Ich habe es bei mir so gelöst, dass PV-Leistung, Einspeise-Leistung/Bezug (negativ) über eine Definition abgedeckt werden.

[Damian]

Ich habe da was gebastelt.

Man kann jetzt beliebige Werte mit beliebiger Formatierung zusätzlich zu den geplotteten Werten in einer card darstellen. Ebenfalls lassen sich jetzt Einheiten hinter dem Wert darstellen. Beispiel siehe Anhang.

Die Version wird bald eingecheckt.

Du darfst diesen Dateianhang nicht ansehen.

[Damian]

So kann man das neue Feature für Verbräuche (bar-Darstellung) nutzen.

Du darfst diesen Dateianhang nicht ansehen.

[Damian]

Und so sieht Tagesverlauf aus mit aktuellen Angaben zum Tag, Monat und Jahr.

Du darfst diesen Dateianhang nicht ansehen.

[Tobias]

Super!!!

Könntest du neben dem Bild auch immer noch die Definition mit reinschreiben? 🙏

[Damian]

Super!!!

Könntest du neben dem Bild auch immer noch die Definition mit reinschreiben? 🙏

Ich teste noch etwas. Dann wird die Doku im Wiki mit den Beispieldefinitionen angepasst.

[Damian]

Neue DOIF-Version eingecheckt. Doku wurde angepasst.

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

Neue Features: eigene Formatierungsangaben pro Wert und Einheit hinter dem Zahlenwert siehe zweites Beispiel

[Damian]

Man kann jetzt auch Daten in der Zukunft der aktuellen Periode bei bars darstellen. Beispiel dazu siehe: https://forum.fhem.de/index.php?topic=132188.msg1272752#msg1272752

Damit könnte man ebenfalls prognostizierten Wetterdaten des aktuellen Tages, der Woche oder des Monats visualisieren.

Neue DOIF-Version eingecheckt.

[schwatter]

@Damian

Ok, Systemweit hat geholfen. Danke.
Noch eine Frage zur Card. Gibt es ein Autoresize für Card?
Gesetzt hab ich es so:

Code Auswählen Erweitern

card([PV_Deye1600_01:Power:col12],undef,[PV_Deye1600_01:Power] > 0 ? "sani_solar\@colorVal1":"fa_bolt\@colorVal2",0,1200,0,120,"Pv W",undef,"1,font-size:50%"," 130,,,,,,262")
Toll wäre es so:

Code Auswählen Erweitern

card([PV_Deye1600_01:Power:col12],undef,[PV_Deye1600_01:Power] > 0 ? "sani_solar\@colorVal1":"fa_bolt\@colorVal2",0,1200,0,120,"Pv W",undef,"1,font-size:50%"," 130,,,,,,[color=red]auto[/color]")
Wegen verschiedener Devices (Handy,Tablet,Pc,...)


Gruß schwatter

Für alle Cards gelten die gleichen Default-Werte - das ist beabsichtigt, damit das Erscheinungsbild bei mehreren Cards einheitlich bleibt. Eine Auto-Funktion würde dazu führen, dass die Skalierungen (Schriftgröße, Höhe, Breite, usw.) unterschiedliche wären.

Nabend,

wie wäre es, die Größe an das attr plotsize von FHEMWEB zu verknüpfen? Grund, ich habe Handy, Tablet und PC.
Das sieht dann bei dem gleichen Raum unschön aus. Leider oder auch zum Glück (liegt immer im Auge des Betrachters)
wird bei FHEMWEB vieles geteilt und jede Webinstanz schaut (relativ) identisch aus.
Momentan habe ich extra Räume dafür eingerichtet...

Oder für DOIF ein extra attr, in dem die Webinstanz mit Größe angegeben werden kann.
z.b "attr cardsize WEBphone:480,200 Webtablet:1024,480 Webpc:1900,500"

Gruß schwatter

[Damian]

Du kannst bei card beim Parameter prop-size statt einer festen Größe eine abhängig von der aktuellen WEB-Instanz übergeben.

[Damian]

Ich habe die Visualisierung der Verbräuche angepasst, jetzt auch mit Stundenverlauf und Anzeige des aktuellen und letzten Verbrauchs in der Kopfzeile:

Ausgehend von dem Wiki-Beispiel: https://wiki.fhem.de/wiki/DOIF/Automatisierung#Tages-,_Monats-_und_Jahresstatistik_f%C3%BCr_Strom-,_Gas-,_Wasserz%C3%A4hler_und_andere_Z%C3%A4hler

habe ich die uiTable-Definition wie folgt angepasst:

Code Auswählen Erweitern

{package ui_Table;} ## Optionale Visualisierung der Energie-Verbräuche/-Produktion im DOIF-Device

## Template für die Darstellung eines Wertes, einzelne card-Aufrufe können auskommentiert werden
DEF TPL_single (
##card([$SELF:$2.$3.day:col1w],"$1",undef,$4,$5,$10,$11,"$12",undef,"1","130,fixedscaling,,footer,noycolor,halfring,220","0,0,0,0,2")| Wochendarstellung
card([[$SELF:$2.$3.last_hour:bar2day-10],[$SELF:$2.$3.hour]],"$1 in $12/h",undef,$4/12,$5/12,$10,$11,["letzte","aktuell"],undef,"2","130,fixedscaling,,footer,noycolor,halfring,220","0,0,0,0,2")|
card([[$SELF:$2.$3.last_day:bar2month-300],[$SELF:$2.$3.day]],"$12/Tag",undef,$4,$5,$10,$11,["letzter","aktuell"],undef,"1","130,fixedscaling,,footer,noycolor,halfring,220","0,0,0,0,2")|
card([[$SELF:$2.$3.last_month:bar2year-300],[$SELF:$2.$3.month]],"$12/Monat",undef,$6,$7,$10,$11,["letzter","aktuell"],undef,"0","130,fixedscaling,,footer,noycolor,halfring,220","0,0,0,0,2")|
card([[$SELF:$2.$3.last_year:bar2decade-300],[$SELF:$2.$3.year]],"$12/Jahr",undef,$8,$9,$10,$11,["letzter","aktuell"],undef,"0","130,fixedscaling,,footer,noycolor,halfring,220","0,0,0,0,2")
)

## Template für die Darstellung von zwei Werten, einzelne card-Aufrufe können auskommentiert werden
DEF TPL_double (
##card([[$SELF:$3.$4.day:col1w],[$SELF:$6.$7.day:col1w]],"$1",undef,$8,$9,$14,$15,["$2","$5"],undef,"1","130,fixedscaling,,footer,noycolor,noring,220","0,0,0,0,2")| Wochendarstellung
card([[$SELF:$3.$4.last_hour:bar2day-10],[$SELF:$6.$7.last_hour:bar2day-10],[$SELF:$3.$4.hour],[$SELF:$6.$7.hour]],"$1/h",undef,$8/12,$9/12,$14,$15,["$2","$5","$2","$5"],undef,"2","130,fixedscaling,,footer,noycolor,noring,220","0,0,0,0,2")|
card([[$SELF:$3.$4.last_day:bar2month-300],[$SELF:$6.$7.last_day:bar2month-300],[$SELF:$3.$4.day],[$SELF:$6.$7.day]],"pro Tag",undef,$8,$9,$14,$15,["$2","$5","$2","$5"],undef,"1","130,fixedscaling,,footer,noycolor,noring,220","0,0,0,0,2")|
card([[$SELF:$3.$4.last_month:bar2year-300],[$SELF:$6.$7.last_month:bar2year-300],[$SELF:$3.$4.month],[$SELF:$6.$7.month]],"pro Monat",undef,$10,$11,$14,$15,["$2","$5","$2","$5"],undef,"0","130,fixedscaling,,footer,noycolor,noring,220","0,0,0,0,2")|
card([[$SELF:$3.$4.last_year:bar2decade-300],[$SELF:$6.$7.last_year:bar2year-300],[$SELF:$3.$4.year],[$SELF:$6.$7.year]],"pro Jahr",undef,$12,$13,$14,$15,["$2","$5","$2","$5"],undef,"0","130,fixedscaling,,footer,noycolor,noring,220","0,0,0,0,2")
)


## Die Visualisierung einer Tabellenzeile wird über die obigen beiden Templates vorgenommen, hier zeilenweise anpassen/löschen:

## Über das Template TPL_single wird jeweils pro card ein Wert visualisiert
##          Überschrift,Device,Reading,minTag,maxTag,minMonat,maxMonat,minJahr,maxJahr,minColor,maxColor,Einheit
TPL_single (Frischwasser,MQTT2_DVES_C58DCB,total_w,0,500,0,10000,0,80000,90,0,Liter)
##TPL_single (Leitungswasser,counter_rw,total_l,0,500,0,10000,0,80000,90,0,Liter)
##TPL_single (Regenwasser,counter_rw,total_z,0,500,0,10000,0,80000,90,0,Liter)
TPL_single (Gas,MQTT2_DVES_C58DCB,total_gas,0,10,0,250,0,2000,90,0,m³)
TPL_single (Einspeisung,MQTT2_DVES_C58DCB,total_f,0,30,0,600,0,5000,0,90,kWh)
TPL_single (Bezug,MQTT2_DVES_C58DCB,total_c,-10,0,-300,0,-3000,0,0,90,kWh)
TPL_single (Stromkosten,di_tibber,costsSum,0,4,0,90,0,1200,90,0,€)
Das Ergebnis sieht dann wie im Anhang aus.

Edit: Das Wiki-Beispiel wurde entsprechend angepasst.

[schwatter]

Du kannst bei card beim Parameter prop-size statt einer festen Größe eine abhängig von der aktuellen WEB-Instanz übergeben.

Ok, aber wie?
Doku sagt nur

Code Auswählen Erweitern

<size>: Größe der der Karte, default = 130,
Den 2ten Parameter

Code Auswählen Erweitern

<y-scaling> hatte ich auch schon angewendet. Da sehe ich aber keine Besserung.

Wenn <size> von der Größe der Webinstanz zerrt, wie verhält sich dann <width> im Verhältniss zu <size>? Prozentual?
Bitte ein Beispiel.

Gruß schwatter