Local server images in DrawSvg

[bartbutenaers]

Currently DrawSvg can only display local images when stored on the machine where you are viewing the Node-RED dashboard. But it cannot display local images when stored on the machine where the Node-RED flow is running. Joseph Liard is going to analyze whether a new API could be implemented...

[tkirchm]

Hi, can’t you just read the file with file in and send it to the svg graphics node? This would also allow editing the image before posting.

Example: I want to find all lines intersecting with a systems boundary and add their names in a textbox. Any Idea how i can find those intersections with node-red?

[bartbutenaers]

Hi @tkirchm,

Pushing an image into the SVG node is indeed something we had considered at the time being. However then the image is not always available. For example when you edit the drawing via DrawSvg (or via another third party SVG editor tool), you won't have the image available there. Which makes it harder to create a nice drawing. For example when you have a background image of your home, and you want to draw icons at the correct locations. Not easy when inject your images afterwards at runtime ...

P.S. To find intersection points of lines with Javascript, multiple tutorials are available like here on Stackoverflow. But please keep this issue dedicated to local server images ...

[tkirchm]

Hi @bartbutenaers ,

I prefer editing my images in Inkscape and therefore it would be easier to work on a samba drive instead of copying the drawing into the node. Can't you tell DrawSVG to load an local image?

This flow would also allow me to enrich the svg with information from an database.

Something like a option to select an local file and then there would be no svg information stored in the node.

Thomas

[bartbutenaers]

Morning @tkirchm ,

DrawSvg can load a local image for sure, but "local" means on the pc where the flow editor is being displayed. But we need it to get it from the server...

Think I have seen something that you want last week in another issue. But not sure where he puts the local file. And had no time yet to contact him again.

The option to load the entire SVG dynamically surely is possible, but have lots of other things to do before I can implement something like that...

[andreypopov]

<image width="1704px" height="695" id="background" xlink:href="/SVG.png" />

That is how I include images: Upload image to node-red's static folder - done! I dont use DrawSvg, prefer to edit text file. So I did not encounter this issue

[tkirchm]

Thanks a lot.

That looks like the solution I was searching for.

[tkirchm]

Hi @andreypopov

how do you include svg File from static folder? It just shows a white space. In SvgSource it works fine.

[tkirchm]

Hi @bartbutenaers

it's been awhile but I'm still thinking about a solution.

Can't you store svg content from an msg in your node? Store incoming msg = {"command":”setSVG”, "svg":”SVG-XML from client”} in SVG in node. And get svg as message when command "getSVG" arrives.

My workflow would be to create svg in the node with DrawSVG and get the information to make some calculations and then return the result. An example would be to calculate sum of input in a box and create a text with results.

Client side svg would be awesome to get latest information. This flow will be activated by button and so there will always be a client.

[bartbutenaers]

Hi @tkirchm, Could it be that this is related to another issue? Because this issue is about local server images ... If so, can you please open a new issue, otherwise it is very hard to keep track of all todo's.