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

**URL:** <https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570>\
**Category:** General\
**Created:** [14 August 2020 14:54 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570 "2020-08-14T14:54:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [14 August 2020 14:54 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/1 "2020-08-14T14:54:32Z")

</div>

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](https://flows.nodered.org/node/node-red-contrib-ui-svg/in/590bc13ff3a5f005c7d2189bbb563976). Unfortunately without success.

> **code example vs my functioncode**
>
> _Example code:_
> 
> ```auto
> "payload": {
> "command": "set_attribute",
> "selector": "#camera_living",
> "attributeName": "rotate",
> "attributeValue": "90"
> }
> 
> ```
> 
> My functioncode:
> 
> ```auto
> "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:**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/62f247c1ff03040ec0cefd6ba2e2d010359ac61b.png)  
_In the attached flow I replaced the PLC with 'inject-nodes', with random values._

```auto
[{"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:**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef08b11f2aa48989bb46dc95e4328f0d87401903.png)

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2020 15:44 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/2 "2020-08-14T15:44:32Z")

</div>

![nyIEfObyRF](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b50203f964eab2f4008dbfa178248067ed2dd57f.gif)

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2020 15:54 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/3 "2020-08-14T15:54:18Z")

</div>

I had 10 mins to kill...

```auto
[{"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}]

```

 ![lTLiR4T4gn](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6b427d341a358eabc81a2fb53ab7d287fb6029a.gif)

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [14 August 2020 17:58 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/4 "2020-08-14T17:58:28Z")

</div>

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 😃 , your contributions help me a lot!

With best regards  
Arne

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [14 August 2020 19:32 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/5 "2020-08-14T19:32:43Z")

</div>

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)._

```auto
[{"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!

 ![Waterbak](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/4390a41dc345dfa5a7dbd66816ce5b123c2a7744.gif)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 August 2020 19:32 UTC](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/6 "2020-08-28T19:32:44Z")

</div>

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