Legend

[dpatel2016]

I am not sure if this is a current feature, but I couldn't find anything close to this. Is there a way we can add legend to svg? When I put my mouse over the SVG on the dashboard, I want to see a description of the status, basically a legend.

[Steve-Mcl]

As with any SVG you can draw and animate anything you wish for. So draw a legend, set it's visibility hidden then attach an event to your other parts of SVG to unhide the legend.

In other words what you are trying to achieve is certainly possible but you're going to have to learn SVG and animations.

[bartbutenaers]

Hi @dpatel2016,

mouse over the SVG

You mean hoovering a specific element, so a tooltip appears? Or you mean in empty space, where no shapes are located?

I want to see a description of the status

And what would be the content of that status/ legend.

Perhaps I understand it better when you supply a use case and a screenshot of an example. Bart

[dpatel2016]

Hi @bartbutenaers, Yes hovering the mouse over a specific element and seeing a tooltip appear such a the coordinates setting it has right now. I don't have a screenshot, but let's say I have a warning logo element that comes up when I input "true" for it. Then when I move my mouse over the warning sign, I want to see the explanation/ fault code. Currently, I have the code appear at the bottom of the sign as a text, but would love it if I can hover over the sign and see the details as a tooltip.

[bartbutenaers]

And have you already tried SVG tooltip elements? For example:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>

[dpatel2016]

No, I haven’t! Do you have a flow example I can look at?

[bartbutenaers]

I had included an example SVG above ... Just paste that example SVG drawing into the SVG tabsheet of this node. I expect that it should work

[dpatel2016]

No, it did not work.

[bartbutenaers]

If I use this simple example flow:

[{"id":"ab3a4e6a9e4dbcbe","type":"ui_svg_graphics","z":"3e329e777a5729f1","group":"28cdac6db4804909","order":3,"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 cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\">\n    <title>Hello, World!</title>\n  </circle>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":410,"y":620,"wires":[[]]},{"id":"28cdac6db4804909","type":"ui_group","name":"External SVG file demo","tab":"3667e211.c08f0e","order":1,"disp":true,"width":"10","collapse":false},{"id":"3667e211.c08f0e","type":"ui_tab","name":"Showcase","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Then the circle gets a tooltip, as soon as I move the mouse above it:

[dpatel2016]

Got it, thanks!