App Designer: Interactive UIaxes

Hello,

I am currently designing an GUI with App Designer that will hopefully involve an interactive axis. The ultimate goal is to allow uses to click and drag a square wave to the plot and then drop it in order to update the plot. This will involve tracking the location of the mouse. If you have any idea of the best way to do this in App Designer or have any experience with something like this, are there any suggestions on how to go about tracking the location of the mouse that you could provide? If you also have any tips about the dragging mechanism that would be helpful as well.

[Ahmad]

Found any solutions?

Answer 1

[Jaimin]

Hi @Jason Dennis

Creating an interactive GUI in MATLAB's App Designer where users can click and drag elements like a square wave involves handling mouse events and updating the plot dynamically.

Kindly refer following code snippet for understanding.

% Function to start the drag operation
function startDrag(app)
    % Set the dragging flag to true
    app.IsDragging = true;
    
    % Store the initial point of the drag from the current point on the UIAxes
    app.InitialPoint = app.UIAxes.CurrentPoint(1, 1:2);
end

% Function to end the drag operation
function endDrag(app)
    % Set the dragging flag to false
    app.IsDragging = false;
end

% Function to handle the dragging of the square wave
function dragSquareWave(app)
    % Check if dragging is in progress
    if app.IsDragging
        % Get the current point from the UIAxes
        currentPoint = app.UIAxes.CurrentPoint(1, 1:2);
        
        % Calculate the change in position from the initial point
        delta = currentPoint - app.InitialPoint;
        
        % Update the XData of the SquareWaveLine by the delta's x-component
        app.SquareWaveLine.XData = app.SquareWaveLine.XData + delta(1);
        
        % Update the YData of the SquareWaveLine by the delta's y-component
        app.SquareWaveLine.YData = app.SquareWaveLine.YData + delta(2);
        
        % Update the initial point to the current point for the next drag event
        app.InitialPoint = currentPoint;
    end
end

Utilise above functions for suitable events.

For more information kindly refer following MathWorks Documentation.

https://www.mathworks.com/help/matlab/creating_guis/write-callbacks-for-gui-in-app-designer.html

I hope this will be helpful.