How do I display an image in App Designer and plot lines on top?

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?

Answer 1

[MathWorks Support Team]

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.