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