Creating in-window movable panes in App Designer?

Hi all. I am working on an application to track various sensor outputs, and I want the user to be able to add additional graphs as they need them for various sensor groupings. It would be best if they can move these around and organize them however desired, but still within the original matlab app, such that they aren't totally seperate windows that move behind the main app when the main app is clicked. Is this possible?

The only way I can see is to create a rather complicated series of callbacks for mouse clicks and movement to make tab groups visually move like windows, but this seems messy (and difficult). Is there a better way, or am I stuck choosing between that and just dealing with popup windows?

Answer 1

[Hitesh]

Hi Kolbe,

Creating in-window movable panes or panels within a MATLAB App Designer app is a bit challenging, as App Designer does not natively support draggable panels out of the box. However, you need to use a combination of UI components and callbacks to achieve this functionality. Kindly follow the steps to create movable panes:

Create a Panel for Each Graph:

• Use the "uipanel" component to create a container for each graph. This will allow you to organize your graphs within the main app window.

Add Mouse Callbacks:

• Implement mouse button callbacks to detect when a user clicks on a panel. You need to use the "WindowButtonDownFcn"," WindowButtonMotionFcn", and "WindowButtonUpFcn" callbacks to manage dragging.

Track Mouse Movement:

• When a mouse button is pressed over a panel, record the initial position of the mouse and the panel. As the mouse moves (with the button held down), update the position of the panel accordingly.

Update Panel Position:

• As the mouse moves, calculate the new position of the panel based on the movement delta and update the panel's position using the Position property.

Kindly refer to the following code for " mouseDownCallback"," mouseMotionCallback", and "mouseUpCallback" callbacks function. Additionally I have attached mlapp file for your reference.

% Callback function for mouse button down
function mouseDownCallback(app, src, event)
    % Store the initial position of the mouse and the panel
    app.InitialMousePosition = app.UIFigure.CurrentPoint;
    app.InitialPanelPosition = src.Position;

    % Set the motion and button up callbacks
    app.UIFigure.WindowButtonMotionFcn = @(~, ~) mouseMotionCallback(app, src);
    app.UIFigure.WindowButtonUpFcn = @(~, ~) mouseUpCallback(app);
end

% Callback function for mouse motion
function mouseMotionCallback(app, src)
    % Calculate the movement delta
    delta = app.UIFigure.CurrentPoint - app.InitialMousePosition;
    
    % Update the panel's position
    newPos = app.InitialPanelPosition + [delta, 0, 0];
    src.Position = newPos;
end

% Callback function for mouse button up
function mouseUpCallback(app)
    % Clear the motion and button up callbacks
    app.UIFigure.WindowButtonMotionFcn = '';
    app.UIFigure.WindowButtonUpFcn = '';
end

For more information regarding the "WindowButtonDownFcn", kindly refer to the following MATLAB Answer:

https://www.mathworks.com/matlabcentral/answers/458264-using-windowbuttondownfcn-in-app-designer?requestedDomain=