search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
94 stars 27 forks source link

add_events and reload #132

Closed thalesmaoanz closed 2 weeks ago

thalesmaoanz commented 2 weeks ago

Hi @bartbutenaers , thanks again for this awesome feature. I've been using it for a long time now. I've learned a lot form it.

I was playing with a new project today and faced something odd.

Here is the flow:

1) Don't configure any event. It will be added with msg.payload. 2) Add any event, like mouseover and mouseout. 3) Reload ui. 4) Events are lost.

Ok, so far, so good. This is the expected behaviour since the beginning. Thus I use loaded payload from svg-ui to trigger new events.

Now, I open a second page. It triggers again the msg.payload to register the event. After that, I receive a error message saying that the event has already been registered. Any suggestion to avoid this? Perhaps a way to keep persistent events from msg.payload? Only needed after deploy?

bartbutenaers commented 2 weeks ago

Hi @thalesmaoanz,

When you reload the page, the old AngularJs dashboard (that you are using) is resending (only) the last message. Which causes nothing but troubles. When you search through the issues of this repo, you will see lots of users with the same troubles. They created all kind of workarounds, but none of these were waterproof.

I 'hope' to be able to solve most of the issues in my new svg node for the new VueJs dashboard. I have added a notification about that now on the top of the readme page in this repo.

Bart

thalesmaoanz commented 2 weeks ago

Just by curiosity. Are you going to use a package such as vue-svg-loader. I'm really interested to help you.

bartbutenaers commented 2 weeks ago

Hi @thalesmaoanz, No I had not planned to use `vue-svg-loader. I am by far a Vue expert, but it looked to me that it works like this: during a Webpack build, it will use the vue-svg-loader to transform any detected SVG files into a Vue component. The new Node-RED dashboard uses Vite builds (instead of Webpack), as do all ui nodes. So I could use vite-svg-loader instead, but I don't think that is really useful for my node: because I don't have svg files that need to be compressed and added to my Vite build file. Instead the svg can be injected dynamically via an input message.