Animating SVG from node-red

General
1

Hi.
Apologies for this newbie question..
I've made a flow that works fine with the built in gauges from dashboard node.
However I wanted to use a gauge in the UI template node from d3.js.
I put the code from this link in the UI template.

https://stackoverflow.com/questions/47391266/gauge-d3-display-values-positions

However i'm stuck in how to get my flow.get("value") or dynamic numbers into the (var value = 17;) line.. replacing 17 ofcourse..

I've tested a lot of the examples around.. but my lack of javascript knowledge stops me..

isn't there a quick line of code that could fetch my msg.payload into the value variable??

2

ok, I have moved further in my project.
However my lack of javascript skills set me back..

I have gone trough the different tutorials of using SVG editor and "databinding" to move an object in my drawing. I can use the animation settings to move it, but something stops at in how to pass a single position value from a mqtt message in my positioner..

Where are the actual databind and names connecting??

3

That link says nothing about data binding.

Are you using d3 in a template node OR are you referring to the databinding capabilities of https://flows.nodered.org/node/node-red-contrib-ui-svg ?

4

apologies.
First, i was trying the d3 gauge in template node yes.

Then, now, I'm trying to draw my own "instrument" in node-red-contrib-ui-svg yes as you mention.

5

Then I would suggest you update the title of this thread to attract the right kind of users.

Additionally, the read me and the wiki have extensive information - there is even a step by step Use-databinding-to-simplify-the-input-message-structure. Have you followed that?

6

I have tried, but as previously stated I am quite new on this.. Tried to isolate my nodes for some assistence. I hade to remove a lot of unneccesary stuff.
I'm trying to change the height of the blue bar. (the number is not relevant now.. I jut want it to move..)

[{"id":"7ec73d3.008a8c4","type":"ui_svg_graphics","z":"4b106737.5f5bb8","group":"a3f8a53b.b82b18","order":6,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"350\" height=\"300\" viewBox=\"-32.5 -9 383.5 310\">\n  <rect id=\"svgEditorBackground\" x=\"-32.5\" y=\"-9\" width=\"383.5\" height=\"310\" style=\"fill:none;stroke:none;\" />\n  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->\n  <g>\n    <title>background</title>\n    <rect fill=\"#fff\" id=\"canvas_background\" height=\"302\" width=\"352\" y=\"-1\" x=\"-1\" />\n    <g display=\"none\" overflow=\"visible\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" id=\"canvasGrid\">\n      <rect fill=\"url(#gridpattern)\" stroke-width=\"0\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" />\n    </g>\n  </g>\n  <g>\n    <title>Layer 1</title>\n    <ellipse ry=\"50\" rx=\"50\" id=\"svg_10\" cy=\"234.5\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#C97A86\" />\n    <ellipse ry=\"14\" rx=\"14\" id=\"svg_12\" cy=\"235\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#B9FFCE\" />\n    <rect stroke=\"#000\" id=\"svg_13\" height=\"200\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_14\" y=\"51.5\" x=\"129.5\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">Fractions</text>\n    <rect stroke=\"#000\" id=\"svg_15\" height=\"200\" width=\"59\" y=\"65\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_16\" y=\"53.5\" x=\"290.5\" fill-opacity=\"null\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">WC</text>\n    <rect id=\"svg_17\" height=\"65\" width=\"60\" y=\"200\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#6D97AB\" />\n    <rect id=\"svg_18\" height=\"60\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#A8FFE9\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_19\" y2=\"125\" x2=\"210\" y1=\"65\" x1=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <line stroke=\"#000\" stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_20\" y2=\"265.23077\" x2=\"285\" y1=\"265.23077\" x1=\"210\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"none\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_21\" y2=\"125\" x2=\"285\" y1=\"200\" x1=\"211\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <rect stroke=\"#000\" id=\"svg_23\" height=\"140\" width=\"59\" y=\"125\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#6D97AB\" />\n  </g>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[{"selector":"svg_23","bindSource":"payload.msg","bindType":"style","attribute":"height"}],"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":"","x":1380,"y":1260,"wires":[[]]},{"id":"82ebc8c4.edeb98","type":"inject","z":"4b106737.5f5bb8","name":"set fill attribute to yellow","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"{\"svg_23\":{\"height\":250}}","payloadType":"json","x":1140,"y":1260,"wires":[["7ec73d3.008a8c4"]]},{"id":"a3f8a53b.b82b18","type":"ui_group","z":"","name":"Stat","tab":"7634cc87.2ea544","order":1,"disp":false,"width":"6"},{"id":"7634cc87.2ea544","type":"ui_tab","z":"","name":"Stat","icon":"dashboard"}]
7

So you set the binding source to payload.msg ...

image

but you send ...

{"svg_23":{"height":250}}

The help info (read me) shows this graphic on how to link up data bindings...

image
image757Ă—213 24.4 KB

^ as you can see in the above the payload contains .position.x and it is mapped to attribute x

try changing your inject to {"height":250} and your binding source to payload.height like this ...

[{"id":"a88341e1.4d4cc","type":"ui_svg_graphics","z":"cc04c471.89f4b8","group":"b072e0af.6bdc4","order":6,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"350\" height=\"300\" viewBox=\"-32.5 -9 383.5 310\">\n  <rect id=\"svgEditorBackground\" x=\"-32.5\" y=\"-9\" width=\"383.5\" height=\"310\" style=\"fill:none;stroke:none;\" />\n  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->\n  <g>\n    <title>background</title>\n    <rect fill=\"#fff\" id=\"canvas_background\" height=\"302\" width=\"352\" y=\"-1\" x=\"-1\" />\n    <g display=\"none\" overflow=\"visible\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" id=\"canvasGrid\">\n      <rect fill=\"url(#gridpattern)\" stroke-width=\"0\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" />\n    </g>\n  </g>\n  <g>\n    <title>Layer 1</title>\n    <ellipse ry=\"50\" rx=\"50\" id=\"svg_10\" cy=\"234.5\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#C97A86\" />\n    <ellipse ry=\"14\" rx=\"14\" id=\"svg_12\" cy=\"235\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#B9FFCE\" />\n    <rect stroke=\"#000\" id=\"svg_13\" height=\"200\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_14\" y=\"51.5\" x=\"129.5\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">Fractions</text>\n    <rect stroke=\"#000\" id=\"svg_15\" height=\"200\" width=\"59\" y=\"65\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_16\" y=\"53.5\" x=\"290.5\" fill-opacity=\"null\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">WC</text>\n    <rect id=\"svg_17\" height=\"65\" width=\"60\" y=\"200\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#6D97AB\" />\n    <rect id=\"svg_18\" height=\"60\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#A8FFE9\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_19\" y2=\"125\" x2=\"210\" y1=\"65\" x1=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <line stroke=\"#000\" stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_20\" y2=\"265.23077\" x2=\"285\" y1=\"265.23077\" x1=\"210\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"none\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_21\" y2=\"125\" x2=\"285\" y1=\"200\" x1=\"211\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <rect stroke=\"#000\" id=\"svg_23\" height=\"140\" width=\"59\" y=\"125\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#6D97AB\" />\n  </g>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[{"selector":"#svg_23","bindSource":"payload.height","bindType":"style","attribute":"height"}],"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":"","x":520,"y":720,"wires":[[]]},{"id":"4292ae05.f2c2d","type":"inject","z":"cc04c471.89f4b8","name":"data bind to height","topic":"databind","payload":"{\"height\":250}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":720,"wires":[["a88341e1.4d4cc"]]},{"id":"b072e0af.6bdc4","type":"ui_group","z":"","name":"Stat","tab":"e88b650c.2e2928","order":1,"disp":false,"width":"6"},{"id":"e88b650c.2e2928","type":"ui_tab","z":"","name":"Stat","icon":"dashboard"}]

This might also help...

1 Like
8

It's always easy to understand afterwards..
Thank you Steve for pointing me in the right direction!

1 Like
9

moved last reply to separate topic

10

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