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!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! 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! appdesigner, imshow, uiaxes, layers MATLAB Answers — New Questions

​