As part of a heat pump simulator I want to display the hot water level i the tank.
In design mode I can adjuste the height and the diameter of the tank. As part of the sim I would also like to set the hotwater level (in percent) as a linear gradient. as the Y1 and the Y2 parmeter also is in percentage..
Is it possible to do that in the same way as I have done it withe the height and the width??
Best regards
Henrik
[{"id":"319958cf.2b5ea8","type":"tab","label":"Flow 10","disabled":false,"info":""},{"id":"f91ad7f7.e70218","type":"ui_slider","z":"319958cf.2b5ea8","name":"HWTheight","label":"hight: {{value}} cm","tooltip":"","group":"140064e5.d4e86b","order":16,"width":0,"height":0,"passthru":true,"outs":"all","topic":"HWTheight","min":"90","max":"150","step":"1","x":250,"y":90,"wires":[["3fb34060.12e87"]]},{"id":"e900d243.1d713","type":"ui_slider","z":"319958cf.2b5ea8","name":"HWTdiameter","label":"Diameter: {{value}} cm","tooltip":"","group":"140064e5.d4e86b","order":17,"width":0,"height":0,"passthru":true,"outs":"all","topic":"HWTdiameter","min":"30","max":"55","step":"1","x":260,"y":150,"wires":[["520af70a.201188"]]},{"id":"3fb34060.12e87","type":"function","z":"319958cf.2b5ea8","name":"SVG height","func":"//var color=(msg.payload==1)?\"red\":\"gray\";\nvar height=(msg.payload)||90;\n\n msg.payload = {\n \"command\": \"update_style\",\n \"selector\": \"#hwt\",\n \"attributeName\": \"height\",\n \"attributeValue\": height\n}\nmsg.topic=\"\"; \n\n return msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":90,"wires":[["d1a33b78.63d288"]]},{"id":"520af70a.201188","type":"function","z":"319958cf.2b5ea8","name":"SVG width","func":"//var color=(msg.payload==1)?\"red\":\"gray\";\nvar width=(msg.payload)||30;\n\n msg.payload = {\n\"command\": \"update_style\",\n\"selector\": \"#hwt\",\n\"attributeName\": \"width\",\n\"attributeValue\": width\n}\nmsg.topic=\"\"; \n\n return msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":150,"wires":[["d1a33b78.63d288"]]},{"id":"d1a33b78.63d288","type":"ui_svg_graphics","z":"319958cf.2b5ea8","group":"88d7c7c7.09dea8","order":1,"width":6,"height":14,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100%\" viewBox=\"0 0 100 160\" width=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\" />\n <defs id=\"svgEditorDefs\">\n <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\" />\n <polygon id=\"svgEditorShapeDefs\" style=\"fill:rosybrown;stroke:black;vector-effect:non-scaling-stroke;stroke-width:1px;\" />\n <path id=\"svgEditorClosePathDefs\" style=\"stroke:black;stroke-width:1px;fill:rosybrown;\" />\n <marker id=\"square10\" markerHeight=\"10\" markerUnits=\"strokeWidth\" markerWidth=\"10\" orient=\"auto\" refX=\"0\" refY=\"0\" viewBox=\"-5 -5 10 10\">\n <rect height=\"10\" style=\"fill:black;stroke:none;\" width=\"10\" x=\"-5\" y=\"-5\" />\n </marker>\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"lrgd2-e1-repeat\" spreadMethod=\"repeat\" x1=\"20%\" x2=\"40%\" y1=\"0%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"lightblue\" />\n <stop offset=\"100%\" stop-color=\"#ef5b2b\" />\n </linearGradient>\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"waterlevel\" spreadMethod=\"pad\" x1=\"100%\" x2=\"100%\" y1=\"30%\" y2=\"25%\">\n <stop offset=\"0%\" style=\"stop-color: rgb(30, 144, 255); stop-opacity: 1;\" />\n <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n </linearGradient>\n </defs>\n <rect x=\"4.999999645824531\" y=\"5.000005683054098\" style=\"stroke: black; stroke-width: 1px;fill:url(#waterlevel);\" id=\"hwt\" width=\"30\" height=\"90\" transform=\"width\" rx=\"10\" />\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"","targetId":"waterlevel","classValue":"","attributeName":"gradientTransform","transformType":"rotate","fromValue":"","toValue":"","trigger":"msg","duration":"1","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[{"selector":"#waterlevel","bindSource":"payload.y1","bindType":"style","attribute":"gradientTransform"}],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"HWT settings","x":740,"y":165,"wires":[[]]},{"id":"93433a22.422c28","type":"function","z":"319958cf.2b5ea8","name":"HVT level in percent","func":"var hotwaterlevel=flow.get(\"hotwaterlevel\");\n\nmsg.payload = {\n\"command\": \"set_style\",\n\"selector\": \"#waterlevel\",\n\"attributeName\": \"y1\",\n\"attributeValue\": 50\n\n}\nmsg.topic=\"\"; \n\n return msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":460,"y":210,"wires":[["d1a33b78.63d288"]]},{"id":"4f420609.fac028","type":"ui_slider","z":"319958cf.2b5ea8","name":"hot water level","label":"Hot water level {{value}} %","tooltip":"","group":"140064e5.d4e86b","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":"100","step":1,"x":260,"y":210,"wires":[["93433a22.422c28"]]},{"id":"140064e5.d4e86b","type":"ui_group","name":"Group 2","tab":"2dfcd1fd.60f65e","order":2,"disp":true,"width":6},{"id":"88d7c7c7.09dea8","type":"ui_group","name":"Group 1","tab":"2dfcd1fd.60f65e","order":1,"disp":true,"width":8},{"id":"2dfcd1fd.60f65e","type":"ui_tab","z":"","name":"Tank test","icon":"dashboard","order":16,"disabled":false,"hidden":false}]
