Skip to content

Getting started with the UI SVG node

Jump to bottom
bartbutenaers edited this page Dec 29, 2021 · 1 revision

This tutorial explains the basics to get started with the UI SVG node.

  1. For every drawing that needs to be displayed in the Node-RED dashboard, add a UI SVG node to the flow.

  2. Double click the node to open the config screen, and specify the group:

    image

    The group determines where the drawing needs to be displayed in the dashboard (like you do with all other UI nodes).

  3. Click on the SVG tabsheet, to show the default SVG drawing:

    <svg x="0" y="0" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <!-- Add here your SVG shapes (circles, rectangles, ...) -->
   <!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->
</svg>

  4. Adjust the width and height of the drawing to your needs. Note that it might be required to change the viewbox also, which specifies which part of the SVG drawing needs to be displayed (and the remainder will stay hidden). The viewbox ("x position, y position, width, height") determines which part of the SVG drawing should be displayed.

    The following example shows how to use the viewbox to display only the center part of an SVG drawing:

    image

    By default the is "0 0 100 100" which means that the entire drawing (which has default width and height equal to 100) will be visible. By changing the viewbox (e.g. via input messages), it is e.g. possible to start zooming and panning...

  5. You can change the SVG source manually. For example I copied the SVG source for a red circle somewhere on the web, and I pasted it into the editor on the SVG tabsheet:

    image

    Manually pasting the SVG source is also the way to go, when you use a third-party SVG editor tool: draw your stuff in the tool, and at the end export your drawing to SVG and paste that SVG source in the editor on the SVG tabsheet.

  6. After deploying the changes, the SVG drawing will be displayed in the Node-RED dashboard in the specified group:

    image

  7. Beside manually editing the SVG source (see step 5), it is also possible to draw in the DrawSvg editor (which has been embedded into this node). To open your SVG drawing in DrawSvg, click on the blue icon in the first tabsheet:

    image

  8. DrawSvg will be started in a popup dialog window, and the SVG source (from the "SVG tabsheet") will be imported automatically into DrawSvg:

    image

  9. You can start editing your drawing in DrawSvg now. See the DrawSvg documentation for more information, since this is not in scope for this tutorial. You can intermediate save your changes (to the SVG tabsheet of the node), by clicking the "Save" button:

    image

  10. When finished editing the drawing, press the "Close" button. The popup window will be closed, and the (edited) drawing will be stored automatically in the editor on the SVG tabsheet.

  11. Now we want the shape to respond to user actions. To accomplish that, the shape should have a unique id (or css class):

    <circle id="my_circle" ... />

    Note that such an id can also be set via DrawSvg:

    image

  12. Via this unique id, you can apply e.g. a "click" handler to this shape:

    image

  13. As a result - after deploy - the circle has become 'clickable': as soon as the mouse hoovers the circle, the mouse cursor will become a hand (to visualize that the shape is clickable). And as soon as the circle is clicked, an output message will be send. This becomes visible whey you add a Debug node to the output of the SVG node:

    demo_svg_click

  14. Now we also want do it the other way around: which means to control the shape in the drawing, by injecting input messages into the SVG node. Lots of things can be controlled, as you can read in the documentation of this node. In this case we will change the fill color to green, via this message:

    {
   "command": "set_attribute",
   "selector": "#my_circle",
   "attributeName": "fill",
   "attributeValue": "green"
}

    Which results into this:

    svg_demo_fill_color

That was it for this getting started tutorial. You now can show a basic SVG drawing in your Node-RED dashboard, which is fully interactive by two way communication: send output messages for user actions on shapes, and add/change/remove shapes via input messages. See the documentation of this node for more advanced usage!

Below you can find the entire flow of this tutorial:

[{"id":"2ad1d234092225ad","type":"ui_svg_graphics","z":"177ce39c5adc8c1b","group":"83c2bdcc.1173a","order":0,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <circle id=\"my_circle\" cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\n</svg>","clickableShapes":[{"targetId":"#my_circle","action":"click","payload":"My payload","payloadType":"str","topic":"My topic"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":1520,"y":100,"wires":[["346b10aa7e3a57a0"]]},{"id":"346b10aa7e3a57a0","type":"debug","z":"177ce39c5adc8c1b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1690,"y":100,"wires":[]},{"id":"a1255fe7e993a7de","type":"inject","z":"177ce39c5adc8c1b","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"set_attribute\",\"selector\":\"#my_circle\",\"attributeName\":\"fill\",\"attributeValue\":\"green\"}","payloadType":"json","x":1350,"y":100,"wires":[["2ad1d234092225ad"]]},{"id":"83c2bdcc.1173a","type":"ui_group","name":"Getting started","tab":"b4bb5633.ba92b8","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"b4bb5633.ba92b8","type":"ui_tab","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]
Clone this wiki locally