Create an SVG path without editor (and start troubleshooting) - bartbutenaers/node-red-contrib-ui-svg GitHub Wiki

The Getting started with the UI SVG node explains how to use this UI node, by drawing a circle within the embedded DrawSvg editor. As a result, some SVG source was being generated:

image

But some people want to enter the SVG source themselves, without generating it via a graphical SVG drawing editor (like DrawSvg). Or you might have an issue within your SVG source, and you don't know how to correct it via DrawSvg. In those cases you might want to have a look at the SVG source and fix it yourself by editing the SVG source manually.

In this tutorial I will give a very basic introduction how to get started with SVG. Note that I will NOT start writing tutorials for all kind of geometry shapes, because then I won't be able to go to sleep anymore ;-). Moreover there are a huge amount of excellent SVG tutorials available on the internet, so it would be completeley ridiculous to write yet another one here...

Here are some basic steps to change the SVG source in the above screenshot to draw an SVG path manually from scratch:

  1. First of all I would really recommend you to read a few basic tutorials about SVG. It all depends on your personal taste which one you choose (youtube, written tutorials, interactive tutorials, ...). This will save you a lot of time afterwards...

  2. Let's for example have a look at the w3schools tutorial to draw a simple SVG path:

    image

  3. All you need to do is to copy the <path ...> snippet into your SVG drawing:

    image

  4. Deploy your flow and have a look in your Node-RED dashboard. Hmmm, seems something wrong because the drawing area is empty:

    image

  5. Time to start troubleshooting... To make sure the entire SVG drawing is available in the dashboard, you can do right-click (on top of the SVG area!!) and then select "Inspect":

    image

  6. Now the DOM tree of your SVG drawing will be displayed. Open the content of the SVG element, by clicking on the arrow before the 'svg' element. And there indeed you can see that your SVG path has been send to your browser correctly (i.e. it has arrived in your browser's DOM tree):

    image

    Now we have to find out why our browser doesn't want to draw our shape. Because normally the browser will render everything in its DOM tree (from top to bottom)...

  7. By clicking on the shapes in the DOM tree, you will see the bounding box of the shape:

    svg_troubleshooting

    From this we can conclude that our SVG drawing is much too small, so we are drawing our SVG path shape outside our SVG drawing area.

  8. To fix this we will make sure our SVG drawing fills all the available space, which has been offered to us by the Node-RED dashboard (based on your settings of the dashboard groups and so on...). Currently the SVG width and height are 100, which means 100 pixels. We will change that to 100% to fill the available area:

    image

    As you can see the dimensions of the SVG drawing have now become (on my screen) 576 x 312 pixels.

    Note that you can also change these values directly in your SVG DOM tree, to experiment very easily and see the results immediately (without having to switch to Node-RED and deploy over and over again). Of course all those changes will be lost as soon as your refresh your page! So remember all your changes, so you can repeat them afterwards in the SVG source of your UI node!

    See also this tutorial, for setting your SVG viewport correctly.

  9. From the previous screenshot it becomes clear that our SVG shape is still outside our drawing area, which means that the path coordinates from our w3schools example don't match with our drawing area. When I change the path to e.g. "M15 0 L25 50 L85 70 Z" then it starts looking much better:

    image

  10. But the color is still not looking good. You can see here that the path element will inherit the color from the dashboard theme. To override that style, you need to apply a CSS fill color style:

    image

    Which will result in this:

    image

  11. Now we want to change the look and feel of our SVG path via input messages. All attributes of our SVG element can be updated, as soon as you have specified a unique id for your SVG element:

    image

  12. For example the following input message can be used to change both the "d" attribute and the fill color with a single message:

    [
   {
      "command": "update_attribute",
      "selector": "#my_path",
      "attributeName": "d",
      "attributeValue": "M70 0 L125 50 L50 20 Z"
   },
   {
      "command": "update_style",
      "selector": "#my_path",
      "attributeName": "fill",
      "attributeValue": "green"
   }      
]

    Which looks like this when that message is injected:

    ui-svg-change-path

That was it...

Now you can start playing with SVG. Find examples on the web, and start experimenting...

Below the example flow of this tutorial:

[{"id":"4f50d38973ae64a6","type":"ui_svg_graphics","z":"ffb4101943a7598f","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  <path id=\"my_path\" d=\"M15 0 L25 50 L85 70 Z\" style=\"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;\n}","name":"","x":680,"y":700,"wires":[["645204c76a5badc1"]]},{"id":"645204c76a5badc1","type":"debug","z":"ffb4101943a7598f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":850,"y":700,"wires":[]},{"id":"dd7e140877708876","type":"inject","z":"ffb4101943a7598f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#my_path\",\"attributeName\":\"d\",\"attributeValue\":\"M70 0 L125 50 L50 20 Z\"},{\"command\":\"update_style\",\"selector\":\"#my_path\",\"attributeName\":\"fill\",\"attributeValue\":\"green\"}]","payloadType":"json","x":510,"y":700,"wires":[["4f50d38973ae64a6"]]},{"id":"83c2bdcc.1173a","type":"ui_group","name":"Getting started","tab":"b4bb5633.ba92b8","order":1,"disp":true,"width":"11","collapse":false,"className":""},{"id":"b4bb5633.ba92b8","type":"ui_tab","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]
⚠️ **GitHub.com Fallback** ⚠️