[Announce] node-red-contrib-ui-svg

Share Your Nodes
84

Do you mean whether my fix from Github last night will be published later on NPM?
If so, of course but I want to get first an idea whether this has impact on other users (for which it is currently working correctly already due to e.g. a finetuned viewbox).
I hope to get some feedback from users here... And if don't get feedback, I again will have to import some flow that users have been shared in the past, and test it again all on my own ...

As I have explained above already:
The problem could be on the server side (while trying to read the image from the filesystem), so you should have a look at the Node-RED log. But the problem could also be on the frontend side (while trying to request the image from the server), so you should also have a look at your browser console log (via the "developer tools" menu of your browser where your dashboard is displayed).
I have already added quite some logging for this (e.g. when the specified file doesn't exists ...), so I assume there must be something logged somewhere ...

Are you sure the filename is correct? Are the file permissions ok, so Node-RED can read it?
I have been trying all evening to let if fail, but keeps working fine here (both in Drawsvg and dashboard) ...
My time is up for today, but just a thought that suddenly popped up in my head now: can you share the generated SVG string (from the "SVG" tabsheet). I'm now wondering whether DrawSvg generates "href" or "xlink:href", because currently the SVG-node only supports the latter one for local images. So if that would be the case, then it is normal that you don't get any errors because it is simply not supported yet ...

Like Steve already explained, we have created an SVG node to support SVG inside Node-RED. But of course that means you can only use it when you know SVG...
However to make it usable for a broader audience, we have integerated DrawSvg. So in that perspective I understand your reaction: you draw something in DrawSvg, and you expect it to be displayed a bit similar at least in the dashboard. Without having to mess in the SVG source with viewboxes and svg width and height attributes ...
Therefore I have contacted to the author of DrawSvg about this, whether we can provide in the near future a solution for this. Cannot promise anything yet before I have discussed this with him. You will need to have patience ...

85

For me everything fine now! Thanks a lot.

I have found a tool for a floorplan:
Sweet Home 3D
Can be saved in svg and import in the node. Works great for me!

1 Like
86

After many years of waiting, there are finally many tools that can export to SVG.

If you have access to MS Office, recent versions of PowerPoint can save to SVG very nicely.

I believe Sketchup also has SVG export and has a free version. I've used Sketchup in the past to knock up architectural views to see if a house loft extension would fit, how much room it would create, and what it would look like. It lets you do things that many of the cheap/free home 3d tools won't let you - for example, one of the walls of our house is 14 degrees out of true. :wink:

87

I have done a test myself based on someone else his flow (which I fetched from this Github issue). It looks to me like the SVG drawing still fits the available space in the dashboard:

image
image1099Ɨ472 46.6 KB

So I consider this fix as working correctly, which means it will be published on NPM in the next minor version of the SVG node...

1 Like
88

Published on NPM as version 2.2.1:

image

Other minor improvement is that now the events can be reordered, which seemed to be useful when lots of events had been added (and things have grown 'organically'):

svg_events_move

3 Likes
89

Hello again :wink:

I have done a lot of things in my svg note and nearly anything works great.
But with on of my workarounds, IĀ“m not realy happy.
Perhaps someone have a better idea?

The problem is, if the page with the svg will be reloaded, not every sensor sends this stats again.
At the moment my workaround is, to loop the stats, so they will always be send. But that is a lot of data sending, only for the moment the page will be reloaded.
Is there a way to get the current stats without my workaround?

Thanks in front!
Mili

90

Perhaps this example flow might be a place to start. And combine that with this ui_control proposal, in case a new dashboard client connects.

1 Like
92 
<use xlink:href="#pix-cancel" x="604.245" y="246.37601" height="49.898998" style="vector-effect:non-scaling-stroke;fill:#bc8f8f;stroke:#000000;stroke-width:1px;visibility:hidden" id="offline_mplug5" width="49.898998" transform="translate(-129.40055,140.71426)"></use>

How do I make this item visible via msg.payload please ?

I have tried

`msg = {payload:{
"command": "remove_attribute",
"selector": "#offline_mplug5",
"attributeName": "visiblity"

}};`

93

Hi @smcgann99,

I temporarily don't work with Node-RED at the moment, so cannot test this. But when you read the related section in my readme page, I assume it should work like this:

  1. Give you "use" element a unique id:
    <use id="my_use_id" ...>
  2. Hide the "use" element by injecting this message:
    {
   "command": "set_attribute",
   "selector": "#my_use_id",
   "attributeName": "visibility",
   "attributeValue": "hidden"
}
  3. Show the "use" element by injecting this message:
    {
   "command": "set_attribute",
   "selector": "#my_use_id",
   "attributeName": "visibility",
   "attributeValue": "visible"
}

Bart