How to draw lines in UIFigure designed in App Designer that contains an image

I have seen many examples of how to draw a line in a plot; however, I am working with an App Designer object-oriented UIFigure. The figure contains an image - No axes or any other components. How do I draw lines overlaying my image, from an outside script?

I was using the old bitmapped approach, changing the color of bits in the image, but that way is horribly slow.

classdef sky_frame < matlab.apps.AppBase
    properties (Access = public)
        UIFigure    matlab.ui.Figure
        Panel       matlab.ui.container.Panel
        Image       matlab.ui.control.Image
    end
    
    methods (Access = Public)
        function drawLine(app)              % function called externally to draw lines
            global xvect; global yvect);
            line(xvect, yvect, 'Color', 'yellow');
        end    
    end
    
    methods (Access = private)
        function createComponents(app)
            app.UIFigure = uifigure('Visible', 'off');
            app.Panel = uipanel(app.UIFigure);
            app.Image = uiimage(app.Panel);
            img = "pattern.png";
            app.Image.ImageSource = imread(img);
            app.UIFigure.Visible = 'on';    
        end
    end
    methods (Access = public)
        function app = sky_frame
            createComponents(app);
        end
    end
end

Elsewhere in my code I instantiate my sky_frame:

function scan = initialize_sky()
    global scan;
    scan = sky_frame;
end

I call a function that draws four vectors to create a rectangle. I have to use this approach because my rectangles may be tilted at various angles.

function draw_box
    global scan;                    % sky_frame object
    global xvect; global yvect;     % vectors passed to drawLine function
    x1 = 141.;
    x2 = 141.;
    y1 = 491.;
    y2 = 508.;
    xvect = [x1 x2]; yvect = [y1 y2];
    scan.drawLine();                % (I could probably dispense with the globals here)
end

At this point, a new plot window pops up with my line in it. I want the line to be in my "scan" object, not in the plot window.

How do I set the current figure handle to point to my scan object instead of the plot window? I have played around with gcf and gca, but they don't seem to apply to my sky_frame, which only contains an image - no axes. Including the draw_line function in the sky_frame definition as a method is not helping, apparently.

[chrisw23]

see

line(ax,___) creates the line in the Cartesian, polar, or geographic axes specified by ax instead of in the current axes (gca). Specify ax as the first input argument.

[Kurt]

Thanks. In this context, what would "ax" be? scan? scan.Image? or something.

[Voss]

"ax" would have to be an axes you haven't created yet. A line must be in an axes/uiaxes (or an axes/uiaxes descendant such as an hggroup or an hgtransform).

You could try to create an axes/uiaxes whose position coincides with the position of the uiimage, but that's not going to work because uiimages (and ui-control components in general) always appear on top of axes/uiaxes and their descendants, so you won't be able to see the lines over the image.

One thing that should work for what you want to do is to use an image (which must be in an axes/uiaxes) instead of a uiimage (which must be in a uifigure/uipanel/etc.).

[Kurt]

That's what I found - the image is obscuring the line. I added a UIAxes property to my sky_frame object, and created it:

properties(Access = public)
    UIAxes      matlab.ui.control.UIAxes
    
app.UIAxes = uiaxes(app.UIFigure);
app.UIAxes.Position = [0 0 1000 1000];
ax = app.UIAxes;        % global instantiation of axes

Then in my draw_box script I draw a line referencing ax:

line(ax, xvect, yvect, 'Color', 'yellow');

It's still coming up blank, even after I commented out the image code.

[Voss]

Is ax a global variable? If not, you need to say:

line(app.UIAxes, xvect, yvect, 'Color', 'yellow');

and you need to adjust the XLim and YLim of app.UIAxes to where the line is. (line doesn't set these like plot does.)

[Kurt]

Yes, ax is global, but I like your method better.

When I commented out the "panel" component, the axes magically appeared.

Maybe I should draw the axes last?

(later) Aha! I now have lines. The panel was obscuring the axes. Now I just need to get the image back, as you suggested.

[Voss]

As you've discovered, the panel will always obscure the axes (just like a uiimage will obscure an axes), if their positions overlap and they're both children of the uifigure.

Should the axes be inside (that is, a child of) the panel? If so, then do:

app.UIAxes = uiaxes(app.Panel);

Or will the panel and the axes be in separate parts of the uifigure, so that they don't overlap?

[Kurt]

I guess I don't really need the panel. Now I'm getting lines, but the scale is off. Somehow I need to set the UIAxes scale to [0 0 1000 1000] so it doesn't wander around.

Argh... now that the panel is gone, there's nothing to attach the image to. I can't just dump it into the UIFigure. So, the image goes in a panel, and the lines go in an axes, both of which are competing to see who's on top.

I might have to just draw the background instead of loading an image. Its just a bunch of circles and lines, anyway.

[Voss]

app.UIAxes.XLim = [0 1000];
app.UIAxes.YLim = [0 1000];

[Voss]

The image goes in an axes, same as the lines. Like I said before:

"One thing that should work for what you want to do is to use an image (which must be in an axes/uiaxes) instead of a uiimage (which must be in a uifigure/uipanel/etc.)."

I'm not sure what the panel is for; you may not need it.

Answer 1

[Voss]

See the example below.

% axes and image
ax = axes();
im = image(ax,'CData',randi([1 255],100,100));
ax.XLim = [0.5 100.5];
ax.YLim = [0.5 100.5];
ax.Visible = 'off';

% line
line(ax,[20 50 85],[50 20 85],'Color','g','LineWidth',10)

The syntax is the same for uiaxes.

[Kurt]

It worked! Thanks.

C = imread("pattern.png");
app.UIAxes = uiaxes(app.UIFigure);
app.UIAxes.XLim = [0 1000];
app.UIAxes.YLim = [0 1000];
img = image(app.UIAxes, C);

[Voss]

You're welcome! Glad it's working.