University of Technology
Production Engineering and Metallurgy Department
Graphical user interfaces in MATLAB
Computer Programming II
2nd class
CAD/CAM
Lecture 10
Dr. Baraa Mohsen
Graphical user interfaces (GUI)
A Graphical User Interface (GUI) is a pictorial interface that
allows the user to use an application without understanding
the language.
This is done by providing intuitive controls. The controls are
the buttons that the user clicks to obtain a determined output.
GUI is an event-driven program. This is because it acquires
input at any given time and uses the callback functions to
execute the program and give results.
We will be looking at the components that are used to
construct the graphical user interface. We will also look at
how to write the callback function of the components that
make it possible for them to execute the controls.
Matlab generates the codes for a GUI. This makes it a better
tool when designing the GUI for engineering components.
2
How to access the GUI?
You can access the GUI by typing guide in the workspace.
3
Choices window for the GUI
When Matlab GUI executes this command, a new window opens
up. This window gives various GUI templates that the user can
use for the design.
We will use a blank GUI template because it will help us apply
the basics of the GUI. On selection of the template, the
workspace opens up. This is where we implement our user
interface before writing the callback for the components.
The design will be done on the canvas using the aligned
components on the left side of the window. The names of each
component will not be visible, unless we make it so.
4
To make the names visible, we follow the procedure below:
•Click the file folder and select the preferences.
5
The components and the canvas
•Select the show names in the component palette.
•To activate these changes, click on apply then OK.
6
How to enable the name components to be visible
7
Here the components and their names are visible
To add a component to the workspace, you select it and drop
it there. The size of the components can be changed by
dragging the edges. Changing the position can be done by
double-clicking and dragging it.
Let’s look at each of the components before using them.
1.Push Button – Its function is to call the callback function
for the execution of different programs.
2.Slider - It is similar to a scroll bar with numerical value.
The callback function is called and executed when the user
changes the pad position. The pad position can be changed
by dragging the pad to the required position or click the
forward or backward arrow.
8
3.Radio Button – It has on and off states. Its state
can be changed by clicking on it. When the button
contains a solid circle within the hollow circle, then it
is on. But when the hollow circle is empty, it is off.
They are grouped and only one can be on at a time.
4.Check Box – It has the on and off state.
The on state is represented by a tick inside the box.
They are grouped and several checkboxes can be on at
the same time.
5.Edit Text – Is for getting strings as an input from
the user. The input can then be modified to numbers
using str2num or the str2double function.
9
6.Static Text – Is to add labels that remain unchanged
on the GUI and has no callbacks.
7.Pop-up Menu – It is for listing selections. You click on it
to view the selections and the callback function is executed
depending on the selection.
8.List box – It shows a list of selections just as the pop-
up menu. In the list box, all the selections are visible
throughout unlike the pop-up menu where only the current
selection is visible.
8.Toggle Button – It functions similarly to the radio
button but different appearance in the GUI. It’s the
appearance that makes the difference.
10
10.Table– It is used for the addition of a spreadsheet to the
GUI. In case of a modification in the input, the callback is
executed.
11.Axes– Are for the addition of images, charts, and plots to
the GUI. They have no callback function.
12.Panel – It is for used to group several components and
names according to the functionality. It doesn’t have a
callback function.
13.Button Group – It is just like the panel but used to group
radio buttons. When we group the radio buttons here.
Similar to a panel, we first add the button group before
adding the radio buttons.
11
Arrangement of components in our GUI
We then modify the components as needed. When you double-click the
component that you want to modify, a new window opens up as shown:
12
Modification window for components
We can also achieve this by clicking the property inspector
situated at the top of the window.
We can change the background color, foreground color, font
size, font weight, string, and the tag of the components
depending on the design structure.
When modifying the string components, ensure that the
name is meaningful, which helps identify the callback in
the .m file.
13
Matlab provides a good environment for creating the
GUI. This is because it automatically generates the code
for the design of the GUI.
This makes the programmer’s work easier and saves
him/her from the bulky codes. This makes Matlab an
efficient tool for creating GUI. The purpose of the GUI is
to create an interface to be used by everyone. This
makes it an important tool for engineers implementing it
in their projects.
14
