bartbutenaers / node-red-dashboard-2-ui-svg

A Node-RED UI node to show SVG drawings in Node-RED dashboard v2
Apache License 2.0
7 stars 2 forks source link

Can't display SVG exported from Inkscape #8

Open mecworks opened 3 months ago

mecworks commented 3 months ago

I have tried and tried different methods and escaping, etc. to get an SVG from Inkscape to display with no luck. In the previous node, you could paste your entire SVG into a form This made it easy to display an SVG that was made from a too like Inkscape. Can you please provide some tutorials for displaying the output from Inkscape? I've spent several days trying to figure it out.

I can display your examples which means you must have hand-crafted those to work. I can't get anything other than your examples to display at all.

bartbutenaers commented 3 months ago

Hi @mecworks,

Do I understand this correctly:

  1. You create a drawing with Inkscape.
  2. You paste that drawing in an Inject node, to inject a message similar to my set-svg example.
  3. No image shows up.

You can alwas export an example flow and share it here, so I can have a look at it. But please use a simple drawing, and a simple flow.

Can you please provide some tutorials for displaying the output from Inkscape?

No. As explained in the readme page, this node is experimental and most likely it will change. I learned a lot lately about the new dashboard after a LOT of discussions, so I am not pleased anymore with the current design of this node. When I would now start documenting, I need to start later on all over again. Don't forget that I already have to write everything again from scratch now for D2.

Moreover all my free time currently goes to contributions of the new dashboard itself, to allow me to migrate my own dashboard to D2. Can't be at 2 places at the same time. That unfortunately happens when so few people are willing to contribute to open-source...

mecworks commented 3 months ago

You paste that drawing in an Inject node, to inject a message similar to my set-svg example.

Yes, I paste the document into the inject node as outlined in the example. After the "svg": part, replacing the SVG in your example. First off, it complains that it's an invalid JSON string and I have to go in and replace all " with '. That's insane to have to do that, especially in a larger document. Once I've done that, it just won't display when injected. A get_svg command does show the content of the SVG I summited

Here is a simple SVG from Inkscape. It's a red circle with a black path around it for you to try. Inkscape red circle drawing

bartbutenaers commented 3 months ago

That's insane to have to do that

When I started this node some time ago, I had a few solutions in my head. But seems you are right. None of these are supported by Node-RED. Which makes this way of working quite useles. What a pitty...

As I mentioned before, I am not pleased with the current design of this node. It already solves some important issues that I had with the old node, but it is far from decent enough. And this issue you registered even makes it worse.

But need to do quite a lot of other dashboard related stuff, before I can start again with this node...

mecworks commented 3 months ago

I can understand your need for focusing elsewhere. Good luck with the other D2 work you have and I look forward to a working SVG node when you have time.

bartbutenaers commented 3 months ago

BTW this is how the new design should look like:

image

Currently you can only use set_svg command to override the SVG inside the (server-side) virtual DOM, by a dynamic SVG string injected via an input message. But it should become possible to enter a static SVG string in the node's config screen. Which is automatically loaded into the virtual DOM, or explicit (via a set_static_svg command) for use cases that require more control.

In all 3 cases it should be possible (optionally) to apply the dynamic changes of the current SVG to the new SVG. That way you can change your static svg (e.g. add some extra furniture in your floorplan via Inkscape), without having to fear about loosing dynamic updates already executed on the previous version of your drawing (e.g. flashing sensors).

But now I am going to finish first all my other dashboard related contributions, because continous context switching results in too much overhead for me...

mecworks commented 3 months ago

Looks great. I look forward to a working node once you get a chance to get back to coding. Good luck with your D2 work.