MATLAB: How to open a image in App Designer

app designerMATLAB

Hello,
I have created a user interface using the APP DESIGNER. The image below shows my interface.d.PNG
If I click OPEN button, an image is displayed on the left side of the image panel. I want to create another button that would crop the image on the left side of the panel and display the cropped image on the right side of the panel. Please note that I want both the images simultaneously on the interface. Please find my code below. Any help would be appreciated. Thank you.

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
BrainViewButton matlab.ui.control.Button
BloodViewButton matlab.ui.control.Button
VentriclesViewButton matlab.ui.control.Button
TissueViewButton matlab.ui.control.Button
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
RunButton matlab.ui.control.Button
FlipButton 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
MorphologicalOperationsButton matlab.ui.control.Button
UndoButton matlab.ui.control.Button
BloodToolInactiveButton matlab.ui.control.Button
DeleteButton matlab.ui.control.Button
AnalyzePanel matlab.ui.container.Panel
CreateBoundaryButton matlab.ui.control.Button
SAHButton 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
StartBrainSliceButton matlab.ui.control.Button
FullBrainSliceButton matlab.ui.control.Button
EditField matlab.ui.control.EditField
EditField_2 matlab.ui.control.EditField
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_3 matlab.ui.control.EditField
EditField_4 matlab.ui.control.EditField
EditField_5 matlab.ui.control.EditField
EditField_6 matlab.ui.control.EditField
EditField_7 matlab.ui.control.EditField
EditField_8 matlab.ui.control.EditField
EditField_9 matlab.ui.control.EditField
EditField_10 matlab.ui.control.EditField
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
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 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 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 RunButton
app.RunButton = uibutton(app.OptionPanel, 'push');
app.RunButton.Position = [62 11 100 22];
app.RunButton.Text = 'Run';
% Create FlipButton
app.FlipButton = uibutton(app.OptionPanel, 'push');
app.FlipButton.Position = [115 41 100 22];
app.FlipButton.Text = 'Flip';
% 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
app.OpenResultsButton = uibutton(app.BrainDemoPanel, 'push');
app.OpenResultsButton.Position = [72 35 100 22];
app.OpenResultsButton.Text = 'Open Results';
% Create StartBrainSliceButton
app.StartBrainSliceButton = uibutton(app.BrainDemoPanel, 'push');

Best Answer

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.