How can I show where an image was clicked from a scatter3 plot?

I created a small app using appDesigner:

It allows loading an RGB image and displaying a CIE Lab scatter plot in 3D. I attached a copy of the app.

My question is, once I clicked a point in the scatter plot, how would I be able to show the corresponding pixel on the 2D image?

I guess I have to respond to the click event of the scatter?

Any help is appreciated.

The slider at the bottom only serves to change the markersize interactively.

I'm slowly getting the hang of appDesigner. But I'm missing the ability to browse variables of the "script" environment and a few other goodies.

Is there documentation on appDesigner?

Answer 1

[Image Analyst]

Not sure how to get the lab value from your click, but assuming you figure that out, you can get a binary image of all the pixels in the image that are within some small tolerance of that lab value.

labImage = rgb2lab(rgbImage);
[lImage, aImage, bImage] = imsplit(labImage);
tolerance = 0.05; % Whatever you want.
matchL = (lImage > lClick - tolerance) & (lImage < lClick + tolerance);
matchA = (aImage > aClick - tolerance) & (aImage < aClick + tolerance);
matchB = (bImage > bClick - tolerance) & (bImage < bClick + tolerance);
matchingPixels = matchL & matchA & matchB;
overlaidImage = imoverlay(rgbImage, matchingPixels);
imshow(overlaidImage);

Hopefully it's self explanatory. That's just off the top of my head, untested so it may need modification.

[Roger Breton]

Many thanks!

I ought to try your code...

Meanwhile, I retraced and old script where I was doing something similar: after clicking on some data point on the scatter3, I clicked a button called "Plot2D" and it drew a circle around the "corresponding" pixel in the 2D image plot. Here's a screen capture :

I still have to adapt that logic to my appDesigner app but I confess I was thinking of an "interactive" solution. But this may suffice pedagogically with my students :-)

I attached the code, in case it helps someone...

[Image Analyst]

I'm not sure why there are so few colors in your scatterplot. It doesn't look like there is one marker per pixel. Perhaps you just subsampled the image or got the mean in a limited number of little boxes or circles.

The reason I used imoverlay is because it's possible that there could be multiple pixels with the same LAB that they clicked on and I wanted to show them all, not just one pixel with that color. Especially if there are multiple pixels with the same RGB value -- they will also have the same LAB value.

You probably have, but have you seen colorcloud?

[Roger Breton]

No I have not seen colorcloud?

I tracked down the code responsible in my "old" script and it makes use of :

% https://undocumentedmatlab.com/articles/controlling-plot-data-tips

% get the figure's data-cursor mode, activate it, and set some of its properties

DataCursorMode1 = datacursormode(fig_3D);

set(DataCursorMode1,'Enable','on','UpdateFcn',@displayCoordinates)

The other part of the code is to retrieve the Clicked CIE Lab values from the "Info":

function txt = displayCoordinates(~, info)

global clickedCIE_L clickedCIE_a clickedCIE_b;

clickedCIE_L = info.Position(3);

clickedCIE_a = info.Position(1);

clickedCIE_b = info.Position(2);

txt = {sprintf('CIE L: %.0f', info.Position(3)), sprintf('CIE a: %.0f', info.Position(1)), sprintf('CIE b: %.0f', info.Position(2))};

end

But I don't know how to "integrate" this code with an appDesigner app?

Yes, I subsampled the image upon loading it up in a variable. Otherwise, there are just too many data points :-)

[Roger Breton]

Looks like I'm wasting my time with datacursormode and appDesigner. Porting this line of code:

> DataCursorMode1 = datacursormode(fig_3D);

to my appDesigner app always results in "Invalid Handle". This is the line of code I try:

> DataCursorMode1 = datacursormode(app.fig_3D);

The app.fig_3D is the name of the axis. The documentation says something about appDesigner and "UIfigure" but there are no examples, nothing to investigate further?

[Image Analyst]

Sorry, I haven't used the data cursor with App Designer.

But if you're doing

> DataCursorMode1 = datacursormode(app.fig_3D);

from the command window, I'm pretty sure the command window doesn't know about the app structure of your GUI. Only the code within that GUI itself will see app - i. You'll have to click while using your GUI, and if you need some information outside of your GUI you'll have to save it out to disk somehow, though there may be trickier ways to see it all within memory and not saving it to disk.