App designer - problem with plotting on axes, on top of an image

Hi folks, I'm trying to place a crosshair plot (using "+" and "o") on top of an image in the app designer. Currently, the crosshair is diplayed in the wrong position, and too small.

Is there a way to fix this please? app.Image is my UIAxes name property.

function ROI(app, index1, index2)
    hold (app.Image, "on")
    plot(app.Image, index1, index2, app.innerMarkerStyle, 'MarkerSize', app.CrosshairThickness.Value, 'Color', app.crossHairColour); 
    plot(app.Image, index1, index2, app.outerMarkerStyle, 'MarkerSize', app.CrosshairThickness.Value, 'Color', app.crossHairColour);                                
end
function DisplayImage(app)
     app.currentImage = fullfile(app.imageFolder(app.imageNumber).folder, app.imageFolder(app.imageNumber).name);
     app.Image.Position = [0 0 app.UIFigure.Position(3:4)];
     app.img = imread(app.currentImage);
        
     DisplayCrosshairs(app); 
end
function DisplayCrosshairs(app)
    I = imshow(app.currentImage, "Parent", app.Image); 
    axis(app.Image, "tight");
    app.Image.XLim = [0 I.XData(2)];
    app.Image.YLim = [0 I.YData(2)];
    
    app.Width = app.Image.XLim;
    app.Height = app.Image.YLim; 
    
    quarterHeight = app.Height(1)+range(app.Height)*0.25;
    halfHeight = app.Height(1)+range(app.Height)*0.5;
    threeQuarterHeight = app.Height(1)+range(app.Height)*0.75;
    quarterWidth = app.Width(1)+range(app.Width)*0.25;
    halfWidth = app.Width(1)+range(app.Width)*0.5;
    threeQuarterWidth = app.Width(1)+range(app.Width)*0.75;
    
    checkMatrix = [app.TopLeft.Value app.TopMiddle.Value app.TopRight.Value app.CentreLeft.Value app.CentreMiddle.Value app.CentreRight.Value app.BottomLeft.Value app.BottomMiddle.Value app.BottomRight.Value];
    app.numSamplesPerImage = sum(checkMatrix, 1:9);   
    
    if checkMatrix(1) == 1
    ROI(app, quarterHeight, quarterWidth);
    elseif checkMatrix(2) == 1
    ROI(app, quarterHeight, halfWidth);
    elseif checkMatrix(3) == 1
    ROI(app, quarterHeight, threeQuarterWidth);
    elseif checkMatrix(4) == 1
    ROI(app, halfHeight, quarterWidth);
    elseif checkMatrix(5) == 1
    ROI(app, halfHeight, halfWidth);
    elseif checkMatrix(6) == 1
    ROI(app, halfHeight, threeQuarterWidth);
    elseif checkMatrix(7) == 1
    ROI(app, threeQuarterHeight, quarterWidth);
    elseif checkMatrix(8) == 1
    ROI(app, threeQuarterHeight, halfWidth);
    elseif checkMatrix(9) == 1
    ROI(app, threeQuarterHeight, threeQuarterWidth);
    else
    msgbox('Please select a quadrant for the crosshair to be displayed in');
    end
end 
function startupFcn(app)
    pause(1);
    title(app.Image, []);
    xlabel(app.Image, []);
    ylabel(app.Image, []);
    app.Image.XAxis.TickLabels = {};
    app.Image.YAxis.TickLabels = {};
    app.UIFigure.WindowState = 'maximized';    
    disableDefaultInteractivity(app.Image)
    app.Counts = [zeros(8, 1)];
    app.Percentages = [zeros(8, 1)];
    app.CokeTable.Data = [app.Counts, app.Percentages];
    app.CokeTable.Position = [73 -1 168 265];
    app.tallyOrder = [1];  
    app.innerMarkerStyle = '+';
    app.outerMarkerStyle = 'o';
    app.crossHairColour = 'w';
end

[Adam Danz]

Which condition is satisfied in the list of conditions below?

 if checkMatrix(1) == 1
        ROI(app, quarterHeight, quarterWidth);
    elseif checkMatrix(2) == 1
        ROI(app, quarterHeight, halfWidth);
    elseif checkMatrix(3) == 1
        ROI(app, quarterHeight, threeQuarterWidth);
    elseif checkMatrix(4) == 1
        ROI(app, halfHeight, quarterWidth);
    elseif checkMatrix(5) == 1
        ROI(app, halfHeight, halfWidth);
    elseif checkMatrix(6) == 1
        ROI(app, halfHeight, threeQuarterWidth);
    elseif checkMatrix(7) == 1
        ROI(app, threeQuarterHeight, quarterWidth);
    elseif checkMatrix(8) == 1
        ROI(app, threeQuarterHeight, halfWidth);
    elseif checkMatrix(9) == 1
        ROI(app, threeQuarterHeight, threeQuarterWidth);
    else
        msgbox('Please select a quadrant for the crosshair to be displayed in');
    end

[Adam Danz]

Also, the size of the crosshairs is controlled by app.CrosshairThickness.Value which is controlled somewhere outside of the code we've been given.

[Teshan Rezel]

Hi @Adam Danz, the IF statement gets to checkMatrix(5) and seems to execute but doesn't draw the ROI as intended.

I've attached the programme if that helps? I'm not very good at describing the issue since I'm new to this!

[Adam Danz]

There are a lot of buttons etc in the app. I would also need instructions on how to reproduce the problem.

But I think this can be solved with just a little more info without me needing to run the app.

What is the size of the image and what are the values of halfHeight, halfWidth? Again, the size of the crosshairs is completely controlled by app.CrosshairThickness.Value. What is the value of that?

[Teshan Rezel]

hi @Adam Danz, I thought that since I initialised the value of the editfield that contains crosshairthickness, that it would default to this value...so I've now initialised the app.CrosshairThickness.Value as 100 in the startup function. This seems to fix the shape of the crosshair on the image. However, the problem of the position persists, in that it doesn't display the crosshairs in the correct positions relative to the image...I'm uncertain as to why this is. I've tried evaluating the position variables in the command window and they don't seem to spit out any numbers..I'm not sure why!

[Adam Danz]

> I thought that since I initialised the value of the editfield that contains crosshairthickness, that it would default to this value

When I open the app I just see a large gray area, a lot of buttons, a table of all 0s, some checkboxes etc. I don't see an image nor do i get a warning or error.

I don't know what buttons to push to recreate the problem. Sharing the app is usually very helpful but unless it's a bare-bones app with 1 button, it should come with brief instructions how to use the app to reproduce the problem.

You mentioned the ROI function is called by this line

elseif checkMatrix(5) == 1
    ROI(app, halfHeight, halfWidth);

and those two values are defined by

halfHeight = app.Height(1)+range(app.Height)*0.5;
halfWidth = app.Width(1)+range(app.Width)*0.5;

where app.Width and app.Height are set by

app.Image.XLim = [0 I.XData(2)];
app.Image.YLim = [0 I.YData(2)];
app.Width = app.Image.XLim;
app.Height = app.Image.YLim; 

So here are some questions/commens we need answers to,

1. Please show use a screenshot of your image with the crosshairs. If the axes are not on, turn them on before taking the screenshot, using axis(app.UIAxes, 'on'), using your axis handle. We can't proceed without this.
2. Please verify that I is the handle to your image object.
3. Is there any space between the axis edges and the image? Your cross placement assumes there isn't. (we'll be able to see this in the screenshot).
4. Does your axis indeed start at x/y=0? Please share the values of XLim and YLIm.

[Teshan Rezel]

Hi @Adam Danz, apologies for not explaining the app. The buttons next to the table currently do nothing. The wayto display an image is to select a folder with images in it via "Home->Add Image Folder". I've attached an image of the crosshairs displayed on the image below. Also, I've changed the code to display the crosshairs from an IF statement to the following:

for i = 1 : 9
    if checkMatrix(i) == 1
        ROI(app, positionVector{i,:});
    end
end

where positionVector is defined as:

positionVector = {quarterHeight quarterWidth; quarterHeight halfWidth; quarterHeight threeQuarterWidth; halfHeight quarterWidth; halfHeight halfWidth; halfHeight threeQuarterWidth; threeQuarterHeight quarterWidth; threeQuarterHeight halfWidth; threeQuarterHeight threeQuarterWidth};

I've also attached an image with the axes turned on and the image displayed relative to them. It appears as though the position vector is not relative to the axes either.

[Adam Danz]

The axes aren't on so I can't see the axis limits. From my previous comment, " If the axes are not on, turn them on before taking the screenshot, using axis(app.UIAxes, 'on'), "

I don't see where you addressed the other 3 requests in that comment. It's really hard to help without that info.

Answer 1

[Adam Danz]

Here's the problem (see arrow)

function DisplayImage(app)
    app.currentImage = fullfile(app.imageFolder(app.imageNumber).folder, app.imageFolder(app.imageNumber).name);
    app.Image.Position = [0 0 app.UIFigure.Position(3:4)]; % <-------- PROBLEM
    app.img = imread(app.currentImage);
            
    DisplayCrosshairs(app); 
end

app.Image is the handle to the uiaxes (Image is a misleading variable name). The axes are a child of a PANEL, not the figure, and the panel is not the same size as the figure.

So you're setting the axis size to the same size as the FIGURE, not the panel. It's clear that the axis extends off the right edge of the figure if you compare the image outside of Matlab and the image that displays in your app.

To fix it, use the panel size to define the axis size rather than the figure size.

Secondly, you're not correctly specifying the position of the crosshairs in the plotting function. See comment below.

[Teshan Rezel]

Hi @Adam Danz, I've changed the line you pointed to, it now says:

app.Image.Position = [0 0 app.Rightpanel.Position(3:4)]

which is the relevant panel name. The problem is that this still doesn't fix the issue of the crosshairs being displayed out of place. I think I've figured out that for whatever reason, some of the crosshair positions are flipped 90* anticlockwise along the grid. For example, the topMiddle one, is placed in the central left position. So the 12 o'clock is appearning at the 9 o'clock position.

Additionally, since making the change, the for loop seems to fire off 8 instances of the else condition.

I've tried to get the three pieces of information you've asked for in your comment, but trying to open any of them in the command window or evaluating them leads to nothing. That is to say, the command line just prints the name of the variable without giving its value, and the evaulation leads an empty ".m" file.

I'm really sorry about this, not only has this gone horribly wrong but I can't seem to furnish you witht he required information!

[Adam Danz]

> some of the crosshair positions are flipped 90* anticlockwise along the grid

The size of an image is height x width and you're correctly getting the halfHeight, halfWidth values.

But plotting inputs are plot(x,y,....) and you're incorrectly applying the halfHeight, halfWidth values in the plotting function. That's why the position of the crosshairs is flipped.

[Teshan Rezel]

hi @Adam Danz, thank you for this, it works a treat! the ordering is now correct. The positioning is still a little off, since it would seem the axes, which I am indexing the crosshair positions to, are smaller than the size of the image. I'm still unsure of how to fix this. But the main issue is done, thak you! and apologies once again for taking so long, and explaining this poorly!

[Adam Danz]

Hmmm.... do you mean the axes is zoomed into the image? axis(h,'tight') would fix that and that's the default behavior for imshow. Are you zooming into the image or changing the axis limits?

If you turn the axes on, you will be able to directly see the axis border!

corn_gray = imread('corn.tif',3);
imshow(corn_gray)
axis(gca, 'on')  % <-- replace gca with you axis handle