PowerFlow [animiertes SVG, dummy, javascript]

Begonnen von schwatter, 20 Oktober 2024, 21:56:34

Vorheriges Thema - Nächstes Thema

schwatter

Morgen,

Update im ersten Post:

- width und height beziehen sich jetzt nur auf das SVG. Vorher hat es global gegriffen. Einige Skins konnten das nicht verkraften.
- Jetzt mit Mobile Ansicht. Diese greift bis 1200px.
- Bis dahin werden alle Ringe und Linien mit der Klasse class="animated-point" und class="ring" ausgeblendet.
- Im Fuß des SVG ein Skript hinzugefügt, das wenn die Ringe und Linien ausgeblendet werden, auch die Viewbox verkleinert wird.



Gruß schwatter

schwatter

Da fällt mir ein, der andies hatte ja auch das eChart gebaut.
Das sieht ganz schick nebeneinander aus. Sowas wie ein Energydashboard.
Die Namen habe ich in den 2 devices per alias entfernt.

attr powerGrid alias <span></span>
Da dann der Link zum Deviceoverview weg ist, muss z.B per list TYPE=dummyNew gesucht werden.


Gruß schwatter

schwatter

#32
Nabend,

Update im ersten Post:

- eigene Namen für die 5 Ringe um das Haus setzbar (set powerGrid cCircle1Name_s Airdryer).
- cCircle1Name_s bis cCircle5Name_s. Beginnend oben und dann im Uhrzeiger.
- cCircle1Power_v bis cCircle5Power_v. Beginnend oben und dann im Uhrzeiger.
- Sind keine Namen gesetzt, wird n/a ausgegeben. Mal sehen, vielleicht blende ich im nächsten Step die Ringe aus.
- Um das Update anzuwenden, müssen die Raw vom Dummy und das DOIF neu gesetzt werden. Sowie svg_update.js erneut nach
codemirror kopieren.


Gruß schwatter

ergerd

Hallo,
ich habe das soweit auch in mein fhem eingebaut, allerdigs muss ich irgndwo einen Fehler gemacht haben,
wenn ich das Device Powergrid_DOIF öffne erhalte ich folgende Fehlermeldung:
fhem?detail=Powergrid_DOIF line 815:
TypeError: svg is null

Hier mein DOIF:
Internals:
   DEF        ## Grid + House
([SolisPVA:"house_load_power"])
        ( set powerGrid grid_v {(ReadingsNum("SolisPVA","house_load_power",0))} )
        ( set powerGrid grid_in_v {(ReadingsNum("SolisPVA","meter_power_in_modified",0))} )
        ( set powerGrid grid_out_v {(ReadingsNum("SolisPVA","meter_power_out_modified",0))} )
        ( set powerGrid house_v {(ReadingsVal("SolisPVA","solar_to_house_power_modified",0))} )
        ( set powerGrid lowcarbon_v {(ReadingsNum("electricitymap","fossilFreePercentage",0))} )

## Computer
DOELSEIF  ([buero_shelly_computer:"power"])
        ( set powerGrid cCircle1Power_v {(ReadingsNum("buero_shelly_computer","power",0))} )

## Dishwasher
DOELSEIF  ([ku_shellypmmini_sm:"power"])
        ( set powerGrid cCircle4Power_v {(ReadingsNum("ku_shellypmmini_sm","power",0))} )

## Boiler
DOELSEIF  ([ku_shellypmmini_boiler:"power"])
        ( set powerGrid cCircle3Power_v {(ReadingsNum("ku_shellypmmini_boiler","power",0))} )

## Warmwasserboiler
DOELSEIF  ([keller_shelly_wwboiler:"^power:.*$"])
        ( set powerGrid cCircle5Power_v {(ReadingsNum("keller_shelly_wwboiler","power",0))} )

## Solar
DOELSEIF   ([aktuellerErtragPVA:"state"] )
        ( set powerGrid solar_v {(ReadingsNum("aktuellerErtragPVA","state",0))} )

## Washer
DOELSEIF  ([hw_shellypmmini_wm:"power"])
        ( set powerGrid cCircle2Power_v {(ReadingsNum("hw_shellypmmini_wm","power",0))} )

   FUUID      678ad3f5-f33f-e471-1cbb-3610b9abe3d3dd10
   MODEL      FHEM
   NAME       Powergrid_DOIF
   NOTIFYDEV  ku_shellypmmini_sm,keller_shelly_wwboiler,global,hw_shellypmmini_wm,buero_shelly_computer,SolisPVA,ku_shellypmmini_boiler,aktuellerErtragPVA
   NR         337
   NTFY_ORDER 50-Powergrid_DOIF
   STATE      cmd_1
   TYPE       DOIF
   VERSION    29460 2024-12-29 20:25:48
   eventCount 4413
   READINGS:
     2025-01-18 13:30:11   Device          aktuellerErtragPVA
     2025-01-18 13:30:11   cmd             1.5
     2025-01-18 13:30:11   cmd_event       SolisPVA
     2025-01-18 13:30:11   cmd_nr          1
     2025-01-18 13:30:11   cmd_seqnr       5
     2025-01-18 13:30:11   e_SolisPVA_events meter_voltage: 2319,dc_voltage_1: 2024,meter_power_in_modified: 212,total_dc_input_power_2: 238,meter_ac_voltage_a: 2319,dc_bus_voltage: 3917,meter_current: 180,system_second: 1,meter_total_apparent_power_2: 849,apparent_power_2: 170,meter_reactive_power_a_2: 105,meter_total_active_power_2: 65278,system_minute: 32,phase_a_voltage: 2324,meter_apparent_power_a_2: 471,system_epoch: 1737203521,meter_active_power_2: 65323,meter_power_modified: 212,meter_active_power_a_2: 65175,active_power_2: 170,house_load_power: 413,total_load_power_modified: 413,grid_frequency: 4997,meter_power_factor: 65239,solar_to_house_power_modified: 238,total_dc_input_power: 238,apparent_power: 170
     2025-01-18 13:30:11   e_aktuellerErtragPVA_events 266.7
     2025-01-18 13:30:10   e_buero_shelly_computer_events power: 52.45
     2025-01-18 13:30:00   e_hw_shellypmmini_wm_events params_pm1_0_ret_aenergy_minute_ts: 1737203400,params_pm1_0_aenergy_minute_ts: 1737203400,params_ts: 1737203400.00
     2025-01-18 13:29:24   e_keller_shelly_wwboiler_events uptime: 13675,voltage: 235.6,current: 0.138,power: 16.7,energy: 672448.38,energy_purchased: 672448.38,16.7
     2025-01-18 13:30:00   e_ku_shellypmmini_boiler_events params_pm1_0_ret_aenergy_minute_ts: 1737203400,params_ts: 1737203400.00,params_pm1_0_aenergy_minute_ts: 1737203400
     2025-01-18 13:30:00   e_ku_shellypmmini_sm_events params_pm1_0_aenergy_minute_ts: 1737203400,params_ts: 1737203400.00,params_pm1_0_ret_aenergy_minute_ts: 1737203400
     2025-01-17 23:06:51   mode            enabled
     2025-01-18 13:30:11   state           cmd_1
   Regex:
     accu:
     bar:
     barAvg:
     collect:
     cond:
       SolisPVA:
         0:
           &STATE     ^SolisPVA$
         1:
         2:
         3:
         4:
         5:
         6:
       aktuellerErtragPVA:
         0:
         1:
         2:
         3:
         4:
         5:
           &STATE     ^aktuellerErtragPVA$
         6:
       buero_shelly_computer:
         0:
         1:
           &STATE     ^buero_shelly_computer$
         2:
         3:
         4:
         5:
         6:
       hw_shellypmmini_wm:
         0:
         1:
         2:
         3:
         4:
         5:
         6:
           &STATE     ^hw_shellypmmini_wm$
       keller_shelly_wwboiler:
         0:
         1:
         2:
         3:
         4:
           &STATE     ^keller_shelly_wwboiler$
         5:
         6:
       ku_shellypmmini_boiler:
         0:
         1:
         2:
         3:
           &STATE     ^ku_shellypmmini_boiler$
         4:
         5:
         6:
       ku_shellypmmini_sm:
         0:
         1:
         2:
           &STATE     ^ku_shellypmmini_sm$
         3:
         4:
         5:
         6:
   attr:
     cmdState:
     wait:
     waitdel:
   condition:
     0          ::EventDoIf('SolisPVA',$hash,'house_load_power',1)
     1          ::EventDoIf('buero_shelly_computer',$hash,'power',1)
     2          ::EventDoIf('ku_shellypmmini_sm',$hash,'power',1)
     3          ::EventDoIf('ku_shellypmmini_boiler',$hash,'power',1)
     4          ::EventDoIf('keller_shelly_wwboiler',$hash,'^power:.*$',1)
     5          ::EventDoIf('aktuellerErtragPVA',$hash,'state',1)
     6          ::EventDoIf('hw_shellypmmini_wm',$hash,'power',1)
   do:
     0:
       0           set powerGrid grid_v {(ReadingsNum("SolisPVA","house_load_power",0))}
       1           set powerGrid grid_in_v {(ReadingsNum("SolisPVA","meter_power_in_modified",0))}
       2           set powerGrid grid_out_v {(ReadingsNum("SolisPVA","meter_power_out_modified",0))}
       3           set powerGrid house_v {(ReadingsVal("SolisPVA","solar_to_house_power_modified",0))}
       4           set powerGrid lowcarbon_v {(ReadingsNum("electricitymap","fossilFreePercentage",0))}
     1:
       0           set powerGrid cCircle1Power_v {(ReadingsNum("buero_shelly_computer","power",0))}
     2:
       0           set powerGrid cCircle4Power_v {(ReadingsNum("ku_shellypmmini_sm","power",0))}
     3:
       0           set powerGrid cCircle3Power_v {(ReadingsNum("ku_shellypmmini_boiler","power",0))}
     4:
       0           set powerGrid cCircle5Power_v {(ReadingsNum("keller_shelly_wwboiler","power",0))}
     5:
       0           set powerGrid solar_v {(ReadingsNum("aktuellerErtragPVA","state",0))}
     6:
       0           set powerGrid cCircle2Power_v {(ReadingsNum("hw_shellypmmini_wm","power",0))}
     7:
   helper:
     NOTIFYDEV  ku_shellypmmini_sm,keller_shelly_wwboiler,global,hw_shellypmmini_wm,buero_shelly_computer,SolisPVA,ku_shellypmmini_boiler,aktuellerErtragPVA
     event      266.7
     globalinit 1
     last_timer 0
     sleeptimer -1
     timerdev   SolisPVA
     timerevent house_load_power: 413
     triggerDev aktuellerErtragPVA
     timerevents:
       meter_voltage: 2319
       dc_voltage_1: 2024
       meter_power_in_modified: 212
       total_dc_input_power_2: 238
       meter_ac_voltage_a: 2319
       dc_bus_voltage: 3917
       meter_current: 180
       system_second: 1
       meter_total_apparent_power_2: 849
       apparent_power_2: 170
       meter_reactive_power_a_2: 105
       meter_total_active_power_2: 65278
       system_minute: 32
       phase_a_voltage: 2324
       meter_apparent_power_a_2: 471
       system_epoch: 1737203521
       meter_active_power_2: 65323
       meter_power_modified: 212
       meter_active_power_a_2: 65175
       active_power_2: 170
       house_load_power: 413
       total_load_power_modified: 413
       grid_frequency: 4997
       meter_power_factor: 65239
       solar_to_house_power_modified: 238
       total_dc_input_power: 238
       apparent_power: 170
     timereventsState:
       meter_voltage: 2319
       dc_voltage_1: 2024
       meter_power_in_modified: 212
       total_dc_input_power_2: 238
       meter_ac_voltage_a: 2319
       dc_bus_voltage: 3917
       meter_current: 180
       system_second: 1
       meter_total_apparent_power_2: 849
       apparent_power_2: 170
       meter_reactive_power_a_2: 105
       meter_total_active_power_2: 65278
       system_minute: 32
       phase_a_voltage: 2324
       meter_apparent_power_a_2: 471
       system_epoch: 1737203521
       meter_active_power_2: 65323
       meter_power_modified: 212
       meter_active_power_a_2: 65175
       active_power_2: 170
       house_load_power: 413
       total_load_power_modified: 413
       grid_frequency: 4997
       meter_power_factor: 65239
       solar_to_house_power_modified: 238
       total_dc_input_power: 238
       apparent_power: 170
     triggerEvents:
       266.7
     triggerEventsState:
       state: 266.7
   internals:
   perlblock:
   readings:
   trigger:
     all         SolisPVA buero_shelly_computer ku_shellypmmini_sm ku_shellypmmini_boiler keller_shelly_wwboiler aktuellerErtragPVA hw_shellypmmini_wm
   uiState:
   uiTable:
Attributes:
   DbLogExclude .*
   room       Energy

Alles andere habe ich unverändert aus dem ersten Post genommen.
FHEM auf RasPi 4, ZigBee, 1Wire2WLAN, DS2423, Buderus KM200, Button+, LaCrosseGateway, PCA301, ConBee III, LuftdatenInfo, OneWireGW, Div. ESPs u. Shellys

schwatter

#34
Nabend,

falsch gemacht hast du nichts. Das Problem ist, das DOIF an der Stelle und ein paar anderen einen Wert erwartet.
Den Fehler hast du nicht komplett kopiert, denke ich. Diesen bekomme ich.

fhem?detail=Powergrid_DOIF line 1636:
Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

Das ist der Teil im SVG

function adjustViewBox() {
                    const svg = document.querySelector(&apos;#powerGrid svg&apos;);
                    if (window.innerWidth &lt; 1200) {
                      svg.setAttribute(&apos;viewBox&apos;, &apos;0 0 500 500&apos;);
                    } else {
                      svg.setAttribute(&apos;viewBox&apos;, &apos;0 0 650 500&apos;);
                    }
                  }

Ich werde Damian fragen, ob er das abfangen möchte. Problem, vorher hat noch keiner so eine lange
SVG-Orgie im Stateformat gemacht.

Ansonsten, sollte es trotz Fehler normal funktionieren. Tut es bei dir auch?

Gruß schwatter

ergerd

Vielen Dank für die schnelle Antwort.
Ich bin mir sicher alles aus der Fehlermeldung kopiert zu haben.
Das SVG zeigt keine Daten an, obwohl die Readings befüllt werden.
FHEM auf RasPi 4, ZigBee, 1Wire2WLAN, DS2423, Buderus KM200, Button+, LaCrosseGateway, PCA301, ConBee III, LuftdatenInfo, OneWireGW, Div. ESPs u. Shellys

schwatter

#36
Morgen,

ich habe jetzt versucht es nachzustellen.

- dummyNew und svg_update.js gelöscht
- gespeichert + Browserrefresh (STRG + F5)
- Fhem-Neustart
- Die Dateien svg_update.js + powerFlow_dummyNew_raw.txt aus dem ersten Post heruntergeladen
- svg_update.js nach /opt/fhem/www/codemirror kopiert und Rechte/Eigentümer : fhem/Gruppe:dialout
- pro FHEmWEB Device muss das attr JavaScripts mit dem Inhalt gesetzt sein -->codemirror/svg_update.js
- SVG mit dummyNew per raw wieder angelegt über den + Button oben links.
- Speichern nicht vergessen
- Noch ein Fhem-Neustart, damit Fhem weiß, das ein Script in /opt/fhem/www/codemirror liegt.
- Nochmal Browserrefresh (STRG + F5)

Bis jetzt kann ich den Fehler nicht nachstellen. Wichtig ist, das alles da ist wo es hingehört.
Wenn etwas nicht funktioniert, dann einen Fhem-Neustart. Und nachdem Fhem wieder da ist, nochmal STRG + F5
für den Browserrefresh.

Funktioniert es nicht, stimmmt etwas mit dem Script nicht. Es wird nicht gefunden oder geladen. Oder es ist defekt.
Auch darfst du den dummy oder die Readings nicht selber umbenennen. Da alles im Script auf die Namensgebung ausgelegt ist.

Hier ist noch die alte Version, bei der die Namen der 5 Ringe um House nicht per dummy gesetzt werden konnten.
https://github.com/schwatter/PowerFlow
Damit könnte der Fehler eingegrenzt werden. Mein Browser bytheway is Chrome. Sonst habe ich keine Besonderheiten.

Wenn bis heut Abend noch Interesse daran besteht, dann könnte ich per Teamviewer versuchen zu helfen. Bin ca. 18Uhr wieder da.


Gruß schwatter

ergerd

Hallo schwatter,

ich habe die Vorgehensweise auch nochmal nachvollzogen, komme aber auf denselben Fehler.
Ich nutze normalerweise Firefox, bei Edge sieht die Meldung exakt so aus wie in deinem Post #34
fhem?detail=Powergrid_DOIF line 807:
Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

Da ich nicht weiter komme würde ich das Angebot per Teamviewer gerne annehmen.

Grüße ergerd
FHEM auf RasPi 4, ZigBee, 1Wire2WLAN, DS2423, Buderus KM200, Button+, LaCrosseGateway, PCA301, ConBee III, LuftdatenInfo, OneWireGW, Div. ESPs u. Shellys

schwatter


ergerd

Hallo schwatter,

deine Vermutung das es am csrfToken liegt war richtig. Nachdem ich darauf umgestellt habe funzt alles.

Nochmals vielen Dank und viele Grüße
ergerd
FHEM auf RasPi 4, ZigBee, 1Wire2WLAN, DS2423, Buderus KM200, Button+, LaCrosseGateway, PCA301, ConBee III, LuftdatenInfo, OneWireGW, Div. ESPs u. Shellys

schwatter

#40
Nabend,

Update der svg_update.js im ersten Post.

- fetchReadings funktioniert jetzt mit und ohne CSRF-Token
- motionAnim.setAttribute wurde von ('dur', '0s') zu ('begin', 'indefinite') geändert. Da wurde gemeckert


Da DOIF den Fehler setAttribute ausspuckt, gehe ich jetzt von einem Fehler meinerseits aus.
Ich suche weiter. Die Funktion, Werte in den dummy zu schreiben, behindert es nicht. Kann also
vom User erstmal missachtet werden.

Gruß schwatter

schwatter

Nabend,

Update im ersten Post. Dazu bitte svg_update.js und powerFlow_dummyNew_raw.txt laden und Beide erneuern.

- die Customringe können jetzt ausgeblendet werden. Dazu den Namen n/a vergeben.
- Dadurch ergibt sich eine neue Reihenfolge. Über Haus C1, unter Haus C2, oben rechts C3, rechts C4 und unten rechts C5.
- Tooltips wurde deaktiviert. Bedeutet, das wenn die Maus auf dem StateformatSvg verweilt, kein Codegeschnetzeltes erscheint.

Gruß schwatter

schwatter

Tag,

Update im ersten Post. Dazu bitte svg_update.js und powerFlow_dummyNew_raw.txt laden und Beide erneuern.
STRG + F5 nicht vergessen!

- Icons per set setzbar für FossilFree, Solar, House + 5 Customringe

Entweder per Pfad zu den Fhem SVG's

/fhem/www/images/fhemSVG/solar_icon.svg
/fhem/www/images/openautomation/scene_clothes_dryer.svg

oder direkt aus dem Internet. Zum Beispiel von hier: https://pictogrammers.com/library/mdi/
Dazu Icon auswählen. Dann oben rechts mit der Maus auf "Download SVG" aber nicht downloaden.
Rechte Maustaste und Adresse des Links kopieren. Das sieht dann so kryptisch aus

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203L2%2012H5V20H19V12H22L12%203M11.5%2018V14H9L12.5%207V11H15L11.5%2018Z%22%20%2F%3E%3C%2Fsvg%3E


Gruß schwatter

schwatter

Nabend,

Update im ersten Post. Dazu bitte svg_update.js und powerFlow_dummyNew_raw.txt laden und Beide erneuern.
STRG + F5 nicht vergessen!

- Jetzt 9 Customringe.
- Neuer Style für die Linien.
- Diverses Caching im JS hinzugefügt.
- JS-Ausführung nur noch, wenn der passende Title auf der Seite vorhanden ist. Siehe Browserkonsole.
- Der Title Powerflow oben links ist klickbar und führt zum Deviceoverview.
- Deshalb wird jetzt der Devicename mit attr alias "<span></span>" ausgebelndet.


Gruß schwatter