I had 10 mins to kill...
[{"id":"22a08573.3b113a","type":"ui_svg_graphics","z":"26ec3e81.85d802","group":"60b74369.74367c","order":3,"width":"14","height":"10","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 500 500\" width=\"100%\" height=\"100%\">\n <defs id=\"svgEditorDefs\">\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-peachpuff-sienna-v\" spreadMethod=\"pad\" x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:peachpuff; stop-opacity:0.84;\" />\n <stop offset=\"100%\" style=\"stop-color:sienna; stop-opacity:1\" />\n </linearGradient>\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-black-white\" spreadMethod=\"pad\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"black\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-peachpuff-sienna-h\" spreadMethod=\"pad\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:peachpuff; stop-opacity:1;\" />\n <stop offset=\"100%\" style=\"stop-color:sienna; stop-opacity:1\" />\n </linearGradient>\n </defs>\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"500\" height=\"300\" style=\"fill:none; stroke: none;\" />\n <g id=\"Achtergrond\">\n <rect x=\"120.658\" y=\"167.816\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" id=\"Kader\" width=\"258.656\" height=\"208.719\" />\n <rect x=\"126.9839984401751\" y=\"173.3830084727971\" width=\"246.032\" height=\"171.551\" style=\"fill-rule: evenodd;fill:white;\" id=\"Waterbak_leeg\" />\n <rect x=\"141.47068786621094\" y=\"376.5608215332031\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" id=\"Voet_Links\" width=\"5.54734\" height=\"13.87\" />\n <rect x=\"352.2890323210358\" y=\"376.5608215332031\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" id=\"Voet_Rechts\" width=\"5.54734\" height=\"13.87\" />\n </g>\n <g id=\"Voorgrond\">\n <rect x=\"126.9839984401751\" y=\"173.3830084727971\" width=\"246.032\" height=\"171.551\" id=\"Waterbak\" style=\"fill-rule: evenodd;fill:dodgerblue;\" />\n <rect fill=\"red\" x=\"137.973\" y=\"307.693\" width=\"225.885\" height=\"36\" rx=\"12.5\" ry=\"12.5\" rotate=\"45\" id=\"Loopband\" />\n <text style=\"fill:black;font-family:Arial;font-size:11px;\" x=\"133.14837646484375\" y=\"190\" id=\"Waterniveau\" xml:space=\"preserve\">Niveau %</text>\n <text style=\"fill:black;font-family:Arial;font-size:11px;\" x=\"340.49932861328125\" y=\"190\" id=\"Temperatuur\" xml:space=\"preserve\">21 °C</text>\n </g>\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"ro1","targetId":"Loopband","classValue":"","attributeName":"rotate","transformType":"rotate","fromValue":"0","toValue":"49","trigger":"cust","duration":"1","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":"Loopband.click; "}],"bindings":[{"selector":"#Waterbak","bindSource":"payload.water_height","bindType":"attr","attribute":"height"},{"selector":"#Waterniveau","bindSource":"payload.water_text","bindType":"text","attribute":""},{"selector":"#Waterbak","bindSource":"payload.y","bindType":"attr","attribute":"y"}],"showCoordinates":false,"autoFormatAfterEdit":true,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"SVG ","x":1250,"y":320,"wires":[[]]},{"id":"76747f60.65175","type":"inject","z":"26ec3e81.85d802","name":"","topic":"","payload":"7","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":650,"y":260,"wires":[["473c9428.894c5c"]]},{"id":"473c9428.894c5c","type":"function","z":"26ec3e81.85d802","name":"Function: Rotate","func":"msg.payload = {\n\"command\": \"set_attribute\",\n\"selector\": \"#Loopband\",\n\"attributeName\": \"transform\",\n\"attributeValue\": `rotate(${msg.payload})`\n}\n \nreturn msg;","outputs":1,"noerr":0,"x":820,"y":240,"wires":[["22a08573.3b113a","85e6904f.fca2c"]]},{"id":"2cd9f32e.91feec","type":"function","z":"26ec3e81.85d802","name":"Temp (text)","func":"msg.payload = {\n\"command\": \"update_text\",\n\"selector\": \"#Temperatuur\",\n\"textContent\": (msg.payload + \" °C\")\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":440,"wires":[["22a08573.3b113a"]]},{"id":"6b2a404e.c84d4","type":"inject","z":"26ec3e81.85d802","name":"","topic":"","payload":"35.2","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":650,"y":420,"wires":[["2cd9f32e.91feec"]]},{"id":"2be13f65.fd659","type":"comment","z":"26ec3e81.85d802","name":"(1) Rotation","info":"","x":170,"y":280,"wires":[]},{"id":"61953370.f64acc","type":"comment","z":"26ec3e81.85d802","name":"(2) Height","info":"","x":180,"y":360,"wires":[]},{"id":"b1ca91f7.cba6f","type":"comment","z":"26ec3e81.85d802","name":"(3) Temp","info":"","x":180,"y":400,"wires":[]},{"id":"d73b17af.60da38","type":"inject","z":"26ec3e81.85d802","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":650,"y":220,"wires":[["473c9428.894c5c"]]},{"id":"4db45b6c.b4d844","type":"inject","z":"26ec3e81.85d802","name":"","topic":"","payload":"36.7","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":650,"y":460,"wires":[["2cd9f32e.91feec"]]},{"id":"c9b0ae10.ab5ed","type":"inject","z":"26ec3e81.85d802","name":"{\"water_height\":50,\"water_text\":\"100L\"}","topic":"databind","payload":"{\"water_height\":50,\"water_text\":\"100L\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":750,"y":320,"wires":[["e964921c.7719b"]]},{"id":"630d55b9.763cfc","type":"inject","z":"26ec3e81.85d802","name":"{\"water_height\":100,\"water_text\":\"200L\"}","topic":"databind","payload":"{\"water_height\":100,\"water_text\":\"200L\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":750,"y":360,"wires":[["e964921c.7719b"]]},{"id":"85e6904f.fca2c","type":"debug","z":"26ec3e81.85d802","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1000,"y":180,"wires":[]},{"id":"e964921c.7719b","type":"function","z":"26ec3e81.85d802","name":"calc fill","func":"msg.payload.y = 350 - msg.payload.water_height\n \nreturn msg;","outputs":1,"noerr":0,"x":1010,"y":340,"wires":[["22a08573.3b113a"]]},{"id":"60b74369.74367c","type":"ui_group","z":"","name":"Waterbad","tab":"fb395306.4f8a2","order":1,"disp":false,"width":"14","collapse":false},{"id":"fb395306.4f8a2","type":"ui_tab","z":"","name":"Flowchart","icon":"photo","disabled":false,"hidden":false}]
