Adding "mouseover" listener to images in dashboard

[moryoav]

I have a dashboard with many images (placed inside a ui-table, if it matters), I'm looking to add a "mouseover" listener, using a template node, so that each image will send a msg when the mouse is over it. This doesn't work unfortunately. Here's my template node code, any assistance will be greatly appreciated.

<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            const galleryimages = document.getElementsByTagName('img');

            Array.from(galleryimages).forEach((image, index) => {

                image.addEventListener('mouseover', event => {
                    console.log(`Image ${index}`);
                    send({payload: ${index}});
                })
            });
        });
    })(scope);
</script>

[Steve-Mcl]

Move the addEventListener outside of the watch otherwise each time a message is sent to the ui-template, you will add more listeners.

something like ...

<script>
    (function(scope) {
        const _scope = scope;

        const galleryimages = document.getElementsByTagName('img');
        console.log("galleryimages: ", galleryimages  );
        Array.from(galleryimages).forEach((image, index) => {
            image.addEventListener('mouseover', event => {
                console.log(`Image ${index}`);
                _scope.send({payload: ${index}});
            })
        });

        scope.$watch('msg.payload', function(msg) {
            console.log("msg", msg);
            if(msg && msg.topic == "control") {
               //do something with the msg.payload!
            }            
        });
    })(scope);
</script>

(untested)

[moryoav]

That was actually intentional, each time a message is sent to this node there are new images. So it's indeed needed to run this script every time a message is received.

[Steve-Mcl]

Ok, so are you getting any errors or console logs in browser console?

[moryoav]

Back to my original script, I've replaced the send with a simple 'alert', just to see if I'm getting anything (I'm not). In the console I'm getting printouts of 'Image 1', 'Image 2', etc., that come from the line before the addListener, so the script sees the array of images, but nothing happens after that.
Also, not sure if this is the correct way to look at it, but when I "inspect" one of the images, go to Properties, then onmouseover:null, I'm guessing that's not right.

<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            const galleryimages = document.getElementsByTagName('img');

            Array.from(galleryimages).forEach((image, index) => {
                console.log('Image '+index);
                image.addEventListener('mouseover', event => {
                    //console.log(`Image ${index}`);
                    //send({payload: '${index}'});
                    alert('here');
                })
            });
        });
    })(scope);
</script>

[Steve-Mcl]

Out of curiosity, does it work if you use jQuery (jQuery is available in dashboard)

<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            console.dir(data);
            $('img').off("mouseover"); //remove any existing evt handlers
            $('img').on("mouseover", function(event) {
                 scope.send({payload: event});
            });
        });
    })(scope);
</script>

again - untested ( but confident )

[moryoav]

That works! And lastly, now in the "scope.send", how would I go about sending the img.src? So I'll know what I'm hovering over, because otherwise I don't see that "event" holds any information on what the hover is on. Thank you!

[Steve-Mcl]

Since i used a std function instead of arrow function, this should be the object that was mouseovered. In theory, you can then access any property of the img element using $(this).prop("_prop_name_") or any data value you added to the img using $(this).data("_data_item_name_") and build whatever payload you desire.

[hotNipi]

@moryoav

how would I go about sending the img.src?

scope.send({payload: $(event.target).attr('src')});

[moryoav]

Everything works great, thanks everyone!

[Steve-Mcl]

Good stuff.

I'm pleased @hotNipi got the " solution" since your original question was Adding "mouseover" listener to images in dashboard

Only kidding BTW

[moryoav]

Actually you got the "solution"... I tried to give it to the both of you but couldn't, so you got it because that was indeed my original question...

[Steve-Mcl]

It was a joke I'm sure you realise? (And I have plenty solutions anyhow ).