MATLAB® GUI/Apps
Development
2 Why to learn MATLAB GUI/App
development?
Graphical user interfaces (GUIs), also known
as apps, provide point-and-click control of
your software applications, eliminating the
need for others to learn a language or type
commands in order to run the application.
You can share apps both for use within
MATLAB and also as standalone desktop or
web apps.
3
How to start app development?
4 App Designer- Design View
4 App Designer- Design View
Design View in App Designer provides a rich set of
layout tools for professional-looking applications.
Provides an extensive library of UI components.
Any changes you make in Design View are
automatically reflected in Code View.
4 App Designer- Code View
5 Save the app
The file extension of .mlapp
6 Component Library
6 Adding Component
• Drag a component from the
Component Library and drop it
on the canvas.
• Click a component in the
Component Library and then
move your cursor over the
canvas
7 Component Browser
8 Design View / Code View
9
Callbacks
Select the object and right click on it
Chose the desired callback function which you want to
add
Add code inside the editable area
%Button pushed function: Button
function ButtonPushed(app, event)
– app.Label.Text="Welcome to MATLAB";
end
10 Functions
Click on the green plus button after selecting function
Rename the new function
Write code inside the function
Multiple function can be added here
Access method can also be modified as public
11 Function Calling
12 Properties
Click on the green plus button after selecting
properties
Include properties
Multiple properties can be added here
Access method can also be modified as public
13 Using Properties
14 Base workspace
Send to base workspace
— assignin('base','x',15)
Retrieve from base workspace
— x_new =evalin('base',‘x');
15 Label, Button, Edit Field (Text)
Renaming the callback function &
components is possible
Edit Field (Text) vs Edit Field (Numeric)
16
17
TextArea
Multiline text input
18 Check Box
19
Drop Down
On Change Event
20
ListBox
21
Button Group
22 Axes
function DisplayButtonPushed(app,
event)
plot(app.UIAxes,[1 2 3 4],'r-o');
hold(app.UIAxes);
plot(app.UIAxes,[7 3 4 2],'b-o');
app.UIAxes.XTickLabel =
{'Jan','Feb','Mar','Apr'};
title(app.UIAxes, 'Month vs Point')
xlabel(app.UIAxes, 'Month')
ylabel(app.UIAxes, 'Points')
legend(app.UIAxes,'A','B');
end
23 Display Image
function DisplayImageButtonPushed(app, event)
imshow('peppers.png','Parent',app.UIAxes);
end
24
Slider
25
Spinner
26 Table Design
27 Display Data in Table
%Button pushed function: Button
– function ButtonPushed(app, event)
– Name =
{'Sanchez';'Johnson';'Li';'Diaz';'Brown'};
– Age =[38;43;38;40;49];
– Smoker =logical([1;0;1;0;1]);
– Height =[71;69;64;67;64];
– app.UITable.Data =table(Name, Age,
Smoker, Height);
– end
Containers
29
Panel
30
Tab Group
31
Menu Design
32
Adding Callback to Menu Items
Instrumentation
34
Gauge & Knob
35
Different Type of Gauges
36
Different Type of Knob
37
Switch & Lamp
38 Enabling Lamp by Switch
%Value changed function: Switch
– function SwitchValueChanged(app, event)
– value =app.Switch.Value;
– if value=="Off"
– app.Lamp.Enable=false;
– else
– app.Lamp.Enable=true;
– end
– end
39
Changing Lamp Color by Switch
%Value changed function: Switch2
– function Switch2ValueChanged(app, event)
– value2 =app.Switch2.Value;
– if value2=="Off"
– app.Lamp2.Color=[1.00,0.00,0.00];
– else
– app.Lamp2.Color=[0.00,1.00,0.00];
– end
– end
40
Enabling Lamp by Toggle Switch
%Value changed function: Switch3
– function Switch3ValueChanged(app, event)
– value3 =app.Switch3.Value;
– if value3=="Off"
– app.Lamp3.Enable=false;
– else
– app.Lamp3.Enable=true;
– end
– end
Export App
42
Export App
43
Export as MATLAB APP
44
InstallApp
45
Export as Web App
46
Export as Standalone Desktop App
47 Launch .exe
48
