How to display images when clicking a button in matlab app designer?

I am trying to create an user interface in MATLAB App designer. There are two image panels in my interface. Below is the sample:

When I click the OPEN button, an image is displayed on the left side of the image panel which is fine. But the problem arises when I click the Intensity Profile button. I want an image to be displayed on the right side of the Image panel when I click the Intensity Profile button. Instead the figure is being displayed in a separate window. Below is my code:

classdef Patient3 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                   matlab.ui.Figure
        BrainDemoPanel             matlab.ui.container.Panel
        ImagePanel                 matlab.ui.container.Panel
        Image_2                    matlab.ui.control.Image
        Image                      matlab.ui.control.Image
        InfoPanel                  matlab.ui.container.Panel
        PatientNameEditFieldLabel  matlab.ui.control.Label
        PatientNameEditField       matlab.ui.control.EditField
        OptionPanel                matlab.ui.container.Panel
        OpenButton                 matlab.ui.control.Button
        AverageDensityButton       matlab.ui.control.Button
        VolumeoftheliquidButton    matlab.ui.control.Button
        StandardDeviationButton    matlab.ui.control.Button
        IntensityProfileButton     matlab.ui.control.Button
    end

    
    properties (Access = public)
        
        UIAxes    matlab.ui.control.UIAxes

    end
    
    
    
    
    
    
    
   
    

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

        % Button pushed function: OpenButton
        function OpenButtonPushed(app, event)

           [filename,filepath] = uigetfile({'*.*;*.jpg;*.png;*.bmp;*.oct'}, 'Select File to Open');
           fullname = [filepath, filename];
           
           app.Image.ImageSource = fullname;
           
        
        end

        % Button pushed function: IntensityProfileButton
        function IntensityProfileButtonPushed(app, event)
            
            
            
            I = imread('Intensity1.jpg', 'Parent', app.UIAxes);
            x=[size(I,2)/2 size(I,2)/2];
            y=[0 size(I,1)];
            c = improfile(I,x,y);
            figure
            subplot(2,1,1)
            imshow(I)
            hold on
            plot(x,y,'r')
            subplot(2,1,2)
            plot(c(:,1,1),'r')
            hold on
            plot(c(:,1,2),'g')
            plot(c(:,1,3),'b')
        end

        % Image clicked function: Image_2
        function Image_2Clicked(app, event)
            I = imread('Intensity1.jpg');
            x=[size(I,2)/2 size(I,2)/2];
            y=[0 size(I,1)];
            c = improfile(I,x,y);
            figure
            subplot(2,1,1)
            imshow(I)
            hold on
            plot(x,y,'r')
            subplot(2,1,2)
            plot(c(:,1,1),'r')
            hold on
            plot(c(:,1,2),'g')
            plot(c(:,1,3),'b')
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 1282 808];
            app.UIFigure.Name = 'UI Figure';

            % Create BrainDemoPanel
            app.BrainDemoPanel = uipanel(app.UIFigure);
            app.BrainDemoPanel.TitlePosition = 'centertop';
            app.BrainDemoPanel.Title = 'Brain Demo';
            app.BrainDemoPanel.FontWeight = 'bold';
            app.BrainDemoPanel.Position = [11 18 1217 783];

            % Create ImagePanel
            app.ImagePanel = uipanel(app.BrainDemoPanel);
            app.ImagePanel.Title = 'Image Panel';
            app.ImagePanel.FontWeight = 'bold';
            app.ImagePanel.Position = [288 322 913 390];

            % Create Image_2
            app.Image_2 = uiimage(app.ImagePanel);
            app.Image_2.ImageClickedFcn = createCallbackFcn(app, @Image_2Clicked, true);
            app.Image_2.Position = [491 76 356 238];

            % Create Image
            app.Image = uiimage(app.ImagePanel);
            app.Image.Position = [153 76 223 247];

            % Create InfoPanel
            app.InfoPanel = uipanel(app.BrainDemoPanel);
            app.InfoPanel.Title = 'Info';
            app.InfoPanel.FontWeight = 'bold';
            app.InfoPanel.Position = [8 685 260 67];

            % Create PatientNameEditFieldLabel
            app.PatientNameEditFieldLabel = uilabel(app.InfoPanel);
            app.PatientNameEditFieldLabel.HorizontalAlignment = 'right';
            app.PatientNameEditFieldLabel.FontWeight = 'bold';
            app.PatientNameEditFieldLabel.Position = [27 15 82 22];
            app.PatientNameEditFieldLabel.Text = 'Patient Name';

            % Create PatientNameEditField
            app.PatientNameEditField = uieditfield(app.InfoPanel, 'text');
            app.PatientNameEditField.Position = [116 15 100 22];

            % Create OptionPanel
            app.OptionPanel = uipanel(app.BrainDemoPanel);
            app.OptionPanel.Title = 'Option Panel';
            app.OptionPanel.FontWeight = 'bold';
            app.OptionPanel.Position = [9 582 260 88];

            % Create OpenButton
            app.OpenButton = uibutton(app.OptionPanel, 'push');
            app.OpenButton.ButtonPushedFcn = createCallbackFcn(app, @OpenButtonPushed, true);
            app.OpenButton.Position = [9 41 100 22];
            app.OpenButton.Text = 'Open ';

            % Create AverageDensityButton
            app.AverageDensityButton = uibutton(app.OptionPanel, 'push');
            app.AverageDensityButton.Position = [123.5 41 103 22];
            app.AverageDensityButton.Text = 'Average Density';

            % Create VolumeoftheliquidButton
            app.VolumeoftheliquidButton = uibutton(app.OptionPanel, 'push');
            app.VolumeoftheliquidButton.Position = [7 9 120 22];
            app.VolumeoftheliquidButton.Text = 'Volume of the liquid';

            % Create StandardDeviationButton
            app.StandardDeviationButton = uibutton(app.OptionPanel, 'push');
            app.StandardDeviationButton.Position = [130 9 118 22];
            app.StandardDeviationButton.Text = 'Standard Deviation';

            % Create IntensityProfileButton
            app.IntensityProfileButton = uibutton(app.BrainDemoPanel, 'push');
            app.IntensityProfileButton.ButtonPushedFcn = createCallbackFcn(app, @IntensityProfileButtonPushed, true);
            app.IntensityProfileButton.Position = [55 536 100 22];
            app.IntensityProfileButton.Text = 'Intensity Profile';

            % 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 = Patient3

            % Create UIFigure and components
            createComponents(app)

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

            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

I get the following error message when I change the IntensityProfileButtonPushed function. Any suggestions will be appreciated. Thank you.

Error using imread (line 438)

Too many input arguments.

Error in Patient3/IntensityProfileButtonPushed (line 56)

I = imread('Intensity1.jpg', 'Parent', app.UIAxes);

Error using matlab.ui.control.internal.controller.ComponentController/executeUserCallback (line 335)

Error while evaluating Button PrivateButtonPushedFcn.

[Nicolas B.]

Hello,

Imread() just loads into memory the image. If you want to dispaly it, uses imshow() afterwards. So your code should look like:

I = imread('Intensity1.jpg');
imshow(I, 'Parent', app.UIAxes);

or, if you don't need to have the image into to workspace:

imshow('Intensity1.jpg', 'Parent', app.UIAxes);

[Guillaume]

@Nicolas, can you write that as an answer instead of a comment?

[Warid Islam]

Hello Nicholas,

Thank you for your response. I tried your line of code. The image is displayed in a separate window whereas I want it to be displayed on the right side of the panel in the user interface. Any suggestions would be very much appreciated.

Answer 1

[Shashwat Bajpai]

I would create another UIaxes and create your image profile in that axes. In your Image Panel you’ll need to place 2 axes and position them as required. In the Component Browser you’ll see under app.ImagePanel two axes named app.UIAxes and app.UIAxes2. You can display the image and its profile in these two axes when the button is clicked.

Hope this helps!