How to draw an circle on the image where i show it on app.Image using app designer

Here's the image I used

imshow(image,'Parent', app.Images)

to show it on app.Image

I got the coordinate by using

app.point = get(0,'PointerLocation')

And I'm trying to draw an circle on the image when i click the image.

Is there anyway i could draw a circle on the image?

Also, I can't use the app.UIAxes buttonclick callback after getting the image on the UIAxes.

Thanks for all

Answer 1

[Cameron]

If you have the Image Processing Toolbox, you can use the function drawcircle().

imshow(imread('peacock.jpg'))
h = drawcircle('Color','k','FaceAlpha',0.4);

[jaeyoung gwak]

I'm working it on matlab app designer.

Also, when i used drawcircle on ImageClicked function, the circle does not show on the image.

it makes another axes figure.

[Cameron]

Where are you placing your image? I made a uiaxes component called app.UIAxes and a button that puts an image on app.UIAxes and allows you to draw a circle. When you place your circle on the image and resize or move it, the command window on MATLAB will display the current center and radius. I have attached the App Designer file if you need it.

% Button pushed function: Button
function ButtonPushed(app, event)
    function allevents(src,evt)
        disp(['Circle current radius is: ' mat2str(evt.CurrentRadius)]);
        disp(['Circle current center is: ' mat2str(evt.CurrentCenter)]);
    end
    
    imshow(imread('peacock.jpg'),'Parent',app.UIAxes)
    h = drawcircle(app.UIAxes,...
        'Color','k',...
        'FaceAlpha',0.4);

    addlistener(h,'MovingROI',@allevents);
    addlistener(h,'ROIMoved',@allevents);
end

[jaeyoung gwak]

Thanks.

I put my image on app.Image not on app.UIAxes.

Because i don't know why but i have a problem after putting image on app.UIAxes.

By using imshow(imread('peacock.jpg'),'Parent',app.UIAxes) as you say, buttonpush callback doesn't work.

Can you tell me why I'm having this problem?

Thank you for all of it

[jaeyoung gwak]

This is what i'm doing right now.

what you gave me works perfect!!!!

but don't know why mine don't

If you have any idea please tell me the reason please.

Thanks for all

% Button pushed function: Button
        function ButtonPushed(app, event)
            [filename,pathname] = uigetfile({'*.jpg;*.tif;*.png;*.gif'});
            image = strcat(pathname,filename);
            imshow(image,'Parent', app.UIAxes);
        end

        % Button down function: UIAxes
        function UIAxesButtonDown(app, event)
            function allevents(src,evt)
                    disp(['Circle current radius is: ' mat2str(evt.CurrentRadius)]);
                    disp(['Circle current center is: ' mat2str(evt.CurrentCenter)]);
            end
            h = drawcircle(app.UIAxes,...
                    'Color','k',...
                    'FaceAlpha',0.4);
                addlistener(h,'MovingROI',@allevents);
                addlistener(h,'ROIMoved',@allevents);
        end

[Cameron]

Your question is essentially "Why doesn't the callback for UIAxesButtonDown work after I put the image in the UIAxes?" Try this first:

function ButtonPushed(app, event)
    app.UIAxes.PositionConstraint = "innerposition";
    imshow(imread('peacock.jpg'),...
        'Parent',app.UIAxes);
    app.UIAxes.Visible = 1;
end

You can probably see some white space behind the image where the axes was. Click that and your UIAxesButtonDown will work. I would use a workaround for that though.

function ButtonPushed(app, event)
    app.UIAxes.PositionConstraint = "innerposition";
    b = imshow(imread('peacock.jpg'),...
        'Parent',app.UIAxes);
end

function UIAxesButtonDown(app, event)
    function allevents(src,evt)
        disp(['Circle current radius is: ' mat2str(evt.CurrentRadius)]);
        disp(['Circle current center is: ' mat2str(evt.CurrentCenter)]);
    end
    
    h = drawcircle(app.UIAxes,...
        'Color','k',...
        'FaceAlpha',0.4);
    
    addlistener(h,'MovingROI',@allevents);
    addlistener(h,'ROIMoved',@allevents);
end

function UIFigureWindowButtonDown(app, event)
    x = app.UIFigure.CurrentPoint(1);
    y = app.UIFigure.CurrentPoint(2);
    pos = app.UIAxes.InnerPosition;
    if x > pos(1) && x < pos(1) + pos(3) &&...
            y > pos(2) && y < pos(2) + pos(4)
        UIAxesButtonDown(app, event)
    end
end

[Cameron]

I found an easier workaround for you. The callback for the UIAxes is not passed to its children - in this case the image. So we would have to set the callback for the image to the callback for UIAxes. There are only two lines you would need to add for your code.

% Button pushed function: Button
function ButtonPushed(app, event)
    [filename,pathname] = uigetfile({'*.jpg;*.tif;*.png;*.gif'});
    image = strcat(pathname,filename);
    imshow(image,'Parent', app.UIAxes);
    img = app.UIAxes.Children(1);
    img.ButtonDownFcn = app.UIAxes.ButtonDownFcn;
end

% Button down function: UIAxes
function UIAxesButtonDown(app, event)
    function allevents(src,evt)
            disp(['Circle current radius is: ' mat2str(evt.CurrentRadius)]);
            disp(['Circle current center is: ' mat2str(evt.CurrentCenter)]);
    end
    h = drawcircle(app.UIAxes,...
            'Color','k',...
            'FaceAlpha',0.4);
        addlistener(h,'MovingROI',@allevents);
        addlistener(h,'ROIMoved',@allevents);
end

[jaeyoung gwak]

Thank you.

Appreciate about your concern.

I recognize I have to click the image twice to draw a circle.

so I give a change to the code a little bit.

classdef CircleROI < matlab.apps.AppBase
    properties (Access = private)
        ro
end
    
    methods (Access = private)
        
        function roi = circle(app)
            drawcircle(app.UIAxes,...
        'Color','k',...
        'FaceAlpha',0.4);
            roi = app.ro;
        end
        end
        % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: Button
        function ButtonPushed(app, event)
            app.UIAxes.PositionConstraint = "innerposition";
            imshow(imread('peacock.jpg'),'Parent',app.UIAxes);
            img = app.UIAxes.Children(1);
%             img.ButtonDownFcn = app.UIAxes.ButtonDownFcn;
img.ButtonDownFcn =   app.circle;
        end

But the problem is that I could only get the circle point once even if I click many times.

I draw some image to represent what i want to do.

Sorry for inconvenient and thank you for your help!!