Contrib-ui-svg: variable height/rotation on input

Hey
I am using the contrib-ui-svg node. Currently I have 2 questions.

(1) Rotation
I am trying to rotate the item in red (see image belo), using an incoming value from a PLC. I am unable to achieve this. I viewed the examples. Unfortunately without success.

code example vs my functioncode

Example code:

  "payload": {
     "command": "set_attribute",
     "selector": "#camera_living",
     "attributeName": "rotate",
     "attributeValue": "90"
  }

My functioncode:

  "payload": {
     "command": "set_attribute",
     "selector": "#Loopband",
     "attributeName": "rotate",
     "attributeValue": (msg.payload + "")
  }

After looking at the debug code, I get the same result as in the example, but without the changes of the svg.

(2) Variable height
As you can see in the picture, 2 numeric values are displayed. Left the percentage of water (PLC value). On the right the temperature of the water (PLC value).
I am now trying to match the height of the blue rectangle in the photo with this percentage.

With a value of 100%, the rectangle should be the same height as the current height of the photo. At 0%, the blue rectangle is not visible. Since it concerns water, the rectangle must therefore "grow" from the bottom to the top. I have already tried some things. But again without success.

Things like changing colors are no problem.

My flow:


In the attached flow I replaced the PLC with 'inject-nodes', with random values.

[{"id":"6ca03c37.9a56f4","type":"ui_svg_graphics","z":"24d31ef4.bdf632","group":"a2588e69.5a90d","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=\"25\" rx=\"12.5\" ry=\"12.5\" rotate=\"0\" 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":[],"bindings":[],"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":1070,"y":3480,"wires":[[]]},{"id":"9fe4ea8c.171d38","type":"inject","z":"24d31ef4.bdf632","name":"Inject","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":410,"y":3420,"wires":[["ee1964f7.414418"]]},{"id":"a0f206a7.cc6128","type":"function","z":"24d31ef4.bdf632","name":"Function: Rotate","func":"msg.payload = {\n\"command\": \"set_attribute\",\n\"selector\": \"#Loopband\",\n\"AttributeName\": \"rotate\",\n\"AttributeValue\": (msg.payload + \"\")\n}\n \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":900,"y":3420,"wires":[["6ca03c37.9a56f4"]]},{"id":"ee1964f7.414418","type":"random","z":"24d31ef4.bdf632","name":"Random number","low":"1","high":"30","inte":"true","property":"payload","x":710,"y":3420,"wires":[["a0f206a7.cc6128"]]},{"id":"33b79691.43469a","type":"function","z":"24d31ef4.bdf632","name":"Niveau (text)","func":"msg.payload = {\n\"command\": \"update_text\",\n\"selector\": \"#Waterniveau\",\n\"textContent\": (msg.payload + \" %\")\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":910,"y":3500,"wires":[["6ca03c37.9a56f4"]]},{"id":"46b1aa11.4a7624","type":"function","z":"24d31ef4.bdf632","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,"initialize":"","finalize":"","x":910,"y":3540,"wires":[["6ca03c37.9a56f4"]]},{"id":"ee755b36.f844e8","type":"random","z":"24d31ef4.bdf632","name":"Temperatuur","low":"20","high":"30","inte":"true","property":"payload","x":730,"y":3540,"wires":[["46b1aa11.4a7624"]]},{"id":"35a31f3b.99d16","type":"random","z":"24d31ef4.bdf632","name":"Waterhoogte","low":"0","high":"100","inte":"true","property":"payload","x":730,"y":3500,"wires":[["33b79691.43469a","e354a32a.d8dff"]]},{"id":"270317fa.837908","type":"trigger","z":"24d31ef4.bdf632","name":"Interval","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":540,"y":3500,"wires":[["35a31f3b.99d16","ee755b36.f844e8"]]},{"id":"df8c419a.78f3c","type":"inject","z":"24d31ef4.bdf632","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":410,"y":3500,"wires":[["270317fa.837908"]]},{"id":"e354a32a.d8dff","type":"function","z":"24d31ef4.bdf632","name":"Niveau (svg)","func":"msg.payload = {\n\"command\": \"update_attribute\",\n\"selector\": \"#Waterbak\",\n\"AttributeName\": \"height\",\n\"textContent\": (msg.payload + \"\")\n}\n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":910,"y":3460,"wires":[["6ca03c37.9a56f4"]]},{"id":"f505302d.2401","type":"comment","z":"24d31ef4.bdf632","name":"(1) Rotation","info":"","x":250,"y":3420,"wires":[]},{"id":"835fe184.800da","type":"comment","z":"24d31ef4.bdf632","name":"(2) Height","info":"","x":260,"y":3500,"wires":[]},{"id":"d61dafc6.c516d","type":"comment","z":"24d31ef4.bdf632","name":"(3) Temp","info":"","x":260,"y":3540,"wires":[]},{"id":"a2588e69.5a90d","type":"ui_group","z":"","name":"Waterbad","tab":"56b4cf82.bc9fc","order":1,"disp":false,"width":"14","collapse":false},{"id":"56b4cf82.bc9fc","type":"ui_tab","z":"","name":"Flowchart","icon":"photo","disabled":false,"hidden":false}]

SVG rendering:

Thank you very much for your time. All suggestions and help are welcome.

[{"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":""}],"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":1050,"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":"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\":\"20\",\"water_text\":\"100L\"}","topic":"databind","payload":"{\"water_height\":\"20\",\"water_text\":\"100L\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":760,"y":320,"wires":[["22a08573.3b113a"]]},{"id":"630d55b9.763cfc","type":"inject","z":"26ec3e81.85d802","name":"{\"water_height\":\"30\",\"water_text\":\"150L\"}","topic":"databind","payload":"{\"water_height\":\"30\",\"water_text\":\"150L\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":760,"y":360,"wires":[["22a08573.3b113a"]]},{"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":"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}]

Regarding rotation: JS is case sensitive. You had a capital "A" in "attributeName" and "attributeValue" (better copy the example from the side-bar). Also, use "transform" "rotate(xxx)"

Regarding setting height, same capitalisation issue - but I did this slightly different for you - using data binding where you can send multiple attribute values at once (see the data binding tab on the SVG node). Also, in order to make it grow from the bottom up, you might want to look at gradient fill instead. Alternatively, you will need to bind or update both the y position and the height at the same time to simulate a bottom~top filling tank.

1 Like

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}]

4 Likes

Dear @Steve-Mcl

Thank you very much for your time and work.
I am new to this whole thing (Node-Red, JS, ...), still a student :smiley: , your contributions help me a lot!

With best regards
Arne

1 Like

Hey

In the meantime I have adjusted the flow to my wishes:

  • Water height according to percentage (incoming value)
  • Rotation point adjusted.

Note that this is not yet optimal (names, functions).

[{"id":"fe94be46.6a60e","type":"ui_svg_graphics","z":"24d31ef4.bdf632","group":"dcd73dfe.79fa4","order":3,"width":"10","height":"10","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 500 250\" 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=\"22.183626174926758\" y=\"18.02400779724121\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" id=\"Kader\" width=\"258.656\" height=\"208.719\" />\n    <rect x=\"28.509628295898438\" y=\"25\" width=\"246.032\" height=\"175\" style=\"fill-rule: evenodd;fill:white;\" id=\"Waterbak_leeg\" />\n    <rect x=\"42.99632263183594\" y=\"226.76882934570312\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" id=\"Voet_Links\" width=\"5.54734\" height=\"13.87\" />\n    <rect x=\"253.81466674804688\" y=\"226.76882934570312\" 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=\"28.509628295898438\" y=\"25\" width=\"246.032\" height=\"175\" id=\"Waterbak\" style=\"fill-rule: evenodd;fill:dodgerblue;\" />\n    <rect fill=\"red\" x=\"39.49864196777344\" y=\"157.9010009765625\" width=\"225.885\" height=\"25\" rx=\"12.5\" ry=\"12.5\" rotate=\"45\" id=\"Loopband\" />\n    <text style=\"fill:black;font-family:Arial;font-size:11px;\" x=\"34.67401123046875\" y=\"40.2080078125\" id=\"Waterniveau\" xml:space=\"preserve\">Niveau %</text>\n    <text style=\"fill:black;font-family:Arial;font-size:11px;\" x=\"230.92926025390625\" y=\"40.2080078125\" id=\"Temperatuur\" xml:space=\"preserve\">21.7 °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":true,"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":950,"y":3440,"wires":[[]]},{"id":"da12324c.08b6c","type":"inject","z":"24d31ef4.bdf632","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"7","payloadType":"num","x":370,"y":3380,"wires":[["61eb188b.7922c8"]]},{"id":"61eb188b.7922c8","type":"function","z":"24d31ef4.bdf632","name":"Function: Rotate","func":"msg.payload = {\n\"command\": \"set_attribute\",\n\"selector\": \"#Loopband\",\n\"attributeName\": \"transform\",\n\"attributeValue\": `rotate(${-msg.payload} 50 170)`\n}\n \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":760,"y":3360,"wires":[["fe94be46.6a60e"]]},{"id":"5abfffc3.3251c","type":"function","z":"24d31ef4.bdf632","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,"initialize":"","finalize":"","x":750,"y":3540,"wires":[["fe94be46.6a60e"]]},{"id":"275af638.f4be9a","type":"inject","z":"24d31ef4.bdf632","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"35.2","payloadType":"num","x":370,"y":3520,"wires":[["5abfffc3.3251c"]]},{"id":"a4028e1e.e744d","type":"inject","z":"24d31ef4.bdf632","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":370,"y":3340,"wires":[["61eb188b.7922c8"]]},{"id":"f65a6aea.424828","type":"inject","z":"24d31ef4.bdf632","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"36.7","payloadType":"num","x":370,"y":3560,"wires":[["5abfffc3.3251c"]]},{"id":"d8b9cb15.e95418","type":"inject","z":"24d31ef4.bdf632","name":"{\"water_height\":10%,\"water_text\":\"10%\"}","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"{\"water_height\":10,\"water_text\":\"50%\"}","payloadType":"json","x":480,"y":3420,"wires":[["42a31c6b.5e7e44"]]},{"id":"42a31c6b.5e7e44","type":"function","z":"24d31ef4.bdf632","name":"calc fill","func":"var percentage = msg.payload.water_height;\nvar hoogte = (175/100) * percentage; \nvar y_onder = 200; \nvar y_top = y_onder - hoogte;\n\nmsg.payload.y = y_top;\nmsg.payload.water_height = hoogte;\nmsg.payload.water_text = (percentage) + \" %\"; \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":730,"y":3440,"wires":[["fe94be46.6a60e"]]},{"id":"44532d89.df5944","type":"inject","z":"24d31ef4.bdf632","name":"{\"water_height\":80%,\"water_text\":\"80%\"}","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"{\"water_height\":80,\"water_text\":\"80%\"}","payloadType":"json","x":480,"y":3460,"wires":[["42a31c6b.5e7e44"]]},{"id":"dcd73dfe.79fa4","type":"ui_group","z":"","name":"Waterbad","tab":"17797ba.1292d84","order":1,"disp":false,"width":"14","collapse":false},{"id":"17797ba.1292d84","type":"ui_tab","z":"","name":"Flowchart","icon":"photo","disabled":false,"hidden":false}]

Thanks again for the help, @Steve-Mcl!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.