Two ui.control.UIAxes with the same image are not of the same size, app designer

Hi,

I'm trying to create an app via app designer and show the same image size in both left and right UIAxes panel. My images will alwasys be the exact same size.

The problem is that my ImageAxes_2 is everytime bigger or smaller than ImageAxes, I don't understand why because I'm trying to take the size of ImageAxes, here is my two tryouts that gave everytime wrong result

%             app.ImageAxes_2.Position = [10+app.ImageAxes.Position(1)+app.ImageAxes.Position(3) 181 app.ImageAxes.Position(3) app.ImageAxes.Position(4)];
            app.ImageAxes_2.Position = [10+app.ImageAxes.Position(1)+app.ImageAxes.Position(3) 181 0.45*app.UIFigure.Position(3) 0.45*app.UIFigure.Position(3)];

And here is a minimalist code

classdef app2< matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure     matlab.ui.Figure
        ImageAxes    matlab.ui.control.UIAxes
        ImageAxes_2     matlab.ui.control.UIAxes
        LoadImageButton   matlab.ui.control.Button
    end
    
    methods (Access = private)
    end
    

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)
            % Configure image axes
            app.ImageAxes.Visible = 'off';
            app.ImageAxes.Colormap = gray(256);
            axis(app.ImageAxes, 'image');
            app.ImageAxes_2.Visible = 'off';
            app.ImageAxes_2.Colormap = gray(256);
            axis(app.ImageAxes, 'image');
        end
        % Button pushed function: LoadButton
        function LoadImage(app, event)
               
            % Display uigetfile dialog
            filterspec = {'*.jpg;*.tif;*.png;*.gif','All Image Files'};
            [f, p] = uigetfile(filterspec);
            
            % Make sure user didn't cancel uigetfile dialog
            if (ischar(p))
               fname = [p f];
               image = imread(fname);
               imagesc(app.ImageAxes, image)
               imagesc(app.ImageAxes_2, image);
            end
        end
        
        
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)
            
            addpath([pwd,'/assets/']);
            addpath([pwd,'/icons/']);

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.AutoResizeChildren = 'off';
            app.UIFigure.Position = [100 100 1500 900];
            app.UIFigure.Name = 'ROI drawer App';
            app.UIFigure.Resize = 'off';

            % Create ImageAxes
            app.ImageAxes = uiaxes(app.UIFigure);
            app.ImageAxes.XTick = [];
            app.ImageAxes.XTickLabel = {'[ ]'};
            app.ImageAxes.YTick = [];
            app.ImageAxes.Position = [1 181 0.45*app.UIFigure.Position(3) 0.45*app.UIFigure.Position(3)];
            app.ImageAxes.Interactions = [zoomInteraction, regionZoomInteraction];

            % Create LoadButton
            app.LoadImageButton = uibutton(app.UIFigure, 'push');
            app.LoadImageButton.ButtonPushedFcn = createCallbackFcn(app, @LoadImage, true);
            app.LoadImageButton.Position = [20 10 225 22];
            app.LoadImageButton.Text = 'Load Tiff stack';
           
            % Create ImageAxes_2
            app.ImageAxes_2 = uiaxes(app.UIFigure);
            app.ImageAxes_2.XTick = [];
            app.ImageAxes_2.XTickLabel = {'[ ]'};
            app.ImageAxes_2.YTick = [];
%             app.ImageAxes_2.Position = [10+app.ImageAxes.Position(1)+app.ImageAxes.Position(3) 181 app.ImageAxes.Position(3) app.ImageAxes.Position(4)];
            app.ImageAxes_2.Position = [10+app.ImageAxes.Position(1)+app.ImageAxes.Position(3) 181 0.45*app.UIFigure.Position(3) 0.45*app.UIFigure.Position(3)];
            app.ImageAxes_2.Interactions = [zoomInteraction, regionZoomInteraction];
            
            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app2

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            % Execute the startup function
            runStartupFcn(app, @startupFcn)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
        
    end
end

Thank you

Answer 1

[Adam Danz]

If you want the axes to be the same size, why are you multiplying the width and height by 0.45?

0.45*app.UIFigure.Position(3),   0.45*app.UIFigure.Position(3)
% ??                               ??

Try this,

app.ImageAxes_2.Position = [10+sum(app.ImageAxes.Position([1,3]), app.ImageAxes.Position(2:4)];

also read about linkprop & linkaxes to equate the properties between the two axes.

[Aymeric Ferreira]

UIFigure is the global window, I take 45% of the global window for each graphic for them to be always completly visible, no matter the size of UIFigure.

Inside I have two graphics : ImageAxes and ImageAxes_2 created with the same size, in both case : 0.45*app.UIFigure.Position(3), 0.45*app.UIFigure.Position(3)

If you try this image, ImageAxes_2 is bigger than ImageAxes. But they should the same size because the size is calculated from UIFigure.

I also tried to give ImageAxes_2 the exact same size of ImageAxes1 via this code

app.ImageAxes_2.Position = [10+app.ImageAxes.Position(1)+app.ImageAxes.Position(3) 181 app.ImageAxes.Position(3) app.ImageAxes.Position(4)];

But the problem is the same

edit : Ok I just saw your edit, i will take a look at linkprop and linkaxes

[Adam Danz]

"UIFigure is the global window,"

Oh, I see what you were doing. It's still better to get the weight and height from the first axes. Imagine if the figure were resized before the 2nd axes was created. Then your axes would have different sizes if the second one was based on the figure size.

If you're still having the problem, perhaps a screenshot of the app will be helpful to show the problem.