How do I add a draw rectangle function to an image app?

I used App Designer to create a frame containing an image. Now I want to draw a rectangle inside that image. None of the examples I have seen describe how to do this in an object-oriented manner for Matlab 2022.

My main routine contains the following code:

scan = sky_frame;            % draw the background .gif image
value = [20 20 30 50];       % define the rectangle coordinates
scan.drawRect(value);        % call the drawRect function in sky_frame to draw the rectangle

The sky_frame class is defined as follows:

classdef sky_frame < matlab.apps.appBase
    properties(Access = public)
        etc.
    end
    % callbacks
    methods(Access = Public)
        function drawrect(value)
            rectangle('Position',value);
        end
    end

When I run this, the .gif image appears, but "rectangle" creates a new figure on the desktop, outside my original sky_frame object. How do I force the code to draw the rectangle inside the sky_frame object at the coordinates specified?

Answer 1

[Eric Delgado]

Hey... you have to show your image in an uiaxes and create a handle to your ROI as property of the app, so you can draw your ROI and change it later. See app attached. Hope it's helpful! :)

% Image button callback
function ImageButtonPushed(app, event)            
    [file, path] = uigetfile({'*.png'; '*.jpg'; '*.jpeg'});
    figure(app.UIFigure)
    if ~isempty(file)
        try
            imshow(fullfile(path, file), 'Parent', app.UIAxes)
        catch ME
            uialert(app.UIFigure, ME.message, 'error', 'Icon', 'error')
        end
    end
end

% Rectangle button callback
function RectangleButtonPushed(app, event)    
    app.roi = drawrectangle(app.UIAxes);
end

[Kurt]

I'm not pushing a button. There are no events to latch onto. I just want to draw a rectangle over the image that I loaded. Actually, a whole bunch of rectangles.

[Eric Delgado]

Ok. So... just put those "interactions" in the startup of your app. Instead of drawrectangle, use images.roi.Rectangle.

https://www.mathworks.com/help/images/ref/images.roi.rectangle.html

imshow(fullfile(path, file), 'Parent', app.UIAxes)
for ii = 1:N % N rectangles
    app.roi(ii) = images.roi.Rectangle(app.UIAxes, 'Position', [xo(ii), yo(ii), xWidth(ii), yWidth(ii)]);
end

[Kurt]

The problem for me is that my image is embedded in an App Designer-generated Panel.

app.Panel = uipanel(app.UIFigure);
app.Image = uiimage(app.Panel);
img = "image.gif";
app.Image.ImageSource = img;
app.UIFigure.Visible = 'on';

This part works. But, how do I reference the image externally to stick a rectangle on it? I played with the images.roi.rectangle example from the command line, and I couldn't get it to draw a rectangle either.

Unable to resolve the name 'images.roi.Rectangle'

[Eric Delgado]

You can't use uiimage for this. You have to "plot" the image in an axes...

Working with ROI demand Image Processing Toolbox, do you have it?

[Kurt]

Shoot... apparently not. Are there any other options for me?

[Eric Delgado]

[Redacted]! :)

Image Processing Toolbox is super important... you can get a trial (30 days) from "Add-ons >> Get Add-ons". If it's not an option, you can use matrix operations to create your rectangles ROIs.

I = imread('YourImage.png');

fig = figure;
ax1 = axes(fig);
imshow(I, 'Parent', ax1)

% A red rectangle...
x0 =  5; x1 = 15;
y0 = 20; y1 = 32;

I(x0:x1,[y0,y1],1) = 255;
I(x0:x1,[y0,y1],2) = 0;
I(x0:x1,[y0,y1],3) = 0;

I([x0,x1],y0:y1,1) = 255;
I([x0,x1],y0:y1,2) = 0;
I([x0,x1],y0:y1,3) = 0;

imshow(I, 'Parent', ax1)

[Kurt]

This might work... It's more like the Python Tk graphics environment that I'm re-hosting this GUI from. Thanks.

[Kurt]

One last question: How do I use this logic to draw a simple line from (x1,y1) to (x2,y2)? I will need to increment x and y simultaneously.

[Eric Delgado]

Hey @Kurt, it's still not a good approach. You should consider to use Image Processing Toolbox. But...

imgSize = 256;

I = randi(100,imgSize,'uint8');
I(:,:,2) = randi(100,imgSize,'uint8');
I(:,:,3) = randi(100,imgSize,'uint8');

imshow(I)

% A red rectangle...
x0 = 10; x1 = 100;
y0 = 20; y1 = 200;

I1 = I;

I1(x0:x1,[y0,y1],1) = 255;
I1(x0:x1,[y0,y1],2) = 0;
I1(x0:x1,[y0,y1],3) = 0;
I1([x0,x1],y0:y1,1) = 255;
I1([x0,x1],y0:y1,2) = 0;
I1([x0,x1],y0:y1,3) = 0;

imshow(I1)

% A blue surface...
I2 = I;

I2(x0:x1,y0:y1,1) = 0;
I2(x0:x1,y0:y1,2) = 0;
I2(x0:x1,y0:y1,3) = 255;

imshow(I2)

% A red line...
I3 = I;

% y = ax+b
a = (y1-y0)/(x1-x0);
b = y0 - x0*a;

for x = x0:x1
    y = a*x+b;

    I3(x,y,1) = 255;
    I3(x,y,2) = 0;
    I3(x,y,3) = 0;
end

imshow(I3)

[Kurt]

Agreed. We're working on getting the Image Processing Toolbox, but in the mean time...

Thanks

[Eric Delgado]

Great to hear! Now that you are super happy with my support, you accept my answer, ok? :)

[Kurt]

You betcha.