neue svg-Funktion: card

[Bartimaus]

Guten Morgen,

ich bekomme bei meinen DOIF-Cards jetzt folgende Fehlermeldung:

Code: [Auswählen]

"ReferenceError: doifUpdateCell is not defined"....
"doifUpdateCell('di_Energy','doifId','di_Energy_uiTable_c_8_4_0_0','___','display:inline-table;')"
Die Cards funktionieren, aber die PopUps kommen im Sekundentakt und lassen sich kaum wegklicken.

Die Definition der Devices ist unverändert, aber ich habe die Tage ein FHEM-Update gemacht.
Was kann ich tun ?

[Damian]

Guten Morgen,

ich bekomme bei meinen DOIF-Cards jetzt folgende Fehlermeldung:

Code: [Auswählen]

"ReferenceError: doifUpdateCell is not defined"....
"doifUpdateCell('di_Energy','doifId','di_Energy_uiTable_c_8_4_0_0','___','display:inline-table;')"
Die Cards funktionieren, aber die PopUps kommen im Sekundentakt und lassen sich kaum wegklicken.

Die Definition der Devices ist unverändert, aber ich habe die Tage ein FHEM-Update gemacht.
Was kann ich tun ?

Die Fehlerursache lässt sich leider nicht erkennen. Die FHEM-Definition passt nicht zur HTML-Definition.

[Bartimaus]

So habe ich z:b. ein Card definiert:

Code: [Auswählen]

defmod di_Energy DOIF ##
attr di_Energy room DOIF_Cards
attr di_Energy uiTable {package ui_Table}\
card([1wire_Strom_Gesamt:E-Power:col48],"aktueller Strom,fill:darkorange","power","0.00","10.00",120,0,"kW",undef,"2")|\
card([1wire_Strom_Gesamt:Hz-Power:col48],"Strom_Heizung,fill:darkorange","power","0.00","0.35",120,0,"kW",undef,"2")|\
card([1wire_Strom_Gesamt:E-Energy:col48],"Tagesstrom,fill:darkorange","power",0.00,25.00,120,0,"kWh",undef,2)|\
card([Shelly.DachbodenPV:power_1:col48],"Balkonkraftwerk,fill:darkorange","sani_solar",0.00,1000,0,90,"W",undef,0)|\
card([powerday:TagesErtrag:col1w],"TagesErtrag PV","sani_solar",0,6,0,90,"kWh",undef,3)\
card([Shelly.GartenhausPV:power:col96],"Gartenkraftwerk,fill:darkorange","sani_solar",0.00,600,0,90,"W",undef,0)|\
card([powerday:TagesErtrag2:col1w],"GartenPVTagesErtrag","sani_solar",0,6,0,90,"kWh",undef,3)|\
card([Shelly.DachbodenPV:GesamtPower:col96],"GesamtPowerPV,fill:darkorange","sani_solar",0.00,1250,0,90,"W",undef,0)|\
card([powerday:GesamtErtrag:col1w],"GesamtTagesErtragPV","sani_solar",0,6,0,90,"kWh",undef,3)|\
card([Shelly.DachbodenPV:SunAlt:col24],"Einstrahlwinkel","sani_solar",-30,90,0,120,"Grad",undef,0)\
card([Shelly.DachbodenPV:SunAz:col24],"Einstrahl-Richtung","sani_solar",0,360,0,120,"Grad",undef,0)|\
card([Zwave.KinoHifi:power:col48],"KinoHifi,fill:darkorange","power","0.00","250",120,0,"W",undef,0)|\
card([Tasmota.Koogeek2:ENERGY_Power:col48],"HifiWz,fill:darkorange","power","0.00","100",120,0,"W",undef,0)|\
card([MQTT2_DVES_462F4B:ENERGY_Power:col48],"PS5-Marius,fill:darkorange","power",0.00,350,90,0,"W",undef,0)|\
card([MQTT2_DVES_4519BA:ENERGY_Power:col48],"RPi4-PS4,fill:darkorange","power","0.00","350",120,0,"W",undef,"2")\
card([MQTT2_shellyplug_s_F02BB3:relay_0_power:col48],"KellerPC,fill:darkorange","power","0.00","150",120,0,"W",undef,0)|\
card([MQTT2_DVES_45B635:ENERGY_Power:col48],"WzTV,fill:darkorange","power","0.00","250",120,0,"W",undef,0)|\
card([Strom.Dachboden:Dachboden:col48],"Ubiquiti,fill:darkorange","power","0.00","100",120,0,"W",undef,"2")|\
card([Shelly.DachbodenPV:power_0:col48],"RPi4-FHEM,fill:darkorange","power","0.00","15",120,0,"W",undef,"2")|\
card([Tasmota.Trockner:ENERGY_Power:col48],"Trockner,fill:darkorange","power","0.00","3600",90,0,"W",undef,0)\
card([Tasmota.Koogeek4:ENERGY_Power:col48],"Spülmaschine,fill:darkorange","power","0.00","3500",120,0,"W",undef,0)|\
card([Waschmaschine:ENERGY_Power:col48],"Waschmaschine,fill:darkorange","power","0.00","2800",120,0,"W",undef,0)|\
card([Tasmota.Oelradiator:ENERGY_Power:col48],"Ölradiator,fill:darkorange","power",0.00,3600,120,0,"W",undef,0)|\
card([Licht.SaunaRuheRaum:power:col48],"Luftentfeuchter,fill:darkorange","power","0.00","260",120,0,"W",undef,0)|\
card([Licht.Stehlampe:power:col48],"Licht.StehlampeWz,fill:darkorange","power","0.00","50",120,0,"W",undef,2)\
card([Licht.TV:power:col48],"Licht.TV,fill:darkorange","power","0.00","15",120,0,"W",undef,2)|\
card([Licht.Kino:power:col48],"Licht.Kino,fill:darkorange","power","0.00","150",120,0,"W",undef,2)|\
card([Licht.Kueche:power:col48],"Licht.Kueche,fill:darkorange","power","0.00","50",120,0,"W",undef,"2")|\
card([Licht.Moritz:power:col48],"Licht.Moritz,fill:darkorange","power","0.00","50",120,0,"W",undef,"2")|\
card([Licht.Marius:power:col48],"Licht.Marius,fill:darkorange","power","0.00","50",120,0,"W",undef,"2")\
card([Licht.Flur:power:col48],"Licht.Flur,fill:darkorange","power","0.00","25",120,0,"W",undef,"2")|\
card([Licht.Gaeste:power:col48],"Licht.Gaestezimmer,fill:darkorange","power","0.00","50",120,0,"W",undef,"2")|\
card([Licht.Treppe:power:col48],"Licht.Treppe,fill:darkorange","power","0.00","50",120,0,"W",undef,"2")|\
card([Licht.Gartenhaus:power:col48],"Licht.Gartenhaus,fill:darkorange","power","0.00","25",120,0,"W",undef,"2")|\
card([Licht.Terasse:relay_0_power:col48],"Licht.Terasse,fill:darkorange","power","0.00","40",120,0,"W",undef,"2")\
card([Licht.Terasse2:relay_1_power:col48],"Licht.Terasse2,fill:darkorange","power","0.00","40",120,0,"W",undef,"2")|\
card([Licht.Stehlampe.Gaeste:power:col48],"Licht.StehlampeGaeste,fill:darkorange","power","0.00","25",120,0,"W",undef,"2")|\
card([Zwave_Plug1:power:col48],"PC-Claudia,fill:darkorange","power","0.00","350",120,0,"W",undef,"2")|\
card([MQTT2_DVES_657752:ENERGY_Power:col48],"XMasLicht,fill:darkorange","power","0.00","50",90,0,"W",undef,0)|\
card([MQTT2_DVES_657752:ENERGY_Today:col48],"XMas,fill:darkorange","power","0.00","5",90,0,"kWh",undef,0)\
card([sysmon:cpu_temp:col48],"RPi4-Temp,fill:darkorange","temp_inside","15.00","85",90,0,"°C",undef,0)|\
card([Switch24Port:switch_general_temperature:col1w],"UnifiSwitch-Temp,fill:darkorange","temp_inside","15.00","85",90,0,"°C",undef,0)|\
card([Shelly.DachbodenPV:inttemp:col1w],"ShellyPV-Temp,fill:darkorange","temp_inside","15.00","85",90,0,"°C",undef,0)|\
card([MQTT2_shellyplug_s_BBA348:relay_0_power:col48],"ArbeitsPC,fill:darkorange","power","0.00","150",120,0,"W",undef,0)|\
card([MQTT2_shellyplug_s_1C121B:relay_0_power:col48],"MediaServer,fill:darkorange","power","0.00","150",120,0,"W",undef,0)\
card([Tasmota.Frei_1.1:ENERGY_Power:col1w],"SolarThermie,fill:darkorange","power","0.00","40",120,0,"W",undef,0)|\


[Damian]

Dann reduziere die Definition. Nimm erst mal die Hälfe (restliche Zeilen mit ## auskommentieren), wenn es funktioniert, dann nimmst du vom Rest wieder die Hälfte dazu - bis du die Card-Definition eindeutig herausgefunden hast.

[Damian]

neues Feature: Diagramm ohne Ring

Man kann jetzt die Anzeige des Rings ausblenden, dadurch gewinnt man mehr Platz für das Diagramm.

Im Anhang zwei Darstellungen: mit Ringen wie bisher und auch ohne Ringe - neu. Bei der Monats- und der Jahresübersicht wurden die Ringe hier ausgeblendet.

Neue Version eingecheckt.

Auszug aus der Dokumentation zu card:

$prop     
# Eigenschaft von card: "<size>,<y-scaling>,<steps>,<noFooter>,<noColor>,<ring>,<width>", optional

# <size>: Größe der der Karte, default = 130,
# <y-scaling>: feste Y-Skalierung: 1, sonst automatische Skalierung,
# <steps>: 1 für Stufen,
# <noFooter>: 1 für keine Fußzeile,
# <noColor>: 1 für graue y-Achsenbeschriftung,
# <ring>: leer für Ring, 0 für kein Ring, 1 für Halbringdarstellung, default: Ring
# <width>: Breite der Karte, default: 160

[Tobias]

Dürfte ich einen Vorschlag für eine bessere Lesbarkeit machen??

Anstatt die Parameter hintereinander weg zu schreiben wäre es lesbarer wenn man soetwas schreibt wie:
Footer=1, Ring=0, usw…..

Wäre soetwas grundsätzlich möglich wenn du mal Zuviel Zeit hast?

[Damian]

Dürfte ich einen Vorschlag für eine bessere Lesbarkeit machen??

Anstatt die Parameter hintereinander weg zu schreiben wäre es lesbarer wenn man soetwas schreibt wie:
Footer=1, Ring=0, usw…..

Wäre soetwas grundsätzlich möglich wenn du mal Zuviel Zeit hast?

Ja, da ich aber die einfache Variante bereits gewählt habe, muss man alleine wegen der Kompatibilität dabei bleiben. Außerdem handelt es sich hier um reine Perlfunktionen und diese arbeitet von sich aus mit Parametern, die aufgrund ihrer Reihenfolge zugeordnet werden. In javaScript hätte man es sicherlich anders gelöst.

[Damian]

Ich habe noch die Fußzeile erweitert, weil man ohne Ring gar nicht mehr erkennen konnte, was dargestellt wurde.

[jkriegl]

andere Frage: wie kommt man auf einfache Weise an den min/max-Wert ran,
ohne das versteckte Reading z.B. ".col_72_MQTT2_strom_wert_kwh_24_values" zu durchsuchen.

[Damian]

andere Frage: wie kommt man auf einfache Weise an den min/max-Wert ran,
ohne das versteckte Reading z.B. ".col_72_MQTT2_strom_wert_kwh_24_values" zu durchsuchen.

Diese sind in der Kollektor-Struktur abgelegt.

Man kann sie im gleichen DOIF z. B. über DOIF_Readings in einem Reading ablegen oder direkt in uiTable visualisieren.

z. B.

Code: [Auswählen]

attr di_light DOIF_Readings max: ${[di_setreading:humidity:col1w]}{max_value}
Genauso gibt es min_value und max_value_time bzw. min_value_time in Sekunden, die man in Zeit-Darstellung umwandeln kann.

[andies]

Eine Anfängerfrage zu cards mit zwei EInheiten. Ich habe das so gelöst

Code: [Auswählen]

card([Viessmann2:Temperature3:col],"Wasser Verbrauch/Temp",undef,20,65, undef,undef,"°C",\&warmwasser_hue,"0","130,0,0,0,0,0,400",undef,undef,[Wasserzaehler_IEC_01:Verbrauch:col],0,,240,240,"l",undef,"0")\
und hätte aber gern keine Dezimalstellen beim Verbrauch. Ich dachte, die letzte Null liefert das - dem ist aber nicht so (Screenshot, rechts). Weiß jemand, warum?

[Damian]

Eine Anfängerfrage zu cards mit zwei EInheiten. Ich habe das so gelöst

Code: [Auswählen]

card([Viessmann2:Temperature3:col],"Wasser Verbrauch/Temp",undef,20,65, undef,undef,"°C",\&warmwasser_hue,"0","130,0,0,0,0,0,400",undef,undef,[Wasserzaehler_IEC_01:Verbrauch:col],0,,240,240,"l",undef,"0")\
und hätte aber gern keine Dezimalstellen beim Verbrauch. Ich dachte, die letzte Null liefert das - dem ist aber nicht so (Screenshot, rechts). Weiß jemand, warum?

Bei dir fehlt der Maximalwert, siehe Fragezeichen:

card([Viessmann2:Temperature3:col],"Wasser Verbrauch/Temp",undef,20,65, undef,undef,"°C",\&warmwasser_hue,"0","130,0,0,0,0,0,400",undef,undef,[Wasserzaehler_IEC_01:Verbrauch:col],0,?,240,240,"l",undef,"0")

[andies]

Danke! Gibt es eine Möglichkeit, dies dynamisch bestimmen zu lassen, also in Abhängigkeit der dann vorliegenden Daten (ich dachte durch das weglassen wäre das dynamisch)?

[Damian]

Danke! Gibt es eine Möglichkeit, dies dynamisch bestimmen zu lassen, also in Abhängigkeit der dann vorliegenden Daten (ich dachte durch das weglassen wäre das dynamisch)?

Du hast die Farbzuordnung 240 (blau) für min und 240 für max angegeben. Das musst du für deine Bedürfnisse anpassen. HSV-Werte kanns du über colorpicker (google) bestimmen. 0 ist rot, 60 ist gelb, 120 ist grün usw.

[schwatter]

@Damian

ich habe hier zwei optische Probleme bei der Card.

1. Die Anzeige unten, Tage und Uhrzeit überlappen bei mir.
2. Der Text aus dem Ring, bei mir "Pv W" spiegelt sich unten links in der Ecke. Vielleicht auch der Grund, warum Tage und Uhrzeit überlappen.
In deinem Beispiel unter https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg ist das nicht der Fall.

Code: [Auswählen]

defmod di_collect_pv_01 DOIF ##
attr di_collect_pv_01 room 14.PV
attr di_collect_pv_01 uiTable {package ui_Table;;}\
card([PV_Deye1600_01:Power:col12],undef,[PV_Deye1600_01:Power] > 0 ? "sani_solar\@colorVal1":"fa_bolt\@colorVal2",0,1600,30,120,"Pv W",undef,"1,font-size:50%")

setstate di_collect_pv_01 initialized
setstate di_collect_pv_01 2022-09-21 19:45:13 .col_72_PV_Deye1600_01_Power_12_times 1663739818,1663740418,1663741018,1663741317,1663742219,1663742817,1663743417,1663743774,1663744618,1663745217,1663745817,1663746417,1663747017,1663747317,1663748217,1663748517,1663749117,1663750017,1663750317,1663751217,1663751517,1663752417,1663753017,1663753317,1663753917,1663754817,1663755417,1663755717,1663756617,1663756914,1663757517,1663758117,1663759017,1663759617,1663759917,1663760517,1663761118,1663761717,1663762617,1663762917,1663763517,1663764417,1663764654,1663765617,1663765917,1663766596,1663767417,1663767718,1663768617,1663769217,1663769817,1663770117,1663771017,1663771617,1663771918,1663772817,1663773417,1663774017,1663774317,1663774917,1663775817,1663776418,1663776692,1663777617,1663777917,1663778437,1663779417,1663779717,1663780617,1663781217,1663781400,1663782105
setstate di_collect_pv_01 2022-09-21 19:45:13 .col_72_PV_Deye1600_01_Power_12_values 30,42,52,59,76,102,141,141,161,197,227,268,279,264,343,371,325,388,389,425,435,426,456,526,589,698,939,918,924,924,927,927,950,961,961,946,952,954,936,919,910,903,903,878,859,859,824,797,760,725,700,680,618,578,578,513,467,422,404,322,80,53,53,45,44,45,24,20,8,0,0,0
setstate di_collect_pv_01 2022-09-17 10:47:40 cmd 0
setstate di_collect_pv_01 2022-09-17 10:47:40 mode enabled
setstate di_collect_pv_01 2022-09-17 10:47:40 state initialized

Wie kann ich es richten?

Gruß schwatter