neue svg-Funktion: card

Bartimaus · 17 Juni 2022, 10:01:43

Guten Morgen,

ich bekomme bei meinen DOIF-Cards jetzt folgende Fehlermeldung:

"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 · 17 Juni 2022, 10:26:40

Zitat von: Bartimaus am 17 Juni 2022, 10:01:43
Guten Morgen,

ich bekomme bei meinen DOIF-Cards jetzt folgende Fehlermeldung:

Code Auswählen Erweitern
"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 · 17 Juni 2022, 10:42:50

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 · 17 Juni 2022, 12:41:50

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 · 19 Juni 2022, 13:35:18

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:

Zitat$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 · 19 Juni 2022, 17:25:55

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 · 19 Juni 2022, 17:54:12

Zitat von: Tobias am 19 Juni 2022, 17:25:55
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 · 19 Juni 2022, 17:57:04

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

jkriegl · 19 Juni 2022, 19:09:11

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 · 19 Juni 2022, 19:27:53

Zitat von: jkriegl am 19 Juni 2022, 19:09:11
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 · 25 Juli 2022, 22:22:30

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 · 25 Juli 2022, 23:36:17

Zitat von: andies am 25 Juli 2022, 22:22:30
Eine Anfängerfrage zu cards mit zwei EInheiten. Ich habe das so gelöst
Code Auswählen Erweitern
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:

Zitatcard([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 · 26 Juli 2022, 07:50:12

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 · 26 Juli 2022, 08:52:27

Zitat von: andies am 26 Juli 2022, 07:50:12
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 · 21 September 2022, 22:39:10

@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