Drawing on UI Axes in MATLAB app designer

I am trying to figure out how a user can draw on Axes in app designer using their mouse. The app just has a button labelled "Draw" and an Axes.

When the user clicks "Draw" they should be allowed to draw something on the axis. I will want to implement another button that says "Finished Drawing" where the user can no longer edit their drawing and also another button "Clear" where they can erase what they have drawn.

I have tried various things but none of them allow me to use my mouse to draw on the axes.

I'm also not sure what needs to be defined as a function and what needs to be a callback for the button/ axis.

I have tried to use this code but it doesn't work.

% Button pushed function: DrawButton
        function DrawButtonPushed(app, event)
            app.DrawButton.ButtonPushedFcn = @(btn,event) drawOnAxes(app);

        end

        % Button down function: UIAxes
        function UIAxesButtonDown(app, event)
            app.axes1.ValueChangedFcn = @(src, event) drawOnAxes(app.UIAxes);

            function drawOnAxes(app)
                % Enable drawing on the UI Axes
                hold(app.UIAxes, 'on');

                % Listen for mouse button down event
                app.UIAxes.ButtonDownFcn = @(ax,event) startDrawing(ax);
            end

            function startDrawing(ax)
                % Get the current point where the mouse button was pressed
                currentPoint = ax.CurrentPoint(1, 1:2);

                % Create a line object
                line(ax, 'XData', currentPoint(1), 'YData', currentPoint(2), 'Color', 'r');

                % Listen for mouse movement event
                ax.WindowButtonMotionFcn = @(ax,event) continueDrawing(ax);

                % Listen for mouse button up event
                ax.WindowButtonUpFcn = @(ax,event) stopDrawing(ax);
            end

            function continueDrawing(ax)
                % Get the current point where the mouse is
                currentPoint = ax.CurrentPoint(1, 1:2);

                % Get the line object
                lineObj = findobj(ax, 'Type', 'line');

                % Update the line object with the current point
                set(lineObj, 'XData', [get(lineObj, 'XData'), currentPoint(1)], 'YData', [get(lineObj, 'YData'), currentPoint(2)]);
            end

            function stopDrawing(ax)
                % Remove the mouse movement and button up listeners
                ax.WindowButtonMotionFcn = '';
                ax.WindowButtonUpFcn = '';
            end

Answer 1

[Voss]

Here's a simple demo app you can use to draw.

After clicking the Draw button, left-click-and-drag on the axes to draw in black, or right-click-and-drag to draw in red.

Play with it and look at the code to see how it works.

[Gabriela]

What does this code in the startup function do?

I want the user to be able to draw when a previous button is pressed. If I put this code into the callback for that button will it work?

app.ax = axes(app.MATLABDrawingAppUIFigure, ...
                'Units','pixels', ...
                'Position',[167 35 451 417], ...
                'Box','on', ...
                'XLim',[0 1], ...
                'YLim',[0 1], ...
                'XTick',[], ...
                'YTick',[]);
            try %#ok<TRYNC>
                app.ax.Toolbar.Visible = 'off';
            end

[Voss]

That code creates an axes. It should stay in the startup function and not be moved to a button's callback.

The app already allows the user to draw once the Draw button is pressed.

[Gabriela]

Great thank you!

If I wanted to allow the user to draw with more colours, would this be possible using the "radio button group" component?

[Voss]

You're welcome!

Sure, you can have several pre-set colors and associate each color to a radiobutton in a buttongroup.

Another option would be to use the built-in MATLAB color selector tool uisetcolor to present the user with lots of colors to choose from:

https://www.mathworks.com/help/matlab/ref/uisetcolor.html

Answer 2

[Image Analyst]

There is a family of "draw" functions, like drawpolygon, drawfreehand, drawline, etc. Use one of them. See attached demos if you need an example.

Answer 3

[Mario Malic]

Hey,

I made an example, adapted from Adam's answer.

I am a little bit confused by your code, your procedure makes sense and is better in terms of clarity. But you are actually defining the callback

app.DrawButton.ButtonPushedFcn = @(btn,event) drawOnAxes(app);

instead of calling it. You should create a callback, by right clicking on the button component and just write this in it

drawOnAxes(app)

do the same for the other callbacks.