Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Spampunk]

Hallo liebe Gemeinde,
draußen wird es wieder kälter, also muss ich meine Heizungs-Visualisierung voran bringen. @Stefan-G hatte mir mit dem Code von @Marc_St ausgeholfen. Hier die Widgets, um die es geht:

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg>\n // Dies ist eine CSS-Definition. Sie führt später zum \"Fließen\" in der Leitung\n <style> \n\t\t.flow {\n animation: dash 30s linear;\n animation-iteration-count: infinite;\n \t \t}\n </style>\n\n// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code\n// wird die Leitung entsprechend der Temperatur koloriert.\n<path id=\"leitung1\" fill=\"none\" stroke=\"green\" stroke-width=\"11\" d=\"M0 15h100v10H0z\"/>\n \n// Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich\n// an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.\n \t<g id=\"flussanimation1\" fill=\"none\" class=\"flow\" stroke=\"#fff\" stroke-dasharray=\"4\" stroke-width=\"4\" opacity=\".5\">\n\t\t<path d=\"M 5.058 20.093 L 108.785 19.427\"/>\n \t</g>\n \t\n \n// Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht\n <g id=\"pumpe1\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\">\n <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\"/>\n <path stroke-width=\".8\" d=\"M66.5 10.156v19l-8.2-4.6-8.3-4.7 8.3-4.7z\"/>\n </g>\n \n<script type=\"text/javascript\">\nvar svgNS = \"http://www.w3.org/2000/svg\";\nsetTimeout(function () {\n\nvar trigger1 = {javascript.0.TestSVGbool};\n \n// Auslesen der Temperatur und umrechnen über die Funktion unten in eine Farbe\n// 20 = blau; 90 = rot\n var leitungsfarbe = color(parseInt(document.getElementById('kollektor_temp').innerHTML));\n\n// Einfärben der Leitung entsprechend ihrer Temperatur\n document.getElementById(\"leitung1\").setAttribute(\"stroke\", leitungsfarbe);\n\n// Hier jetzt die Auswertung, ob die Pumpe läuft. Wenn ja, dann wird sie gedreht und\n// die Flussanimation wird eingeblendet.\n \n if ((document.getElementById('pumpe_solar').innerHTML) === 'true') {\n document.getElementById(\"flussanimation1\").style.display = \"block\";\n\t\taddRotateTransform('pumpe1',5 ,1);\n }\n else {\n document.getElementById(\"flussanimation1\").style.display = \"none\";\n\t\taddRotateTransform('pumpe1',0 ,1);\n }; \n}, 1);\n\n\tfunction addRotateTransform(target_id, speed, direction) {\n\t\tvar element_to_rotate = document.getElementById(target_id);\n\t\tvar my_transform = document.createElementNS(svgNS, \"animateTransform\");\n\t\tvar bb = element_to_rotate.getBBox();\n\t\tvar cx = bb.x + bb.width/2;\n\t\tvar cy = bb.y + bb.height/2;\n\t\tmy_transform.setAttributeNS(null, \"attributeName\", \"transform\");\n\t\tmy_transform.setAttributeNS(null, \"attributeType\", \"XML\");\n\t\tmy_transform.setAttributeNS(null, \"type\", \"rotate\");\n\t\tmy_transform.setAttributeNS(null, \"dur\", speed + \"s\");\n\t\tmy_transform.setAttributeNS(null, \"repeatCount\", \"indefinite\");\n\t\tmy_transform.setAttributeNS(null, \"from\", \"0 \"+cx+\" \"+cy);\n\t\tmy_transform.setAttributeNS(null, \"to\", 360direction+\" \"+cx+\" \"+cy);\t\t\n\t\telement_to_rotate.appendChild(my_transform);\n\t\tmy_transform.beginElement();\n\t}\n\t \n\tfunction color(value) {\n \tvar highColor = \"#ff6060\";\n \tvar lowColor = \"#6060ff\";\n \tvar highTemp = 90;\n \tvar lowTemp = 20;\n \tif(value > highTemp) {\n \t\treturn highColor;\n \t}\n \telse if(value < lowTemp) {\n \t\treturn lowColor;\n \t}\n \telse {\n \t\tvar lr = parseInt(\"0x\"+lowColor.substring(1,3));\n \t\tvar lg = parseInt(\"0x\"+lowColor.substring(3,5));\n \t\tvar lb = parseInt(\"0x\"+lowColor.substring(5,7));\n \t\tvar hr = parseInt(\"0x\"+highColor.substring(1,3));\n \t\tvar hg = parseInt(\"0x\"+highColor.substring(3,5));\n \t\tvar hb = parseInt(\"0x\"+highColor.substring(5,7));\n \t\tvar cr = parseInt(lr + (hr-lr)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cg = parseInt(lg + (hg-lg)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cb = parseInt(lb + (hb-lb)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tcr = cr.length == 1 ? \"0\"+cr: cr;\n \t\tcg = cg.length == 1 ? \"0\"+cg: cg;\n \t\tcb = cb.length == 1 ? \"0\"+cb: cb;\n \t\treturn \"#\"+cr+cg+cb;\n \t}\n }\n </script>\n</svg>","name":"_Bild"},"style":{"left":"3px","top":"1px","width":"500px","height":"500px"},"widgetSet":"basic"}]

Es geht darum, SVG-Grafiken mittels JavaScript zu manipulieren. Ich habe die Datenpunkte erzeugt und viel mit dem Code gearbeitet (fast ein ganzer Tag ist drauf gegangen), aber ich krieg es nicht zum Laufen. Ich vermute nun, dass ich das JS im Basic-HTML-Widget nicht aktiviert bekomme. Ich habe die aktuellen Versionen des Chrome- und Edge-Browsers versucht. Muss ich eventuell weitere Einstellungen vornehmen, oder Adapter installieren?

Ich steh echt auf dem Schlauch und bin für jede Hilfe dankbar!

Grüße,
Timo

[Marc_St]

@Spampunk sagte in JavaScript im Basic HTML:

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg>\n // Dies ist eine CSS-Definition. Sie führt später zum "Fließen" in der Leitung\n <style> \n\t\t.flow {\n animation: dash 30s linear;\n animation-iteration-count: infinite;\n \t \t}\n </style>\n\n// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code\n// wird die Leitung entsprechend der Temperatur koloriert.\n<path id="leitung1" fill="none" stroke="green" stroke-width="11" d="M0 15h100v10H0z"/>\n \n// Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich\n// an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.\n \t<g id="flussanimation1" fill="none" class="flow" stroke="#fff" stroke-dasharray="4" stroke-width="4" opacity=".5">\n\t\t<path d="M 5.058 20.093 L 108.785 19.427"/>\n \t</g>\n \t\n \n// Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht\n <g id="pumpe1" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel">\n <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"/>\n <path stroke-width=".8" d="M66.5 10.156v19l-8.2-4.6-8.3-4.7 8.3-4.7z"/>\n </g>\n \n<script type="text/javascript">\nvar svgNS = "http://www.w3.org/2000/svg\";\nsetTimeout(function () {\n\nvar trigger1 = {javascript.0.TestSVGbool};\n \n// Auslesen der Temperatur und umrechnen über die Funktion unten in eine Farbe\n// 20 = blau; 90 = rot\n var leitungsfarbe = color(parseInt(document.getElementById('kollektor_temp').innerHTML));\n\n// Einfärben der Leitung entsprechend ihrer Temperatur\n document.getElementById("leitung1").setAttribute("stroke", leitungsfarbe);\n\n// Hier jetzt die Auswertung, ob die Pumpe läuft. Wenn ja, dann wird sie gedreht und\n// die Flussanimation wird eingeblendet.\n \n if ((document.getElementById('pumpe_solar').innerHTML) === 'true') {\n document.getElementById("flussanimation1").style.display = "block";\n\t\taddRotateTransform('pumpe1',5 ,1);\n }\n else {\n document.getElementById("flussanimation1").style.display = "none";\n\t\taddRotateTransform('pumpe1',0 ,1);\n }; \n}, 1);\n\n\tfunction addRotateTransform(target_id, speed, direction) {\n\t\tvar element_to_rotate = document.getElementById(target_id);\n\t\tvar my_transform = document.createElementNS(svgNS, "animateTransform");\n\t\tvar bb = element_to_rotate.getBBox();\n\t\tvar cx = bb.x + bb.width/2;\n\t\tvar cy = bb.y + bb.height/2;\n\t\tmy_transform.setAttributeNS(null, "attributeName", "transform");\n\t\tmy_transform.setAttributeNS(null, "attributeType", "XML");\n\t\tmy_transform.setAttributeNS(null, "type", "rotate");\n\t\tmy_transform.setAttributeNS(null, "dur", speed + "s");\n\t\tmy_transform.setAttributeNS(null, "repeatCount", "indefinite");\n\t\tmy_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);\n\t\tmy_transform.setAttributeNS(null, "to", 360direction+" "+cx+" "+cy);\t\t\n\t\telement_to_rotate.appendChild(my_transform);\n\t\tmy_transform.beginElement();\n\t}\n\t \n\tfunction color(value) {\n \tvar highColor = "#ff6060";\n \tvar lowColor = "#6060ff";\n \tvar highTemp = 90;\n \tvar lowTemp = 20;\n \tif(value > highTemp) {\n \t\treturn highColor;\n \t}\n \telse if(value < lowTemp) {\n \t\treturn lowColor;\n \t}\n \telse {\n \t\tvar lr = parseInt("0x"+lowColor.substring(1,3));\n \t\tvar lg = parseInt("0x"+lowColor.substring(3,5));\n \t\tvar lb = parseInt("0x"+lowColor.substring(5,7));\n \t\tvar hr = parseInt("0x"+highColor.substring(1,3));\n \t\tvar hg = parseInt("0x"+highColor.substring(3,5));\n \t\tvar hb = parseInt("0x"+highColor.substring(5,7));\n \t\tvar cr = parseInt(lr + (hr-lr)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cg = parseInt(lg + (hg-lg)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cb = parseInt(lb + (hb-lb)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tcr = cr.length == 1 ? "0"+cr: cr;\n \t\tcg = cg.length == 1 ? "0"+cg: cg;\n \t\tcb = cb.length == 1 ? "0"+cb: cb;\n \t\treturn "#"+cr+cg+cb;\n \t}\n }\n </script>\n</svg>","name":"_Bild"},"style":{"left":"3px","top":"1px","width":"500px","height":"500px"},"widgetSet":"basic"}]

Hi!

Die Beschäftigung mit meinem alten Code (bzw. ist das ja nur die kleine Demo) ehrt mich! Liegen denn an javascript.0.TestSVGbool Daten an?

Viele Grüße

Marc

[Spampunk]

Hallo Marc,
irgendwie ist das Forum buggy, ich werde nicht informiert, wenn jemand auf mein Post antwortet. Also sorry für meine späte Reaktion.

Ich schalte den DP händisch, aber ob jetzt von einem Aktor oder mir selbst geändert, sollte doch wohl keine Rolle spielen?

Ich habe aber den Verdacht, dass der Trigger nicht funktioniert. Und selbst wenn ich die If-Schleife auskommentiere und die Funktion addRotateTransform unmittelbar aufrufe, ändert sich nichts.

Noch eine Frage: Um die "innerHTML" anzusprechen, muss ich dafür das Basic-HTML-Widget danach benennen, oder mittels Span bezeichnen? Das Widget würde ich dann wohl unsichtbar setzen?

So viele Fragen, aber ich bin hartnäckig und bleibe am Ball.

Viele Grüße,
Timo