Click-on feature on Observablehq Notebook

Community Help
1

Hello folks,
Thank you so much for your assistance and suggestions in my previous inquiries. This time, I’m using the same notebook for a different problem. Currently, the code can compute the centroid point within the circle. Now I want to create an algorithm that allows me to select and/or deselect circles by clicking on each one. Finally, the selected circles will be cropped and saved on the local machine. I’m not sure how to implement the click-on feature in Observablehq. Any hints/guides/codes will be greatly appreciated. For your convenience, I’ve included the link to my notebook.

2

If you want individual objects in your image to react to pointer events (like a mouse click), then it’s generally much easier to work with an SVG than with a canvas. With an SVG, you can tie events directly to the individual elements. Here’s a nice notebook that illustrates pointer interaction with an SVG:

When working with a canvas, you need to infer from the mouse coordinates which object you’re hovering over. Of course, that’s not so bad with circles but still much trickier than with SVG. Here’s a notebook that illustrates that:

3

@mcmcclur Thanks for sharing the links. I’ll try to implement and update here.

4

I had a quick play. The openCV mouse event doesn’t seem to be in the JS version as it’s part of the advanced UI or something like that.

You could make an array containing the X Y width height of the area the circles are in and then compare where the mouse is on the image.

I used the center of the circles to build and x y array but didn’t use that to make the array described above ( it maybe of use to you)

I added id’s to the html so the img and canvas can be selected via D3 and attached a click event that returns the x,y position the mouse clicked on.
I took off the html size styles as the html img/canvas are different sizes to those processed by openCV.
If you used the styles then you would have to take the scale difference of the mouse positions over the image to the reference position on the openCV image.

I hope that can help get you started.

2 Likes
5

@hellonearthis Thanks for sharing the details. I’ll try to implement and update here.

6

@mcmcclur @hellonearthis I would like to say a big thank you to all of you for your valuable suggestions and sharing links. It took me a while to solve the issue. But I partially solved it now. If you click on any position of the image, you will get coordinate points. See my latest notebook here.

Now I am trying to add the new coordinate points based on clicks with the existing array, ie., final_result[1]. Any help will be highly appreciated. Thanks a lot!