How to display an image in UI Figure on app designer?

How can i display the figure i select from the folder in UI figure of App designer? I am using version 2016a and as per the code below, when i click the "button", the image opens in a different window.

% Button button pushed function
        function ButtonButtonPushed2(app)
              [file,path]=uigetfile({'*.jpg';'*.bmp';'*.gif';'*.tiff'}, 'Select file');
              a= imread(file);
              imshow(a);

Answer 1

[OCDER]

Try this:

imshow(a, 'parent', app.UIAxes);

But, you'll run into issues with having all this x, y, title of axes still shown and taking up space. See this post to fix that issue:

https://www.mathworks.com/matlabcentral/answers/360670-imshow-in-app-designer-image-size-doesn-t-fit

[tejas alva]

Hey! Thanks a lot for the answer. I tried that and I am getting the following error. Kindly help me get through it if you can.

Error using image While setting the 'Parent' property of 'Image': Functionality not supported with UIAxes. For more information, see Graphics Support in App Designer.

Error in images.internal.basicImageDisplay (line 24) hh = image(cdata, ...

Error in imshow (line 293) hh = images.internal.basicImageDisplay(fig_handle,ax_handle,...

[OCDER]

Can you show the code for the imshow, that whole callback function? And what is the name of your UIAxes? normally it's app.UIAxes or app.UIAxes2... etc.

[tejas alva]

The code for that whole function looked like this after the suggestion you made:

 % Button button pushed function
        function ButtonButtonPushed2(app)

    [file,path]=uigetfile({'*.jpg';'*.bmp';'*.gif';'*.tiff'}, 'Select file');
     a= imread(file);
     imshow(a, 'parent', app.UIAxes);

And the name of the axes is app.UIAxes. Haven't changed that.

Here is the entire code thats visible in the code view:

 classdef Trial2 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure matlab.ui.Figure         % UI Figure
        UIAxes   matlab.ui.control.UIAxes % Title
        Button   matlab.ui.control.Button % Button
    end

    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)

        end

        % Loadimage button pushed function
        function ButtonButtonPushed(app)

        end

        % Button button pushed function
        function ButtonButtonPushed2(app)
             [file, path]= uigetfile({'*.jpg';'*.bnp';'*.gif';'*.tiff'}, 'Select a file');
 a= imread(file);
 imshow(a, 'Parent' , app.UIAxes);

        end
    end

    % App initialization and construction
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';
            setAutoResize(app, app.UIFigure, true)

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, 'Title');
            xlabel(app.UIAxes, 'X');
            ylabel(app.UIAxes, 'Y');
            app.UIAxes.Position = [258 159 361 288];

            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonButtonPushed2);
            app.Button.Position = [130 327 100 22];
        end
    end

    methods (Access = public)

        % Construct app
        function app = Trial2()

            % Create and configure 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

[OCDER]

function ButtonButtonPushed2(app)  %How come there's only 1 button, but 2 button callback functions?
    [FileName, FilePath]= uigetfile({'*.jpg';'*.bnp';'*.gif';'*.tiff'}, 'Select a file'); %Don't override path.m
    if isnumeric(FileName); return; end %User did not select a file
    a= imread(fullfile(FilePath, FileName)); %Always use full file path, not relative path
    imshow(a, 'Parent' , app.UIAxes); %This should work...
end

[tejas alva]

Hey! Thanks a lot for being so helpful and patient.

%How come there's only 1 button, but 2 button callback functions?

Ans: Its because i hadnt deleted the call back though i had deleted the button. My bad. It is still giving me errors though.

For,

imshow(a, 'Parent' , app.UIAxes);

The error: Functionality not supported in App Designer apps. For more information, see Graphics Support in App Designer.

And for

 % App initialization and construction
    methods (Access = private)

which is an uneditable part of the code, it says:

Error using Trial2 Error: File: Trial2.mlapp Line: 32 Column: 5 Unexpected MATLAB expression.

I am even attaching the image of the errors. I am really new to this and have been breaking my head over it. I really appreciate your time and help. Thank you again.

[tejas alva]

So, here is another snip which will help me better explain what i want. Currently, When I click the button, it lets me choose a image and it displays it in a separate window as shown in the figure. I just want it within the UI figure.

[OCDER]

You have an extra "end". Also, format your codes inside your Matlab by selecting ctrl+a and then ctrl+i.

[tejas alva]

Oh okay! I add an extra end and it says " Illegal use of the reserved word 'end'" . If i leave it like before it , it gives the same old error:

 Error using Trial2 Error: File: Trial2.mlapp Line: 32 Column: 5 Unexpected MATLAB expression.

This is so frustrating!

[OCDER]

classdef Trial2 < matlab.apps.AppBase
    % Properties that correspond to app components
    properties (Access = public)
        UIFigure matlab.ui.Figure         % UI Figure
        UIAxes   matlab.ui.control.UIAxes % Title
        Button   matlab.ui.control.Button % Button
    end
    methods (Access = private)
        % Code that executes after component creation
        function startupFcn(app)
        end
        % Loadimage button pushed function
        function ButtonButtonPushed(app)
        end
        % Button button pushed function
        function ButtonButtonPushed2(app)
            [FileName, FilePath]= uigetfile({'*.jpg';'*.bnp';'*.gif';'*.tiff'}, 'Select a file'); %Don't override path.m
            if isnumeric(FileName); return; end %User did not select a file
            a = imread(fullfile(FilePath, FileName)); %Always use full file path, not relative path
            imshow(a, 'Parent' , app.UIAxes); %This should work...
        end
    end
    % App initialization and construction
    methods (Access = private)
        % Create UIFigure and components
        function createComponents(app)
            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';
            setAutoResize(app, app.UIFigure, true)
            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, 'Title');
            xlabel(app.UIAxes, 'X');
            ylabel(app.UIAxes, 'Y');
            app.UIAxes.Position = [258 159 361 288];
            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonButtonPushed2);
            app.Button.Position = [130 327 100 22];
        end
    end
    methods (Access = public)
        % Construct app
        function app = Trial2()
            % Create and configure 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

[tejas alva]

Hey! Thanks A lot. It finally worked. I am really grateful to you. It didnt work in the 2016a version, worked in 2018b version. Thanks again!

[OCDER]

You're welcome!

[Nikolo]

I had the same problem. It really doesn't work on 2016a. haha I also did download the 2018b and it works!

[Eric Sargent]

Starting in R2019a, you can use the uiimage function to create an image component in your App Designer apps.

[Mostafa Amr]

[FileName, FilePath]= uigetfile({'*.jpg';'*.bnp';'*.gif';'*.tiff'}, 'Select a file'); %Don't override path.m

if isnumeric(FileName); return; end %User did not select a file

a = imread(fullfile(FilePath, FileName)); %Always use full file path, not relative path

imshow(a, 'Parent' , app.UIAxes); %This should work...

this code gives me an error which is

Error using image

Too many input arguments.

Error in images.internal.basicImageDisplay (line 24)

hh = image(cdata, ...

Error in imshow (line 330)

hh = images.internal.basicImageDisplay(fig_handle,ax_handle,...

when I use imshow outside the appdesigner it works but after trying to use it inside the appdesigner it gives me errors inside it and outside it and that happened with diffrenet codes not only with that and I do not know why (I use matlab R2021a)

Answer 2

[Melinda Toth-Zubairi]

Starting in R2019a, you can use the uiimage function to create an image component in your App Designer apps. See here for more details:

https://www.mathworks.com/matlabcentral/answers/399998-add-static-images-with-app-designer#answer_367315