SVG in Abhängigkeit von Datenpunkten animieren

Spampunk

Hallo liebe Freunde des automatisierten Heims,

ich komme in einer Sache einfach nicht weiter. Ich möchte meine Heizungsanlage als Schema im VIS visualisieren. Hierzu möchte ich SVGs einbinden und diese je nach Heizungszustand animieren. MarkusL hat das mal hier gepostet:

[https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/328]

Stefan-G hatte an späterer Stelle mir schon etwas Hilfestellung gegeben: https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/884](https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/884)

Lange hatte ich keine Zeit, um das Projekt weiterzuverfolgen. Aber jetzt beginnt die neue Heizperiode und der Wunsch des Fertigstellens wird wieder größer...

Nach vielen Stunden habe ich zwar eine Menge über HTML, CSS, JS und SVGs gelernt, aber noch nichts animiert bekommen. Das gepostete Widget im o.g. Link erzeugt beim Importieren leider eine Fehlermeldung.

Mir wäre schon einmal geholfen, wenn ich wüsste, wo der JS-Code von [https://forum.iobroker.net/topic/12723/einfach-mal-zeigen-will-teil-2/892] hin muss - in den allgemeinen HTML-Teil des Widgets, oder unter "Skripte" im Projekt?

Ich würde mich freuen, wenn mich jemand an die Hand nimmt. Viele Dinge kenne ich ja bereits, Binding und so sind mir klar und ich beiße mich gerne auch durch Neues durch.

Für Eure Hilfe und Hinweise jetzt schon mal ein herzliches Dankeschön

Viele Grüße,
Timo

SBorg

@Spampunk
Hallo Timo,
ja da hast du dir was vorgenommen
Wenn man mal das Grundkonzept verinnerlicht hat funktioniert es auch ganz gut. Wenn der Tag mal nicht nur 24h hätte...
Heizung1.mp4

Bevor ich es nachher wieder vergesse: es funktioniert korrekt nur in der Runtime, nicht im Editor! Zumindest im FireFox muss ich ab und an die Seite mit F5 nochmals neu laden, da es bei den Animationen sonst zu "komischen" Fehlern kommt. Ich habe Stunden damit verbracht den Fehler zu finden warum die Pumpe nicht dreht. Die Leitungen waren korrekt gefärbt, die Flussanimation funktionierte, nur die Pumpe drehte nicht. Nach einem simplen Refresh ging es dann...

Ziel: eine drehende Pumpe, einfärben der Leitung nach Temperatur und Flussanimation wenn die Pumpe dreht

Bild 1.png (ohne Animation/Video diesmal)

Benötigt

einen Datenpunkt true/false ob die Pumpe läuft.
einen Datenpunkt mit einer Temperatur

Da ich noch keine Sensoren an der Heizung habe musste bei mir mein Laptop herhalten (true/false = on-/offline) und die aktuelle Außentemperatur.
Man könnte nun mit einem Widget arbeiten. Ich habe es auf 2 aufgeteilt, da ich zum Einen auch die Temperatur des Sensors anzeigen möchte. Zum Anderen lässt sich so die Temperaturanzeige einfach besser platzieren.

Widget: Basic-Html
Dort unter Allgemein -HTML:

Kollektor: <span id="kollektor_temp">{javascript.0.Wetterstation.Aussentemperatur}</span> °C<br>

Ist ein simples Binding "{}" auf einen Datenpunkt. Wichtig, wie jetzt bei allen anderen auch, ist allerdings die "id" (muss einmalig sein). Wir merken uns mal kollektor_temp (das soll bspw. die Temperatur des Solarkollektors repräsentieren).

Widget: Basic-Html
Dort unter Allgemein -HTML:

<script type="text/javascript">
    var svgNS = "http://www.w3.org/2000/svg";
	setTimeout(function () {

        let Zirku_pumpe = {radar2.0.Acer-Laptop};
    	// Auslesen der Temperatur und umrechnen über die Funktion unten in eine Farbe
    	// 20 = blau; 90 = rot
    	let leitungsfarbe = color(parseInt(document.getElementById("kollektor_temp").innerHTML));

    	// Einfärben der Leitung entsprechend ihrer Temperatur
    	document.getElementById("leitung1").setAttribute("stroke", leitungsfarbe);

    	// Hier jetzt die Auswertung, ob die Pumpe läuft. Wenn ja, dann wird sie gedreht und
    	// die Flussanimation wird eingeblendet.
     	if (Zirku_pumpe == true) {
    	    document.getElementById("flussanimation1").style.display = "block";
    	    addRotateTransform('pumpe1',5 ,1);
		}
    	else {
		    document.getElementById("flussanimation1").style.display = "none";
    	    addRotateTransform('pumpe1',0 ,1);
		} 
    	
	}, 1);


   	function addRotateTransform(target_id, speed, direction) {
		var element_to_rotate = document.getElementById(target_id);
		var my_transform = document.createElementNS(svgNS, "animateTransform");
		var bb = element_to_rotate.getBBox();
		var cx = bb.x + bb.width/2;
		var cy = bb.y + bb.height/2;
		my_transform.setAttributeNS(null, "attributeName", "transform");
		my_transform.setAttributeNS(null, "attributeType", "XML");
		my_transform.setAttributeNS(null, "type", "rotate");
		my_transform.setAttributeNS(null, "dur", speed + "s");
		my_transform.setAttributeNS(null, "repeatCount", "indefinite");
		my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
		my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);		
		element_to_rotate.appendChild(my_transform);
		my_transform.beginElement();
	}
	
    function color(value) {
    	var highColor = "#ff3030";
    	var lowColor = "#3030ff";
    	var highTemp = 90;
    	var lowTemp = 20;
		var retValue = lowColor;
    	if (value > lowTemp) {
    		var lr = parseInt("0x"+lowColor.substring(1,3));
    		var lg = parseInt("0x"+lowColor.substring(3,5));
    		var lb = parseInt("0x"+lowColor.substring(5,7));
    		var hr = parseInt("0x"+highColor.substring(1,3));
    		var hg = parseInt("0x"+highColor.substring(3,5));
    		var hb = parseInt("0x"+highColor.substring(5,7));
    		var cr = parseInt(lr + (hr-lr)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		var cg = parseInt(lg + (hg-lg)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		var cb = parseInt(lb + (hb-lb)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		cr = cr.length == 1 ? "0"+cr: cr;
    		cg = cg.length == 1 ? "0"+cg: cg;
    		cb = cb.length == 1 ? "0"+cb: cb;
    		retValue = "#"+cr+cg+cb;
    	}
		if (value > highTemp) {
    		retValue = highColor;
    	}
		return retValue;
    }

</script>


<svg>
// Dies ist eine CSS-Definition. Sie führt später zum Fließen in der Leitung
<style>.flow {
        animation: dash 30s linear;
        animation-iteration-count: infinite;
        }
</style>

// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code
// wird die Leitung entsprechend der Temperatur koloriert.
<path id="leitung1" fill="none" stroke="green" stroke-width="6" d="M0 15h100v10H0z"/>

// Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich
// an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.
<g id="flussanimation1" fill="none" class="flow" stroke="#fff" stroke-dasharray="4" stroke-width="4" opacity=".5">
	<path d="M 5.058 20.093 L 108.785 19.427"/>
</g>

// Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht
<g id="pumpe1" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel">
    <path fill="#fff" d="M72.2 19.756c0 6-5 11-11.2 11s-11-5-11-11c0-6.2 5-11.2 11-11.2s11.3 5 11.3 11.2z"/>
    <path stroke-width=".8" d="M66.5 10.156v19l-8.2-4.6-8.3-4.7 8.3-4.7z"/>
</g>
</svg>

Ui, schon eine andere Hausnummer

#5: wir definieren einen Namen für die Pumpe und ein Binding auf den true/false Datenpunkt ob die Pumpe läuft oder nicht (bei mir eben Laptop an oder aus )
#8 wir lesen die Temperatur aus (hier könnte man ohne das andere Widget auch direkt per Binding auslesen) und weisen ihm eine Bezeichnung zu (später natürlich Aussagefähiger wie "Vorlauf_Puffer"). Wir lesen es per "id" aus dem Dokument aus und erinnern uns an "kollektor_temp".
#11 wir färben die "leitung1" (wieder eine ID) ein. Diese befindet sich im SVG-Teil #84. Sollte natürlich eine bessere ID bekommen, denn wer weiß später noch, dass leitung23 Vorlauf vom Pfuffer zum Kessel war...
#15-#22 Pumpenanimation ein-/ausschalten. Ich wiederhole mich, aber "flussanimation1" und "pumpe1" sind natürlich wieder IDs (und findet man so auch wieder im SVG-Teil) und sollten mal wieder eine bessere Bezeichnung erhalten...

An den beiden Funktionen gibt es eigentlich nichts zu ändern, außer ev. die Temperatur ab/bis wann koloriert wird und eben die Farbe.

Spampunk

@SBorg
Wow, super! Vielen Dank für Deine ausführliche Anleitung. ~~Werde ich heute oder morgen Abend testen und dann Feedback geben!~~

Ich habe Deine Anleitung jetzt kurz in der Mittagspause ausprobiert (War so neugierig...) und es funktioniert! Mann, bin ich happy

Jetzt weiß ich, was ich zu tun habe und kann mich endlich an die Arbeit machen.

Herzlichen Dank!

Viele Grüße,
Timo

SBorg

@Spampunk Wenn man es einmal verinnerlicht hat ist es gar nicht mehr so schwer. Man muss halt nur verstehen, dass die ganzen Zuweisungen immer per ID erfolgen. So kannst du jedes Element im SVG-Teil beeinflussen und wesentlich mehr erreichen als per Binding oder CSS. Ich färbe zB. auch meinen Zwischenpuffer vor der Therme je nach Wassertemperatur um.
Nur beim Füllstand für den Gastank hänge ich aktuell. Rechteckig kein Problem (sähe aber bei den Rundungen links und rechts des Tanks blöd aus), aber mit den Rundungen klappt es einfach (noch) nicht. ...und ich will den Tank so haben

Ich nutze es auch für meine Tonnen. Die werden automatisch je nach Art eingefärbt, die Resttage bis zur Entleerung ändern sich auch farblich...
Bild 1.png

A1uca2d

@sborg
Hi sBorg.
Kannst du bitte einmal dein Code in dem SVG shape teilen?

Ich versuche eine Grafik zu erstellen, die den Wert (String) eines Objektes formatiert darstellt. Deine Resttage bis zur Leerung sollten mir da beim verstehen des Codes helfen.

Zur Sicherheit: nutzt du aus dem "Basic-Widgets" das "Boolesches SVG"?

Hier das an Code, was ich mir online zusammengesucht habe:

<!DOCTYPE html>
<html>
<body>
 
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 2 150 q 1 -190 180 0 " stroke="gray" stroke-width="2" fill="none"/>
  <text style="fill:black;font-size:16px;">
    <textPath href="#lineAC" startOffset="80">Status</textPath>
  </text>
</svg>
 
</body>
</html>

Wie man sich denken kann, soll da natürlich nichht dauerhaft "Status" stehen sondern hier der Text des Objekts angezeigt werden.

Und hier, wie es gerade aussieht:

Danke für die Hilfe ...

OliverIO

@sborg sagte in SVG in Abhängigkeit von Datenpunkten animieren:

Widget: Basic-Html
Dort unter Allgemein -HTML:

Evtl. noch ein Hinweis zur Optimierung.

Wenn man Binding in ein HTML Widget einbaut, dann wird bei jeder Aktualisierung
der komplette Inhalt des Widgets aus der Seite entfernt und sogleich wieder hinzugefügt.
Das kann bei komplexen Änderungen uU zu einem Flackern der Grafik führen.

Von daher wäre es sinnvoll entweder,
A)
das ganze HTML/SVG auf dem Server berechnen zu lassen und dann komplett per Binding
einzufügen.
B)
Javascript und HTNL/SVG in unterschiedliche widgets zu legen, so das immer nur das Javascript-Widget bei neuen werten per binding aktualisiert wird und von dort aus per DOM-Zugriff (so wie du es mit der Anpassung der CSS-Transform-Regel gemacht hast) auf das vorhandene HTML/SVG-Modell zugreifst.

Aber wie gesagt nur, wenn dich das flackern nicht stört oder du es gar nicht wahrnimmst, weil es eh sehr schnell geht.

OliverIO

@a1uca2d sagte in SVG in Abhängigkeit von Datenpunkten animieren:

Die folgenden Teile am besten entfernen:

<-!DOCTYPE html>
<html>
<body>

</body>
</html>

Die darf es in einem HTML-Dokument nur einmal geben. Moderne Browser kommen damit zwar zurecht, ist aber wieder eine evtl Fehlerquelle, die zu komischen Verhalten führt.
Das Doctype/html/body wird in vis ja bereits definiert. Du fügst eigentlich nur ein HTML-Fragment mit dem html widget hinzu.

A1uca2d

@oliverio
Danke dir für den Hinweis.

Hast du vielleicht auch eine Idee für meine eigentliche Frage?

OliverIO

@a1uca2d

Eigentlich einfach
du packst deine svg-datei in ein html widget, also genau so kopieren wie du es siehst.
An der Stelle wo der Text steht packst du dein Datenpunkt im binding format rein (hier {0_userdata.0.test})
und dann änderst du den Text im Datenpunkt, der sich dann gleich auch in vis wiederspiegelt.
Da ist halt nix animiertes dran, da es einfach ein Text entlang einem Pfad dargestellt ist.

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 2 150 q 1 -190 180 0 " stroke="gray" stroke-width="2" fill="none"/>
  <text style="fill:black;font-size:16px;">
    <textPath href="#lineAC" startOffset="80">{0_userdata.0.test}</textPath>
  </text>
</svg>

wenn sich etwas bewegen soll, könnte man auch sowas machen

<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Definiere den Sinuspfad -->
  <path id="sinuskurve" d="M 0 100 Q 100 50 200 100 T 400 100 T 600 100 T 800 100" 
        fill="transparent" stroke="lightgray" stroke-width="1"/>

  <!-- Text, der der Kurve folgt -->
  <text font-size="20" fill="blue">
    <textPath href="#sinuskurve" startOffset="0%" id="text">
      {0_userdata.0.testFolder.b1}
    </textPath>
  </text>

  <!-- Animierte Bewegung der Sinuskurve -->
  <animate 
    xlink:href="#sinuskurve" 
    attributeName="d" 
    dur="4s" 
    repeatCount="indefinite"
    values="
      M 0 100 Q 100 50 200 100 T 400 100 T 600 100 T 800 100;
      M 0 100 Q 100 150 200 100 T 400 100 T 600 100 T 800 100;
      M 0 100 Q 100 50 200 100 T 400 100 T 600 100 T 800 100
    "
  />
</svg>

das 2. beispiel habe ich auf die schnelle mit chatgpt erstellt.

aber dazu muss man sich ein wenig mit svg auseinandersetzen.
https://wiki.selfhtml.org/wiki/SVG

A1uca2d

@oliverio
Soweit so gut.
Das verstehe ich nun. Tatsächlich hat mir nun auch ChatGPT deutlich weitergeholfen. Das Thema Animation hat mich angefixt.

Nun wäre mein nächster Punkt: wie bekomme ich die Animation an und aus!? Ich habe hier mit ChatGPT versucht mir zu helfen... Wie man sich denken kann, es hat bei meiner fehlenden Kompetenz nicht funktioniert.

Hier einmal wie mein Code für das SVG Objekt jetzt aussieht:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>SVG Text Animation</title>
</head>
<body>
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path id="circlePath" d="M 60, 60 m -42, 0 a 42,42 0 1,1 84,0 a 42,42 0 1,1 -84,0"/>
    </defs>
    <text font-size="14" fill="black">
      <textPath id="textPath" href="#circlePath">
       {javascript.0.Beschattung.Jalousie_Kind1_Li_Status}
      </textPath>
      <animateTransform id="animation" attributeName="transform" attributeType="XML" type="rotate" from="0 60 60" to="360 60 60" dur="10s" repeatCount="indefinite" />
    </text>
  </svg>
  
  
  <script type="text/javascript">
   
    on({ id: 'javascript.0.Beschattung.Jalousie_Kind1_Li_Status', change: "any" }, async (obj) => {
      var value = obj.state.val;
      
      const animation = document.getElementById('animation');
      const textPath = document.getElementById('textPath');
      
      if (value == "running") {
        animation.setAttribute('begin', 'indefinite');
        textPath.setAttribute('startOffset', '0');
      } else {
        animation.setAttribute('begin', '0s');
        textPath.setAttribute('startOffset', '0%');
      }
      
    }

  </script>
</body>
</html>

Wie bekomme ich das Ding zum laufen?
Jemand eine Idee?

OliverIO

@a1uca2d said in SVG in Abhängigkeit von Datenpunkten animieren:

ich glaube du vermischt da etwas.

der on befehl ist ein befehl, der nur in der script instanz auf dem server gültig ist. im html widget oder scripttab von vis gibt es den nicht dafür gibt es dort das binding.
da erledigt aber vis vollkommen automatisch alle aktualisierung.
wenn du nur das svg in ein html widget einträgst, dann dreht sich der text doch schon alleine. was möchtest du darüber hinaus noch animieren?
der befehl document.getElementById dagegen funktioniert nur im browser und nicht auf dem server (im javascript adapter). wie man eine animation startet oder beendet musste ich selbst nachschauen -> https://developer.mozilla.org/de/docs/Web/API/SVGAnimationElementhttps://developer.mozilla.org/de/docs/Web/API/SVGAnimationElement
das sind die Befehle animation.beginElement() und animation.endElement() auf Basis deines Codes, da die Animation in der Variable animation referenziert ist.

Aber wie gesagt, die Animation läuft ja schon.

und nochmal, entferne die html und body tags, die brauchst du nicht in vis

A1uca2d

@oliverio

Du hast Recht. Nachdem ich den Post abgesetzt hatte habe ich auch darüber noch mal nachgedacht

Zu deiner Frage 2: ich möchte eigentlich, dass der Text sich nicht dauerhaft dreht. Folgende Regel: Wenn die Jalousie sich bewegt (Text: running), dann soll der Text sich drehen. Wenn die Jalousie steht, soll auch der Text stehen (Text: waiting)

So sieht meine letzte Version des Scripts aus:

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path id="circlePath" d="M 60, 60 m -42, 0 a 42,42 0 1,1 84,0 a 42,42 0 1,1 -84,0"/>
    </defs>
    <text font-size="14" fill="black">
      <textPath id="textPath" href="#circlePath">
       {javascript.0.Beschattung.Jalousie_Kind1_Li_Status}
      </textPath>
      <animateTransform id="animation" attributeName="transform" attributeType="XML" type="rotate" from="0 60 60" to="360 60 60" dur="10s" repeatCount="indefinite" />
    </text>
    
    <circle r="30" cx="60" cy="60" stroke="" stroke-width="3" fill="grey" opacity="0.6" />
    
  </svg>
  
  <script type="text/javascript">
   
    schedule("*/5 * * * * *", async function () {
      var value = {javascript.0.Beschattung.Jalousie_Kind1_Li_Status};
      
      const animation = document.getElementById('animation');
      const textPath = document.getElementById('textPath');
      
      if (value == "running") {
        textPath.setAttribute('startOffset', '0');
      } else {
        animation.setAttribute('begin', '0s');
        textPath.setAttribute('startOffset', '0%');
      }
    }
  </script>

Wie leider zu erwarten funktioniert das auch nicht.

Eine weitere Beobachtung von mir: beim Ändern des Textes dauert es fast 10Sek bevor der Text wieder anfängt sich zu drehen. Was mache ich da denn falsch? Meine Erwartung wäre gewesen, dass der Text sich einfach beim drehen ändern aber keine Auswirkung auf die Drehung hat.

A1uca2d

Für meine neue Frage habe ich durch ausprobieren eine Lösung gefunden.

<animateTransform id="animation" attributeName="transform" attributeType="XML" type="rotate" 
            from="0 60 60" to="360 60 60" begin="0.1s" dur="8s" repeatCount="indefinite" />

Ausschlaggebend ist hier das Attribut "begin" es darf nur nicht bei "0s" stehen.

NEWS

SVG in Abhängigkeit von Datenpunkten animieren

Support us

1.5k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts

NEWS

SVG in Abhängigkeit von Datenpunkten animieren

Support us

1.5kOnline

30.4kUsers

76.6kTopics

1.2mPosts

1.5k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts