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

Include more information in click events' output #115

Closed Alloc86 closed 1 year ago

Alloc86 commented 1 year ago

I was wondering if it would be possible to add more information about the element clicked in the output of events. Right now (according to all examples and doc I could find) if you add an event it will only include exactly the strings given in the event tab for payload and topic as well as the selector used. This means that if you have a lot of uniform elements (like light buttons in a floor plan) you have to add the events manually to each one individually. Therefore it would be nice if we could use a selector like ".lightbutton", it would properly apply that event to all matched elements and then have the event messages include e.g. the clicked element's ID (no idea about other useful things). The consumer of those messages would basically work the same as now (compare the event ID) but make the setup of the node a LOT more compact :)

bartbutenaers commented 1 year ago

Hi @Alloc86, Sorry for the delay. I'm very busy at the moment ...

Unless I have misunderstood you, I think this node already contains everything you need.

I you import the example flow from the "Second attempt" in this on my wiki, you will see that the output message contains the element id of the clicked ball in the christmas tree:

image

There is only on event in this example, and it is applied to all balls via a selector. Of course you can apply any kind of selector you like...

Please close this issue if the existing functionality fits your needs.

Bart

Alloc86 commented 1 year ago

No worries, you are doing this for free after all :) (Thanks btw! Is there really no place to donate though?)

I see, interesting one. But that would mean my SVG elements all have to have a certain ID pattern. Which I can of course do, but it still feels ugly that way, especially as you also have to make sure that the pattern would not match any other unwanted elements. All of them share the same CSS class though and I would have expected to be able to just specify a regular class as selector and get the elementId in addition to the selector on the event messages. But if that's not feasible I can definitely work with this.

Alloc86 commented 1 year ago

Actually, while extending my plan with more lights today I tried it again ... I do not know what I did different before or if I was just completely blind, but it actually seems to work. Event selector ".light", output message contains "elementId":"WzLichtTerrasseKurz" (which is the actual ID of the clicked SVG element).

So sorry for the trouble, all perfect! :)

(Still curious: Do you not have a donation link? I like to pass a few bits to OSS projects I like/use every now and then)

bartbutenaers commented 1 year ago

Hi @Alloc86, Glad to hear that you managed to get it running! I don't have enough (free) time anymore to have a short response time in all discussions...

Yes indeed. When you don't want some kind of pattern for your id's, you just apply a CSS class. Like the light class you used. That is indeed the best way to go. I used the id pattern only to build a quick and dirty demo.

P.S. I have a 'buy me a coffee' link on the readme pages of most of my other nodes. But don't feel obligated because you were stuck!

Alloc86 commented 1 year ago

It's not because of this "issue" but because I like to support OSS projects like this one if they do help me in my daily life :) You should really include that link in this project's readme too!