Getting Started with Graphical User Interface in Matlab
June 6, 2021
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.
In this article, 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.
Table of content
How to access the GUI?
You can access the GUI by typing
guide in the workspace.
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.
In this article, 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.
To make the names visible, we follow the procedure below:
- Click the file folder and select the
The components and the canvas
- Select the
show names in the component palette.
- To activate these changes, click on
How to enable the name components to be visible
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.
Push Button– Its function is to call the callback function for the execution of different programs.
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.
Radio Button– It has
offstates. 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
onat a time.
Check Box– It has the
onstate is represented by a
tickinside the box. They are grouped and several checkboxes can be
onat the same time.
Edit Text– Is for getting strings as an input from the user. The input can then be modified to numbers using
Static Text– Is to add labels that remain unchanged on the GUI and has no callbacks.
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.
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.
Toggle Button– It functions similarly to the radio button but different appearance in the GUI. It’s the appearance that makes the difference.
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.
Axes– Are for the addition of images, charts, and plots to the GUI. They have no callback function.
Panel– It is for used to group several components and names according to the functionality. It doesn’t have a callback function.
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.
We want to create a simple GUI. We first add the required components - Panel, Static text, Axes, Push Button, Slider, and Edit Text.
Add the components as explained earlier and arrange them as shown below:
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:
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
Modify the GUI and make it similar to the figure below:
Appearance of new GUI after modification
We will change the tag of the
Note that, the tag for the static text and other components which do not have a callback function are not necessary to change.
Save the GUI before running. Upon running the GUI, the
.m file is automatically generated before the
.fig file shows up.
Generated .m file
obtained .fig file
The object is first created and properties are set before the
create function is called.
create function can also be used in the modification of the components rather than using the property inspector. This is done by initializing the properties. It is complex and requires more understanding of Matlab, so we will not use it in this example.
This how our GUI will function. It takes the current value from the slider as the frequency, gets the user input that computes amplitude.
When the user clicks the refresh button, it executes the callback functions and draws a sine wave using the obtained data. We will require the callback function for refresh and edit text for error checking. The error checking ensures that the user inputs a number.
We will first look at the callback function for the edit box and this is how we locate its callback function in the
- Select the component.
- Right-click and select the
- Select the
callbackand it will automatically drive you there.
Add the following code after a comment that begins
%str2double(get(hObject,'String')) returns contents of Amp as a double Amp = str2double(get(hObject,'String')); if isnan(amp) || ~isreal(amp) % If the `amp` is not a number(nan) and the input should be a number(real) % the refresh button should be disabled. set(hObject,'String','Error: Not a number') set(handles.ref,'Enable','off') else set(handles.ref,'Enable','on') end
We use the
get function to obtain the user input. Since edit text only accepts a string as input, we convert it using
str2double function. The input is then error checked and in case of an error, the edit box is set to
Error: Not a number using the
The refresh button is deactivated by executing
set(handles.ref, 'Enable', 'off'). If it is real, we enable the refresh button by executing
set(handles.ref, 'Enable', 'on'). Then it invokes the callback.
Below is the callback for the refresh button. Write this code below the comment that begins with
Note that the position of your code in the callback does not hinder the execution of the code since they are comments which are not executed but make the program more understandable.
% handles structure with handles and user data (see GUIDATA) minFreq = 1; maxFreq = 10; % Get parameters from GUI fs = get(handles.Freq,'Value'); freq = minFreq + fs * (maxFreq - minFreq); amp = str2double(get(handles.Amp,'String')); % Calculate data x = amp * sin(2*pi*freq*t); % Create time plot in proper axes plot(handles.axes,t,x) set(handles.axes,'XMinorTick','on') grid on
In the program above, we give data that helps in the interpretation of the value of the slider, that is,
maxFreq. We give the data for the y-axis which helps in plotting the sine waves and it is defined by
We use all this data to get the matrix for
x which is then plotted. Since we want the plots to appear on the axes, it is done by executing this code
set(handles. axes, ‘XminorTick’, 'on').
We can input various amplitudes and frequencies and see the various plots.
Below is a sample:
Plots obtained when we run the program
To ensure that our error check functions properly, we input a letter to see an error message on edit text box, which on refresh turns grey. This means that it does not invoke the callback until the input is changed to a real number. This shows that it is deactivated.
This is shown in the figure below:
output incase of NAN input
Matlab provides a good environment for creating the GUI. This is because it automatically generates the code for the design of the GUI. The generated code also contain comments that make it easy for the programmer to understand what the code entails and to better organize the callback functions.
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.
Peer Review Contributions by: Srishilesh P S
About the authorLinet Achieng
Linet Achieng is an Electrical engineering student at the Technical University of Mombasa. She likes to learn about Artificial Intelligence and Machine Learning. Her hobbies are traveling, reading novels, and scatting.