App designer - display multiple ROI on the same image

Hi,

I want to display a crosshair and a circle right in the middle of my image. I wanted to do this by defining a function, as below.

I'm not sure how to proceed but whilst a similar approach works in the live editor, the app design function doesn't like this syntax. Is there any way to approach this please? I'm not familiar with the app design environment.

The image is always displayed in a UIFigure object. I've input the values [472, 323] as a position vector for testing. Ideally, they would point to the centre of the image.

Thanks in advance!

function DisplayImage(app)
    app.Image.ImageSource = app.fullname;  
    app.crossHair = images.roi.Crosshair(gca, 'Position', [472, 323], 'Color', 'w'); 
    app.circle = images.roi.Circle(gca, 'Centre', [472, 323], 'Radius', 100, 'Color', 'w');
end     

Answer 1

[Adam Danz]

I assume "doesn't like this syntax" means that the crosshairs and circle are appearing on a different figure.

The reason that would happen is because of your use of gca instead of the actual axis handle.

Assuming your axis handle is app.UIAxes,

function DisplayImage(app)
    app.Image.ImageSource = app.fullname;   % ??? Not sure what this is
    app.crossHair = images.roi.Crosshair(app.UIAxes, 'Position', [472, 323], 'Color', 'w'); 
    %                                    ^^^^^^^^^^
    app.circle = images.roi.Circle(app.UIAxes, 'Center', [472, 323], 'Radius', 100, 'Color', 'w');
    %                             ^^^^^^^^^^^
end 

[Teshan Rezel]

@Adam Danz thank you once again for this! It's worked a treat! Do you happen to know how to position the ROI at the centre of the image? I tried to get the image centre using "size(image, 1)/2" but that doesn't seem to work...

[Adam Danz]

Great question and it's not as straightforward as you may imagine.

The image dimensions and the axis dimensions do not necessarily agree. Consider this example where pixel (m,n) of the image is centered at coordinate (m,n) but the pixel size is 1x1 so each pixel extends +/-0.5 from the center. The far left side of the image starts at x=0.5 and the far right side ends at n+.5, same with the lower and upper edges.

I = imread('baby.jpg');
fig1 = figure();
ax = gca(fig1);
image(ax,I)
axis(ax,'equal')
axis(ax,'tight')

size(I); % [3600  2250  3]
xlim();  % [0.5  2250.5]
ylim();  % [0.5  3600.5]

Furthermore, some image plotting functions allows the user to specify the location of the image on the axes. Compare the axis ticks in the figure above to the one below.

fig2 = figure();
ax = gca(fig2);
image(ax, [1000,1100], [-1 -.5], I)

So, if the image consumes the axes, what you really want to find is the center of the axes.

axCnt = [ax.XLim(1)+range(ax.XLim)/2, ax.YLim(1)+range(ax.YLim)/2];
hold(ax,'on') 
plot(ax, axCnt(1), axCnt(2), 'wx','MarkerSize',20)

[Teshan Rezel]

@Adam Danz this worked really well, thank you!