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

48 views (last 30 days)
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
properties (Access = public)
UIAxes matlab.ui.control.UIAxes
% 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;
% 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);
hold on
hold on
% 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);
hold on
hold on
% 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';
% App creation and deletion
methods (Access = public)
% Construct app
function app = Patient3
% Create UIFigure and components
% Register the app with App Designer
registerApp(app, app.UIFigure)
if nargout == 0
clear app
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
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.
Warid Islam
Warid Islam on 19 Jul 2019
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.

Sign in to comment.

Accepted Answer

Shashwat Bajpai
Shashwat Bajpai on 5 Aug 2019
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!

More Answers (0)


Find more on Develop uifigure-Based Apps in Help Center and File Exchange

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!