PowerFlow in Doif mit SVG

[schwatter]

Nabend,

ich bastel gerade an einem stateFormat mit <svg ... </svg>. In diesem Fall ist es ein DOIF. Es kann aber genauso gut jedes andere Device sein,
welches stateFormat anbietet.

Meine Frage ist, kann ich irgendwie Perlcode in das SVG einschleusen? Zum Beispiel hatte ich Versucht einen Wert dynamisch einzulesen,
hier wird aber lediglich der Code angezeigt, anstatt das Ergebnis. Daher geh ich davon, das der Code nicht als solcher interpretiert wird.

Ein Beispiel:

Code Auswählen Erweitern

<text x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>{ReadingsVal('MQTT2_Smartmeter_2E1F50','APOX_Power',0)} W</text>


Hier ist die Raw Definition dazu.

Code Auswählen Erweitern

defmod svgDOIF DOIF ([MQTT2_Smartmeter_2E1F50:APOX_Power] or [MQTT2_OpenDTU_585584:power]) \
  (set svgDOIF state)
attr svgDOIF room Energy
attr svgDOIF stateFormat {"\
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 30%;; height: 30%;;'>\
  \
  <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Low-carbon -->\
  <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 x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Solar -->\
  <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 x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>1685 W</text>\
\
  <!-- Grid -->\
  <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 x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>-222 W</text>\
\
  <!-- Verbindungslinie von Grid zu Low-carbon -->\
  <line x1='100' y1='210' x2='100' y2='140' stroke='green' stroke-width='2'/>\
  <circle cx='100' cy='210' r='5' fill='green'>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Verbindungslinie von Grid zu Haus -->\
  <line x1='140' y1='250' x2='360' y2='250' stroke='blue' stroke-width='2'/>\
  <circle cx='140' cy='250' r='5' fill='blue'>\
    <animate attributeName='cx' values='140;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Battery -->\
  <circle cx='250' cy='400' r='40' fill='none' stroke='pink' stroke-width='5'/>\
  <text x='250' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Battery</text>\
  <text x='250' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>53 %</text>\
\
  <!-- Air-dryer -->\
  <circle cx='400' cy='100' r='40' fill='none' stroke='purple' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Air-dryer</text>\
  <text x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>213 W</text>\
\
  <!-- Haus -->\
  <circle cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Haus</text>\
  <text x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>963 W</text>\
\
  <!-- Water Heater -->\
  <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'>Water Heater</text>\
  <text x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>500 W</text>\
\
  <!-- Verbindungslinien -->\
  <line x1='250' y1='140' x2='250' y2='360' stroke='orange' stroke-width='2'/>\
  <circle cx='250' cy='140' r='5' fill='orange'>\
    <animate attributeName='cy' values='140;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <line x1='400' y1='210' x2='400' y2='140' stroke='purple' stroke-width='2'/>\
  <circle cx='400' cy='210' r='5' fill='purple'>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <line x1='400' y1='290' x2='400' y2='360' stroke='yellow' stroke-width='2'/>\
  <circle cx='400' cy='290' r='5' fill='yellow'>\
    <animate attributeName='cy' values='290;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus -->\
  <path id='solarToHousePath' d='M 250 140 A 110 100 0 0 0 360 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Grid -->\
  <path id='solarToGridPath' d='M 250 140 A 110 100 0 0 1 142 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Grid zu Battery -->\
  <path id='gridToBatteryPath' d='M 142 250 A 110 100 0 0 1 250 360' stroke='pink' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='pink'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Battery zu Haus -->\
  <path id='batteryToHousePath' d='M 250 360 A 110 100 0 0 1 350 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
"}\

attr svgDOIF webCmd update

setstate svgDOIF \
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' style='background-color: black;; width: 30%;; height: 30%;;'>\
  \
  <!-- Titel -->\
  <text x='20' y='30' font-family='Arial' font-size='24' fill='white'>Power Flow</text>\
\
  <!-- Low-carbon -->\
  <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 x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Solar -->\
  <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 x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>1685 W</text>\
\
  <!-- Grid -->\
  <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 x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>-222 W</text>\
\
  <!-- Verbindungslinie von Grid zu Low-carbon -->\
  <line x1='100' y1='210' x2='100' y2='140' stroke='green' stroke-width='2'/>\
  <circle cx='100' cy='210' r='5' fill='green'>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Verbindungslinie von Grid zu Haus -->\
  <line x1='140' y1='250' x2='360' y2='250' stroke='blue' stroke-width='2'/>\
  <circle cx='140' cy='250' r='5' fill='blue'>\
    <animate attributeName='cx' values='140;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Battery -->\
  <circle cx='250' cy='400' r='40' fill='none' stroke='pink' stroke-width='5'/>\
  <text x='250' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Battery</text>\
  <text x='250' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>53 %</text>\
\
  <!-- Air-dryer -->\
  <circle cx='400' cy='100' r='40' fill='none' stroke='purple' stroke-width='5'/>\
  <text x='400' y='100' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Air-dryer</text>\
  <text x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>213 W</text>\
\
  <!-- Haus -->\
  <circle cx='400' cy='250' r='40' fill='none' stroke='orange' stroke-width='5'/>\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>Haus</text>\
  <text x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>963 W</text>\
\
  <!-- Water Heater -->\
  <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'>Water Heater</text>\
  <text x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>500 W</text>\
\
  <!-- Verbindungslinien -->\
  <line x1='250' y1='140' x2='250' y2='360' stroke='orange' stroke-width='2'/>\
  <circle cx='250' cy='140' r='5' fill='orange'>\
    <animate attributeName='cy' values='140;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <line x1='400' y1='210' x2='400' y2='140' stroke='purple' stroke-width='2'/>\
  <circle cx='400' cy='210' r='5' fill='purple'>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <line x1='400' y1='290' x2='400' y2='360' stroke='yellow' stroke-width='2'/>\
  <circle cx='400' cy='290' r='5' fill='yellow'>\
    <animate attributeName='cy' values='290;;360' dur='2s' repeatCount='indefinite'/>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus -->\
  <path id='solarToHousePath' d='M 250 140 A 110 100 0 0 0 360 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Grid -->\
  <path id='solarToGridPath' d='M 250 140 A 110 100 0 0 1 142 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Grid zu Battery -->\
  <path id='gridToBatteryPath' d='M 142 250 A 110 100 0 0 1 250 360' stroke='pink' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='pink'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Battery zu Haus -->\
  <path id='batteryToHousePath' d='M 250 360 A 110 100 0 0 1 350 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\

setstate svgDOIF 2024-10-06 21:00:34 Device MQTT2_OpenDTU_585584
setstate svgDOIF 2024-10-06 20:48:08 cmd 1
setstate svgDOIF 2024-10-06 20:48:08 cmd_event MQTT2_OpenDTU_585584
setstate svgDOIF 2024-10-06 20:48:08 cmd_nr 1
setstate svgDOIF 2024-10-06 21:00:34 e_MQTT2_OpenDTU_585584_power 0
setstate svgDOIF 2024-10-06 21:00:20 e_MQTT2_Smartmeter_2E1F50_APOX_Power 377
setstate svgDOIF 2024-10-06 19:54:25 mode enabled
setstate svgDOIF 2024-10-06 20:48:08 state cmd_1
Gruß schwatter

[Damian]

Durch die geschweiften Klammern bist du doch schon in Perl, daher:

...<text x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>".ReadingsVal('MQTT2_Smartmeter_2E1F50','APOX_Power',0)."W</text>...

[schwatter]

Ahh..Danke! Da hab ich zu kompliziert gedacht. Funktioniert.

Gruß schwatter

[TomLee]

...<text x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>".ReadingsVal('MQTT2_Smartmeter_2E1F50','APOX_Power',0)."W</text>...

Hallo,

weil ich mich zufällig heute mit der Thematik mal wieder auch bei mir beschäftigt habe ...

Wenn ich den Aufbau der Ausgabe von stateFormat sehe, würd ich mir den nicht "versauen", indem ich in der Ausgabe (also das in "") irgendwas deklariere. Je mehr dazu kommt, umso unübersichtlicher wird es.

Alles vorher in Variablen schreiben und diese nur in der Ausgabe angeben, hab ich für mich festgestellt ist eine gute Variante zu gehen. Dann spart man sich auch das lästige concat :

So mein ich das:

attr svgDOIF stateFormat {\
my $power = ReadingsVal('MQTT2_Smartmeter_2E1F50','APOX_Power',0);\
"\
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg'; style='background-color: black;; width: 30%;; height: 30%;;'>\
  \
  <!-- Titel -->\...

...<text x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$power W</text>...

...<!-- Verbindungslinie von Battery zu Haus -->\
  <path id='batteryToHousePath' d='M 250 360 A 110 100 0 0 1 350 250' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange'>\
    <animateMotion dur='2s' repeatCount='indefinite'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
"}\

Gruß Thomas

[schwatter]

Da ich mich in einem DOIF befinde, kam mir jetzt die Idee, ich kann ja die Flows durch Vergleiche wie => oder =< vergleichen und so SVG-Werte manipulieren.
Sprich Flow vorwärts,rückwärts,stoppen. Dazu möchte ich Werte in das Device selber schreiben.
Nur wie packe ich einen Wert wie diesen in ein z.B setreading?

Code Auswählen Erweitern

'290;360'
Der ganze Code sieht so aus.

Code Auswählen Erweitern

  <!-- Verbindungslinie von Haus zu Kühlschrank -->
  <line x1='400' y1='290' x2='400' y2='360' stroke='yellow' stroke-width='2'/>
  <circle cx='400' cy='290' r='5' fill='yellow'>
    <animate attributeName='cy' values='290;360' dur='2s' repeatCount='indefinite' >
  </circle>
Das Problem ist das ";" Zeichen, welches in Fhem einen Trenner darstellt. Wie kann ich das maskieren?


Gruß schwatter

[TomLee]

Das Problem ist das ";" Zeichen, welches in Fhem einen Trenner darstellt. Wie kann ich das maskieren?

Verdoppeln ?


Aber warum müssen die Werte in ein Reading ?

[schwatter]

Boa....stimmt. Ich hab schon so lange nichts mehr in Fhem gemacht, das ich das alles schon wieder vergessen habe...
Danke, funktioniert!

Gruß schwatter

[schwatter]

Nabend,

da alles was hier vorher passiert ist dazu gehört, habe ich das Thema umbenannt und nach DOIF verschoben.

Hier mein 2ter Versuch einen PowerFlow in DOIF mit SVG zu bauen.

Code Auswählen Erweitern

defmod svgDOIF DOIF ## Mein Trigger\
([MQTT2_Smartmeter_2E1F50:"^StatusSNS_APOX_Power:.*$"])\
\
## Animierter Punkt von Haus zu Kühlschrank (an|aus)\
   (IF ([MQTT2_zigbee_Kuehlschrank:power] > 0)\
(setreading 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)\
(setreading 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)\
(setreading 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)\
(setreading svgDOIF style_dishwasher '')  )\
   (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)\
(setreading 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 )\
(setreading 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_OpenDTU_585584:power] > [MQTT2_Smartmeter_2E1F50:APOX_Power])\
(setreading svgDOIF style_solarToGrid '') )\
   (IF ([MQTT2_OpenDTU_585584:power] < [MQTT2_Smartmeter_2E1F50:APOX_Power])\
(setreading svgDOIF style_solarToGrid style="display: none;;;;") )\

attr svgDOIF do always
attr svgDOIF room 14.PV,Energy
attr svgDOIF stateFormat {\
\
my $airdryer = ReadingsVal('Luftentfeuchter','ENERGY_Power',0);;  # Wert für deb Ring Lufttrockner\
my $dishwasher= ReadingsVal('MQTT2_zigbee_Geschirrspueler','power',0);;  # Wert für den Ring Geschirrspüler\
my $dryer= ReadingsVal('MQTT2_zigbee_Trockner','power',0);;  # Wert für den Ring Trockner\
my $fridge = ReadingsVal('MQTT2_zigbee_Kuehlschrank','power',0);;  # Wert für den Ring Kühlschrank\
my $grid = ReadingsVal('MQTT2_Smartmeter_2E1F50','APOX_Power',0);;  # Wert für den Ring Netz\
my $house = ReadingsVal('pvTest','consumption_fp',0);;  # Wert für den Ring Haus\
my $solar = ReadingsVal('MQTT2_OpenDTU_585584','power',0);;  # Wert für den Ring Solar\
my $washer= ReadingsVal('MQTT2_zigbee_Waschmaschine','power',0);; # Wert für den Ring Waschmaschine\
\
my $style_airdryer = ReadingsVal('svgDOIF','style_airdryer',0);; # Wert für die Linie von Haus zu Lufttrockner\
my $style_battery = ReadingsVal('svgDOIF','style_battery',0);; # Wert für die Linie zu Batterie\
my $style_batteryToHouse = '';;\
my $style_dishwasher = ReadingsVal('svgDOIF','style_dishwasher',0);; # Wert für die Linie von Haus zu Geschirrspüler\
my $style_dryer = ReadingsVal('svgDOIF','style_dryer',0);; # Wert für die Linie von Haus zu Trockner\
my $style_fridge = ReadingsVal('svgDOIF','style_fridge',0);; # Wert für die Linie von Haus zu Kühlschrank\
my $style_gridToHouse = ReadingsVal('svgDOIF','style_gridToHouse',0);; # Wert für die Linie von Netzt zu Haus\
my $style_gridToBattery = 'style="display: none;;"';;  # <-- der Wert schaltet Animation aus. Für an, einfach einen leeren String\
my $style_solarToBattery = 'style="display: none;;"';;  # <-- der Wert schaltet Animation aus. Für an, einfach einen leeren String\
my $style_solarToGrid = ReadingsVal('svgDOIF','style_solarToGrid',0);; # Wert für die Linie Solar zu Netz\
my $style_solarToHouse = ReadingsVal('svgDOIF','style_solarToHouse',0);; # Wert für die Linie Solar zu Haus\
my $style_washer = ReadingsVal('svgDOIF','style_washer',0);; # Wert für die Linie von Haus zu Waschmaschine\
\
"\
<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 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 x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Solar (Orange) -->\
  <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 x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$solar W</text>\
\
  <!-- Netz (Blau) -->\
  <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 x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$grid W</text>\
\
  <!-- Batterie (Turkis) -->\
  <circle cx='250' cy='400' r='40' fill='none' stroke='turquoise' stroke-width='5'/>\
  <text x='250' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>batterie</text>\
  <text x='250' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>53 %</text>\
\
  <!-- Lufttrockner (Blau) -->\
  <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'>air-dryer</text>\
  <text x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$airdryer W</text>\
\
  <!-- Haus (Lila) -->\
  <circle cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5'/>\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>house</text>\
  <text x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$house W</text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <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 x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$fridge W</text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <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 x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$washer W</text>\
\
  <!-- Trockner (Grün) -->\
  <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 x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$dryer W</text>\
\
  <!-- Geschirrspüler(Blau) -->\
  <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 x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>$dishwasher W</text>\
\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange)-->\
  <line x1='250' y1='140' x2='250' y2='358' stroke='orange' stroke-width='2'/>\
  <circle cx='250' cy='140' r='5' fill='orange' $style_solarToBattery>\
    <animate attributeName='cy' values='140;;360' dur='2s' repeatCount='indefinite' />\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <line x1='400' y1='207' x2='400' y2='140' stroke='blue' stroke-width='2'/>\
  <circle cx='400' cy='210' r='5' fill='blue' $style_airdryer>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <line x1='400' y1='293' x2='400' y2='360' stroke='yellow' stroke-width='2'/>\
  <circle cx='400' cy='290' r='5' fill='yellow' $style_fridge >\
    <animate attributeName='cy' values='290;;360' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <line x1='100' y1='208' x2='100' y2='140' stroke='green' stroke-width='2'/>\
  <circle cx='100' cy='210' r='5' fill='green'>\
    <animate attributeName='cy' values='210;;145' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <line x1='140' y1='250' x2='357' y2='250' stroke='blue' stroke-width='2'/>\
  <circle cx='140' cy='250' r='5' fill='blue' $style_gridToHouse>\
    <animate attributeName='cx' values='140;;360' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <line x1='442' y1='250' x2='508' y2='250' stroke='green' stroke-width='2'/>\
  <circle cx='445' cy='250' r='5' fill='green' $style_dryer>\
    <animate attributeName='cx' values='442;;508' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 442 260 A 110 110 0 0 1 550 360' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue' $style_dishwasher>\
    <animateMotion dur='2s' repeatCount='indefinite' >\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 140 A 110 100 0 0 0 358 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange' $style_solarToHouse>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 140 A 110 100 0 0 1 142 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange' $style_solarToGrid>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 142 260 A 110 100 0 0 1 240 360' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='turquoise' $style_gridToBattery>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1' >\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) -->\
  <path id='batteryToHousePath' d='M 260 359 A 110 100 0 0 1 360 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple' $style_batteryToHouse>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 140 A 110 100 0 0 1 442 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow' $style_washer >\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\
"}\

attr svgDOIF subType SolarForecast

setstate svgDOIF \
<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 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 x='100' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Solar (Orange) -->\
  <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 x='250' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>264.1 W</text>\
\
  <!-- Netz (Blau) -->\
  <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 x='100' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>285 W</text>\
\
  <!-- Batterie (Turkis) -->\
  <circle cx='250' cy='400' r='40' fill='none' stroke='turquoise' stroke-width='5'/>\
  <text x='250' y='400' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>batterie</text>\
  <text x='250' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>53 %</text>\
\
  <!-- Lufttrockner (Blau) -->\
  <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'>air-dryer</text>\
  <text x='400' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>207 W</text>\
\
  <!-- Haus (Lila) -->\
  <circle cx='400' cy='250' r='40' fill='none' stroke='purple' stroke-width='5'/>\
  <text x='400' y='250' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>house</text>\
  <text x='400' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>549.1 W</text>\
\
  <!-- Kühlschrank (Gelb) -->\
  <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 x='400' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Waschmaschine (Gelb) -->\
  <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 x='550' y='115' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>66 W</text>\
\
  <!-- Trockner (Grün) -->\
  <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 x='550' y='265' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
  <!-- Geschirrspüler(Blau) -->\
  <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 x='550' y='415' font-family='Arial' font-size='12' fill='white' text-anchor='middle' alignment-baseline='middle'>0 W</text>\
\
\
  <!-- Verbindungslinien -->\
\
  <!-- Verbindungslinie von Solar zu Batterie (Orange)-->\
  <line x1='250' y1='140' x2='250' y2='358' stroke='orange' stroke-width='2'/>\
  <circle cx='250' cy='140' r='5' fill='orange' style="display: none;;">\
    <animate attributeName='cy' values='140;;360' dur='2s' repeatCount='indefinite' />\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Lufttrockner (Blau) -->\
  <line x1='400' y1='207' x2='400' y2='140' stroke='blue' stroke-width='2'/>\
  <circle cx='400' cy='210' r='5' fill='blue' ''>\
    <animate attributeName='cy' values='210;;140' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Kühlschrank (Gelb) -->\
  <line x1='400' y1='293' x2='400' y2='360' stroke='yellow' stroke-width='2'/>\
  <circle cx='400' cy='290' r='5' fill='yellow' style="display: none;;" >\
    <animate attributeName='cy' values='290;;360' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Kohlenstoffarm (Grün) -->\
  <line x1='100' y1='208' x2='100' y2='140' stroke='green' stroke-width='2'/>\
  <circle cx='100' cy='210' r='5' fill='green'>\
    <animate attributeName='cy' values='210;;145' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Haus (Blau) -->\
  <line x1='140' y1='250' x2='357' y2='250' stroke='blue' stroke-width='2'/>\
  <circle cx='140' cy='250' r='5' fill='blue' ''>\
    <animate attributeName='cx' values='140;;360' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Trockner (Green) -->\
  <line x1='442' y1='250' x2='508' y2='250' stroke='green' stroke-width='2'/>\
  <circle cx='445' cy='250' r='5' fill='green' style="display: none;;">\
    <animate attributeName='cx' values='442;;508' dur='2s' repeatCount='indefinite' >\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Geschirrspüler (Blue) -->\
  <path id='houseToDishwasherPath' d='M 442 260 A 110 110 0 0 1 550 360' stroke='blue' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='blue' style="display: none;;">\
    <animateMotion dur='2s' repeatCount='indefinite' >\
      <mpath href='#houseToDishwasherPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Haus (Orange) -->\
  <path id='solarToHousePath' d='M 260 140 A 110 100 0 0 0 358 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange' ''>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Solar zu Netz (Orange) -->\
  <path id='solarToGridPath' d='M 240 140 A 110 100 0 0 1 142 240' stroke='orange' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='orange' ''>\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#solarToGridPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Netz zu Batterie (Turkis) -->\
  <path id='gridToBatteryPath' d='M 142 260 A 110 100 0 0 1 240 360' stroke='turquoise' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='turquoise' style="display: none;;">\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1' >\
      <mpath href='#gridToBatteryPath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Batterie zu Haus (Lila) -->\
  <path id='batteryToHousePath' d='M 260 359 A 110 100 0 0 1 360 260' stroke='purple' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='purple' >\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='0;;1' keyTimes='0;;1'>\
      <mpath href='#batteryToHousePath'/>\
    </animateMotion>\
  </circle>\
\
  <!-- Verbindungslinie von Haus zu Waschmaschine (Gelb) -->\
  <path id='houseToWasherPath' d='M 550 140 A 110 100 0 0 1 442 240' stroke='yellow' stroke-width='2' fill='transparent'/>\
  <circle r='5' fill='yellow' '' >\
    <animateMotion dur='2s' repeatCount='indefinite' keyPoints='1;;0' keyTimes='0;;1'>\
      <mpath href='#houseToWasherPath'/>\
    </animateMotion>\
  </circle>\
\
</svg>\

setstate svgDOIF 2024-10-09 11:09:32 Device MQTT2_Smartmeter_2E1F50
setstate svgDOIF 2024-10-09 11:09:22 cmd 1.16
setstate svgDOIF 2024-10-09 11:09:22 cmd_event MQTT2_Smartmeter_2E1F50
setstate svgDOIF 2024-10-09 11:09:22 cmd_nr 1
setstate svgDOIF 2024-10-09 11:09:22 cmd_seqnr 16
setstate svgDOIF 2024-10-09 11:09:32 e_MQTT2_Smartmeter_2E1F50_events APOX_E_in: 242.507,APOX_Power: 285
setstate svgDOIF 2024-10-09 11:08:01 mode enabled
setstate svgDOIF 2024-10-09 11:09:22 state cmd_1
setstate svgDOIF 2024-10-09 11:09:21 style_airdryer ''
setstate svgDOIF 2024-10-09 11:09:21 style_dishwasher style="display: none;;"
setstate svgDOIF 2024-10-09 11:09:21 style_dryer style="display: none;;"
setstate svgDOIF 2024-10-09 11:09:21 style_fridge style="display: none;;"
setstate svgDOIF 2024-10-08 18:14:22 style_grid '140;;360'
setstate svgDOIF 2024-10-09 11:09:22 style_gridToHouse ''
setstate svgDOIF 2024-10-09 11:09:22 style_solarToGrid ''
setstate svgDOIF 2024-10-09 11:09:21 style_solarToHouse ''
setstate svgDOIF 2024-10-09 11:09:21 style_washer ''


Ich hoffe, ich habe alles verständlich dokumentiert.


Gruß schwatter

[Prof. Dr. Peter Henning]

Muss ich mir mal ansehen...

Würde ich aber ganz klar nicht in einem Doif anordnen, sondern als ausgelagertes SVG-Widget. Wie das geht habe ich schon mehrfach beschrieben.

LG

pah

[schwatter]

Ausgelagertes SVG-Widget klingt gut, dann funktioniert es bestimmt unterbrechungsfreier.

Bitte ein Link mit einem Beispiel, dann guck ich mir das gerne an.

Gruß schwatter

[Damian]

Ich würde es als uiTable Funktion vom Typ HTML definieren (ein Rückgabewert). Die Funktion kann man natürlich sonst wohin auslagern. Als Übergabeparameter kann man dann die entsprechenden Readings angeben. Der Vorteil ist, dass beim Aufruf auch gleich die passenden Trigger aufgesetzt werden. Man muss sich also nicht um die Aktualisierung der Darstellung kümmern.

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Eigene_uiTable-Funktionen_programmieren


z. B.

Aufruf im uiTable/uiState-Attribut

Code Auswählen Erweitern

power_flow([Battery:state],[Grid:state],...)

[schwatter]

Morgen,

schau ich mir an. Mein Problem ist momentan, das alles funktioniert, aber bei einem trigger es kurz abhackt und von vorne anfängt.
Sprich, wenn der animierte Punkt irgendwo in der Mitte ist, startet er abrupt von vorne.
Das minimiere ich durch den Trigger auf meinen Tasmota Stromausleser. Der ist auf Senden alle 25s eingestellt.
Jetzt überlege ich, wie kann ich das trennen.
Da warte ich nochmal auf einen Beispiellink von pah.
Vielleicht funktioniert das auch bei dir im uiTable.
In dem Modul SolarForecast sehe ich das auch. Da fällt es aber nicht so auf, weil die animierten Linien gleichmäßig wandern, bzw. die Balken.

Gruß schwatter

[Prof. Dr. Peter Henning]

Oh, ich habe das Vorgehen sowohl in den "SmartHome Hacks" als auch in "Hausautomatisierung mit FHEM" veröffentlicht, unten stehen ein paar Seiten als PDF.

LG

pah

[Damian]

Morgen,

schau ich mir an. Mein Problem ist momentan, das alles funktioniert, aber bei einem trigger es kurz abhackt und von vorne anfängt.
Sprich, wenn der animierte Punkt irgendwo in der Mitte ist, startet er abrupt von vorne.
Das minimiere ich durch den Trigger auf meinen Tasmota Stromausleser. Der ist auf Senden alle 25s eingestellt.
Jetzt überlege ich, wie kann ich das trennen.
Da warte ich nochmal auf einen Beispiellink von pah.
Vielleicht funktioniert das auch bei dir im uiTable.
In dem Modul SolarForecast sehe ich das auch. Da fällt es aber nicht so auf, weil die animierten Linien gleichmäßig wandern, bzw. die Balken.

Gruß schwatter

Ich habe in card Animationen wieder abgeschaltet, weil sie im Browser last produzieren - ist ganz schlecht, wenn man remote arbeitet

[tobi01001]

Mein Problem ist momentan, das alles funktioniert, aber bei einem trigger es kurz abhackt und von vorne anfängt.
Sprich, wenn der animierte Punkt irgendwo in der Mitte ist, startet er abrupt von vorne.

Da du im DOIF unterwegs bist, könntest du probieren für die "Animationsbedingungen" DOIF-Readings zu erstellen.

Code Auswählen Erweitern

animateKuehlSchrank:{[MQTT2_zigbee_Kuehlschrank:power] > 0?1:0;}
und im DOIF dann entsprechend:

Code Auswählen Erweitern

(IF ([$SELF:animateKuehlSchrank] == 1)\
    (setreading svgDOIF style_fridge '') )\
 ([$SELF:animateKuehlSchrank]  == 0)\
    (setreading svgDOIF style_fridge style="display: none;;;;") )\
Das sollte zumindest das DOIF-Reading nur bei Änderung von selbigen triggern (und nur DOIF-intern).

Aber ich denke dein Problem ist, dass mit jedem triggerr das svg neu erstellt wird. Das solltest du dann allgemein nur tun, wenn es tatsächlich Änderungen gibt und nicht nur weil der Tasmota neue Werte schickst.

Könntest du das svg in einzelne Elemente aufteilen und im uitable/uistate "zusammensetzen"?

Und noch eine Idee: Wenn du DOIF-readings machen solltest, könntest du in denen auch direkt den relevanten SVG-Anteil ablegen. Dann spartst du dir die IFs und die setreading ... und kannst den svg-Teil direkt mit den DOIF-Readings erstellen.