MATLAB: How to display an image in App Designer and plot lines on top

appdesignerimshowinteractivelineMATLABuiaxesuifigure

I am working on an app using app designer. I need to create a few line objects inside an image. And I need to turn those lines on/off, change color, etc. Can you help?

Best Answer

To display your image in the app, use the "imshow" function, with its "Parent" property set to the target axes:
https://www.mathworks.com/help/matlab/ref/imagesc.html#d117e688260
Next, use the "plot" function to plot your lines on the same axes as the image. Use the "hold" on/off commands before and after plotting to make sure your image doesn't disappear:
https://www.mathworks.com/help/matlab/ref/hold.html?s_tid=doc_ta#d117e608491
If you want your lines to be interactive rather than static, you can use a Line object, which allows the user to click/drag/edit the line _after _the app is run:
https://www.mathworks.com/help/images/ref/images.roi.line.html
I have created a short example in an MLAPP file attached below. Here is the app's StartupFcn:
%display image on axes
img = imread('cameraman.tif');
imshow(img,'Parent',app.UIAxes);
hold(app.UIAxes,"on")
%remove title and axes labels
title(app.UIAxes,"");
xlabel(app.UIAxes,"");
ylabel(app.UIAxes,"");
%plot two diagonal lines on image
imgHeight = size(img,1);
imgWidth = size(img,2);
plot(app.UIAxes,0:imgWidth,0:imgHeight,'b','LineWidth',5);
plot(app.UIAxes,0:imgWidth,imgHeight:-1:0,'r','LineWidth',5);
hold(app.UIAxes,"off")
%add interactive Line object
images.roi.Line(app.UIAxes,'Color','green','LineWidth',5,...
        'Position',[10 150; 150 200]);
Finally, if you want to change your lines' visibility and color, save a handle to the lines when plotting them. You can then alter the "Visible" and "Color" properties elsewhere in your code:
https://www.mathworks.com/help/matlab/ref/matlab.graphics.chart.primitive.line-properties.html#bubwqbv-1_sep_shared-Color
https://www.mathworks.com/help/matlab/ref/matlab.graphics.chart.primitive.line-properties.html#bubwqbv-1_sep_shared-Visible
If you need to access these lines outside the StartupFcn, save the handles as properties of the class and access them using the "app.line1Handle" syntax in other functions.
Related Question