Hauptmenü

PowerFlow in Doif mit SVG

Begonnen von schwatter, 06 Oktober 2024, 21:09:39

Vorheriges Thema - Nächstes Thema

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

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>...
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

schwatter

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

Gruß schwatter

TomLee

Zitat...<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:

Zitatattr 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?

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

  <!-- 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

ZitatDas 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

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

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

power_flow([Battery:state],[Grid:state],...)
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

schwatter

#11
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

Zitat von: schwatter am 09 Oktober 2024, 08:37:54Morgen,

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
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

tobi01001

Zitat von: schwatter am 09 Oktober 2024, 08:37:54Mein 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.
animateKuehlSchrank:{[MQTT2_zigbee_Kuehlschrank:power] > 0?1:0;}
und im DOIF dann entsprechend:
(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.
FHEM@UbuntuServer on Lenovo ThinkCentre M900 [i5-6500T / 8GB RAM] MySQL-DbLog, Grafana, FTUI3 / HmIP incl. CCU3 / LGESS / Wärempumpe über TA CMI und CANoE / Shellies u.v.m.

schwatter

Zitat von: Damian am 09 Oktober 2024, 16:00:14
Zitat von: schwatter am 09 Oktober 2024, 08:37:54Morgen,

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

@Damian

Bedeutet für mich, erstmal deinen Vorschlag mit "uiTable_Schnelleinstieg#Eigene_uiTable-Funktionen_programmieren" nicht verfolgen?


@tobi01001

Ja genau, ich habe ja alles zusammengewürfelt. Das führt dazu, das der eine Trigger das Bild neu erstellt.
Und den habe ich auf 25s herausgezögert. Das ist schon ganz ok, man(n) starrt ja nicht stundenlang auf den Flow.
Interessante Gedanken, alles in verschiedene Readings auszulagern. Viele Trigger funktionieren nur, wenn alle
Elemente einzeln behandelt werden können. Dann muss keiner auf den anderen Rücksicht nehmen.

Noch möchte ich mich in Fhem bewegen. Also, einfachste Bordmittel.

Gruß schwatter

Damian

Das Problem ist wie von @tobi01001 schon angemerkt, dass du beim Statuswechsel das ganze SVG-Bild neu überträgst.

Du musst den einzelnen SVG-Elementen getrennte ID-Attribute definieren, sodass nur diese bei Änderungen aktualisiert werden und nicht alles. Ich habe das bereits für einzelne Zellen der Tabelle in uiTable programmiert, diese Mechanismen werden aber nicht innerhalb eines einzigen SVG-Bildes funktionieren.

Wenn du es elegant haben willst, dann musst etwas warten bis ich wieder Zeit zum Programmieren finde.

Aber wie von mir schon angemerkt, Animationen sind je nach Anwendungsfall nicht immer erwünscht.

Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

schwatter

Morgen,

genau. Das hatte ich auch schon bemerkt, aber vielleicht nicht richtig beschrieben. Ganzes SVG-Bild wird neu gebaut, daher alles auf Anfang.
Und ok verstanden, uiTable fällt dann erst mal raus.

Jetzt habe ich nochmal zum Triggern Fragen. Ich hatte beim ersten Versuch, in den IF Blöcken überall ein ? vor den Devices.

   (IF ([?MQTT2_zigbee_Kuehlschrank:power] > 0)
(setreading svgDOIF style_fridge '') )

Und wollte den Hauptrigger einmal ausführen lassen.

## Mein Trigger
([MQTT2_Smartmeter_2E1F50:"^StatusSNS_APOX_Power:.*$"])
    (setreading svgDOIF svg on)

Das führte aber zu einem Error. Das sah für mich aus wie, "DOIF meckert, so darf das nicht". Deshalb hatte ich bei den IF's die ganzen ? Wieder entfernt. Gestern ist mir
aufgefallen, so wie es im Code beschrieben habe, ist es ja nicht. Jedes Device wird getriggert...
Daher habe ich nochmal alle ? vor den Devices gesetzt. Danach wird das DOIF von meinem Smartmeter getriggert, aber alle Devices darunter haben sich durch das Fragezeichen
nicht aktualisiert.

Daher die Frage, wie kann ich den Code anpassen, das das Smartmeter der Trigger ist, und danach die ganzen IF einfach stumpf abgearbeitet werden?
Muss ich da am Besten anch Perl wechseln oder geht es in DOIF? Hier nochmal die DEF:

## Mein Trigger
([MQTT2_Smartmeter_2E1F50:"^StatusSNS_APOX_Power:.*$"])
    (setreading svgDOIF svg on)

## 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;;") )


Gruß schwatter