PowerFlow [animiertes SVG, dummy, javascript]

Torxgewinde · 23 März 2025, 11:09:11

@schwatter: Ich glaube im Kern haben wir ein ähnliches Problem gehabt. Vielleicht ist es technisch auch für dich interessant:

Wenn man sich im DOM einfach DIVs mit passenden informIds anlegt und denen eine JS-Funktion "setValueFn(value) ..." zuweist, dann versorgt FHEM einen mit den jeweiligen Daten. Wenn man seinem eigenem SVG unter dem Knoten mit der "informId" auch solch eine JS-Funktion zuweist, wird das SVG nicht im DOM ersetzt, sondern bei Updates die setValueFn()-Funktion getriggert.

Mein SVG ist viel einfacher als deins hier, aber im Kern kann man sich die Kommunikation da an- bzw. ggf. gerne abgucken: https://forum.fhem.de/index.php?topic=141113.msg1337604#msg1337604

schwatter · 23 März 2025, 11:36:36

Sehr interessant, danke. Ich hatte mir schon einige Konzepte angeschaut. Über Websocket,Jsonlist2,telnet inform on
und bin dann bei JS extern gelandet. Da ich mit meinem laienhaften Verständnis keinen Weg gefunden hatte, eine Animation
dauerhaft zu starten, ohne das sie von Fhem unterbrochen wird. Problem war immer das readingsSingleUpdate zum Refresh
des STATE führte und die Animationen neu startete. Durch das abschalten kommen aber auch keine Events mehr, deshalb das externe JS.

Bist du sicher, das das mit deinem gefundenen Weg funktioniert?

Torxgewinde · 23 März 2025, 12:59:00

Zitat von: schwatter am 23 März 2025, 11:36:36Bist du sicher, das das mit deinem gefundenen Weg funktioniert?

Kurz:
Ich denke schon dass das klappt.

Lang:
Bei dem simplem Bargraphen von mir läuft eine CSS-Animation und im Debugger bekommt man es ja angezeigt, wenn im DOM HTML-Elemente hinzukommen, oder geändert werden. Das blinkt dann einmal kurz auf. Auch passt es gut zu den restlichen Infos die ich her so aus dem Forum und dem Quelltext zusammengesucht habe. Man kommt an die Infos kommt, die zu dem jeweiligem Raum oder sogar dem eigenem Device gehören.

Solange in der JS-Konsole solche Meldungen durchlaufen die deine Werte sind, kann man die mit der Methode (1. div machen, 2. informId setzen, 3. js Funktion dranpacken) anzapfen und dann auch in seinem Javascript nutzen um die Darstellung zu verändern.

Alleine damit, dass das Element mit der passenden informId die JS-Funktion setValueFn() hat, weiß FHEM, dass ein besserer Weg geschaffen wurde, als den ganzen DOM-Knoten zu tauschen. Der relevante Code aus /opt/fhem/www/pgm2/fhemweb.js ist:

Code Auswählen

// d: array
  // d[0]: informid
  // d[1]: if the informid Widget has setValueFn, arg for this
  // d[2]: else replace the html with this
  function
  setValue(d) // is Callable from eval below
  {
    $("[informId='"+d[0]+"']").each(function(){
      if(this.setValueFn) {     // change the select/etc value
        this.setValueFn(d[1].replace(/\n/g, '\u2424'));

      } else {
        if(d[2].match(/\n/) && !d[2].match(/<.*>/)) // format multiline
          d[2] = '<html><pre>'+d[2]+'</pre></html>';
...

Und speziell davon if(this.setValueFn).

Bei meinem Bargraph läuft die Animation schön ungestört einfach weiter, egal wie oft ich Werte neu setze durch anklicken der WebCmds.

Ich denke für deine Anwendung heißt das erstmal garnichts, aber ich finde die Methode nun ganz praktisch zu kennen und du dann vielleicht auch. Eingangs im allerersten Post Stand ja deine Frage ob man das ggf. auch anders machen kann.

schwatter · 23 März 2025, 14:56:26

So, ich habe versucht es zu adaptieren. Funktioniert gut.

1.

Code Auswählen

defmod ring_grid_test dummy
attr ring_grid_test devStateIcon {\
    # Lese die Werte aus den Readings\
    my $val1 = ReadingsVal($name, 'ring1', 0);;\
    my $val2 = ReadingsVal($name, 'ring2', 0);;\
    my $val3 = ReadingsVal($name, 'ring3', 0);;\
    my $val4 = ReadingsVal($name, 'ring4', 0);;\
\
    # Hole das SVG als Template\
    my $svg = FW_makeImage('ring_grid_test');;\
\
    # Setze den Wert und aktiviere Animationen je nach Wert\
    $svg =~ s/(<tspan class="informId_ringSVG:ring2">)(.*?)(<\/tspan>)/$1$val2$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:ring4">)(.*?)(<\/tspan>)/$1$val4$3/;;\
\
    # Füge Animationen hinzu, wenn die Werte größer als 0 sind\
    $svg =~ s/(<circle[^>]+id="circle1"[^>]+class="motion-disabled")/$1 motion-enabled/ if $val2 > 0;;\
    $svg =~ s/(<circle[^>]+id="circle2"[^>]+class="motion-disabled")/$1 motion-enabled-line4/ if $val4 > 0;;\
\
    return $svg;;\
}\

attr ring_grid_test readingList ring1 ring2 ring3 ring4
attr ring_grid_test room SVGTEST
attr ring_grid_test setList ring1 ring2 ring3 ring4

setstate ring_grid_test 2025-03-23 13:26:50 ring1 Grid
setstate ring_grid_test 2025-03-23 14:46:45 ring2 0
setstate ring_grid_test 2025-03-23 13:26:45 ring3 Solar
setstate ring_grid_test 2025-03-23 14:45:44 ring4 5
setstate ring_grid_test 2025-03-23 12:57:39 state ???

2.
Svg aus dem Anhang nach /opt/fhem/www/images/fhemSVG und "shutdown restart"

3. Da es noch keine Skalierung gibt, muss das Skin F18 oder Flex benutzt werden. Da diese zusätzlichen CSS Code erlauben.

Code Auswählen

svg.ring_grid_test {
    width: 400px !important;
    height: 400px !important;
}

4. Das Skin muss helle, sein, die animierten Linien sind schwarz.

5. Bezeichner bei Ring 1 und 3 setzen. Werte bei Ring 2 und 4 setzen.

Gruß schwatter

Torxgewinde · 23 März 2025, 15:26:57

Mega!!

Ich hätte da noch Ideen:

Die CSS Angaben kann man auch mit einem Regex in das SVG reinmogeln:

Code Auswählen

defmod ring_grid_test dummy
attr ring_grid_test devStateIcon {\
    # Lese die Werte aus den Readings\
    my $val1 = ReadingsVal($name, 'ring1', 0);;\
    my $val2 = ReadingsVal($name, 'ring2', 0);;\
    my $val3 = ReadingsVal($name, 'ring3', 0);;\
    my $val4 = ReadingsVal($name, 'ring4', 0);;\
\
    # Hole das SVG als Template\
    my $svg = FW_makeImage('ring_grid_test');;\
\
    # Setze den Wert und aktiviere Animationen je nach Wert\
    $svg =~ s/(<tspan class="informId_ringSVG:ring2">)(.*?)(<\/tspan>)/$1$val2$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:ring4">)(.*?)(<\/tspan>)/$1$val4$3/;;\
\
    # Füge Animationen hinzu, wenn die Werte größer als 0 sind\
    $svg =~ s/(<circle[^>]+id="circle1"[^>]+class="motion-disabled")/$1 motion-enabled/ if $val2 > 0;;\
    $svg =~ s/(<circle[^>]+id="circle2"[^>]+class="motion-disabled")/$1 motion-enabled-line4/ if $val4 > 0;;\
\
	#mogel noch ein wenig CSS in das SVG mit rein:\
	my $extras = 'style="width: 400px !important;;height: 400px !important;;background-color: white !important;;"';;\
	$svg =~ s/<svg([^>]*)\s*(style="[^"]*")?/<svg$1$extras/;;\
\
    return $svg;;\
}\

attr ring_grid_test readingList ring1 ring2 ring3 ring4
attr ring_grid_test setList ring1 ring2 ring3 ring4
attr ring_grid_test webCmd ring2 0:ring2 123:ring4 456:ring4 0

Anstatt FHEM neuzustarten, reicht auch bei fhemweb ein rereadicons auszulösen:
set web rereadicons

Sehr cool!

schwatter · 23 März 2025, 15:36:15

Top, danke für die Anmerkungen.
Gefällt mir alles sehr gut. Mal sehen wie ich es umsetze. Wird wenn ein ganz schön dickes SVG

Gruß schwatter

schwatter · 29 März 2025, 11:54:00

So, es wird. Etwas zum spielen.

1. Das Svg aus dem Anhang nach /opt/fhem/www/images/fhemSVG kopieren.
Rechte: Eigentümer fhem / Gruppe dialout

2.
set WEB rereadicons
set WEBphone rereadicons
set WEBtablet rereadicons

3. Der dummy

Code Auswählen

defmod powergrid_test dummy
attr powergrid_test devStateIcon { \
    use URI::Escape;;\
    \
    # Lese die Werte aus den Readings\
    my $lowcarbon_v = ReadingsVal($name, 'lowcarbon_v', 0);;\
    my $grid_v = ReadingsVal($name, 'grid_v', 0);;\
    my $grid_in_v= ReadingsVal($name, 'grid_in_v', 0);;\
    my $grid_out_v= ReadingsVal($name, 'grid_out_v', 0);;\
    my $house_v = ReadingsVal($name, 'house_v', 0);;\
    my $solar_v = ReadingsVal($name, 'solar_v', 0);;\
    my $battery_v = ReadingsVal($name, 'battery_v', 0);;\
    my $battery_p = ReadingsVal($name, 'battery_p', 0);;\
    my $batteryState_v = ReadingsVal($name, 'batteryState_v', 'stop');;\
    my $solar_icon = ReadingsVal($name, 'solar_i', 0);;\
    my $lowcarbon_icon = ReadingsVal($name, 'lowcarbon_i', 0);;\
    my $house_icon = ReadingsVal($name, 'house_i', 0);;\
\
    # Hole das SVG als Template\
    my $svg = FW_makeImage('powergrid');;\
\
    # Setze den Wert und aktiviere Animationen je nach Wert\
    $svg =~ s/(<tspan class="informId_ringSVG:lowcarbon_v">)(.*?)(<\/tspan>)/$1$lowcarbon_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:grid_v">)(.*?)(<\/tspan>)/$1$grid_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:gridPowerIn">)(.*?)(<\/tspan>)/$1$grid_in_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:gridPowerOut">)(.*?)(<\/tspan>)/$1$grid_out_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:house_v">)(.*?)(<\/tspan>)/$1$house_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:solar_v">)(.*?)(<\/tspan>)/$1$solar_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:battery_v">)(.*?)(<\/tspan>)/$1$battery_v$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:battery_p">)(.*?)(<\/tspan>)/$1$battery_p$3/;;\
    $svg =~ s/(<tspan class="informId_ringSVG:batteryState_v">)(.*?)(<\/tspan>)/$1$batteryState_v$3/;;\
\
    # URI-Unescape und Bearbeitung der SVG-Icons\
    my $decoded_solar_svg = uri_unescape($solar_icon);;\
    $decoded_solar_svg =~ s/^data:image\/svg\+xml;;charset=utf-8,//;;\
    $decoded_solar_svg =~ s/<svg([^>]*)/ <svg$1 width="25px" height="25px"/;;\
    $decoded_solar_svg =~ s/<path([^>]*)/ <path fill="yellow"$1/;;\
\
    my $decoded_lowcarbon_svg = uri_unescape($lowcarbon_icon);;\
    $decoded_lowcarbon_svg =~ s/^data:image\/svg\+xml;;charset=utf-8,//;;\
    $decoded_lowcarbon_svg =~ s/<svg([^>]*)/ <svg$1 width="25px" height="25px"/;;\
    $decoded_lowcarbon_svg =~ s/<path([^>]*)/ <path fill="green"$1/;;  # Beispiel mit blau gefüllt\
\
    my $decoded_house_svg = uri_unescape($house_icon);;\
    $decoded_house_svg =~ s/^data:image\/svg\+xml;;charset=utf-8,//;;\
    $decoded_house_svg =~ s/<svg([^>]*)/ <svg$1 width="25px" height="25px"/;;\
    $decoded_house_svg =~ s/<path([^>]*)/ <path fill="yellow"$1/;;  # Beispiel mit grün gefüllt\
\
    # Nun das SVG in das Template einfügen\
    $svg =~ s{<g id="solarCircleIcon"([^>]*)>}{<g id="solarCircleIcon"$1>$decoded_solar_svg };;\
    $svg =~ s{<g id="fossilfreeCircleIcon"([^>]*)>}{<g id="lowcarbonCircleIcon"$1>$decoded_lowcarbon_svg };;\
    $svg =~ s{<g id="houseCircleIcon"([^>]*)>}{<g id="houseCircleIcon"$1>$decoded_house_svg };;\
\
    # Mogel noch ein wenig CSS in das SVG mit rein:\
    my $extras = 'style="width: 95% !important;;height: auto !important;;background-color: black !important;;"';;\
    $svg =~ s/<svg([^>]*)\s*(style="[^"]*")?/<svg$1$extras/;;\
\
    return $svg;;\
}
attr powergrid_test readingList battery_v battery_p batteryState_v cCircle1Icon_i cCircle1Name_s cCircle1Power_v cCircle2Icon_i cCircle2Name_s cCircle2Power_v cCircle3Icon_i cCircle3Name_s cCircle3Power_v cCircle4Icon_i cCircle4Name_s cCircle4Power_v cCircle5Icon_i cCircle5Name_s cCircle5Power_v cCircle6Icon_i cCircle6Name_s cCircle6Power_v cCircle7Icon_i cCircle7Name_s cCircle7Power_v cCircle8Icon_i cCircle8Name_s cCircle8Power_v cCircle9Icon_i cCircle9Name_s cCircle9Power_v dryer_v grid_v grid_in_v grid_out_v house_i house_v lowcarbon_i lowcarbon_v solar_i solar_v
attr powergrid_test room SVGTEST
attr powergrid_test setList battery_v:textField battery_p:textField batteryState_v:select,stop,gridLoad,gridUnload,solarLoad,houseUnload cCircle1Icon_i:textField cCircle1Name_s:textField cCircle1Power_v:textField cCircle2Icon_i:textField cCircle2Name_s:textField cCircle2Power_v:textField cCircle3Icon_i:textField cCircle3Name_s:textField cCircle3Power_v:textField cCircle4Icon_i:textField cCircle4Name_s:textField cCircle4Power_v:textField cCircle5Icon_i:textField cCircle5Name_s:textField cCircle5Power_v:textField cCircle6Icon_i:textField cCircle6Name_s:textField cCircle6Power_v:textField cCircle7Icon_i:textField cCircle7Name_s:textField cCircle7Power_v:textField cCircle8Icon_i:textField cCircle8Name_s:textField cCircle8Power_v:textField cCircle9Icon_i:textField cCircle9Name_s:textField cCircle9Power_v:textField grid_v:textField grid_in_v:textField grid_out_v:textField house_i:textField house_v:textField lowcarbon_i:textField lowcarbon_v:textField solar_i:textField solar_v:textField
attr powergrid_test webCmd batteryState_v stop

setstate powergrid_test 2025-03-29 11:29:09 batteryState_v stop
setstate powergrid_test 2025-03-27 22:09:40 battery_p 100
setstate powergrid_test 2025-03-27 21:53:56 battery_v 223
setstate powergrid_test 2025-03-27 20:32:48 cCircle1Icon_i 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%22M22.11%2021.46L2.39%201.73L1.11%203L7.65%209.54C6.74%2011.03%206%2012.65%206%2014.23C6%2017.54%208.69%2020.23%2012%2020.23C13.74%2020.23%2015.3%2019.5%2016.4%2018.29L20.84%2022.73L22.11%2021.46M12%2018.23C9.78%2018.23%208%2016.45%208%2014.23C8%2013.5%208.5%2012.27%209.14%2011.03L15%2016.88C14.26%2017.71%2013.2%2018.23%2012%2018.23M11.14%207.94L9.71%206.5C10.57%205.38%2011.25%204.61%2011.25%204.61L12%203.77L12.75%204.61C12.75%204.61%2014.03%206.06%2015.32%207.94S18%2012.07%2018%2014.23C18%2014.41%2018%2014.59%2017.97%2014.77L15.46%2012.26C15%2011.23%2014.37%2010.07%2013.68%209.07C12.84%207.85%2012.44%207.42%2012%206.9C11.73%207.21%2011.5%207.5%2011.14%207.94Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:44:05 cCircle1Name_s Airdryer
setstate powergrid_test 2025-03-24 17:25:48 cCircle1Power_v 500
setstate powergrid_test 2025-03-27 20:33:06 cCircle2Icon_i 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%22M14.83%2C11.17C16.39%2C12.73%2016.39%2C15.27%2014.83%2C16.83C13.27%2C18.39%2010.73%2C18.39%209.17%2C16.83L14.83%2C11.17M6%2C2H18A2%2C2%200%200%2C1%2020%2C4V20A2%2C2%200%200%2C1%2018%2C22H6A2%2C2%200%200%2C1%204%2C20V4A2%2C2%200%200%2C1%206%2C2M7%2C4A1%2C1%200%200%2C0%206%2C5A1%2C1%200%200%2C0%207%2C6A1%2C1%200%200%2C0%208%2C5A1%2C1%200%200%2C0%207%2C4M10%2C4A1%2C1%200%200%2C0%209%2C5A1%2C1%200%200%2C0%2010%2C6A1%2C1%200%200%2C0%2011%2C5A1%2C1%200%200%2C0%2010%2C4M12%2C8A6%2C6%200%200%2C0%206%2C14A6%2C6%200%200%2C0%2012%2C20A6%2C6%200%200%2C0%2018%2C14A6%2C6%200%200%2C0%2012%2C8Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:45:23 cCircle2Name_s Washer
setstate powergrid_test 2025-03-23 20:45:29 cCircle2Power_v 0
setstate powergrid_test 2025-03-27 20:33:22 cCircle3Icon_i 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%22M6%2C2H18A2%2C2%200%200%2C1%2020%2C4V20A2%2C2%200%200%2C1%2018%2C22H6A2%2C2%200%200%2C1%204%2C20V4A2%2C2%200%200%2C1%206%2C2M7%2C4A1%2C1%200%200%2C0%206%2C5A1%2C1%200%200%2C0%207%2C6A1%2C1%200%200%2C0%208%2C5A1%2C1%200%200%2C0%207%2C4M10%2C4A1%2C1%200%200%2C0%209%2C5A1%2C1%200%200%2C0%2010%2C6A1%2C1%200%200%2C0%2011%2C5A1%2C1%200%200%2C0%2010%2C4M12%2C8A6%2C6%200%200%2C0%206%2C14A6%2C6%200%200%2C0%2012%2C20A6%2C6%200%200%2C0%2018%2C14A6%2C6%200%200%2C0%2012%2C8M8.11%2C10.5H10C9.76%2C11.88%2010%2C12.67%2010.58%2C13.29C11.68%2C14.36%2012.16%2C15.71%2011.89%2C17.5H10C10.24%2C16.12%2010%2C15.33%209.42%2C14.71C8.32%2C13.64%207.85%2C12.29%208.11%2C10.5M12.11%2C10.5H14C13.76%2C11.88%2014%2C12.67%2014.58%2C13.29C15.68%2C14.36%2016.16%2C15.71%2015.89%2C17.5H14C14.24%2C16.12%2014%2C15.33%2013.42%2C14.71C12.32%2C13.64%2011.85%2C12.29%2012.11%2C10.5Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:43:45 cCircle3Name_s Dryer
setstate powergrid_test 2025-03-23 21:16:00 cCircle3Power_v 300
setstate powergrid_test 2025-03-27 20:33:40 cCircle4Icon_i 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%22M18%2C2H6A2%2C2%200%200%2C0%204%2C4V20A2%2C2%200%200%2C0%206%2C22H18A2%2C2%200%200%2C0%2020%2C20V4A2%2C2%200%200%2C0%2018%2C2M10%2C4A1%2C1%200%200%2C1%2011%2C5A1%2C1%200%200%2C1%2010%2C6A1%2C1%200%200%2C1%209%2C5A1%2C1%200%200%2C1%2010%2C4M7%2C4A1%2C1%200%200%2C1%208%2C5A1%2C1%200%200%2C1%207%2C6A1%2C1%200%200%2C1%206%2C5A1%2C1%200%200%2C1%207%2C4M18%2C20H6V8H18V20M14.67%2C15.33C14.69%2C16.03%2014.41%2C16.71%2013.91%2C17.21C12.86%2C18.26%2011.15%2C18.27%2010.09%2C17.21C9.59%2C16.71%209.31%2C16.03%209.33%2C15.33C9.4%2C14.62%209.63%2C13.94%2010%2C13.33C10.37%2C12.5%2010.81%2C11.73%2011.33%2C11L12%2C10C13.79%2C12.59%2014.67%2C14.36%2014.67%2C15.33%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:43:34 cCircle4Name_s Dishwasher
setstate powergrid_test 2025-03-23 21:14:31 cCircle4Power_v 800
setstate powergrid_test 2025-03-27 20:33:56 cCircle5Icon_i 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%22M19%204V19C19%2020.11%2018.11%2021%2017%2021V22H15V21H12.5V2H17C18.11%202%2019%202.9%2019%204M7%202H11.5V21H9V22H7V21C5.9%2021%205%2020.11%205%2019V4C5%202.9%205.9%202%207%202M10%2010H7V14H10V10Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:43:21 cCircle5Name_s Fridge
setstate powergrid_test 2025-03-23 21:14:56 cCircle5Power_v 500
setstate powergrid_test 2025-03-27 20:34:12 cCircle6Icon_i 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%22M8%202C6.89%202%206%202.89%206%204V16C6%2017.11%206.89%2018%208%2018H9V20H6V22H9C10.11%2022%2011%2021.11%2011%2020V18H13V20C13%2021.11%2013.89%2022%2015%2022H18V20H15V18H16C17.11%2018%2018%2017.11%2018%2016V4C18%202.89%2017.11%202%2016%202H8M12%204.97A2%202%200%200%201%2014%206.97A2%202%200%200%201%2012%208.97A2%202%200%200%201%2010%206.97A2%202%200%200%201%2012%204.97M10%2014.5H14V16H10V14.5Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:43:11 cCircle6Name_s Boiler
setstate powergrid_test 2025-03-27 20:37:53 cCircle6Power_v 500
setstate powergrid_test 2025-03-27 20:34:28 cCircle7Icon_i 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%22M19.77%2C7.23L19.78%2C7.22L16.06%2C3.5L15%2C4.56L17.11%2C6.67C16.17%2C7.03%2015.5%2C7.93%2015.5%2C9A2.5%2C2.5%200%200%2C0%2018%2C11.5C18.36%2C11.5%2018.69%2C11.42%2019%2C11.29V18.5A1%2C1%200%200%2C1%2018%2C19.5A1%2C1%200%200%2C1%2017%2C18.5V14A2%2C2%200%200%2C0%2015%2C12H14V5A2%2C2%200%200%2C0%2012%2C3H6A2%2C2%200%200%2C0%204%2C5V21H14V13.5H15.5V18.5A2.5%2C2.5%200%200%2C0%2018%2C21A2.5%2C2.5%200%200%2C0%2020.5%2C18.5V9C20.5%2C8.31%2020.22%2C7.68%2019.77%2C7.23M18%2C10A1%2C1%200%200%2C1%2017%2C9A1%2C1%200%200%2C1%2018%2C8A1%2C1%200%200%2C1%2019%2C9A1%2C1%200%200%2C1%2018%2C10M8%2C18V13.5H6L10%2C6V11H12L8%2C18Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:42:59 cCircle7Name_s EV-Charge
setstate powergrid_test 2025-03-23 21:15:11 cCircle7Power_v 700
setstate powergrid_test 2025-03-27 20:34:43 cCircle8Icon_i 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%22M2%204.6V9.4C2%2010.3%202.5%2011%203.2%2011H20.9C21.5%2011%2022.1%2010.3%2022.1%209.4V4.6C22%203.7%2021.5%203%2020.8%203H3.2C2.5%203%202%203.7%202%204.6M10%208V6H9V8H10M5%208H7V6H5V8M20%209H4V5H20V9M2%2014.6V19.4C2%2020.3%202.5%2021%203.2%2021H20.9C21.5%2021%2022.1%2020.3%2022.1%2019.4V14.6C22.1%2013.7%2021.6%2013%2020.9%2013H3.2C2.5%2013%202%2013.7%202%2014.6M10%2018V16H9V18H10M5%2018H7V16H5V18M20%2019H4V15H20V19Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:42:33 cCircle8Name_s Server
setstate powergrid_test 2025-03-23 21:15:27 cCircle8Power_v 800
setstate powergrid_test 2025-03-27 20:34:56 cCircle9Icon_i 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%22M19%203H5C3.9%203%203%203.9%203%205V19C3%2020.1%203.9%2021%205%2021H19C20.1%2021%2021%2020.1%2021%2019V5C21%203.9%2020.1%203%2019%203M19%2019H5V5H19V19M12%2018C15.31%2018%2018%2015.31%2018%2012S15.31%206%2012%206%206%208.69%206%2012%208.69%2018%2012%2018M11.25%2015.92C10.7%2015.82%2010.2%2015.6%209.75%2015.3L11.25%2013.8V15.92M12.75%2015.92V13.81L14.25%2015.31C13.8%2015.61%2013.3%2015.82%2012.75%2015.92M15.31%2014.25L13.81%2012.75H15.92C15.82%2013.3%2015.61%2013.8%2015.31%2014.25M15.92%2011.25H13.81L15.31%209.75C15.61%2010.2%2015.82%2010.7%2015.92%2011.25M12.75%208.08C13.3%208.18%2013.8%208.4%2014.25%208.7L12.75%2010.2V8.08M12%2011C12.55%2011%2013%2011.45%2013%2012S12.55%2013%2012%2013%2011%2012.55%2011%2012%2011.45%2011%2012%2011M11.25%208.08V10.19L9.75%208.69C10.2%208.39%2010.7%208.18%2011.25%208.08M8.69%209.75L10.19%2011.25H8.08C8.18%2010.7%208.39%2010.2%208.69%209.75M10.19%2012.75L8.69%2014.25C8.39%2013.81%208.18%2013.3%208.07%2012.75H10.19Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-23 20:42:25 cCircle9Name_s Heat-Pump
setstate powergrid_test 2025-03-23 21:15:39 cCircle9Power_v 900
setstate powergrid_test 2025-03-29 11:38:21 grid_in_v 1547.792
setstate powergrid_test 2025-03-29 11:38:21 grid_out_v 483.436
setstate powergrid_test 2025-03-29 11:38:21 grid_v -450
setstate powergrid_test 2025-03-27 20:37:15 house_i 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
setstate powergrid_test 2025-03-29 11:38:21 house_v 503.3
setstate powergrid_test 2025-03-27 20:38:50 lowcarbon_i 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%22M19.19%2018H24L20.14%2012H22L15%202L12.61%205.41L17.92%2013H15.97L19.19%2018M16%2012L9%202L2%2012H3.86L0%2018H7V22H11V18H18L14.14%2012H16M12.16%2010H10.5L14.34%2016H3.67L7.53%2010H5.84L9%205.5L12.16%2010M13%2019V22H17V19H13Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-29 11:38:21 lowcarbon_v 76
setstate powergrid_test 2025-03-29 10:56:26 solar_i 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%22M11.45%2C2V5.55L15%2C3.77L11.45%2C2M10.45%2C8L8%2C10.46L11.75%2C11.71L10.45%2C8M2%2C11.45L3.77%2C15L5.55%2C11.45H2M10%2C2H2V10C2.57%2C10.17%203.17%2C10.25%203.77%2C10.25C7.35%2C10.26%2010.26%2C7.35%2010.27%2C3.75C10.26%2C3.16%2010.17%2C2.57%2010%2C2M17%2C22V16H14L19%2C7V13H22L17%2C22Z%22%20%2F%3E%3C%2Fsvg%3E
setstate powergrid_test 2025-03-29 11:38:25 solar_v 941.2
setstate powergrid_test 2025-03-23 12:57:39 state ???
setstate powergrid_test 2025-03-29 08:59:25 test data%3Aimage%2Fsvg%2Bxml%3Bcharset%3Dutf-8%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520viewBox%253D%25220%25200%252024%252024%2522%253E%253Cpath%2520d%253D%2522M11.45%252C2V5.55L15%252C3.77L11.45%252C2M10.45%252C8L8%252C10.46L11.75%252C11.71L10.45%252C8M2%252C11.45L3.77%252C15L5.55%252C11.45H2M10%252C2H2V10C2.57%252C10.17%25203.17%252C10.25%25203.77%252C10.25C7.35%252C10.26%252010.26%252C7.35%252010.27%252C3.75C10.26%252C3.16%252010.17%252C2.57%252010%252C2M17%252C22V16H14L19%252C7V13H22L17%252C22Z%2522%2520%252F%253E%253C%252Fsvg%253E

Im Moment hänge ich an der Implementierung der Icons. Quick N dörty habe ich diese erstmal nur auf SVG-Url beschränkt.
Da überlege ich noch ob ich das in fhem mit perl mach oder wieder im SVG per JS. Jetzt gerade kickt Fhem die Icons rein.
Finde ich ganz sympathisch und wenig Code. Wird aber aufwendiger wenn ich von Fhem auch noch die Icons per Path einlesen
möchte. Wenn das steht, dann können die Customringe folgen und dann als letztes die Skalierung für Mobile und Desktop.

Gruß schwatter

Torxgewinde · 29 März 2025, 13:55:29

Wow, spannend, finde ich gut!

Ich habe noch ein paar Dinge gelernt, die dir hier ggf. auch nützlich sein können. Manchmal scheint document.currentScript einfach null zurückzuliefern, auch wenn es eigentlich nicht "async" geladen wurde. Dafür habe ich mir ein Fallback ausgedacht, dass dem script Tag das wahrscheinlich unser eigenes ist eine UUID verpasst um es wiederzuerkennen. Das ist nur Fallbackcode, per Standard ist weiterhin document.currentScript genutzt:

Code Auswählen

<script><![CDATA[
    let uuid = crypto.randomUUID();
    let script = document.currentScript;
    if (!script) {
      console.log('using fallback for currentScript');
      let scripts = document.querySelectorAll('svg > script:not([data-uuid])');
      if (scripts.length === 0) {
        console.warn('Could not find any matching scripts.');
      } else {
        script = scripts[scripts.length - 1];
      }
    }
    script?.setAttribute('data-uuid', uuid);
....

Das CDATA ist nützlich wenn der SVG Parser wegen ungültigem XML nörgelt.

Bissel experimentell ist wie ich den Link zum Device ausblende, aber zumindest bei meinem Skin klappt das 1a:

Code Auswählen

/* entferne in FHEMWEB alle Zellen dieser Zeile die nicht StatusIcon sind */
    let table = script?.closest("table");
    if (table) {
      let maxCols = 0;
      for (let i = 0; i < table.rows.length; i++) {
        maxCols = Math.max(maxCols, table.rows[i].cells.length);
      }
      [...script?.closest('tr')?.querySelectorAll("td:not([informId])")].forEach(td => td.remove());
      script?.closest('td')?.setAttribute('colspan', maxCols);
    }

Wie gesagt, nur als "vielleicht hilfreich" ansehen. Ich freue mich auf dein Powerflow!

schwatter · 01 April 2025, 22:15:30

Nabend,

next try. Der Code in Fhem in Perl ist, naja *hust* erstmal einfach runtergerattert.

- Alle Grundfunktionen wiederhergestellt. (Ringe per n/a ausblenden, Mobileansicht,...,)
- Mehr Performance durch die neuen informIds.
- Dadurch endlich Werte in Realtime, bzw Event-basiert.
- Unsichtbare Buttons hinzugefügt. Dort kann ein Link hinterlegt werden. Setzbar mit z.B set powergrid cCircle3Link_s /fhem?detail=Waschmaschine
- House und FossilFree haben noch keinen Button.
- Das setzen der Icons funktioniert fast wie früher. SVG-Url einfach reinkopieren. Fhem interne so setzen -->coronavirus:fhem

todo:
Code in Fhem dummy komprimieren/auslagern und im SVG 4 Größen für die Skalierung einbauen. Damit etwas abgeschnitten wird,
wenn Ringe ausgeblendet werden.

Installieren wie vorher auch:
1. Das Svg aus dem Anhang nach /opt/fhem/www/images/fhemSVG kopieren.
Rechte: Eigentümer fhem / Gruppe dialout

2.
set WEB rereadicons
set WEBphone rereadicons
set WEBtablet rereadicons

3. Die Raw des dummy per + Zeichen oben links, bzw Execute ausführen/anlegen.

Hoffentlich habe ich nichts vergessen?

Gruß schwatter

schwatter · 05 April 2025, 15:10:01

Tag,

wieder etwas weiter.

- Verschiedene ViewBoxen hinzugefügt. Dabei werden alle Customringe berücksichtigt.
- Hide wird korrekt für Elemente gesetzt, welche ausgeblendet werden.
- Die animierten Linie nochmal überarbeitet. Da bei verschiedenen Skalierungen die gestoppten Punkte bei ca. x und y 0 auftauchten...
- dies und das

@Torxgewinde
Vielen Dank für deine Tips. Besonders das Beispiel mit setValue(d) hat mir sehr geholfen.
Die Performance auf meinem FireHD ist jetzt wirklich akzeptabel.

Gruß schwatter

schwatter · 06 April 2025, 09:14:32

Morgen,

kleines Update ein Post drüber. Ausversehen habe ich die Reihenfolge der gekreuzten Linie verhauen...
Vorher: Linie,Punkt,Linie,Punkt. Jetzt: Linie,Linie,Punkt,Punkt. Das muss sein, sonst verschwindet ein Punkt hinter einer Linie.

Gruß schwatter

ergerd · 06 April 2025, 23:01:30

Hallo schwatter,

ich habe diese neue Version ausprobiert, habe aber die Angaben ab Circle6 geleert, weil ich sie nicht brauche,
daraufhin werden sie ja auch ausgeblendet.

Allerdings wird mein Log mit folgenden Meldungen geflutet:

Code Auswählen

2025.04.06 21:10:48 1: PERL WARNING: "my" variable $house_icon masks earlier declaration in same scope at (eval 464) line 21.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle6_svg in substitution (s///) at (eval 464) line 134.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle6_svg in substitution (s///) at (eval 464) line 136.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle7_svg in substitution (s///) at (eval 464) line 139.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle7_svg in substitution (s///) at (eval 464) line 140.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle7_svg in substitution (s///) at (eval 464) line 141.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle8_svg in substitution (s///) at (eval 464) line 144.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle8_svg in substitution (s///) at (eval 464) line 145.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle8_svg in substitution (s///) at (eval 464) line 146.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle9_svg in substitution (s///) at (eval 464) line 149.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle9_svg in substitution (s///) at (eval 464) line 150.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle9_svg in substitution (s///) at (eval 464) line 151.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle6_svg in concatenation (.) or string at (eval 464) line 162.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle7_svg in concatenation (.) or string at (eval 464) line 163.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle8_svg in concatenation (.) or string at (eval 464) line 164.
2025.04.06 21:10:48 3: eval: { 

2025.04.06 21:10:48 1: PERL WARNING: Use of uninitialized value $decoded_circle9_svg in concatenation (.) or string at (eval 464) line 165.
2025.04.06 21:10:48 3: eval: {

Ab dem eval: wird der SVG-Code ausgegeben.
Offensichtlich wird immer dann solch ein Meldungsblock ausgegeben, wenn Daten an das SVG übergeben werden.
Ich benutze dafür das DOIF aus dem ersten Post.
Woran mag das liegen?

Grüße
ergerd

schwatter · 07 April 2025, 08:09:46

Moin,

danke für den Hinweis. Ich denke ich komme heut Abend zum fixen.

Gruß schwatter

schwatter · 07 April 2025, 19:14:57

Nabend,

da war eine Variable doppelt und die Icons musste ich abfangen. Irgendwann wird das noch schöner, aber jetzt sollte erstmal Ruhe sein.
Im Anhang nur das devStateIcon. Teste und gibt bitte Rückmeldung.

Danke, Gruß schwatter

ergerd · 07 April 2025, 22:10:25

Hallo schwatter,

das klappt jetzt, vielen Dank!

Grüße
ergerd