matlab app designer load image in new app
Question
I am using App Designer and trying to load an image (after clicking on it) from MainApp to App2 and show it directly (see screenshot) using a global variable in MainApp called imagePath , where I store the string ('metro-station.png') and a Startup function within App2, where I set the ImageSource to that path.
But it doesn't seem to work.
function startupFcn(app)
app.Image.ImageSource = fullfile(imagePath);
end
Is there any other method to do this?
1 answers
solution1
0 2022-09-16 13:55:56
You don't need global variable to share data between two Apps.
One of the possible way to exchange data between Apps is:
In the MainApp :
- Define a
public property(the variable that you want to share with the second App) - Initialize it in a function or callback of the MainApp
- When calling the second App, just pass the “App” handle as input parameter, this allows sharing all the public properties of the MainApp to the second App
In the second App:
- Define a
private propertyto hold the input parameter coming from the MainApp - In the
startupFcnassign the input parameter to such property - From this moment on, you can access to all the
public propertiesof the ManApp, including the specific one you want to pass from the MainApp to the second App
One of the pros (but, at the same time, one of the cons) of this method is that you can modify any of the MainApp public properties in the second App, especially the input parameter
If you don't want (don't need) to give to the second App the possibility to modify the MainApp properties:
In the MainApp:
- if you want to change the input parameter for the Second App inside other functions besides the one where you call Second App, you can define it as
private propertyin the MainApp so that you can access to it in any MainAppfunction / callback - Otherwise you can define a
local variablein thefunction/callbackof the MainApp calling the second App and use it as input parameter - Then, when calling the Second App you can pass only this
propertyor thelocalvariable to the second App
In the second App:
- Define a
private propertyin which to store the input parameter - In the s
tartupFcnassigns the inputparameterto thatproperty - From this moment on, all the second App function / callback have access to the ManApp input parameter
The pros (but, at the same time, the cons) of this method is that:
- Since the input parameter is passed by value, any modification to the input parameter is lost when you close the second App
- The second App does not have access to the public properties of the MainApp
Other sharing methods are available.
In the solution proposed in the below code, I've used (for simplicity) the first approach.
The MainApp presents 6 Images and the Import pushbutton that, when pressed, opens the second App and displays the image selected in the MainApp:
- The image is selected by clicking on it, when selected, the Selected (click again to unselect) label appears above it
- Clicking again on the image, deselect the image
- Clicking another image, selects the image and deselects the image selected before (if any)
- The pushbutton is enabled only if an image has been selected, when pressed, the second App opens.
The second App simply displays the image selected in the MainApp, a Close pushbutton allows to close it.
The MainApp consists of: (see below picture):
- 6 Image objects: app.Image1, …
- 6 Labels: app.img_1_selected, …
- 1 pushbutton: app.ImportButton
The app2 consists of (see below picture):
- 1 Image object: app.Image
- 1 Label: app.Label
- 1 pushbutton: CloseButton
MainApp code
For simplicity the path and the filename of the images in the MainApp are hardcoded, but you can easily implement a function to dynamically load them.
In the set of public properties you can find, among the others:
-
PathSelectedImage: the property used to store the path and the filename of the selected image to be passed to the second App ImgSelectionStr: an array to store the handles of the labels of the imagesImageSet: an array to store the handles of the image object
These two arrays allows using for loops when working with the images and the string and to avoid code duplications.
The arrays are initialized in the startupFcn function.
To access to the properties of the objects stored in the arrays you have to use the set / get functions instead of the dot notation .
The ImageClickedFcn callback is defined for each image; it simply sets the ID of the image and calls the SetUnset_Selection function.
The SetUnset_Selection function manages the selection of the images, the label above them and enables / disables the Import pushbutton
classdef MainApp_exported < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
MainAppUIFigure matlab.ui.Figure
img_1_selected matlab.ui.control.Label
img_2_selected matlab.ui.control.Label
img_3_selected matlab.ui.control.Label
img_4_selected matlab.ui.control.Label
img_5_selected matlab.ui.control.Label
img_6_selected matlab.ui.control.Label
ImportButton matlab.ui.control.Button
Image_6 matlab.ui.control.Image
Image_5 matlab.ui.control.Image
Image_4 matlab.ui.control.Image
Image_3 matlab.ui.control.Image
Image_2 matlab.ui.control.Image
Image_1 matlab.ui.control.Image
end
properties (Access = public)
PathSelectedImage; % Path and filename of the selected image
SelectedImageId; % Id of the selected image
SelectedImagePrevId; % Id of the previously selected image
ImgSelectionStr; % Array of Label objects
ImageSet; % Array of Image objects
app2_h; % handle to access app2
end
methods (Access = private)
% SetUnset_Selection: functin that manages the activaton of:
% - selection labels over the images
% - path and filename of the selected image
function SetUnset_Selection(app,SelectedImg)
% Selet the image object from the ImageSet array
tmp = app.ImageSet(SelectedImg);
% Get the path and filename of the selected imae
app.PathSelectedImage = get(tmp,'ImageSource');
% Save the ID of the previouusly selected image
if(app.SelectedImagePrevId ~= app.SelectedImageId)
app.SelectedImagePrevId = app.SelectedImageId;
else
app.SelectedImagePrevId = -1;
end
% Set the ID of the selected image
app.SelectedImageId = SelectedImg;
% Selet the image label object from the ImgSelectionStr array
tmp = app.ImgSelectionStr(SelectedImg);
% Visualize the label of the selected image and hide the label of
% the previously selected image and turns on the Import pushbutton
if(strcmp(get(tmp,'Visible'),"off"))
set(tmp,'Visible',"on",'Text','Selected (click again to unselect)');
app.ImportButton.Enable = "on";
else
set(tmp,'Visible',"off")
app.ImportButton.Enable = "off";
end
if(app.SelectedImagePrevId > 0)
set(app.ImgSelectionStr(app.SelectedImagePrevId),'Visible','off');
end
end
end
% Callbacks that handle component events
methods (Access = private)
% Code that executes after component creation
function startupFcn(app)
% Initialize the handle to access app2
app.app2_h = [];
% Initialize the ID of the previously selected image
app.SelectedImagePrevId = -1;
% Initialize the ID of the selected image
app.SelectedImageId = -1;
% Store the image label objects in the ImgSelectionStr array
% The array is used to easily access the label objects and avoid
% duplication in the code
app.ImgSelectionStr(1) = app.img_1_selected;
app.ImgSelectionStr(2) = app.img_2_selected;
app.ImgSelectionStr(3) = app.img_3_selected;
app.ImgSelectionStr(4) = app.img_4_selected;
app.ImgSelectionStr(5) = app.img_5_selected;
app.ImgSelectionStr(6) = app.img_6_selected;
% Store the image objects in the ImageSet array
% The array is used to easily access the label objects and avoid
% duplication in the code
app.ImageSet(1) = app.Image_1;
app.ImageSet(2) = app.Image_2;
app.ImageSet(3) = app.Image_3;
app.ImageSet(4) = app.Image_4;
app.ImageSet(5) = app.Image_5;
app.ImageSet(6) = app.Image_6;
end
% Button pushed function: ImportButton
function ImportButtonPushed(app, event)
% Turn off the Import pushbutton (will be turned on in the
% SetUnset_Selection function
app.ImportButton.Enable = "off";
% Open the app2 that shows the selected image
app.app2_h=app2(app);
end
% Image clicked function: Image_1
function Image_1Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 1;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
% Image clicked function: Image_2
function Image_2Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 2;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
% Image clicked function: Image_3
function Image_3Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 3;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
% Image clicked function: Image_4
function Image_4Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 4;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
% Image clicked function: Image_5
function Image_5Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 5;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
% Image clicked function: Image_6
function Image_6Clicked(app, event)
% Set the ID of the selected image
Sel_Img_Id = 6;
% Call SetUnset_Selection to manage the image labels and get the
% path and filename of the selected image
SetUnset_Selection(app,Sel_Img_Id);
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Get the file path for locating images
pathToMLAPP = fileparts(mfilename('fullpath'));
% Create MainAppUIFigure and hide until all components are created
app.MainAppUIFigure = uifigure('Visible', 'off');
app.MainAppUIFigure.IntegerHandle = 'on';
app.MainAppUIFigure.Position = [100 100 580 431];
app.MainAppUIFigure.Name = 'MainApp';
app.MainAppUIFigure.Tag = 'App1_FIGURE';
% Create Image_1
app.Image_1 = uiimage(app.MainAppUIFigure);
app.Image_1.ImageClickedFcn = createCallbackFcn(app, @Image_1Clicked, true);
app.Image_1.Position = [34 301 118 92];
app.Image_1.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_1.jpg');
% Create Image_2
app.Image_2 = uiimage(app.MainAppUIFigure);
app.Image_2.ImageClickedFcn = createCallbackFcn(app, @Image_2Clicked, true);
app.Image_2.Position = [34 176 118 92];
app.Image_2.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_2.jpg');
% Create Image_3
app.Image_3 = uiimage(app.MainAppUIFigure);
app.Image_3.ImageClickedFcn = createCallbackFcn(app, @Image_3Clicked, true);
app.Image_3.Position = [34 53 118 92];
app.Image_3.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_3.jpg');
% Create Image_4
app.Image_4 = uiimage(app.MainAppUIFigure);
app.Image_4.ImageClickedFcn = createCallbackFcn(app, @Image_4Clicked, true);
app.Image_4.Position = [413 301 118 92];
app.Image_4.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_4.jpg');
% Create Image_5
app.Image_5 = uiimage(app.MainAppUIFigure);
app.Image_5.ImageClickedFcn = createCallbackFcn(app, @Image_5Clicked, true);
app.Image_5.Position = [413 176 118 92];
app.Image_5.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_5.jpg');
% Create Image_6
app.Image_6 = uiimage(app.MainAppUIFigure);
app.Image_6.ImageClickedFcn = createCallbackFcn(app, @Image_6Clicked, true);
app.Image_6.Position = [413 53 118 92];
app.Image_6.ImageSource = fullfile(pathToMLAPP, 'IMG', 'img_6.jpg');
% Create ImportButton
app.ImportButton = uibutton(app.MainAppUIFigure, 'push');
app.ImportButton.ButtonPushedFcn = createCallbackFcn(app, @ImportButtonPushed, true);
app.ImportButton.BackgroundColor = [0.9294 0.6941 0.1255];
app.ImportButton.FontSize = 14;
app.ImportButton.FontWeight = 'bold';
app.ImportButton.Enable = 'off';
app.ImportButton.Position = [211 203 158 39];
app.ImportButton.Text = 'Import';
% Create img_6_selected
app.img_6_selected = uilabel(app.MainAppUIFigure);
app.img_6_selected.FontWeight = 'bold';
app.img_6_selected.FontColor = [1 0 0];
app.img_6_selected.Visible = 'off';
app.img_6_selected.Position = [350 144 195 22];
app.img_6_selected.Text = 'Selected (click again to unselect)';
% Create img_5_selected
app.img_5_selected = uilabel(app.MainAppUIFigure);
app.img_5_selected.FontWeight = 'bold';
app.img_5_selected.FontColor = [1 0 0];
app.img_5_selected.Visible = 'off';
app.img_5_selected.Position = [350 267 195 22];
app.img_5_selected.Text = 'Selected (click again to unselect)';
% Create img_4_selected
app.img_4_selected = uilabel(app.MainAppUIFigure);
app.img_4_selected.FontWeight = 'bold';
app.img_4_selected.FontColor = [1 0 0];
app.img_4_selected.Visible = 'off';
app.img_4_selected.Position = [350 393 195 22];
app.img_4_selected.Text = 'Selected (click again to unselect)';
% Create img_3_selected
app.img_3_selected = uilabel(app.MainAppUIFigure);
app.img_3_selected.FontWeight = 'bold';
app.img_3_selected.FontColor = [1 0 0];
app.img_3_selected.Visible = 'off';
app.img_3_selected.Position = [48 144 195 22];
app.img_3_selected.Text = 'Selected (click again to unselect)';
% Create img_2_selected
app.img_2_selected = uilabel(app.MainAppUIFigure);
app.img_2_selected.FontWeight = 'bold';
app.img_2_selected.FontColor = [1 0 0];
app.img_2_selected.Visible = 'off';
app.img_2_selected.Position = [48 267 195 22];
app.img_2_selected.Text = 'Selected (click again to unselect)';
% Create img_1_selected
app.img_1_selected = uilabel(app.MainAppUIFigure);
app.img_1_selected.FontWeight = 'bold';
app.img_1_selected.FontColor = [1 0 0];
app.img_1_selected.Visible = 'off';
app.img_1_selected.Position = [48 393 195 22];
app.img_1_selected.Text = 'Selected (click again to unselect)';
% Show the figure after all components are created
app.MainAppUIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = MainApp_exported
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.MainAppUIFigure)
% 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.MainAppUIFigure)
end
end
end
Second App code
The private property MainApp is used to store the input parameter of the MainApp (whch is the MainApp handle)
The startupFcn simply retrieves the path and the name of the image to be displayed form the input parameter and sets the label above the image.
classdef app2_exported < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
App2ImageDisplayUIFigure matlab.ui.Figure
Label matlab.ui.control.Label
CloseButton matlab.ui.control.Button
Image matlab.ui.control.Image
end
properties (Access = private)
MainApp; % Handle of the calling app (app1)
end
% Callbacks that handle component events
methods (Access = private)
% Code that executes after component creation
function startupFcn(app, CallingApp)
% Set the handle of the calling app
app.MainApp = CallingApp;
% Load the select image
app.Image.ImageSource = CallingApp.PathSelectedImage;
% Print the name and the ID of the diplayed image
[~,name,~] = fileparts(app.Image.ImageSource);
img_id=CallingApp.SelectedImageId;
str=sprintf('Name: %s\nPosition: %d',name,img_id);
app.Label.Text = str;
% Set the Label of the selected image in app1 as "Imported"
tmp=CallingApp.ImgSelectionStr(img_id);
set(tmp,'text','Imported');
end
% Button pushed function: CloseButton
function CloseButtonPushed(app, event)
% Get the handle of the label of the selected image in app1
tmp=app.MainApp.ImgSelectionStr(app.MainApp.SelectedImageId);
% Update the label of displayed image in the calling app before
% closing the app2
set(tmp,'text','App2 closed, select a in image');
app.MainApp.app2_h = [];
delete(app);
end
% Close request function: App2ImageDisplayUIFigure
function App2ImageDisplayUIFigureCloseRequest(app, event)
tmp=app.MainApp.ImgSelectionStr(app.MainApp.SelectedImageId);
% Update the label of displayed image in the calling app before
% closing the app2
set(tmp,'text','App2 closed, select a in image');
app.MainApp.app2_h = [];
delete(app);
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create App2ImageDisplayUIFigure and hide until all components are created
app.App2ImageDisplayUIFigure = uifigure('Visible', 'off');
app.App2ImageDisplayUIFigure.IntegerHandle = 'on';
app.App2ImageDisplayUIFigure.Position = [100 100 655 536];
app.App2ImageDisplayUIFigure.Name = 'App2 - Image Display';
app.App2ImageDisplayUIFigure.CloseRequestFcn = createCallbackFcn(app, @App2ImageDisplayUIFigureCloseRequest, true);
app.App2ImageDisplayUIFigure.HandleVisibility = 'on';
app.App2ImageDisplayUIFigure.Tag = 'app2_FIGURE';
% Create Image
app.Image = uiimage(app.App2ImageDisplayUIFigure);
app.Image.Position = [33 122 390 295];
% Create CloseButton
app.CloseButton = uibutton(app.App2ImageDisplayUIFigure, 'push');
app.CloseButton.ButtonPushedFcn = createCallbackFcn(app, @CloseButtonPushed, true);
app.CloseButton.Position = [445 273 98 34];
app.CloseButton.Text = 'Close';
% Create Label
app.Label = uilabel(app.App2ImageDisplayUIFigure);
app.Label.WordWrap = 'on';
app.Label.Position = [59 448 524 73];
app.Label.Text = '';
% Show the figure after all components are created
app.App2ImageDisplayUIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = app2_exported(varargin)
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.App2ImageDisplayUIFigure)
% Execute the startup function
runStartupFcn(app, @(app)startupFcn(app, varargin{:}))
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.App2ImageDisplayUIFigure)
end
end
end
The picture below shows the two Apps “at working”.
Hope this helps. Qapla'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
MATLAB App Designer reset properties
Linewidth Error in Bloodpressure example of MATLAB App Designer
How use 'waitfor' or 'uiwait' in app designer of MATLAB?
Snapshot the axes in app designer for Report Generator - Matlab
Correct Usage of uiwait and uiresume in MATLAB App Designer
Issue with MATLAB app designer playing sounds
Is there way to display in MATLAB App Designer UIAxes a boxplot?
Connecting serial port via MATLAB App Designer
Getting Mouse Points using Matlab App Designer
How to add picturebox to Matlab App Designer?
Related Tags