How to get pixel's position of an image in UIAxis in AppDesigner?

I have to show a very large image(the size is about [230,1e4~1e5]) with AppDesigner. And I want to get any pixel's X/Y position for later code. After some times' test, it could be displayed successfully with image(app.modelObj.Image,'Parent',app.PictureUIAxes); But I found the UIAxis controller can't support the datatip or datacursor tool any more...

So I try to set a customized call_back for the UIAxis to get the pixel's position when I click on it, or try to set a call_back attribute just like 'ButtonDownFcn' to active someting. But I don't know how to write the code. What should I do then?

Answer 1

[Adam Danz]

Description of the problem

The data cursor does not work for image objects plotted in App Designer (or in any uifigure) prior to r2020B. AppDesigner features are still being rolled out with every release of Matlab. For example, data tips have been implemented in r2020a. But for image objects, the datacursor still does not work (prior to r2020B).

Here is a demo of the problem using a legacy figure and a uifigure.

% Create image data
imageData = randi(100,10,12); 

% Show image in legacy figure and turn on datacursor
fig = figure(); 
ax = axes(fig); 
image(ax,imageData); 
ax.Colormap = jet(100); 
dcm = datacursormode(fig); 
dcm.Enable = 'on'; 
title(ax, 'Legacy figure')

% Show the same image in uifigure and turn on datacursor
uifig = uifigure(); 
uiax = uiaxes(uifig, 'Position', [10 10 500 410]); 
image(uiax,imageData); 
uiax.Colormap = jet(100); 
axis(uiax,'tight')
dcm = datacursormode(uifig); 
dcm.Enable = 'on'; 
title(uiax,'uifigure') 

As you can see, the datacursor appears as exected in the legacy figure but in the uifigure, a message appears, Unrecognized method. property, or field 'ColorSpace' for class 'matlab.ui.control.UIAxes'

Solution

Create a custom update function for the datacursor object within the UIAxes/UIFigure. This demo shows how to recreate the datacursor text produced in the legacy figure using UIFigures anbd UIAxes.

Continuing from the example above,

% Step 1: Turn on datacursor mode in the UIFigure 
% uifig is the figure handle to the uifigure or the app
dcm = datacursormode(uifig); 
dcm.Enable = 'on'; 

% Step 2: Define a custom UpdateFcn function
% uiax is the handle to the UIAxes
dcm.UpdateFcn = @(hObj,event,ax)localDcmFcn(hObj,event,uiax);

% Step 3: Write the UpdateFcn
% This should be added as an independent function within the app
function txt = localDcmFcn(~,event,ax)
% Compute index 
idx = event.Target.CData(event.Position(2),event.Position(1)); 
% Create output text
txt = sprintf('[X,Y] [%d %d]\nIndex %d\n[R,G,B] [%.4g %.4g %.4g]', ...
    event.Position, idx, ax.Colormap(idx,:));  
end

Now the datacursor should appear the same in the legacy figure and the uifigure/app. The only difference may be the number of decimal places shown in the RGB values.

Solution using scaled images

Scaled images (i.e. imagesc()) must use different indexing that scales the CData values to the colormap values. This demo shows how to achieve similar results to the demo above using scaled images. Note that I.CDataMapping is scaled in the image object. This demo added on Jan 2022.

% Create image using imagesc()
Z = peaks;
X = linspace(0,2*pi,size(Z,2)); % Important: number of cols of Z
Y = linspace(0,2*pi,size(Z,1)); % Important: number of rows of Z

uifig = uifigure();
uiax = uiaxes(uifig);
I = imagesc(uiax,X,Y,Z);

uiax.Colormap = jet(100); % Any number of colors should work
axis(uiax,'tight')
colorbar(uiax)

% Step 1: Turn on datacursor mode in the UIFigure
% uifig is the figure handle to the uifigure or the app
dcm = datacursormode(uifig);
dcm.Enable = 'on';

% Step 2: Define a custom UpdateFcn function
% uiax is the handle to the UIAxes
dcm.UpdateFcn = @(hObj,event,ax)localDcmFcn(hObj,event,uiax);

function txt = localDcmFcn(~,event,ax)
    % find indices to closest x and y data values.  This requires the
    % number of values in XData and YData to agree with CData size.
    [~, xidx] = min(abs(event.Target.XData - event.Position(1)));
    [~, yidx] = min(abs(event.Target.YData - event.Position(2)));
    colorbarValue = event.Target.CData(yidx, xidx); 
    colormapIdx = round((colorbarValue - ax.CLim(1))/(ax.CLim(2)-ax.CLim(1)) * (size(ax.Colormap,1)-1) +1);
    txt = sprintf('[X,Y]: [%.2g, %.2g]\nCBar Value: %.2g\n[R,G,B]: [%.4g, %.4g, %.4g]', ...
        event.Position, colorbarValue, ax.Colormap(colormapIdx,:));
end

[ZHIQIANG LIU]

Thanks Adam! It indeed solve my issue prefectly. Thanks a lot again!

tips, those who want to use the same code please keep your software version>=r2020a

[Konvictus177]

Hi,

I am unable to implement the solution above. When I copy the solution code into my app I get the following error. Any help would be greatly appreciated!

I have the following code right after the image is plotted in my main function:

dcm = datacursormode(app.Detection); 
dcm.Enable = 'on'; 
dcm.UpdateFcn = @(hObj,event,ax)localDcmFcn(hObj,event,app.UIAxes);

I also created an independent function:

methods (Access = private)

function txt = localDcmFcn(~,event,ax)
% Compute index 
idx = event.Target.CData(event.Position(2),event.Position(1)); 
% Create output text
txt = sprintf('[X,Y] [%d %d]\nIndex %d\n[R,G,B] [%.4g %.4g %.4g]', ...
    event.Position, idx, ax.Colormap(idx,:));  
end
end

[Adam Danz]

@Konvictus177

What version of Matlab are you using?

Is app.Detection the UIFigure handle?

Are your axes 2D or 3D?

[Konvictus177]

@Adam Danz

I am using R2020a. App.Detection is my UIFgure handle as can be seen below. Axes are all 2D.

function createComponents(app)
% Create Detection and hide until all components are created
app.Detection = uifigure('Visible', 'off');

I do not understand what I am doing wrong since I am following the exact solution stated above. Does Step 3 refer to writing a standalone .m file or a private function within the app?

[Konvictus177]

@Adam Danz

Same error when I run the simple m.file:

uifig = uifigure(); 
uiax = uiaxes(uifig);
Z = peaks;
X = linspace(0,2*pi);
Y = linspace(0,2*pi);
imagesc(ax,X,Y,Z)
% Step 1: Turn on datacursor mode in the UIFigure 
% uifig is the figure handle to the uifigure or the app
dcm = datacursormode(uifig); 
dcm.Enable = 'on'; 
% Step 2: Define a custom UpdateFcn function
% uiax is the handle to the UIAxes
dcm.UpdateFcn = @(hObj,event,ax)localDcmFcn(hObj,event,uiax);

[Adam Danz]

The demo works when I run it. Step 3 should be a private function defined within the app. The block of code you shared above did not include the callback function in step 3. That's where the problem is.

[Konvictus177]

@Adam Danz

Even when I include the callback function at the end of the block of code and run the code from command line I get the same error. Can you post a solution using my block of code? I am unable to make it work.

[Adam Danz]

The solution I posted works so I can't fix the problem you're experiencing until I understand what the problem is. You can't run call back functions from the command line.

I also don't understand why you're generating the figure with visibility off.

If you can provide a full reproducible example that I can run on my end that produces the error you're seeing, that could be a good starting point to troubleshooting.

[Konvictus177]

@Adam Danz

So I found out the issue I have is that I pass x and y vector into imagesc().

How can I make the code from above work and still pass x,y,z into imagesc(). localDcmFcn is defined in a seperate .m file.

% Create image data
% Show the same image in uifigure and turn on datacursor
uifig = uifigure(1); 
uiax = uiaxes(uifig, 'Position', [10 10 500 410]); 
% imageData = randi(100,10,12); 
Z = peaks;
X = linspace(0,2*pi);
Y = linspace(0,2*pi);
imagesc(uiax,X,Y,Z)
% imagesc(uiax,imageData)
uiax.Colormap = jet(100); 
axis(uiax,'tight')
title(uiax,'uifigure')
% Step 1: Turn on datacursor mode in the UIFigure 
% uifig is the figure handle to the uifigure or the app
dcm = datacursormode(uifig); 
dcm.Enable = 'on'; 
% Step 2: Define a custom UpdateFcn function
% uiax is the handle to the UIAxes
dcm.UpdateFcn = @(hObj,event,ax)localDcmFcn(hObj,event,uiax);

[Adam Danz]

@Konvictus177, see the updated answer, section "Solution using scaled images" or, better yet, update to a more recent version of Matlab after R2020a to use Matlab's built-in datatip instead.

The problem you were facing was due to the use of scaled images (imagesc) rather than non-scaled images like the one I used in my demo. With scaled images, indexing is more complicated.

[Konvictus177]

@Adam Danz

Perfect! Thanks for the solution and I understand why it was not working now.

Exactly what I was looking for!

[Konvictus177]

@Adam Danz

One last question. Is there any way to display data tips by not using left mouse click but any other button?

I want to use zoom on the maps and everytime I zoom I create a new data tip?

Thanks.

[Hamidreza Heydarian]

Hi, I am using matlab2020B, where is matlab's built-in datatip for imagesc? I cannot find it. Also could you please explain how your example for imagesc fits in the app designer using the AppDesigner Wizard?

[Adam Danz]

@Hamidreza Heydarian, turn on datacursormode for the figure.

% R2020b

uif = uifigure();

uiax = uiaxes(uif);

imagesc(uiax,magic(9))

datacursormode(uif,'on')

Now you can click on the image to see the datatip.

[josh sol]

i am trying to do this on a greyscale image and i want only the [X Y] position.

how can i do that?