Hi,
I understand that you are trying to resize panels with mouse drag.
Kindly, refer to the following code for achieving the same,
function resizableSplitPanel
%% Create the main figure
% 'Name' sets the title of the window
% 'Units', 'Normalized' uses percentage-based units for positioning and size
% 'Position' defines [x, y, width, height] as percentages of the screen (20%, 20%, 60%, 60%)
f = figure('Name', 'Resizable Split Panel', ...
'Units', 'Normalized', ...
'Position', [0.2, 0.2, 0.6, 0.6]);
%% Create two resizable panels (left and right)
% 'Parent', f makes these panels children of the main figure window
% 'Position' defines the size and location of each panel relative to the figure
% The left panel occupies the left 50% of the figure, the right panel the other 50%
% 'BackgroundColor', 'w' sets the background color to white
panelLeft = uipanel('Parent', f, ...
'Units', 'Normalized', ...
'Position', [0, 0, 0.5, 1], ...
'BackgroundColor', 'w');
panelRight = uipanel('Parent', f, ...
'Units', 'Normalized', ...
'Position', [0.5, 0, 0.5, 1], ...
'BackgroundColor', 'w');
%% Add axes to each panel for plotting
% These axes will contain the plots for sine and cosine functions
ax1 = axes('Parent', panelLeft); % Axes in the left panel
ax2 = axes('Parent', panelRight); % Axes in the right panel
%% Plot data in both axes
% Create a data set from 0 to 10 with steps of 0.1
% Plot sine on the left panel and cosine on the right panel
x = 0:0.1:10;
plot(ax1, x, sin(x)); % Plot sine wave in the left panel
plot(ax2, x, cos(x)); % Plot cosine wave in the right panel
%% Create a draggable "splitter" (the black bar between the panels)
% The splitter is a small vertical panel between the left and right panels
% 'Position' defines its width (1% of the figure) and height (100%)
% 'ButtonDownFcn', @startDragFcn sets a callback function that will be triggered
% when the user clicks on the splitter to start dragging
splitter = uipanel('Parent', f, ...
'Units', 'Normalized', ...
'Position', [0.495, 0, 0.01, 1], ...
'BackgroundColor', 'k', ... % Black color
'ButtonDownFcn', @startDragFcn); % Start dragging on click
%% Initialize variables for dragging state
dragging = false; % Boolean flag to check if dragging is in progress
startPoint = []; % Stores the initial mouse position when dragging starts
%% Nested function: Start dragging the splitter
% This function is called when the user clicks on the splitter to start moving it
function startDragFcn(~, ~)
dragging = true; % Set dragging flag to true
startPoint = get(f, 'CurrentPoint'); % Get the initial mouse click point (x, y)
% Set the figure's mouse motion function to the dragging function
set(f, 'WindowButtonMotionFcn', @draggingFcn);
% Set the mouse release function to stop dragging when the mouse button is released
set(f, 'WindowButtonUpFcn', @stopDragFcn);
end
%% Nested function: Execute during dragging
% This function is called when the user moves the mouse while dragging the splitter
function draggingFcn(~, ~)
if dragging
% Get the current mouse position
currentPoint = get(f, 'CurrentPoint');
% Calculate the change in x-coordinate (dx) since the last drag event
dx = currentPoint(1) - startPoint(1);
% Update the start point to the current mouse position for continuous dragging
startPoint = currentPoint;
% Get the current positions of the left and right panels
posLeft = get(panelLeft, 'Position');
posRight = get(panelRight, 'Position');
posSplitter = get(splitter, 'Position');
% Calculate new widths for the left and right panels
newWidthLeft = posLeft(3) + dx; % New width for the left panel
newWidthRight = posRight(3) - dx; % New width for the right panel
% Ensure the panels don't get too small (minimum width = 10% of the figure width)
if newWidthLeft > 0.1 && newWidthRight > 0.1
% Update the position of the left panel
set(panelLeft, 'Position', [posLeft(1), posLeft(2), newWidthLeft, posLeft(4)]);
% Update the position of the right panel (shifted by dx)
set(panelRight, 'Position', [posRight(1) + dx, posRight(2), newWidthRight, posRight(4)]);
% Update the position of the splitter to match the new division
set(splitter, 'Position', [posSplitter(1) + dx, posSplitter(2), posSplitter(3), posSplitter(4)]);
end
end
end
%% Nested function: Stop dragging
% This function is called when the user releases the mouse button to stop dragging
function stopDragFcn(~, ~)
dragging = false; % Reset dragging flag to false
% Remove the mouse motion and release callbacks to stop tracking mouse events
set(f, 'WindowButtonMotionFcn', ''); % Remove the dragging function
set(f, 'WindowButtonUpFcn', ''); % Remove the stop drag function
end
end
To Summarize,
1. Create the Main Window (Figure)
- A figure window is created using normalized units, occupying 60% of the screen.
- This window is the container for all components of the GUI.
2. Create Left and Right Panels
- Two uipanel objects are created side by side.
- Each panel initially takes up 50% of the window width.
- The left panel is placed on the left half and the right panel on the right half.
3. Add Axes to Each Panel
- axes are placed inside the left and right panels for plotting.
- The sine function is plotted in the left panel, and the cosine function is plotted in the right panel.
4. Create a Draggable Splitter
- A small black vertical panel (the "splitter") is placed between the left and right panels.
- It acts as a visual divider and is 1% of the figure's width.
5. Set Up Dragging Behavior
- Start Dragging: When the user clicks the splitter, a function is triggered to start tracking mouse movement.
- During Dragging: As the mouse moves, the left and right panel widths are updated dynamically based on the mouse position.
- Stop Dragging: When the user releases the mouse button, the dragging stops, and the panels remain resized.
Hope this helps!
Regards,
Sanjana
