how can i hover over my uiaxes to get real time zoomed-in image in another uiaxes on matlab appdesigner?

i have a grid layout consisting of an UIAxes in a panel. i obtain the raw data and plot the same on the said UIAxes, I want to hover over the same UIAxes so i get real time zoomed in image in another UIAxes below it.

kindly help me with insights into this.

Answer 1

[Abhipsa]

Hi @Baibhav, I understand that you are trying to implement a feature that allows you to hover over “uiaxes” that has been created before and display a real-time-zoomed-in view of the hovered region in another “uiaxes”.

You can implement the same by the following steps:

1. You can create two "uiaxes”, one to display the full image or the raw image data and another to show the zoomed-in region of the raw image data.
2. Then, use “WindowButtonMotionFcn” callback function of the “uifigure ” to track the mouse position over the “uiaxes” where the raw data has been plotted.
3. After this, get the pixel coordinates of the cursor and extract a small region around the cursor. Display this extracted region in the other “uiaxes” that was created for displaying the zoomed-in view.

function realTimeZoom
    % Create a figure
    fig = uifigure('Position', [100, 100, 800, 600]);

    % Create a grid layout
    gl = uigridlayout(fig, [2, 1]);
    
    % Create uiaxes for the raw image data
    axMain = uiaxes(gl);
    axMain.XTick = [];
    axMain.YTick = [];
    title(axMain, 'Main Image');

    % Create uiaxes for the zoomed-in view of the data
    axZoom = uiaxes(gl);
    axZoom.XTick = [];
    axZoom.YTick = [];
    title(axZoom, 'Zoomed In');

    % Load the image
    img = imread('peacock.jpg'); 
    %  Here, ‘peacock.jpg’ is already present in “MATLAB\R2024b\toolbox\images\imdata” . 
    % You can use you own image by specifying it as a path in imread function.
    
    %Display the image
    imshow(img, 'Parent', axMain);

    % Store image data
    fig.UserData = struct('img', img, 'axMain', axMain, 'axZoom', axZoom);

    % Set up real-time hover callback
    fig.WindowButtonMotionFcn = @(src, event) updateZoom(src);
end

function updateZoom(fig)
    % Retrieve stored data
    data = fig.UserData;
    img = data.img;
    axMain = data.axMain;
    axZoom = data.axZoom;
    
    % Get the current cursor position
    cursorPoint = axMain.CurrentPoint(1, 1:2); % [X, Y]
    
    % Get axes limits
    xLimits = axMain.XLim;
    yLimits = axMain.YLim;
    
    % Check if cursor is within the image
    if cursorPoint(1) >= xLimits(1) && cursorPoint(1) <= xLimits(2) && ...
       cursorPoint(2) >= yLimits(1) && cursorPoint(2) <= yLimits(2)
   
        % Extract zoomed-in region
        zoomSize = 50; % Size of zoom window which can be adjusted as per the requirement
        x = round(cursorPoint(1));
        y = round(cursorPoint(2));
        
        % Ensure zoomed region stays within bounds
        [h, w, ~] = size(img);
        xMin = max(1, x - zoomSize);
        xMax = min(w, x + zoomSize);
        yMin = max(1, y - zoomSize);
        yMax = min(h, y + zoomSize);
        
        zoomedRegion = img(yMin:yMax, xMin:xMax, :);

        % Display zoomed region
        imshow(zoomedRegion, 'Parent', axZoom);
    end
end

The below image is the output of the above code.

You can use the following MATLAB documentation links for more details.

• uiaxes: https://www.mathworks.com/help/releases/R2024b/matlab/ref/uiaxes.html
• uifigure: https://www.mathworks.com/help/releases/R2024b/matlab/ref/uifigure.html
• WindowButtonMotionFcn: https://www.mathworks.com/help/releases/R2024b/matlab/ref/matlab.ui.figure-properties.html?overload=matlab.ui.Figure%2FWindowButtonMotionFcn+true&searchPort=59187#prop_WindowButtonMotionFcn:~:text=WindowButtonMotionFcn
• imshow: https://www.mathworks.com/help/releases/R2024b/matlab/ref/imshow.html