In App Designer, how can I keep the X and Y Grids on top of an image I display in UIAxes using imshow?

I am creating an app that will display plots on top of an image in a UIAxes object. The issue I'm running into is that once I load the image into UIAxes using imshow, the X and Y Grid lines are covered by the image. If I increase the transparency of the image while debugging I can see that they are still there, but I haven't been able to figure out how to move them in front of the image.

Data I plot will appear in front of the image, so I feel like there is a layering issue I can't figure out. I created a quick test app to demonstrate.

The code that creates that updates UIAxes when the button is pressed is:

      % Button pushed function: Button
        function ButtonPushed(app, event)
            %Load Test Image
            rgbImage = imread("peppers.png"); 
            %Flip Image so it displays properly
            rgbImage = flip(rgbImage);         

            hold(app.UIAxes,"on");
            %Display image in test axes
            hImage = imshow(rgbImage, 'XData', [0.0, 1.0], 'YData', [0.0, 1.0],'Parent', app.UIAxes);
            
            %return axes to normal position (imshow reverses the direction
            %automatically when called)
            app.UIAxes.YDir = 'normal';

            %Turn the axes back on
            app.UIAxes.XGrid = 'on';
            app.UIAxes.YGrid = 'on';

            %Plot test data to show it appears on top of the image
            xData = [0.4,0.6,0.6,0.4];
            yData = [0.4,0.6,0.6,0.4];
            plot(xData,yData,'parent',app.UIAxes);
        end     

Thanks for your help!

Answer 1

[Cris LaPierre]

This has to do with how images are displayed in MATLAB, meaning the issue is not unique to App Designer.

I would use xline and yline. I've modified your code so that it runs here.

rgbImage = imread("peppers.png");       

%Display image in test axes
hImage = imshow(rgbImage, 'XData', [0.0, 1.0], 'YData', [0.0, 1.0]);

% Add grid
xline(0:0.2:1,'w')
yline(0:0.2:1,'w')

●

[hawks1282]

Hi Cris,

Thanks for the response!

The yline / xline does put lines on the image, but it doesn't have the functionality of the grid (specifically that the grid scales as you zoom in on the image).

The issue doesn't seem to be inherent to the way Matlab works, because the application I'm working on was originally written in GUIDE, and I'm trying to port it to App Designer. The grid displays beautifully when I run the GUIDE version.

I can also enable the grid if I display the image as a standalone script, and go into the property inspector of the figure that appears when imshow runs. I haven't been able to figure out how to turn it on programatically though.

I'll keep trying tomorrow and update here one way or the other.

[Cris LaPierre]

Ah, found a solution (I think). Grid is tied to the axis, and when you use imshow, the axis is turned off. Try turning it back on

rgbImage = imread("peppers.png"); 
imshow(rgbImage)
grid
axis on
ax = gca;
ax.GridColor = 'w';

●

[Cris LaPierre]

App Designer does have a slightly different behavior. Send the Grid Layer to 'top' is also necessary.

 % Button pushed function: Button
function ButtonPushed(app, event)
    %Load Test Image
    rgbImage = imread("peppers.png"); 
    %Flip Image so it displays properly
    rgbImage = flip(rgbImage);         
    hold(app.UIAxes,"on");
    %Display image in test axes
    hImage = imshow(rgbImage, 'XData', [0.0, 1.0], 'YData', [0.0, 1.0],'Parent', app.UIAxes);
    
    %return axes to normal position (imshow reverses the direction
    %automatically when called)
    app.UIAxes.YDir = 'normal';
    %Turn the axes back on
    app.UIAxes.XGrid = 'on';
    app.UIAxes.YGrid = 'on';
    %Plot test data to show it appears on top of the image
    xData = [0.4,0.6,0.6,0.4];
    yData = [0.4,0.6,0.6,0.4];
    plot(xData,yData,'parent',app.UIAxes);
    axis(app.UIAxes, 'on')
    app.UIAxes.Layer = 'top';
    app.UIAxes.GridLineWidth = 5;
end

[hawks1282]

Hi Cris,

Sending the grid layer to the top worked perfectly! Thank you so much!

-Brendan