PowerFlow [animiertes SVG, dummy, javascript]

[schwatter]

Klick Mich. Vorschauanimation!


Hallo zusammen,


ich habe die Tage an einem animierten PowerFlow gebastelt. Optisch liebäugelt er mit der Powerflow Card Plus von HA.
Zusammengesetzt ist er aus einem modifizierten dummy. Dieser beherbergt die SVG-Grafik im stateFormat sowie alle Werte.
Ein Javascript liest die Werte aus und setzt sie im SVG.

Das alles ist nötig, um die Animationen in Fhem nicht zu unterbrechen. Zumindest, soweit mein Horizont bis jetzt reicht.
Vielleicht, wahrscheinlich gibt es einen eleganteren Weg.

Mit dem Baukasten können noch nicht alle, aber doch schon viele Situationen abgebildet
werden. Bzw. bis jetzt ist es mehr auf meine Bedürfnisse angepasst.

Anwendung
- Echte und fiktive Werte werden im powerGrid dummyNew gesetzt.
- Die animierten Linien folgen der Regel größer oder kleiner als 0.
- Der Batteriering ist die Ausnahme mit stop,gridLoad,gridUnload,solarLoad und houseUnload.
- Der Hausring zeigt prozentual die Leistung von Battery,Grid und Solar an.
- Zum setzen eines Wertes in dem jeweiligen Ring, muss eine Zahl angegeben werden. Zum Beispiel "300". Das Script ergänzt das "W".
- Um einen von den Customringen auszublenden, einfach den ReadingNamen auf n/a setzen.
- Von außen könnt ihr mit einem notify, DOIF oder dem Mittel eurer Wahl die Werte setzen.
- Um Low-Carbon, bzw jetzt FossilFree zu nutzen, bietet sich https://electricitymaps.com/ an. Siehe Punkt 6.

Um das SVG an euren Geschmack anzupassen, empfehle ich diesen SVG-Editor --> https://www.svgviewer.dev/

1. 98_dummyNew.pm Danke @Wzut, für den Hinweis, das nur eine 1 zu einer 0 geändert werden muss.
Als erstes wird ein neuer Dummy erstellt. Dazu von 98_dummy.pm den Code in 98_dummyNew.pm packen. Dann muss alles
im dummy auf dummyNew geändert.

Zum Abschluss diesen Code:

Code Auswählen Erweitern

      readingsSingleUpdate($hash, $v, join(" ",@a), 1);

zu diesen ändern:

Code Auswählen Erweitern

      readingsSingleUpdate($hash, $v, join(" ",@a), 0);


Dadurch kann jetzt das Aktualisieren des STATE unterdrückt werden.
Bedeutet, damit ist alles in einem dummy. Zum Abschluss den neuen dummy in das Verzeichnis zurück kopieren und Rechte nicht vergessen.

2. Das Javasript -> svg_update.js[Das liest die Werte aus powerGrid und setzt die Werte im SVG]
Das Javascript ist unten im Anhang. Es muss nach /opt/fhem/www/codemirror kopiert werden.
Rechte/Eigentümer : fhem/Gruppe:dialout

3. FHEMWEB (Javascript zuweisen + verbose 1)

Bei jedem FHEMWEB-Device muss der Pfad zum Javascript angegeben werden. Verbose auf 1. Bei 4 wird der Log vollgemüllt.

Code Auswählen Erweitern

attr WEB JavaScripts codemirror/svg_update.js
attr WEB verbose 1

Damit das Script und der neue dummyNew korrekt eingebunden werden, müsst ihr Fhem mit "shutdown restart" neu starten.
Ist alles eingebunden und ändert ihr im Javascript etwas, müsst ihr nur euren Browsercache mit STRG + F5 leeren.

4. dummyNew[Hauptdevice zum anzeigen der Werte und Animationen]

Der Html_Svg-Code ist jetzt im Anhang in der Datei powerFlow_dummyNew.txt, da der Editor
vom Forum diesen nicht mehr akzeptiert.

5. Mein DOIF

Code Auswählen Erweitern

defmod Powergrid_DOIF DOIF ## Grid + House\
([MQTT2_Smartmeter_2E1F50:"APOX_Power"])\
        ( set powerGrid grid_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_Power",0))} )\
        ( set powerGrid grid_in_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_E_in",0))} )\
        ( set powerGrid grid_out_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_E_out",0))} )\
        ( set powerGrid house_v {(ReadingsVal("MQTT2_Smartmeter_2E1F50","APOX_Power",0) + ReadingsVal("MQTT2_OpenDTU_585584","power",0))} )\
        ( set powerGrid lowcarbon_v {(ReadingsNum("electricitymap","fossilFreePercentage",0))} )\
\
## Airdryer\
DOELSEIF  ([Luftentfeuchter:"ENERGY_Power"])\
        ( set powerGrid cCircle1Power_v {(ReadingsNum("Luftentfeuchter","ENERGY_Power",0))} )\
\
## Dishwasher\
DOELSEIF  ([MQTT2_zigbee_Geschirrspueler:"power"])\
        ( set powerGrid cCircle4Power_v {(ReadingsNum("MQTT2_zigbee_Geschirrspueler","power",0))} )\
\
## Dryer\
DOELSEIF  ([MQTT2_zigbee_Trockner:"power"])\
        ( set powerGrid cCircle3Power_v {(ReadingsNum("MQTT2_zigbee_Trockner","power",0))} )\
\
## Fridge\
DOELSEIF  ([MQTT2_zigbee_Kuehlschrank:"^power:.*$"])\
        ( set powerGrid cCircle5Power_v {(ReadingsNum("MQTT2_zigbee_Kuehlschrank","power",0))} )\
\
## Solar\
DOELSEIF  ([MQTT2_OpenDTU_585584:"power"] )\
        ( set powerGrid solar_v {(ReadingsNum("MQTT2_OpenDTU_585584","power",0))} )\
\
## Washer\
DOELSEIF  ([MQTT2_zigbee_Waschmaschine:"power"])\
        ( set powerGrid cCircle2Power_v {(ReadingsNum("MQTT2_zigbee_Waschmaschine","power",0))} )\

6. Electricmap - Erzeugt das Reading für FossilFree

Laut Webseite wird ein Apikey benötigt. Es funktioniert aber auch ohne.

Code Auswählen Erweitern

defmod electricitymap HTTPMOD none 60
attr electricitymap extractAllJSON 1
attr electricitymap get1Name carbon-intensity
attr electricitymap get1Poll 1
attr electricitymap get1URL https://api.electricitymap.org/v3/carbon-intensity/latest?lat=52.369800&lon=9.758686
attr electricitymap get2Name power-breakdown
attr electricitymap get2Poll 1
attr electricitymap get2URL https://api.electricitymap.org/v3/power-breakdown/latest?lat=52.369800&lon=9.758686
attr electricitymap room 14.PV

setstate electricitymap 2024-11-10 15:26:30 carbonIntensity 591
setstate electricitymap 2024-11-10 15:26:30 createdAt 2024-11-07T14:44:43.594Z
setstate electricitymap 2024-11-10 15:26:30 datetime 2024-11-10T14:00:00.000Z
setstate electricitymap 2024-11-10 15:26:30 emissionFactorType lifecycle
setstate electricitymap 2024-11-10 15:26:30 estimationMethod FORECASTS_HIERARCHY
setstate electricitymap 2024-11-10 15:26:30 fossilFreePercentage 37
setstate electricitymap 2024-11-10 15:26:30 isEstimated 1
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_battery_discharge 0
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_biomass 5809
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_coal 18609
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_gas 10921
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_geothermal 34
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_hydro 3370
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_hydro_discharge 2000
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_nuclear 526
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_oil 346
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_solar 3409
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_unknown 358
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionBreakdown_wind 2578
setstate electricitymap 2024-11-10 15:26:30 powerConsumptionTotal 47962
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_AT 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_BE 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_CH 0
setstate electricitymap 2024-11-10 14:59:30 powerExportBreakdown_CZ 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_DK-DK1 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_DK-DK2 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_LU 332
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_NL 0
setstate electricitymap 2024-11-10 15:26:30 powerExportBreakdown_NO-NO2 0
setstate electricitymap 2024-11-10 14:59:30 powerExportBreakdown_PL 0
setstate electricitymap 2024-11-10 15:26:30 powerExportTotal 332
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_AT 698
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_BE 931
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_CH 1629
setstate electricitymap 2024-11-10 14:59:30 powerImportBreakdown_CZ 47
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_DK-DK1 2355
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_DK-DK2 77
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_LU 0
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_NL 976
setstate electricitymap 2024-11-10 15:26:30 powerImportBreakdown_NO-NO2 1449
setstate electricitymap 2024-11-10 14:59:30 powerImportBreakdown_PL 472
setstate electricitymap 2024-11-10 15:26:30 powerImportTotal 8115
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_battery_discharge
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_biomass 4988
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_coal 17147
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_gas 9441
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_geothermal 21
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_hydro 1310
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_hydro_discharge 1714
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_nuclear
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_oil 309
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_solar 2996
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_unknown 260
setstate electricitymap 2024-11-10 15:26:30 powerProductionBreakdown_wind 1994
setstate electricitymap 2024-11-10 15:26:30 powerProductionTotal 40179
setstate electricitymap 2024-11-10 15:26:30 renewablePercentage 36
setstate electricitymap 2024-11-10 15:26:30 updatedAt 2024-11-10T13:42:54.015Z
setstate electricitymap 2024-11-10 15:26:30 zone DE



Gruß schwatter

[Gisbert]

Hallo schwatter,

das sieht sehr interessant aus. Ich versuche es bei mir zum Laufen zu bringen. Ich benötige aber nur Grid, Solar, House und Battery - kann ich alles aus der readingsList weglassen, was ich nicht benötige?
Wie bringe ich meine Readings für Grid, Solar, House und Battery in deine Definition am geschicktesten hinein?

Viele Grüße Gisbert

[schwatter]

Um zum Beispiel einen Wert mit einem notify im myDummy1 zu setzen

Code Auswählen Erweitern

defmod MQTT2_Smartmeter_2E1F50_notify_4 notify MQTT2_Smartmeter_2E1F50:StatusSNS_APOX_Power:.* {fhem"setreading myDummy1 grid $EVTPART1"}

setstate MQTT2_Smartmeter_2E1F50_notify_4 2024-10-20 22:38:34
setstate MQTT2_Smartmeter_2E1F50_notify_4 2024-10-20 11:04:22 state active
setstate MQTT2_Smartmeter_2E1F50_notify_4 2024-10-20 22:38:34 triggeredByDev MQTT2_Smartmeter_2E1F50
setstate MQTT2_Smartmeter_2E1F50_notify_4 2024-10-20 22:38:34 triggeredByEvent StatusSNS_APOX_Power: 229
Für die Linien muss dann ein kleiner (<) oder größer (>) als Vergleich gemacht werden. Als Beispiel hier ein Auszug aus meinem anderen DOIF. Bis jetzt habe ich den dummy hier selber noch nicht in Betrieb. Nur fiktive Werte. Werde die Tage umstellen.
Die Werte hier aus dem DOIF nicht übernehmen. Da ja nur 0 und 1 gesetzt werden muss.

Code Auswählen Erweitern

## Animierter Punkt von Haus zu Kühlschrank (an|aus)
   (IF ([MQTT2_zigbee_Kuehlschrank:power] > 0)
({CommandSetReading(undef,'svgDOIF style_fridge ')}  ) )
   (IF ([MQTT2_zigbee_Kuehlschrank:power] == 0)
(setreading svgDOIF style_fridge style="display: none;;") )

## Animierter Punkt von Haus zu Trockner (an|aus)
   (IF ([MQTT2_zigbee_Trockner:power] > 0)
({CommandSetReading(undef,'svgDOIF style_dryer ')}) )
   (IF ([MQTT2_zigbee_Trockner:power] == 0)
(setreading svgDOIF style_dryer style="display: none;;") )

## Animierter Punkt von Haus zu Luftentfeuchter (an|aus)
   (IF ([Luftentfeuchter:ENERGY_Power] > 0)
({CommandSetReading(undef,'svgDOIF style_airdryer ')}))
   (IF ([Luftentfeuchter:ENERGY_Power] == 0)
(setreading svgDOIF style_airdryer style="display: none;;") )

## Animierter Punkt von Haus zu Geschürrspüler (an|aus)
   (IF ([MQTT2_zigbee_Geschirrspueler:power] > 0)
({CommandSetReading(undef,'svgDOIF style_dishwascher ')})  )
   (IF ([MQTT2_zigbee_Geschirrspueler:power] == 0)
(setreading svgDOIF style_dishwasher style="display: none;;") )

## Animierter Punkt von Haus zu Waschmaschine (an|aus)
   (IF ([MQTT2_zigbee_Waschmaschine:power] > 0)
(setreading svgDOIF style_washer '') )
   (IF ([MQTT2_zigbee_Waschmaschine:power] == 0)
(setreading svgDOIF style_washer style="display: none;;") )

## Animierter Punkt von Solar zu Haus (an|aus)
   (IF ([MQTT2_OpenDTU_585584:power] > 0)
({CommandSetReading(undef,'svgDOIF style_solarToHouse ')}) )
   (IF ([MQTT2_OpenDTU_585584:power] == 0)
(setreading svgDOIF style_solarToHouse style="display: none;;") )

## Animierter Punkt von  Netz zu Haus (an|aus)
   (IF ([MQTT2_Smartmeter_2E1F50:APOX_Power] > 0 )
({CommandSetReading(undef,'svgDOIF style_gridToHouse ')}))
   (IF  ([MQTT2_Smartmeter_2E1F50:APOX_Power] <= 0 )
(setreading svgDOIF style_gridToHouse style="display: none;;") )

## Animierter Punkt von Solar zu Netz (an|aus)
   (IF ([MQTT2_Smartmeter_2E1F50:APOX_Power] < 0)
({CommandSetReading(undef,'svgDOIF style_solarToGrid ')}) )
   (IF ([MQTT2_Smartmeter_2E1F50:APOX_Power] > 0)
(setreading svgDOIF style_solarToGrid style="display: none;;") )
Und wegen dem anpassen, bzw verkleinern auf 4 Ringe. Einfach alles aus dem SVG und dem Javascript schmeißen,
was du nicht benötigst. Wenn du etwas gelöscht hast, was falsch war, dann siehst du es schon. Dann kommen keine Werte.

Gruß schwatter

[schwatter]

Bei 1.myDummy habe ich nochmal Einrückung und Groß/Kleinschreibung angepasst.

Gruß schwatter

[schwatter]

Update im ersten Post.

- der Ring vom Haus wird aus 3 Farben zusammengesetzt. Die verantwortlichen Readings sind Grid, Solar und Battery.
- Battery hat jetzt erstmal die Angabe Watt. Diese muss ich noch um eine 2te Wattangabe ergänzen.


Gruß schwatter

[schwatter]

Update im ersten Post

Alle 3 Dateien müssen ersetzt werden.

- Diverse Linien überarbeitet
- Animierten Batteriering eingefügt (batteryState). Dieser dreht vorwärts, rückwärts + stop. Idee, vorwärts laden und rückwärts entladen. Farben alle türkis. Könnt ihr euch selber einfärben im SVG. (laden grün, entladen rot?)
- Dadurch kann die Linie gridToBattery jetzt vorwärts, rückwärts + stop. Habe ich aber nicht gekoppelt. Sollte beim ansteuern beachtet werden.
- Hat der "batteryState" den Status "backward" und "stop" wird "battery" automatisch vom Housering abgezogen.
- Fix beim Housering. Vorher waren negative Zahlen nicht abgefangen. Das hat die prozentuale Aufteilung durcheinander gewürfelt.
- Setup in myDummy1 der Widgets geändert. Viel select für Linien mit on|off, ..., ... .


Gruß schwatter

[schwatter]

Oh, das Wichtigste vergessen.
Damit überhaupt etwas funktioniert, muss im jeweiligen FHEMWEB Device noch der Javascriptpfad angegeben werden.

Code Auswählen Erweitern

attr WEB JavaScripts pgm2/svg_update.js
Ich füge das oben unter Punkt 4 ein.


Gruß schwatter

[carlos]

Sieht gut aus, so etwas wollte ich schon lange.
Fragen:
1. Bei der Batterie würde ich gerne 2 Werte sehen: Füllstand in % und Ladung/Entladung.
2. Bei Grid evtl gleich 3 Werte:
   Momentaner Grid Export/import mit + oder -
   Heutiger Export
   Heutiger Import
3. Die Punkt Animation muss ich die von Hand setzen?
   Könnte man die auf Grund der Werte nicht berechnen?
4. Die Devices myDummy und myDummy1 könnte man doch auch zusammenfassen oder geht das nicht wegen dem .js?

Alles keine Kritik, nur Anregung zum weiteren optimieren.
Wie gesagt, ansonsten gefällt mir das sehr gut.

Gruß

Hubert
 

[schwatter]

Nabend,
das freut mich.

Zu 1. Füge ich hinzu.

Zu.2 Muss ich mal schauen wie ich das einfüge. Der Platz ist etwas begrenzt. Die Ringgröße hätte ich gerne beibehalten. Vielleicht die Namen wie bei HA außerhalb vom Kreis.

Zu 3. Momentan ja. Mal sehen ob ich das noch ändere bzw. ich bin kein Dev. Ich lese sehr viel Daher kann es klappen oder auch nicht.

Zu 4. Jein. Das Problem ist, das ich verhindern muss, das irgendetwas dazu führt, das das Device refreshed wird.
Du kannst einfach das SVG in den myDummy1 in das stateFormat kopieren. Sobald in myDummy1 ein Reading aktualisiert wird,
wird das SVG kurz unterbrochen.

Nimmt man z.B setreading dann passiert es auch:
Der Befehl setzt das Reading <reading> auf den Wert <value> ohne Signale an das betroffene Gerät zu senden, generiert aber Ereignisse und die übliche eventMap und stateFormat Umwandlung wird auch durchgeführt.

Vielleicht hast du eine simple Lösung, die mir gerade nicht einfällt. An Fhem mach ich nur noch etwas, wenn ich was neues brauche. Das kommt selten vor, daher vergesse ich auch vieles wieder mit der Zeit.

Ich habe auch schon an ein Modul gedacht. War da auch schon am Gange. Aber mir fehlt als Laie noch die Idee, wie ich das
ohne trigger am Besten umsetzen kann.
Und ein Modul ist gut und schön, würde im Moment aber auch meinen Rahmen sprengen. Aber ganz weg ist der Gedanke noch nicht.
Ich hatte zum Beispiel schon ein Modul etwas zusammengeschustert. Das hat mir aus den einzelnen Ringen die per attr gesetzt waren, das fertige SVG gebaut.
So könnten Ringe dynamisch hinzugefügt oder deaktiviert werden.
Die internen Funktionen von Fhem gucke ich mir jetzt auch nach und nach an. Um zum Beispiel mal im Modul das Device anzugeben
und auf das das Reading triggert.

Aber die wichtigste Frage an dich oder jemand anderen. Funktioniert der Kram überhaupt so, wie ich ihn oben hochgeladen und
dokumentiert habe?


Gruß schwatter

[carlos]

Hallo Schwatter,
Danke für die Erläuterungen.
Meine Idee wäre das alles in ein doif (mit den entsprechenden DI Readings) zu packen z.b. so:

Code Auswählen Erweitern

defmod myDummy1 DOIF ([myFronius:"^power:.*$"])\
    ( setreading $SELF solar {(ReadingsNum("myFronius","power",0))} )\
    ( setreading $SELF Zyklus solar  ) \
DOELSEIF  ( [mySenec:"^speicherleistung:.*$"] or [mySenec:"^netzleistung:.*$"] or [mySenec:"^stromverbrauch:.*$"] ) \
    ( setreading $SELF battery {(ReadingsNum("mySenec","speicherleistung",0))} ) \
    ( setreading $SELF grid {(ReadingsNum("mySenec","netzleistung",0))} ) \
    ( setreading $SELF house {(ReadingsNum("mySenec","stromverbrauch",0))} )\
( setreading $SELF Zyklus battery/grid/house )\
DOELSEIF  ( [Waschmaschine:"^ENERGY_Power:.*$"] or [Trockner:"^ENERGY_Power:.*$"] or [Spuelmaschine:"^ENERGY_Power:.*$"] ) \
    ( setreading $SELF washer {(ReadingsNum("Waschmaschine","ENERGY_Power",0))} ) \
    ( setreading $SELF dryer {(ReadingsNum("Trockner","ENERGY_Power",0))} ) \
    ( setreading $SELF dishwasher {(ReadingsNum("Spuelmaschine","ENERGY_Power",0))} )\
( setreading $SELF fridge {(fridge("Spuelmaschine","ENERGY_Power","N/A"))} )\
    ( setreading $SELF airdryer {(ReadingsNum("airdryer","ENERGY_Power","N/A"))} )\
( setreading $SELF Zyklus washer/dryer/dishwasher/fridge/airdryer )\
DOELSE\
( setreading $SELF Zyklus nothing  )
attr myDummy1 DOIF_Readings current_total:[myTibber:current_total],\
current_level:[myTibber:current_level],\
speicherfuellstand:[mySenec:speicherfuellstand],\
grid:[mySenec:netzleistung],\
solar:[mySenec:stromerzeugung_total],\
battery:[mySenec:speicherleistung],\
house:[mySenec:stromverbrauch],\
\
dishwasher:[Spuelmaschine:ENERGY_Power],\
washer:[Waschmaschine:ENERGY_Power],\
dryer:[Trockner:ENERGY_Power]\
\

attr myDummy1 room Energy
attr myDummy1 stateFormat <svg width='650' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: auto;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\


setstate myDummy1 <svg width='650' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: auto;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\

setstate myDummy1 2024-10-25 09:45:37 Device mySenec
setstate myDummy1 2024-10-25 09:45:37 Zyklus nothing
setstate myDummy1 2024-10-25 09:44:50 airdryer N/A
setstate myDummy1 2024-10-25 09:45:37 battery 91.76
setstate myDummy1 2024-10-25 09:45:37 cmd 4
setstate myDummy1 2024-10-25 09:45:37 cmd_event mySenec
setstate myDummy1 2024-10-25 09:45:37 cmd_nr 4
setstate myDummy1 2024-10-25 09:39:26 current_level NORMAL
setstate myDummy1 2024-10-25 09:39:26 current_total 0.3388
setstate myDummy1 2024-10-25 09:44:50 dishwasher 0
setstate myDummy1 2024-10-25 09:44:50 dryer 0
setstate myDummy1 2024-10-25 09:45:01 e_Trockner_events ENERGY_Current: 0.026,ENERGY_ReactivePower: 6,ENERGY_Factor: 0.02,ENERGY_Voltage: 235,ENERGY_ApparentPower: 6
setstate myDummy1 2024-10-25 09:45:26 e_myFronius_events Inverter_System_YEAR_ENERGY_Values_1: 8129062,Inverter_System_YEAR_ENERGY_Unit: Wh,Inverter_System_DAY_ENERGY_Values_1: 580,Inverter_System_DAY_ENERGY_Unit: Wh,Inverter_System_TOTAL_ENERGY_Unit: Wh,Inverter_System_TOTAL_ENERGY_Values_1: 33899300,Inverter_System_PAC_Values_1: 771,Inverter_System_PAC_Unit: W,Einspeisung: 43.07,Bezug: 0,Einspeisung_curr: 0,power: 0.771
setstate myDummy1 2024-10-25 09:45:37 e_mySenec_events ERROR: none,lastUpdate: 2024-10-25 09:45:37,connected
setstate myDummy1 2024-10-25 09:45:37 grid -32.78
setstate myDummy1 2024-10-25 09:45:37 house 650.46
setstate myDummy1 2024-10-25 09:44:52 mode enabled
setstate myDummy1 2024-10-25 09:45:36 solar 8128.13
setstate myDummy1 2024-10-25 09:38:37 speicherfuellstand 0.00
setstate myDummy1 2024-10-25 09:45:37 state cmd_4
setstate myDummy1 2024-10-25 09:44:50 washer 0

Über das javascript attribut in WEB könnte man dann parameter übergeben für die Animation.

Code Auswählen Erweitern

JavaScripts
Leerzeichen getrennte Liste von JavaScript Dateien, die geladen werden. Die Dateinamen sind relativ zum www Verzeichnis anzugeben. Für jede Datei wird ein zusätzliches Attribut angelegt, damit der Benutzer dem Skript Parameter weiterreichen kann. Bei diesem Attributnamen werden Verzeichnisname und fhem_ Präfix entfernt und Param als Suffix hinzugefügt. Beispiel:
attr WEB JavaScripts codemirror/fhem_codemirror.js
attr WEB codemirrorParam { "theme":"blackboard", "lineNumbers":true }
Aber da kenne ich mich zuwenig mit JS FHEM aus.

Ich habe das jetzt mal ausprobiert, habe aber wie bei deiner jetzigen Lösung das gleiche Problem, da nach einiger Zeit keine Werte mehr angezeigt werden.
Keina Ahnung an was das liegt, die Werte sind alle durch das di gesetzt.

Gruß

Hubert

[schwatter]

Dein Ansatz mit DOIF hatte ich ja mehr oder weniger schon versucht, siehe DOIF- Bereich. Problem ist immer, der Refresh vom STATE.
Das mit dem JavaCode übergeben im WEB Device, mal sehen ob das uns weiter bringt.

Das die Werte mit der Zeit ausbleiben, hatte ich bis jetzt noch nie. Entweder sie sind da, dann findet das Javascript
alle Readings. Fehlt eins, kommt kommentarlos einfach nichts. Da im Javascript bis jetzt keine Prüfung drinne ist.
Muss ich ergenzen.

Also nochmal ganz dumm gefragt, wenn du es alles so wie im ersten Post anlegst, dann bleiben auch dann irgendwann die Werte aus?
Wie schaut es bei deinem WEB-Device aus. Da habe ich, aber unbewusst von anderen Sachen, z.B das gesetzt:

Code Auswählen Erweitern

attr WEB longpoll 1
attr WEB longpollSVG 1
attr WEB plotEmbed 2
attr WEB plotfork 1

Vielleicht liegt es an longpollSVG?

Gruß schwatter

[carlos]

Ja, die Werte waren gestern da und heute bleiben sie aus.
Ich kann einstellen was ich will.
Im DI myDummy1 sind die Werte da und werden aktualisiert.

Ich hatte bei longpoll auf websocket gestellt.
Ich denke aber, dass es eher am csrfToken attribute liegt.
Habe ich aber auch auch schon none, random ausprobiert.

Gruß

Hubert

[schwatter]

Ok, hast du beide bzw alle Devices in einem Raum?
Dann wird das SVG nur bei dem ersten oberen Device aktualisiert.
Das 2te darunter bekommt dann keine Werte. Da die Readings die gleichen sind.

edit:
bzw ich meine gleiche ID's im SVG. Zum Beispiel  id='solarPower'.
Dann verschluckt sich das. Da müsste bei mehreren SVG eine eindeutige Zuordung pro SVG stattfinden.


Gruß schwatter

[schwatter]

Mahlzeit,


ich habe jetzt erst bemerkt, das ich nicht auf eindeutige, bzw abweichende Readings geachtet habe.
Das fiel mir jetzt bei der Suche, 98_dummy.pm so zu modifizieren, das er STATE nicht updatet, auf die Füße.

Bedeutet, der dummy darf kein Reading haben, welches als gridToHouse benannt ist, da das SVG <animateMotion id='gridToHouse'
auch verwendet. Das führt zwangsläufig zu Konflikten, da Fhem sich das Reading automatisch mit in den STATE zieht.
Bei den 2 dummys hat das irgendwie funktioniert. Das werde ich im .ersten Post nochmal umstellen.

Jetzt habe ich mir zum testen von 98_dummy.pm den Code in 98_dummyNew.pm gepackt. Dann alles im dummy auf dummyNew geändert.
Und diesen Teil:

Code Auswählen Erweitern

  my @rl = split(" ", AttrVal($name, "readingList", ""));
  my $doRet;
  eval {
    if(@rl && grep /^$a[0]$/, @rl) {
      my $v = shift @a;
      readingsSingleUpdate($hash, $v, join(" ",@a), 1);
      $doRet = 1;
    }
  };
  return if($doRet);


zu diesen geändert:

Code Auswählen Erweitern

  my @rl = split(" ", AttrVal($name, "readingList", ""));
  my $doRet;
  eval {
    if(@rl && grep /^$a[0]$/, @rl) {
      my $v = shift @a;
      readingsBeginUpdate($hash);
      readingsBulkUpdate($hash, $v, join(" ",@a), 1);
      readingsEndUpdate($hash, 0);  # Verhindert das Aktualisieren des STATE
      $doRet = 1;
    }
  };
  return if($doRet);


Dadurch kann ich jetzt das aktualisieren des STATE unterdrücken.
Bedeutet, damit ist alles in einem dummy.

98_dummyNew.pm hänge ich nicht an. Wenn würde ich rudolfkoenig fragen, ob er gewillt wäre, das in 98_dummy.pm so ähnlich einzubauen.

Hier meine Raw von meinem dummyNew und die passende svg_update.js

Code Auswählen Erweitern

defmod powerGrid dummyNew
attr powerGrid readingList airdryer_v battery_v batteryState_v batteryToHouse_v dishwasher_v dryer_v fridge_v grid_v gridToBattery_v gridToBatteryState_v gridToLowCarbon_v gridToHouse_v house_v houseToAirdryer_v houseToDishwasher_v houseToDryer_v houseToFridge_v houseToWasher_v solar_v solarToBattery_v solarToGrid_v solarToHouse_v washer_v
attr powerGrid room Energy1
attr powerGrid setList airdryer_v:textField battery_v:textField batteryState_v:select,backward,stop,forward batteryToHouse_v:select,on,off dishwasher_v:textField dryer_v:textField fridge_v:textField grid_v:textField gridToBattery_v:select,backward,stop,forward gridToLowCarbon_v:select,on,off gridToHouse_v:select,on,off house_v:textField houseToAirdryer_v:select,on,off houseToDishwasher_v:select,on,off houseToDryer_v:select,on,off houseToFridge_v:select,on,off houseToWasher_v:select,on,off solar_v:textField solarToBattery_v:select,on,off solarToGrid_v:select,on,off solarToHouse_v:select,on,off washer_v:textField
attr powerGrid stateFormat <svg width='650' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: auto;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\


setstate powerGrid <svg width='650' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: auto;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\

setstate powerGrid 2024-10-27 12:18:18 airdryer_v 799
setstate powerGrid 2024-10-27 12:17:49 batteryState_v backward
setstate powerGrid 2024-10-27 12:09:51 batteryToHouse_v off
setstate powerGrid 2024-10-27 12:09:55 battery_v 50
setstate powerGrid 2024-10-27 12:10:01 dishwasher_v 50
setstate powerGrid 2024-10-27 12:10:05 dryer_v 50
setstate powerGrid 2024-10-27 12:10:08 fridge_v 50
setstate powerGrid 2024-10-27 12:18:38 gridToBattery_v forward
setstate powerGrid 2024-10-27 12:10:28 gridToHouse_v off
setstate powerGrid 2024-10-27 12:17:28 gridToLowCarbon_v off
setstate powerGrid 2024-10-27 12:10:42 grid_v 50
setstate powerGrid 2024-10-27 12:10:44 houseToAirdryer_v off
setstate powerGrid 2024-10-27 12:10:47 houseToDishwasher_v off
setstate powerGrid 2024-10-27 12:10:50 houseToDryer_v off
setstate powerGrid 2024-10-27 12:10:53 houseToFridge_v off
setstate powerGrid 2024-10-27 12:10:55 houseToWasher_v off
setstate powerGrid 2024-10-27 12:10:58 house_v 50
setstate powerGrid 2024-10-27 12:11:01 solarToBattery_v off
setstate powerGrid 2024-10-27 12:11:03 solarToGrid_v off
setstate powerGrid 2024-10-27 12:33:53 solarToHouse_v on
setstate powerGrid 2024-10-27 12:11:09 solar_v 50
setstate powerGrid 2024-10-27 12:12:04 state gridToLowCarbon_v off
setstate powerGrid 2024-10-27 12:11:12 washer_v 50



Gruß schwatter
 

[schwatter]

Nabend,

hier ein Update auf Basis des dummyNew.pm, ein Post höher.


1. das SVG steckt in etwas HTML. Dadurch ist eine automatische Skalierung möglich.
2. das JS erweitert
   - Linien die jetzt bei einem Wert > 0 automatisch gestartet werden: solarToHouse,houseToAirdryer,houseToWasher,houseToDryer,houseToDishwasher,houseToFridge.
   - Linien die jetzt bei einem Wert < 0 automatisch gestartet werden: solarToGrid.
   - Linien die noch keine Logik haben: solarToBattery,gridToBattery,batteryToHouse.
   - Batteryringanimation muss auch manuell gesetzt werden.
3. Low-Carbon ist weiterhin ein dummy

Durch die Anpassung im JS, wird jetzt weniger Logik auf Basis eines notify, DOIF's,..., benötigt.
Verbrauchs- oder Erzeugungswerte müssen auch weiterhin gesetzt werden.

Code Auswählen Erweitern

defmod powerGrid dummyNew
attr powerGrid readingList airdryer_v battery_v batteryState_v batteryToHouse_v dishwasher_v dryer_v fridge_v grid_v gridToBattery_v gridToBatteryState_v gridToLowCarbon_v gridToHouse_v house_v houseToAirdryer_v houseToDishwasher_v houseToDryer_v houseToFridge_v houseToWasher_v solar_v solarToBattery_v solarToGrid_v solarToHouse_v washer_v
attr powerGrid room Energy1
attr powerGrid setList airdryer_v:textField battery_v:textField batteryState_v:select,backward,stop,forward batteryToHouse_v:select,on,off dishwasher_v:textField dryer_v:textField fridge_v:textField grid_v:textField gridToBattery_v:select,backward,stop,forward gridToLowCarbon_v:select,on,off gridToHouse_v:select,on,off house_v:textField houseToAirdryer_v:select,on,off houseToDishwasher_v:select,on,off houseToDryer_v:select,on,off houseToFridge_v:select,on,off houseToWasher_v:select,on,off solar_v:textField solarToBattery_v:select,on,off solarToGrid_v:select,on,off solarToHouse_v:select,on,off washer_v:textField
attr powerGrid stateFormat <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox='0 0 650 500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 90%;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>\


setstate powerGrid <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox='0 0 650 500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 90%;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>\

setstate powerGrid 2024-10-29 20:57:56 airdryer_v 0
setstate powerGrid 2024-10-27 12:48:04 battery 235
setstate powerGrid 2024-10-29 21:05:59 batteryState_v stop
setstate powerGrid 2024-10-29 21:05:41 batteryToHouse_v off
setstate powerGrid 2024-10-29 17:35:22 battery_v 0
setstate powerGrid 2024-10-29 20:59:20 dishwasher_v 0
setstate powerGrid 2024-10-29 20:58:35 dryer_v 0
setstate powerGrid 2024-10-29 20:58:41 fridge_v 0
setstate powerGrid 2024-10-29 17:35:32 gridToBattery_v stop
setstate powerGrid 2024-10-29 18:13:45 gridToHouse_v on
setstate powerGrid 2024-10-29 17:25:37 gridToLowCarbon_v off
setstate powerGrid 2024-10-29 21:19:34 grid_v 2385
setstate powerGrid 2024-10-29 18:13:45 houseToAirdryer_v off
setstate powerGrid 2024-10-29 18:13:45 houseToDishwasher_v off
setstate powerGrid 2024-10-29 18:13:45 houseToDryer_v off
setstate powerGrid 2024-10-29 18:13:45 houseToFridge_v off
setstate powerGrid 2024-10-29 18:13:45 houseToWasher_v off
setstate powerGrid 2024-10-29 17:59:27 house_v 539
setstate powerGrid 2024-10-29 17:25:59 solarToBattery_v off
setstate powerGrid 2024-10-29 18:13:45 solarToGrid_v on
setstate powerGrid 2024-10-29 18:13:45 solarToHouse_v off
setstate powerGrid 2024-10-29 21:00:10 solar_v 1
setstate powerGrid 2024-10-29 20:58:18 washer_v 0



Tip: Prüfungen im JS, um allen Mist abzufangen sind noch nicht komplett umgesetzt. Bleiben Werte aus, einmal im powerGrid Dummy alle "set" durchschalten. Fehlt ein Reading, kommen keine Werte.


Gruß schwatter

[schwatter]

Moin,

ein weiteres Update auf Basis des dummyNew.pm.

- setList und readingList ausgedünnt.
- neue setList für batteryState_v: stop, gridLoad, gridUnload, solarLoad, houseUnload. Je nach Status werden die Linien angesteuert.
- Battery wird zum Housering nur dazugerechnet, wenn der Status houseUnload ist.
- Battery um %-Wert erweitert. Setzen mit battery_p.
- Low-Carbon funktioniert jetzt und kann gesetzt werden.


1.dummy

Code Auswählen Erweitern

defmod powerGrid dummyNew
attr powerGrid readingList airdryer_v battery_v battery_p batteryState_v dishwasher_v dryer_v fridge_v grid_v house_v lowcarbon_v solar_v solarToBattery_v washer_v
attr powerGrid room Energy1
attr powerGrid setList airdryer_v:textField battery_v:textField battery_p:textField batteryState_v:select,stop,gridLoad,gridUnload,solarLoad,houseUnload dishwasher_v:textField dryer_v:textField fridge_v:textField grid_v:textField house_v:textField lowcarbon_v:textField solar_v:textField washer_v:textField
attr powerGrid stateFormat <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox='0 0 650 500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 90%;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="batteryPercent" x="250" y="385" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>\


setstate powerGrid <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox='0 0 650 500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 90%;; height: auto;;'>\
 \
 <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id='lowCarbonCircle' cx='100' cy='100' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='100' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='100' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Low-Carbon</text>\
  <text id='lowCarbonPower' x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 %</text>\
\
  <!-- Solar (Orange) -->\
  <circle id='solarCircle' cx='250' cy='100' r='45' fill='none' stroke='orange' stroke-width='10' opacity='0.4'/>\
  <circle cx='250' cy='100' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='250' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Solar</text>\
  <text id='solarPower' x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Netz (Blau) -->\
  <circle id='gridCircle' cx='100' cy='250' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='100' cy='250' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='100' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Grid</text>\
  <text id='gridPower' x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="batteryPercent" x="250" y="385" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id='batteryCircle' cx='250' cy='400' r='45' fill='none' stroke='turquoise' stroke-width='10' opacity='0.4'/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id='houseCircle' cx='400' cy='250' r='45' fill='none' stroke='purple' stroke-width='10' opacity='0.4'/>\
  <circle id='solarSegment' cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='gridSegment' cx='400' cy='250' r='40' fill='none' stroke='blue' stroke-width='5' stroke-dasharray='0 100' />\
  <circle id='batterySegment' cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='0 100' />\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>House</text>\
  <text id='housePower' x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id='airDryerCircle' cx='400' cy='100' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='100' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Airdryer</text>\
  <text id='airdryerPower' x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <circle id='fridgeCircle' cx='400' cy='400' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='400' cy='400' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='400' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Fridge</text>\
  <text id='fridgePower' x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <circle id='washerCircle' cx='550' cy='100' r='45' fill='none' stroke='yellow' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='100' r='40' fill='none' stroke='yellow' stroke-width='5'/>\
  <text x='550' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Washer</text>\
  <text id='washerPower' x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id='dryerCircle' cx='550' cy='250' r='45' fill='none' stroke='green' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='250' r='40' fill='none' stroke='green' stroke-width='5'/>\
  <text x='550' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dryer</text>\
  <text id='dryerPower' x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id='dishwasherCircle' cx='550' cy='400' r='45' fill='none' stroke='blue' stroke-width='10' opacity='0.4'/>\
  <circle cx='550' cy='400' r='40' fill='none' stroke='blue' stroke-width='5'/>\
  <text x='550' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Dishwasher</text>\
  <text id='dishwasherPower' x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id='batteryToHousePath' d='M 260 354 A 110 100 0 0 1 357 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple'>\
    <animateMotion id='batteryToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 145 A 110 100 0 0 0 357 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToHouse' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id='solarToBatteryPath' d='M 250 145 A 0 100 0 0 1 250 354' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToBattery' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id='houseToAirdryerPath' d='M 400 203 A 0 67 0 0 1 400 145' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToAirdryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToAirdryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id='houseToFridgePath' d='M 400 298 A 0 67 0 0 1 400 354' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToFridge' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToFridgePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id='gridToLowCarbonPath' d='M 100 208 A 0 68 0 0 1 100 145' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='gridToLowCarbon' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToLowCarbonPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id='gridToHousePath' d='M 146 250 H 357' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='gridToHouse' dur='3s' repeatCount='indefinite'>\
      <mpath href='#gridToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id='houseToDryerPath' d='M 446 250 A 0 0 0 0 1 505 250' stroke='green' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='green'>\
    <animateMotion id='houseToDryer' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#houseToDryerPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 446 260 A 110 110 0 0 1 550 354' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue'>\
    <animateMotion id='houseToDishwasher' dur='3s' repeatCount='indefinite'>\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 145 A 110 100 0 0 1 146 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion id='solarToGrid' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 146 260 A 110 100 0 0 1 240 354' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle id="gridToBatteryStatic" r='5' fill='turquoise' style="display:none;;" />\
  <circle id="gridToBatteryForward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryForwardAnim' dur='3s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
  <circle id="gridToBatteryBackward" r='5' fill='turquoise' style="display:none;;">\
    <animateMotion id='gridToBatteryBackwardAnim' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 145 A 110 100 0 0 1 446 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow'>\
    <animateMotion id='houseToWasher' dur='3s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>\

setstate powerGrid 2024-10-31 11:22:56 airdryer_v 210
setstate powerGrid 2024-10-31 11:13:29 batteryState_v houseUnload
setstate powerGrid 2024-10-31 11:21:32 battery_p 33
setstate powerGrid 2024-10-31 11:14:29 battery_v 33
setstate powerGrid 2024-10-31 11:22:59 dishwasher_v 0
setstate powerGrid 2024-10-31 11:24:35 dryer_v 0
setstate powerGrid 2024-10-31 11:24:26 fridge_v 76
setstate powerGrid 2024-10-31 11:24:41 grid_v 489
setstate powerGrid 2024-10-31 11:24:41 house_v 724.1
setstate powerGrid 2024-10-31 11:12:09 lowcarbon_v 9
setstate powerGrid 2024-10-31 11:24:44 solar_v 235.1
setstate powerGrid 2024-10-31 11:24:34 washer_v 0



2. Mein DOIF

Code Auswählen Erweitern

defmod Powergrid_DOIF DOIF ## Grid + House\
([MQTT2_Smartmeter_2E1F50:"APOX_Power"])\
        ( set powerGrid grid_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_Power",0))} )\
        ( set powerGrid house_v {(ReadingsVal("MQTT2_Smartmeter_2E1F50","APOX_Power",0) + ReadingsVal("MQTT2_OpenDTU_585584","power",0))} ) \
\
## Airdryer\
DOELSEIF  ([Luftentfeuchter:"ENERGY_Power"])\
        ( set powerGrid airdryer_v {(ReadingsNum("Luftentfeuchter","ENERGY_Power",0))} )\
\
## Dishwasher\
DOELSEIF  ([MQTT2_zigbee_Geschirrspueler:"power"])\
        ( set powerGrid dishwasher_v {(ReadingsNum("MQTT2_zigbee_Geschirrspueler","power",0))} )\
\
## Dryer\
DOELSEIF  ([MQTT2_zigbee_Trockner:"power"])\
        ( set powerGrid dryer_v {(ReadingsNum("MQTT2_zigbee_Trockner","power",0))} )\
\
## Fridge\
DOELSEIF  ([MQTT2_zigbee_Kuehlschrank:"^power:.*$"])\
        ( set powerGrid fridge_v {(ReadingsNum("MQTT2_zigbee_Kuehlschrank","power",0))} )\
\
## Solar\
DOELSEIF   ([MQTT2_OpenDTU_585584:"power"] )\
        ( set powerGrid solar_v {(ReadingsNum("MQTT2_OpenDTU_585584","power",0))} )\
\
## Washer\
DOELSEIF  ([MQTT2_zigbee_Waschmaschine:"power"])\
        ( set powerGrid washer_v {(ReadingsNum("MQTT2_zigbee_Waschmaschine","power",0))} )\


setstate Powergrid_DOIF cmd_6
setstate Powergrid_DOIF 2024-10-31 11:28:52 Device MQTT2_OpenDTU_585584
setstate Powergrid_DOIF 2024-10-31 11:28:37 cmd 6
setstate Powergrid_DOIF 2024-10-31 11:28:37 cmd_event MQTT2_OpenDTU_585584
setstate Powergrid_DOIF 2024-10-31 11:28:37 cmd_nr 6
setstate Powergrid_DOIF 2024-10-31 11:27:56 e_Luftentfeuchter_events ENERGY_Voltage: 221,ENERGY_Period: 17,ENERGY_Power: 210,ENERGY_Current: 1.498,ENERGY_Factor: 0.63,ENERGY_Yesterday: 0.604,Time: 2024-10-31T12:27:55,ENERGY_Total: 77.216,ENERGY_TotalStartTime: 2024-08-17T10:11:53,ENERGY_ApparentPower: 331,ENERGY_Today: 0.193,ENERGY_ReactivePower: 256
setstate Powergrid_DOIF 2024-10-31 11:28:52 e_MQTT2_OpenDTU_585584_events 116483796003_0_efficiency: 95.247,ForecastToday: 6592 Wh,ForecastTomorrow: 4486 Wh
setstate Powergrid_DOIF 2024-10-31 11:28:37 e_MQTT2_Smartmeter_2E1F50_events StatusSNS_APOX_E_in: 407.821,StatusSNS_APOX_Power: 568,StatusSNS_Time: 2024-10-31T11:28:36
setstate Powergrid_DOIF 2024-10-31 11:28:19 e_MQTT2_zigbee_Geschirrspueler_events current: 0,linkquality: 216,on,voltage: 229,power_outage_memory: restore,energy: 11.15,last_seen: 2024-10-31T11:28:19+01:00,child_lock: UNLOCK,power: 0,countdown: 0,indicator_mode: off/on
setstate Powergrid_DOIF 2024-10-31 11:27:59 e_MQTT2_zigbee_Kuehlschrank_events last_seen: 2024-10-31T11:27:59+01:00,current: 0.37,ON,voltage: 225,child_lock: UNLOCK,linkquality: 172,power: 76,countdown: 0,indicator_mode: off/on,power_outage_memory: restore,energy: 17.98
setstate Powergrid_DOIF 2024-10-31 11:28:28 e_MQTT2_zigbee_Trockner_events energy: 213.93,power_outage_memory: restore,update_state: available,update_installed_version: 77,voltage: 230,on,linkquality: 132,current: 0.03,update_latest_version: 192,indicator_mode: off/on,countdown: 0,power: 15,child_lock: UNLOCK,last_seen: 2024-10-31T11:28:28+01:00
setstate Powergrid_DOIF 2024-10-31 11:27:23 e_MQTT2_zigbee_Waschmaschine_events indicator_mode: off/on,countdown: 0,last_seen: 2024-10-31T11:27:23+01:00,power: 0,child_lock: UNLOCK,power_outage_memory: restore,energy: 248.71,current: 0,update_latest_version: 192,update_state: available,update_installed_version: 77,on,voltage: 228,linkquality: 124
setstate Powergrid_DOIF 2024-10-29 22:09:44 mode enabled
setstate Powergrid_DOIF 2024-10-31 11:28:37 state cmd_6




Gruß schwatter

[carlos]

So langsam ist es perfekt.
Sieht richtig gut aus.
Danke dir.
denkst du noch an

2. Bei Grid evtl gleich 3 Werte:
   Momentaner Grid Export/import mit + oder -
   Heutiger Export
   Heutiger Import

Hier würde ich gerne zugunsten des aktuellen Preises(z.B. von Tibber) auf den heutigen Export/Import verzichten wollen.

Ansonsten gute Arbeit.

Gruß

Hubert

[schwatter]

Nabend,

ah super. Dann kommen endlich die Werte.
Hatte schon gedacht, ich hab etwas vermurkst.

Bei der Batterie bin ich mir noch unschlüssig.
- so lassen.
- maximal 2 Werte im Ring.
- 3 Werte im Ring, Namen außerhalb. Dann für alle.
- extra Readings unter dem Grid, für alles mögliche.

Gruß schwatter

[schwatter]

Nabend,

ich habe einen Kompromiss aus beiden zusammengebaut. Falls es doof aussieht, würde ich die animierten Ringe Haus und Batterie
demnächst versuchen, auch auf animierte Kästen umzubauen. Ganz zufrieden bin ich noch nicht.

Update:
- Grid, Solar, Fridge und Washer auf Kasten mit abgerundeten Ecken umgebaut.
- Grid hat dadurch jetzt 3 Werte (grid_v, grid_in_v, grid_out_v)
- Im JS habe ich die 2 neuen Werte grid_in_v und grid_out_v auf eine Nachkommastelle begrenzt.
- Außerdem sind die angezeigten Bezeichnungen ausnahmsweise kWh. Da mein SmartMeterReader die Werte so ausgibt.
Umrechnen möchte ich nicht, da es Platz spart.

Wer das anpassen möchte im JS, hier sind die Stellen:

Code Auswählen Erweitern

        const gridReadingIn = parseFloat(parseFloat(doc.querySelector("div[informid='powerGrid-grid_in_v']").textContent).toFixed(1));
        const gridReadingOut = parseFloat(parseFloat(doc.querySelector("div[informid='powerGrid-grid_out_v']").textContent).toFixed(1));


        document.getElementById('gridPowerIn').textContent = gridReadingIn + " kWh";
        document.getElementById('gridPowerOut').textContent = gridReadingOut + " kWh";




1.dummyNew

Code Auswählen Erweitern

defmod powerGrid dummyNew
attr powerGrid readingList airdryer_v battery_v battery_p batteryState_v dishwasher_v dryer_v fridge_v grid_v grid_in_v grid_out_v house_v lowcarbon_v solar_v solarToBattery_v washer_v
attr powerGrid room Energy1
attr powerGrid setList airdryer_v:textField battery_v:textField battery_p:textField batteryState_v:select,stop,gridLoad,gridUnload,solarLoad,houseUnload dishwasher_v:textField dryer_v:textField fridge_v:textField grid_v:textField grid_in_v:textField grid_out_v:textField house_v:textField lowcarbon_v:textField solar_v:textField washer_v:textField
attr powerGrid stateFormat <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox="0 0 650 500" xmlns="http://www.w3.org/2000/svg" style="background-color: black;; width: 90%;; height: auto;;">\
 \
 <!-- Titel -->\
  <text x="20" y="30" font-family="Arial" font-size="24" fill="white">Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id="lowCarbonCircle" cx="100" cy="100" r="45" fill="none" stroke="green" stroke-width="10" opacity="0.4"/>\
  <circle cx="100" cy="100" r="40" fill="none" stroke="green" stroke-width="5"/>\
  <text x="100" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Low-Carbon</text>\
  <text id="lowCarbonPower" x="100" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">0 %</text>\
\
  <!-- Solar (Orange) - Glow Kasten -->\
  <rect x="205" y="55" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="orange" stroke-width="10"/>\
  <rect x="210" y="60" rx="20" ry="20" width="80" height="80" fill="none" stroke="orange" stroke-width="5" />\
  <text x="250" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Solar</text>\
  <text id="solarPower" x="250" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Netz (Blau) -->\
  <rect x="55" y="205" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="blue" stroke-width="10"/>\
  <rect x="60" y="210" rx="20" ry="20" width="80" height="80" fill="none" stroke="blue" stroke-width="5" />  \
  <text id="gridPower" x="100" y="235" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text x="100" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Grid</text>\
  <text id="gridPowerIn" x="100" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="gridPowerOut" x="100" y="280" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="batteryPercent" x="250" y="385" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id="batteryCircle" cx="250" cy="400" r="45" fill="none" stroke="turquoise" stroke-width="10" opacity="0.4"/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id="houseCircle" cx="400" cy="250" r="45" fill="none" stroke="purple" stroke-width="10" opacity="0.4"/>\
  <circle id="solarSegment" cx="400" cy="250" r="40" fill="none" stroke="orange" stroke-width="5" stroke-dasharray="0 100" />\
  <circle id="gridSegment" cx="400" cy="250" r="40" fill="none" stroke="blue" stroke-width="5" stroke-dasharray="0 100" />\
  <circle id="batterySegment" cx="400" cy="250" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="0 100" />\
  <text x="400" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">House</text>\
  <text id="housePower" x="400" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id="airDryerCircle" cx="400" cy="100" r="45" fill="none" stroke="blue" stroke-width="10" opacity="0.4"/>\
  <circle cx="400" cy="100" r="40" fill="none" stroke="blue" stroke-width="5"/>\
  <text x="400" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Airdryer</text>\
  <text id="airdryerPower" x="400" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <rect x="355" y="355" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="yellow" stroke-width="10"/>\
  <rect x="360" y="360" rx="20" ry="20" width="80" height="80" fill="none" stroke="yellow" stroke-width="5" />\
  <text x="400" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Fridge</text>\
  <text id="fridgePower" x="400" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <rect x="505" y="55" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="yellow" stroke-width="10"/>\
  <rect x="510" y="60" rx="20" ry="20" width="80" height="80" fill="none" stroke="yellow" stroke-width="5" />\
  <text x="550" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Washer</text>\
  <text id="washerPower" x="550" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id="dryerCircle" cx="550" cy="250" r="45" fill="none" stroke="green" stroke-width="10" opacity="0.4"/>\
  <circle cx="550" cy="250" r="40" fill="none" stroke="green" stroke-width="5"/>\
  <text x="550" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Dryer</text>\
  <text id="dryerPower" x="550" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id="dishwasherCircle" cx="550" cy="400" r="45" fill="none" stroke="blue" stroke-width="10" opacity="0.4"/>\
  <circle cx="550" cy="400" r="40" fill="none" stroke="blue" stroke-width="5"/>\
  <text x="550" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Dishwasher</text>\
  <text id="dishwasherPower" x="550" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id="batteryToHousePath" d="M 260 354 A 110 100 0 0 1 357 260" stroke="purple" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="purple">\
    <animateMotion id="batteryToHouse" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#batteryToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id="solarToHousePath" d="M 260 145 A 110 100 0 0 0 357 240" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToHouse" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id="solarToBatteryPath" d="M 250 145 A 0 100 0 0 1 250 354" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToBattery" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToBatteryPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id="houseToAirdryerPath" d="M 400 203 A 0 67 0 0 1 400 145" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="houseToAirdryer" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToAirdryerPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id="houseToFridgePath" d="M 400 298 A 0 67 0 0 1 400 354" stroke="yellow" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="yellow">\
    <animateMotion id="houseToFridge" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToFridgePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id="gridToLowCarbonPath" d="M 100 208 A 0 68 0 0 1 100 145" stroke="green" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="green">\
    <animateMotion id="gridToLowCarbon" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#gridToLowCarbonPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id="gridToHousePath" d="M 146 250 H 357" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="gridToHouse" dur="3s" repeatCount="indefinite">\
      <mpath href="#gridToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id="houseToDryerPath" d="M 446 250 A 0 0 0 0 1 505 250" stroke="green" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="green">\
    <animateMotion id="houseToDryer" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToDryerPath"/>\
    </animateMotion>\
  </circle>\
\
    <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id="houseToWasherPath" d="M 446 240 A 110 110 0 0 0 550 145" stroke="yellow" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="yellow">\
    <animateMotion id="houseToWasher" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToWasherPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id="houseToDishwasherPath" d="M 446 260 A 110 110 0 0 1 550 354" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="houseToDishwasher" dur="3s" repeatCount="indefinite">\
      <mpath href="#houseToDishwasherPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id="solarToGridPath" d="M 240 145 A 110 100 0 0 1 146 240" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToGrid" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToGridPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id="gridToBatteryPath" d="M 146 260 A 110 100 0 0 1 240 354" stroke="turquoise" stroke-width="2" fill="transparent"/>\
  <circle id="gridToBatteryStatic" r="5" fill="turquoise" style="display:none;;" />\
  <circle id="gridToBatteryForward" r="5" fill="turquoise" style="display:none;;">\
    <animateMotion id="gridToBatteryForwardAnim" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#gridToBatteryPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Batterie zu Netz (Turkis) -->\
  <path id="batteryToGridPath" d="M 240 354 A 110 100 0 0 0 146 260" stroke="turquoise" stroke-width="2" fill="transparent"/>\
  <circle id="batteryToGridForward" r="5" fill="turquoise" style="display:none;;">\
    <animateMotion id="batteryToGridForwardAnim" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#batteryToGridPath"/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>

setstate powerGrid <!DOCTYPE html>\
<html>\
<head>\
<title>powerGrid</title>\
<style>\
#wrapper {\
    background: black;;\
}\
svg {\
    width: 100%;;\
    height: auto;;\
}\
</style>\
</head>\
<body>\
\
<div id="wrapper">\
<svg viewBox="0 0 650 500" xmlns="http://www.w3.org/2000/svg" style="background-color: black;; width: 90%;; height: auto;;">\
 \
 <!-- Titel -->\
  <text x="20" y="30" font-family="Arial" font-size="24" fill="white">Power Flow</text>\
\
  <!-- Kohlenstoffarm (Grün) -->\
  <circle id="lowCarbonCircle" cx="100" cy="100" r="45" fill="none" stroke="green" stroke-width="10" opacity="0.4"/>\
  <circle cx="100" cy="100" r="40" fill="none" stroke="green" stroke-width="5"/>\
  <text x="100" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Low-Carbon</text>\
  <text id="lowCarbonPower" x="100" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">0 %</text>\
\
  <!-- Solar (Orange) - Glow Kasten -->\
  <rect x="205" y="55" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="orange" stroke-width="10"/>\
  <rect x="210" y="60" rx="20" ry="20" width="80" height="80" fill="none" stroke="orange" stroke-width="5" />\
  <text x="250" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Solar</text>\
  <text id="solarPower" x="250" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Netz (Blau) -->\
  <rect x="55" y="205" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="blue" stroke-width="10"/>\
  <rect x="60" y="210" rx="20" ry="20" width="80" height="80" fill="none" stroke="blue" stroke-width="5" />  \
  <text id="gridPower" x="100" y="235" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text x="100" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Grid</text>\
  <text id="gridPowerIn" x="100" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="gridPowerOut" x="100" y="280" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie Label -->\
  <text x="250" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Battery</text>\
  <text id="batteryPower" x="250" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
  <text id="batteryPercent" x="250" y="385" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Batterie stop (Turkis) -->\
  <circle id="batteryCircle" cx="250" cy="400" r="45" fill="none" stroke="turquoise" stroke-width="10" opacity="0.4"/>\
  <circle id="batteryStatic" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5"/>\
\
  <!-- Batterie dreht links -->\
  <circle id="batteryClockwise" cx="250" cy="400" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Batteriering dreht rechts -->\
  <circle id="batteryCounterClockwise" cx="250" cy="400" r="40" fill="none" stroke="turquoise" stroke-width="5" stroke-dasharray="9 5" stroke-dashoffset="3" style="display:none;;">\
    <animateTransform attributeName="transform" type="rotate" from="0 250 400" to="-360 250 400" dur="5s" repeatCount="indefinite" />\
  </circle>\
\
  <!-- Haus + Ringsegmente -->\
  <circle id="houseCircle" cx="400" cy="250" r="45" fill="none" stroke="purple" stroke-width="10" opacity="0.4"/>\
  <circle id="solarSegment" cx="400" cy="250" r="40" fill="none" stroke="orange" stroke-width="5" stroke-dasharray="0 100" />\
  <circle id="gridSegment" cx="400" cy="250" r="40" fill="none" stroke="blue" stroke-width="5" stroke-dasharray="0 100" />\
  <circle id="batterySegment" cx="400" cy="250" r="40" fill="none" stroke="purple" stroke-width="5" stroke-dasharray="0 100" />\
  <text x="400" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">House</text>\
  <text id="housePower" x="400" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Lufttrockner (Blau) -->\
  <circle id="airDryerCircle" cx="400" cy="100" r="45" fill="none" stroke="blue" stroke-width="10" opacity="0.4"/>\
  <circle cx="400" cy="100" r="40" fill="none" stroke="blue" stroke-width="5"/>\
  <text x="400" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Airdryer</text>\
  <text id="airdryerPower" x="400" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <rect x="355" y="355" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="yellow" stroke-width="10"/>\
  <rect x="360" y="360" rx="20" ry="20" width="80" height="80" fill="none" stroke="yellow" stroke-width="5" />\
  <text x="400" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Fridge</text>\
  <text id="fridgePower" x="400" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <rect x="505" y="55" rx="25" ry="25" width="90" height="90" fill="none" opacity="0.3" stroke="yellow" stroke-width="10"/>\
  <rect x="510" y="60" rx="20" ry="20" width="80" height="80" fill="none" stroke="yellow" stroke-width="5" />\
  <text x="550" y="100" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Washer</text>\
  <text id="washerPower" x="550" y="115" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Trockner (Grün) -->\
  <circle id="dryerCircle" cx="550" cy="250" r="45" fill="none" stroke="green" stroke-width="10" opacity="0.4"/>\
  <circle cx="550" cy="250" r="40" fill="none" stroke="green" stroke-width="5"/>\
  <text x="550" y="250" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Dryer</text>\
  <text id="dryerPower" x="550" y="265" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Geschirrspüler (Blau) -->\
  <circle id="dishwasherCircle" cx="550" cy="400" r="45" fill="none" stroke="blue" stroke-width="10" opacity="0.4"/>\
  <circle cx="550" cy="400" r="40" fill="none" stroke="blue" stroke-width="5"/>\
  <text x="550" y="400" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle">Dishwasher</text>\
  <text id="dishwasherPower" x="550" y="415" font-family="Arial" font-size="12" fill="white" text-anchor="middle" alignment-baseline="middle"></text>\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) --> \
  <path id="batteryToHousePath" d="M 260 354 A 110 100 0 0 1 357 260" stroke="purple" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="purple">\
    <animateMotion id="batteryToHouse" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#batteryToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id="solarToHousePath" d="M 260 145 A 110 100 0 0 0 357 240" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToHouse" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange) -->\
  <path id="solarToBatteryPath" d="M 250 145 A 0 100 0 0 1 250 354" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToBattery" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToBatteryPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <path id="houseToAirdryerPath" d="M 400 203 A 0 67 0 0 1 400 145" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="houseToAirdryer" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToAirdryerPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <path id="houseToFridgePath" d="M 400 298 A 0 67 0 0 1 400 354" stroke="yellow" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="yellow">\
    <animateMotion id="houseToFridge" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToFridgePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <path id="gridToLowCarbonPath" d="M 100 208 A 0 68 0 0 1 100 145" stroke="green" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="green">\
    <animateMotion id="gridToLowCarbon" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#gridToLowCarbonPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <path id="gridToHousePath" d="M 146 250 H 357" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="gridToHouse" dur="3s" repeatCount="indefinite">\
      <mpath href="#gridToHousePath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <path id="houseToDryerPath" d="M 446 250 A 0 0 0 0 1 505 250" stroke="green" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="green">\
    <animateMotion id="houseToDryer" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToDryerPath"/>\
    </animateMotion>\
  </circle>\
\
    <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id="houseToWasherPath" d="M 446 240 A 110 110 0 0 0 550 145" stroke="yellow" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="yellow">\
    <animateMotion id="houseToWasher" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#houseToWasherPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id="houseToDishwasherPath" d="M 446 260 A 110 110 0 0 1 550 354" stroke="blue" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="blue">\
    <animateMotion id="houseToDishwasher" dur="3s" repeatCount="indefinite">\
      <mpath href="#houseToDishwasherPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id="solarToGridPath" d="M 240 145 A 110 100 0 0 1 146 240" stroke="orange" stroke-width="2" fill="transparent"/>\
  <circle r="5" fill="orange">\
    <animateMotion id="solarToGrid" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#solarToGridPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id="gridToBatteryPath" d="M 146 260 A 110 100 0 0 1 240 354" stroke="turquoise" stroke-width="2" fill="transparent"/>\
  <circle id="gridToBatteryStatic" r="5" fill="turquoise" style="display:none;;" />\
  <circle id="gridToBatteryForward" r="5" fill="turquoise" style="display:none;;">\
    <animateMotion id="gridToBatteryForwardAnim" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#gridToBatteryPath"/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Batterie zu Netz (Turkis) -->\
  <path id="batteryToGridPath" d="M 240 354 A 110 100 0 0 0 146 260" stroke="turquoise" stroke-width="2" fill="transparent"/>\
  <circle id="batteryToGridForward" r="5" fill="turquoise" style="display:none;;">\
    <animateMotion id="batteryToGridForwardAnim" dur="3s" repeatCount="indefinite" keyPoints="0;;1" keyTimes="0;;1">\
      <mpath href="#batteryToGridPath"/>\
    </animateMotion>\
  </circle>\
\
</svg>\
</div>\
</body>\
</html>
setstate powerGrid 2024-11-09 19:27:38 airdryer_v 0
setstate powerGrid 2024-11-09 19:28:25 batteryState_v stop
setstate powerGrid 2024-11-01 12:43:15 battery_p 100
setstate powerGrid 2024-11-01 12:43:35 battery_v 0
setstate powerGrid 2024-11-09 19:28:38 dishwasher_v 0
setstate powerGrid 2024-11-09 19:29:17 dryer_v 0
setstate powerGrid 2024-11-09 19:28:12 fridge_v 0
setstate powerGrid 2024-11-09 19:29:14 grid_in_v 485.170
setstate powerGrid 2024-11-09 19:29:14 grid_out_v 81.575
setstate powerGrid 2024-11-09 19:29:14 grid_v 364
setstate powerGrid 2024-11-09 19:29:14 house_v 364
setstate powerGrid 2024-11-03 17:52:47 lowcarbon_v 0
setstate powerGrid 2024-11-09 19:29:15 solar_v 0
setstate powerGrid 2024-11-09 19:29:16 washer_v 0



2. Mein DOIF

Code Auswählen Erweitern

defmod Powergrid_DOIF DOIF ## Grid + House\
([MQTT2_Smartmeter_2E1F50:"APOX_Power"])\
        ( set powerGrid grid_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_Power",0))} )\
        ( set powerGrid grid_in_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_E_in",0))} )\
        ( set powerGrid grid_out_v {(ReadingsNum("MQTT2_Smartmeter_2E1F50","APOX_E_out",0))} )\
        ( set powerGrid house_v {(ReadingsVal("MQTT2_Smartmeter_2E1F50","APOX_Power",0) + ReadingsVal("MQTT2_OpenDTU_585584","power",0))} ) \
\
## Airdryer\
DOELSEIF  ([Luftentfeuchter:"ENERGY_Power"])\
        ( set powerGrid airdryer_v {(ReadingsNum("Luftentfeuchter","ENERGY_Power",0))} )\
\
## Dishwasher\
DOELSEIF  ([MQTT2_zigbee_Geschirrspueler:"power"])\
        ( set powerGrid dishwasher_v {(ReadingsNum("MQTT2_zigbee_Geschirrspueler","power",0))} )\
\
## Dryer\
DOELSEIF  ([MQTT2_zigbee_Trockner:"power"])\
        ( set powerGrid dryer_v {(ReadingsNum("MQTT2_zigbee_Trockner","power",0))} )\
\
## Fridge\
DOELSEIF  ([MQTT2_zigbee_Kuehlschrank:"^power:.*$"])\
        ( set powerGrid fridge_v {(ReadingsNum("MQTT2_zigbee_Kuehlschrank","power",0))} )\
\
## Solar\
DOELSEIF   ([MQTT2_OpenDTU_585584:"power"] )\
        ( set powerGrid solar_v {(ReadingsNum("MQTT2_OpenDTU_585584","power",0))} )\
\
## Washer\
DOELSEIF  ([MQTT2_zigbee_Waschmaschine:"power"])\
        ( set powerGrid washer_v {(ReadingsNum("MQTT2_zigbee_Waschmaschine","power",0))} )\


setstate Powergrid_DOIF cmd_6
setstate Powergrid_DOIF 2024-11-08 20:35:49 Device MQTT2_OpenDTU_585584
setstate Powergrid_DOIF 2024-11-08 20:35:49 cmd 6
setstate Powergrid_DOIF 2024-11-08 20:35:49 cmd_event MQTT2_OpenDTU_585584
setstate Powergrid_DOIF 2024-11-08 20:35:49 cmd_nr 6
setstate Powergrid_DOIF 2024-11-08 20:32:40 e_Luftentfeuchter_events ENERGY_Period: 0,ENERGY_Today: 0.447,ENERGY_TotalStartTime: 2024-08-17T10:11:53,ENERGY_ApparentPower: 0,ENERGY_Yesterday: 0.516,ENERGY_Current: 0.000,ENERGY_Factor: 0.00,Time: 2024-11-08T21:32:40,ENERGY_ReactivePower: 0,ENERGY_Power: 0,ENERGY_Total: 82.747,ENERGY_Voltage: 0
setstate Powergrid_DOIF 2024-11-08 20:35:49 e_MQTT2_OpenDTU_585584_events is_valid: 1,ForecastToday: 864 Wh,ForecastTomorrow: 8497 Wh
setstate Powergrid_DOIF 2024-11-08 20:35:39 e_MQTT2_Smartmeter_2E1F50_events StatusSNS_APOX_Power: 264,StatusSNS_APOX_E_in: 475.202,StatusSNS_Time: 2024-11-08T20:35:39
setstate Powergrid_DOIF 2024-11-08 20:35:47 e_MQTT2_zigbee_Geschirrspueler_events on,last_seen: 2024-11-08T20:35:47+01:00,linkquality: 236,power_outage_memory: restore,energy: 14.1,power: 0,countdown: 0,indicator_mode: off/on,voltage: 226,current: 0,child_lock: UNLOCK
setstate Powergrid_DOIF 2024-11-08 20:33:13 e_MQTT2_zigbee_Kuehlschrank_events energy: 23.54,power: 0,power_outage_memory: restore,linkquality: 188,ON,last_seen: 2024-11-08T20:33:13+01:00,current: 0,child_lock: UNLOCK,voltage: 226,indicator_mode: off/on,countdown: 0
setstate Powergrid_DOIF 2024-11-08 20:35:12 e_MQTT2_zigbee_Trockner_events countdown: 0,child_lock: UNLOCK,voltage: 226,update_state: available,on,energy: 215.15,linkquality: 140,indicator_mode: off/on,current: 0,update_installed_version: 77,last_seen: 2024-11-08T20:35:12+01:00,update_latest_version: 192,power_outage_memory: restore,power: 0
setstate Powergrid_DOIF 2024-11-08 20:35:44 e_MQTT2_zigbee_Waschmaschine_events on,linkquality: 116,energy: 251.09,countdown: 0,voltage: 229,update_state: available,child_lock: UNLOCK,last_seen: 2024-11-08T20:35:44+01:00,update_latest_version: 192,update_installed_version: 77,power_outage_memory: restore,power: 0,indicator_mode: off/on,current: 0
setstate Powergrid_DOIF 2024-11-08 20:12:30 mode enabled
setstate Powergrid_DOIF 2024-11-08 20:35:49 state cmd_6



Gruß schwatter

[schwatter]

Tag,

ich musste das SVG, bzw die Linie von Haus zu Waschmaschine fixen. Ich hatte die Linie damals falschherum gebaut.
Sprich der Startpunkt war an der Waschmaschine und bewegte sich zum Haus. Als Workaround hatte ich keyPoints="1;0" gesetzt.
Jetzt gerade ist mir aufgefallen, alle meine Browser kommen damit klar. Aber Fully auf meinem Tablet nicht...
Daher, Linie drehen und keyPoints="0;1". 

Das Update ist einen Post höher in der Raw von 1.dummyNew.

edit:
Bei gridUnload ist bei Fully der selbe Effekt. Der Startpunkt ist bei Grid. Bei Batterie laden ist die Animation zur Batterie. Bei entladen ins Netzt aber auch zur Batterie...
Am PC mit Chrome ist es ok.

Gruß schwatter

[schwatter]

Und noch ein Update.

Wegen Fully musste ich eine identische Linie von Batterie zu Netz einfügen. Die beiden Linien sind überlagert und haben
unterschiedliche Startpunkte. Einen Fehler im JS, welcher eine Linie nicht abgeschaltet hat, habe ich auch noch entdeckt
und gefixt.

Die Änderungen sind in Post #18 eingeflossen.

Gruß schwatter

[schwatter]

Nabend,

ich habe jetzt Low-Carbon mit eingebunden.

- Im SVG umbenannt in FossilFree
- Ein HTTPMOD zum auslesen erstellt
- Die Linie zu FossilFree musste ich nochmal drehen. Der animierte Punkt wandert nun von FossilFree zu Grid
- Der animierte Punkt wird jetzt nur vom JS angesteuert, wenn Grid > 0 ist oder die Batterie den Status gridLoad hat.

Im Moment nutze ich nur noch den modifizierten Dummy. Deshalb habe ich alles im ersten Post daraufhin überarbeitet.

Gruß schwatter

[schwatter]

Nabend

Update im ersten Post. Geändert dummy + svg_update.js

- Das SVG wieder auf viele Ringe geändert. Außer Grid.
- Neue Farben.
- Verbindungslinie von Netz zu Haus und Solar zu Batterie vermischt. Damit der animierte Punkt von Solar zu Batterie nicht mehr drunter fährt.
- JS angepasst. Jetzt verschwinden die Punkte bei Stop und ruhen nicht mehr.

Gruß schwatter

[ch.eick]

Hallo zusammen,
tolle Arbeit!

Ich verwende seit geraumer Zeit das doif im Perl Modus, da stecken extrem viele Möglichkeiten in Bezug auf GUI drin und andere Devices wie das Dummy  fallen weg.

Als Beispiel von mir schaut euch mal das WR_1_ctl an. Da habe ich
- Diagramme im uiState
- Pulldown Menüs im uiState
- Statistiken im uiTable
drin.

Wenn man da das Flowchart ins stateFormat unter kriegen könnte wäre alles schön zusammen.

Ein Bild kommt gleich...

VG Christian

[schwatter]

Morgen,

das freut mich. Ich bin auch der Freund von "alles in einem Device". Aber manchmal muss man akzeptieren, das das nicht
immer harmonisch zusammen funktioniert. Deswegen habe ich den dummy im ersten Post modifiziert, damit ein refresh des
STATE unterdrückt wird. Bzw, werden alle Werte im Hintergrund gesetzt, aber die Seitenansicht wird nicht neu geladen.
Ohne das, werden die Animationen unterbrochen und starten abrupt von vorne.

Bei DOIF oder auch dummy ist es bis jetzt nicht möglich, das zu unterbinden. Das SVG ist quasi nur ein stiller Platzhalter, welcher vom JS gefüttert wird.

Falls du es mit deinem DOIF zusammen benutzen willst, würde ich dir attr subType vorschlagen. Nutz du für alle Devices den
selben subType, sieht es so aus, als wenn diese zusammengehören.


Gruß schwatter

[ch.eick]

Falls du es mit deinem DOIF zusammen benutzen willst, würde ich dir attr subType vorschlagen. Nutz du für alle Devices den
selben subType, sieht es so aus, als wenn diese zusammengehören.

Das attr subType kenne ich noch nicht, muss ich mich mal einlesen, was das bewirkt.

EDIT: Im DOIF Perl Modus kann ich kein attr subType finden und verstehe auch nicht wofür das sein soll.

[schwatter]

Mahlzeit,

Update im ersten Post. Geändert dummy + svg_update.js

- Nicht existente Readings werden jetzt abgefangen und mit "n/a" gesetzt. Damit ist es leichter, unerwünschte Ringe im SVG zu löschen.
- Batteriering färbt sich je nach Status ein. Zum Beispiel bei solarLoad in gelb.

Gruß schwatter

[Wzut]

Code Auswählen Erweitern

      readingsSingleUpdate($hash, $v, join(" ",@a), 1);
vs.
      readingsBeginUpdate($hash);
      readingsBulkUpdate($hash, $v, join(" ",@a), 1);
      readingsEndUpdate($hash, 0);  # Verhindert das Aktualisieren des STATE


Dadurch kann ich jetzt das aktualisieren des STATE unterdrücken.

schaut man sich den Quellcode von readingsSingleUpdate und readingsBulkUpdate in fhem.pl an, dann stellt man fest das ein readingsSingleUpdate in Wahrheit auch dort der Dreizeiler aus  readingsBeginUpdate , readingsBulkUpdate und readingsEndUpdate ist. Was du meinst mit "aktualisieren des STATE unterdrücken" ist das verhindern eines Events. Das wird durch den vierten Parameter $dotrigger bei readingsSingleUpdate geregelt.
Der wird eine Zeile später als zweiter Parameter direkt an readingsEndUpdate weitergegeben.
D.h. eigenlich müsste es reichen bei Rudis Original nur $dotrigger (1 -> 0) zu ändern :

Code Auswählen Erweitern

readingsSingleUpdate($hash, $v, join(" ",@a), 0);

[schwatter]

Vielen Dank, das funktioniert! Ändere ich.

Gruß schwatter

[schwatter]

@ch.eick

Habe gerade erst gesehen, das du per Edit in deinem Post nochmal geantwortet hast.
subType muss in Global gesetzt werden, danach kann ein eigener subType in Devices gesetzt werden.

Code Auswählen Erweitern

attr global userattr subType
Vorsicht, falls da schon etwas steht, nur ergänzen.

Gruß schwatter

[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.

Code Auswählen Erweitern

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]

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:

Code Auswählen Erweitern

fhem?detail=Powergrid_DOIF line 815:
TypeError: svg is null

Hier mein DOIF:

Code Auswählen Erweitern

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.

[schwatter]

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.

Code Auswählen Erweitern

fhem?detail=Powergrid_DOIF line 1636:
Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
Das ist der Teil im SVG

Code Auswählen Erweitern

function adjustViewBox() {
                    const svg = document.querySelector('#powerGrid svg');
                    if (window.innerWidth < 1200) {
                      svg.setAttribute('viewBox', '0 0 500 500');
                    } else {
                      svg.setAttribute('viewBox', '0 0 650 500');
                    }
                  }
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.

[schwatter]

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

Code Auswählen Erweitern

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

[schwatter]

Hast PM

Gruß

[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

[schwatter]

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

Code Auswählen Erweitern

/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

Code Auswählen Erweitern

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