MATLAB: How to load an image file in APP DESIGNER

Question

I want to load an image form a folder in APP DESIGNER. Below is my code:

classdef Patient1 < 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                           matlab.ui.control.Image
        BrainViewButton                 matlab.ui.control.Button
        BloodViewButton                 matlab.ui.control.Button
        VentriclesViewButton            matlab.ui.control.Button
        Image_2                         matlab.ui.control.Image
        TissueViewButton                matlab.ui.control.Button
        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
        FlipButton                      matlab.ui.control.Button
        RunButton                       matlab.ui.control.Button
        EditingPanel                    matlab.ui.container.Panel
        CorrectionButton                matlab.ui.control.Button
        CleaningtoolforBloodButton      matlab.ui.control.Button
        CleaningToolforVentriclesButton  matlab.ui.control.Button
        CleaningToolforCalcificationButton  matlab.ui.control.Button
        BloodToolInactiveButton         matlab.ui.control.Button
        DeleteButton                    matlab.ui.control.Button
        AnalyzePanel                    matlab.ui.container.Panel
        CreateBoundaryButton            matlab.ui.control.Button
        ICHButton                       matlab.ui.control.Button
        SDHButton                       matlab.ui.control.Button
        IVHButton                       matlab.ui.control.Button
        DataPanel                       matlab.ui.container.Panel
        AddExplanationButton            matlab.ui.control.Button
        ExportDataButton                matlab.ui.control.Button
        OpenResultsButton               matlab.ui.control.Button
        SAHButton                       matlab.ui.control.Button
        MorphologicalOperationsButton   matlab.ui.control.Button
        UndoButton                      matlab.ui.control.Button
        StartBrainSliceButton           matlab.ui.control.Button
        FullBrainSliceButton            matlab.ui.control.Button
        ComputationPanel                matlab.ui.container.Panel
        AllSlicesPanel                  matlab.ui.container.Panel
        BrainVolumeEditFieldLabel       matlab.ui.control.Label
        BrainVolumeEditField            matlab.ui.control.EditField
        BloodVolumeEditFieldLabel       matlab.ui.control.Label
        BloodVolumeEditField            matlab.ui.control.EditField
        VentriclesVolumeEditFieldLabel  matlab.ui.control.Label
        VentriclesVolumeEditField       matlab.ui.control.EditField
        TissueVolumeEditFieldLabel      matlab.ui.control.Label
        TissueVolumeEditField           matlab.ui.control.EditField
        BloodStatsPanel                 matlab.ui.container.Panel
        SAHEditFieldLabel               matlab.ui.control.Label
        SAHEditField                    matlab.ui.control.EditField
        ICHEditFieldLabel               matlab.ui.control.Label
        ICHEditField                    matlab.ui.control.EditField
        SDHEditFieldLabel               matlab.ui.control.Label
        SDHEditField                    matlab.ui.control.EditField
        IVHEditFieldLabel               matlab.ui.control.Label
        IVHEditField                    matlab.ui.control.EditField
        CurrentSlicePanel               matlab.ui.container.Panel
        BloodStatsPanel_2               matlab.ui.container.Panel
        SAHEditField_2Label             matlab.ui.control.Label
        SAHEditField_2                  matlab.ui.control.EditField
        ICHEditField_2Label             matlab.ui.control.Label
        ICHEditField_2                  matlab.ui.control.EditField
        SDHEditField_2Label             matlab.ui.control.Label
        SDHEditField_2                  matlab.ui.control.EditField
        IVHEditField_2Label             matlab.ui.control.Label
        IVHEditField_2                  matlab.ui.control.EditField
        CreateBoundaryStatsPanel        matlab.ui.container.Panel
        EditField_4                     matlab.ui.control.EditField
        EditField_5                     matlab.ui.control.EditField
        EditField_6                     matlab.ui.control.EditField
        EditField_8                     matlab.ui.control.EditField
        EditField_9                     matlab.ui.control.EditField
        EditField_10                    matlab.ui.control.EditField
        EditField_7                     matlab.ui.control.EditField
        EditField_3                     matlab.ui.control.EditField
        EditField_2                     matlab.ui.control.EditField
        EditField                       matlab.ui.control.EditField
    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];
            ImageFile = imread(fullname);
            axes(handles.axes1)
            imagesc(ImageFile);
            set(handles.axes1,'visible','off') %hide the current axes
            set(get(handles.axes1,'children'),'visible','off') %hide the current axes contents
            axis off;
           
        end

        % Button pushed function: FlipButton
        function FlipButtonPushed(app, event)
           
        end

        % Image clicked function: Image
        function ImageClicked(app, event)
            
        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
            app.Image = uiimage(app.ImagePanel);
            app.Image.ImageClickedFcn = createCallbackFcn(app, @ImageClicked, true);
            app.Image.Position = [136 76 356 238];

            % Create BrainViewButton
            app.BrainViewButton = uibutton(app.ImagePanel, 'push');
            app.BrainViewButton.Position = [491 342 100 22];
            app.BrainViewButton.Text = 'Brain View';

            % Create BloodViewButton
            app.BloodViewButton = uibutton(app.ImagePanel, 'push');
            app.BloodViewButton.Position = [600 342 100 22];
            app.BloodViewButton.Text = 'Blood View';

            % Create VentriclesViewButton
            app.VentriclesViewButton = uibutton(app.ImagePanel, 'push');
            app.VentriclesViewButton.Position = [707 342 100 22];
            app.VentriclesViewButton.Text = 'Ventricles View';

            % Create TissueViewButton
            app.TissueViewButton = uibutton(app.ImagePanel, 'push');
            app.TissueViewButton.Position = [813 342 100 22];
            app.TissueViewButton.Text = 'Tissue View';

            % Create Image_2
            app.Image_2 = uiimage(app.ImagePanel);
            app.Image_2.Position = [491 76 356 238];

            % 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 FlipButton
            app.FlipButton = uibutton(app.OptionPanel, 'push');
            app.FlipButton.ButtonPushedFcn = createCallbackFcn(app, @FlipButtonPushed, true);
            app.FlipButton.Position = [115 41 100 22];
            app.FlipButton.Text = 'Flip';

            % Create RunButton
            app.RunButton = uibutton(app.OptionPanel, 'push');
            app.RunButton.Position = [62 11 100 22];
            app.RunButton.Text = 'Run';

            % Create EditingPanel
            app.EditingPanel = uipanel(app.BrainDemoPanel);
            app.EditingPanel.Title = 'Editing Panel';
            app.EditingPanel.FontWeight = 'bold';
            app.EditingPanel.Position = [10 314 260 252];

            % Create CorrectionButton
            app.CorrectionButton = uibutton(app.EditingPanel, 'push');
            app.CorrectionButton.Position = [62 208 100 22];
            app.CorrectionButton.Text = 'Correction';

            % Create CleaningtoolforBloodButton
            app.CleaningtoolforBloodButton = uibutton(app.EditingPanel, 'push');
            app.CleaningtoolforBloodButton.Position = [44.5 177 137 22];
            app.CleaningtoolforBloodButton.Text = 'Cleaning tool for Blood';

            % Create CleaningToolforVentriclesButton
            app.CleaningToolforVentriclesButton = uibutton(app.EditingPanel, 'push');
            app.CleaningToolforVentriclesButton.Position = [32.5 148 161 22];
            app.CleaningToolforVentriclesButton.Text = 'Cleaning Tool for Ventricles';

            % Create CleaningToolforCalcificationButton
            app.CleaningToolforCalcificationButton = uibutton(app.EditingPanel, 'push');
            app.CleaningToolforCalcificationButton.Position = [26 119 174 22];
            app.CleaningToolforCalcificationButton.Text = 'Cleaning Tool for Calcification';

            % Create MorphologicalOperationsButton
            app.MorphologicalOperationsButton = uibutton(app.EditingPanel, 'push');
            app.MorphologicalOperationsButton.Position = [37 89 152 22];
            app.MorphologicalOperationsButton.Text = 'Morphological Operations';

            % Create UndoButton
            app.UndoButton = uibutton(app.EditingPanel, 'push');
            app.UndoButton.Position = [62 63 100 22];
            app.UndoButton.Text = 'Undo';

            % Create BloodToolInactiveButton
            app.BloodToolInactiveButton = uibutton(app.EditingPanel, 'push');
            app.BloodToolInactiveButton.Position = [50.5 33 121 22];
            app.BloodToolInactiveButton.Text = 'Blood Tool(Inactive)';

            % Create DeleteButton
            app.DeleteButton = uibutton(app.EditingPanel, 'push');
            app.DeleteButton.Position = [62 8 100 22];
            app.DeleteButton.Text = 'Delete';

            % Create AnalyzePanel
            app.AnalyzePanel = uipanel(app.BrainDemoPanel);
            app.AnalyzePanel.Title = 'Analyze Panel';
            app.AnalyzePanel.FontWeight = 'bold';
            app.AnalyzePanel.Position = [11 153 260 154];

            % Create CreateBoundaryButton
            app.CreateBoundaryButton = uibutton(app.AnalyzePanel, 'push');
            app.CreateBoundaryButton.Position = [61 110 106 22];
            app.CreateBoundaryButton.Text = 'Create Boundary';

            % Create SAHButton
            app.SAHButton = uibutton(app.AnalyzePanel, 'push');
            app.SAHButton.Position = [61 81 100 22];
            app.SAHButton.Text = 'SAH';

            % Create ICHButton
            app.ICHButton = uibutton(app.AnalyzePanel, 'push');
            app.ICHButton.Position = [64 52 100 22];
            app.ICHButton.Text = 'ICH';

            % Create SDHButton
            app.SDHButton = uibutton(app.AnalyzePanel, 'push');
            app.SDHButton.Position = [63 23 100 22];
            app.SDHButton.Text = 'SDH';

            % Create IVHButton
            app.IVHButton = uibutton(app.AnalyzePanel, 'push');
            app.IVHButton.Position = [64 2 100 22];
            app.IVHButton.Text = 'IVH';

            % Create DataPanel
            app.DataPanel = uipanel(app.BrainDemoPanel);
            app.DataPanel.Title = 'Data Panel';
            app.DataPanel.FontWeight = 'bold';
            app.DataPanel.Position = [8 67 260 79];

            % Create AddExplanationButton
            app.AddExplanationButton = uibutton(app.DataPanel, 'push');
            app.AddExplanationButton.Position = [66 34 103 22];
            app.AddExplanationButton.Text = 'Add Explanation';

            % Create ExportDataButton
            app.ExportDataButton = uibutton(app.DataPanel, 'push');
            app.ExportDataButton.Position = [70 5 100 22];
            app.ExportDataButton.Text = 'Export Data';

            % Create OpenResultsButton

            
            

    

        

	
    

        
Best Answer
    

    

								

								
You need create uiaxes first and show the image on the axes. 
First, add Axes component in Design View of App Designer. UIAxes will be added automatically.
 % Properties that correspond to app components
 properties (Access = public)
    UIFigure  matlab.ui.Figure
    UIAxes    matlab.ui.control.UIAxes
    % ...
 end        
Next, uncheck Visible from INTERACTIVITY of app.UIAxes from Inspector pane.
Then, do imagesc or imshow by spcifying app.UIAxes.
% Button pushed function: OpenButton
        function OpenButtonPushed(app, event)
           [filename,filepath] = uigetfile({'*.*;*.jpg;*.png;*.bmp;*.oct'}, 'Select File to Open');
           fullname = [filepath, filename];
           ImageFile = imread(fullname);
           imagesc(app.UIAxes, ImageFile);
        end
						    
						
		
    
        

    

Related Solutions
MATLAB: How to open a image in App Designer

								

								
Use callbacks.
When you click open button, write code in OpenButtonCallback to open the image and display on the left side of Image panel.
After creating crop button, write code in CropButtonCallback to use the same image and crop dimensions and display the new image on the right side of Image panel.
If you don't want to create new button for cropping, then you can write both the callbacks mentioned above for only open button one(open the image, store in variable and display on left side) after the other(crop implementaion on stored image variable and store in new variable and display on right side). Such that, when you select open button and select the image, both original and cropped images are shown at once.
I hope this helps.
						    
						
MATLAB: Error: Missing multiplication operator, missing or unbalanced delimiters. To construct matrices, use brackets instead of parentheses.

								

								
Your updateimage function is not within a methods section.
						    
						
        
        

            
            
            
Related Question
How to display images when clicking a button in matlab app designer
Problem with playing audio file from App Designer
Plotting in App designer
Tool tip bug in App Designer
        
    
    

		    

Answer 1

You need create uiaxes first and show the image on the axes.

First, add Axes component in Design View of App Designer. UIAxes will be added automatically.

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

Next, uncheck Visible from INTERACTIVITY of app.UIAxes from Inspector pane.

Then, do imagesc or imshow by spcifying app.UIAxes.

% Button pushed function: OpenButton
        function OpenButtonPushed(app, event)
           [filename,filepath] = uigetfile({'*.*;*.jpg;*.png;*.bmp;*.oct'}, 'Select File to Open');
           fullname = [filepath, filename];
           ImageFile = imread(fullname);
           imagesc(app.UIAxes, ImageFile);
        end