MATLAB Programming/Graphical User Interface

NOTE: At MATLAB version R2019b, MathWorks announced that the GUIDE design environment for building apps in MATLAB will be removed in a future release. Note, GUIDE apps will continue to run after GUIDE's removal, but they will not be editable using the GUIDE environment.

What is GUIDE ?

The GUIDE Toolbox (known by its long name Graphical User Interface Development Environment) provided by MATLAB allows advanced MATLAB programmers to provide Graphical User Interfaces to their programs. GUIs are useful because they remove end users from the command line interface of MATLAB and provide an easy way to share code across non-programmers.

There are two main workflow of using GUIDE in MATLAB , namely:

(i) Lay out the GUI
(ii) Program the GUI

Creating from blank GUI

To start programming in GUIDE, just type the following into the MATLAB

guide

And it will shows the following diagrams:

We will create example of a simple GUI created with the GUIDE toolbox It takes inputs of two numbers and adds them and displays them in the third textbox It is very simple but it helps illustrate the fact that such a GUI was created in minutes.

Select Blank GUI (Default)

Placing components and change properties

We can see that there are grid-like at the interface here in the main menu . And also, we can see the basic tools that are used by GUIDE are on display here. Before going further, below are the toolbar and brief description of what it does


Components	Description
Push button	A button that activates when the user clicks the mouse on it.
Slider	Adjusting the position of the slide will changes the values
Radio button	A button that can change its state from unselected (not activate) to selected (activate) and back.
Tick box	A check button that can change state from selected (checked) to unselected (unchecked).
Edit text	A text field that allows the user to input information by typing text into .
Static text	A label displays some text; useful for labeling items or reporting the results of a calculation
Pop up Menu	A menu list that gives the user a list of options from which one may be selected
List Box	A list that presents a list of options that can be scrolled upon. Note that several items can be selected at the same time
Toggle button	A button that once pressed, it stays down until it is pressed again
Table	A table that displays data in a tabular form
Axes	A area that display two-dimensional and three-dimensional plotting chart
Panel	Groups controls together visually.
Button group	Groups a set of radio buttons or toggle buttons so that they act together with the result that only one at a time is selected
Active X control	N/A

We can drag and drop the Static Text, Edit text and Push button in following area shown in left picture.

As you can see , the Push Button and Edit Text have generic Edit Text word on the field and word Push Button.
We can change those texts as followed: First, double click on any of edit text , it should pop up a new window named as Inspector shown on the right side picture.
Scroll down until you find a String property and delete the text inside, the Edit text on the rightshould look empty now.

For Push Button, repeat the same step: double click on the Push Button and scroll down until String properties and change the word into Add

Programming with handles

We have the basic of the GUI already laid out.

We just need to think logically what we are going to do

1. Get the new value of the Num_A text field from its Value property. Same goes to Num_B
2. Add two numbers together
3. Set the value of the String property of the label totalAdd

To achieve this, we need to learn about get and set command

The get command obtains the current String property of the component Tag Name.

var = get(handles.Tag Name , values)

The set command place the String property of the component with updated value.

var = set(handles.Tag Name , values)

CallBack

A callback is a functions executed whenever the user initiates an action by clicking on a push button,pressing a key on the keyboard or selecting a menu item. Programming a callback is therefore the most important part of writing a GUI. For example in the GUI illustrated above, we would need to program a callback for the button Add. This is provided as a callback in the code. When you add a component to your GUI layout, GUIDE assigns a value to its Tag property, which is then used to generate the name of the callback.

The code is provided below and illustrates how to write a simple callback:

% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton1 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
n1 = get(handles.edit1,'string'); % get the values from the edit text 1
n2 = get(handles.edit2,'string'); % get the values from the edit text 2
S = str2double(n1) + str2double(n2); % performing addition 
set(handles.edit3,'string',num2str(S)) % set the number of addition result to edit text 3

In this piece of code I get the numbers as strings from the edit boxes and then convert them into numbers using the str2double function provided in MATLAB.

I then set the string for the other edit box as the sum of these two numbers. This completes the simple example of a GUI needed to add two numbers.

More complex GUI

To make the calculator more complex than to do simple additions, we can create a more complete calculator which can handle subtraction, multiplications and division. To do this, add 3 more Push Button . Double click each Push Button to change the String to relevant functions such as SUB for subtraction function as shown.,etc..

At the same time, change the Tag into more recognisable tag name such as sub_button . It will be more recognisable and easier to edit once programmed with callbacks.

You can add static name to label the edit text but for this exercise , this is optional.

As you can see, the GUI is in disarray but there is one tools that can be used to sort out the mess.

You can use the Align Object tool (shown in the right pics) to align the button in a proper order.

Line up the both edit text horizontally, followed by 4 buttons to line horizontally.

Once line up properly, it will looks like the picture below. You can compared it to picture above it which looks messy before.

We can proceed to the next steps to program which looks easier since we already nailed it for the addition button

To program each individual button , right click at each push button and select Editor and type code in the following.

As you can see the usefulness of describing Tag of each push button instead of generic name Push_Button 1 , etc...

% --- Executes on button press in sub_button.
function sub_button_Callback(hObject, eventdata, handles)
% hObject    handle to sub_button (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
n1 = get(handles.edit1,'string');
n2 = get(handles.edit2,'string');
S = str2double(n1) - str2double(n2);
set(handles.edit3,'String',num2str(S))

% --- Executes on button press in mul_button.
function mul_button_Callback(hObject, eventdata, handles)
% hObject    handle to mul_button (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
n1 = get(handles.edit1,'string');
n2 = get(handles.edit2,'string');
S = str2double(n1) * str2double(n2);
set(handles.edit3,'String',num2str(S))

% --- Executes on button press in div_button.
function div_button_Callback(hObject, eventdata, handles)
% hObject    handle to div_button (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
n1 = get(handles.edit1,'string');
n2 = get(handles.edit2,'string');
S = str2double(n1) / str2double(n2);
set(handles.edit3,'String',num2str(S))

There you have done it, you have created a simple working calculator in MATLAB .

To illustrate a more complex example, we will show how a simple projectile motion can be plotted and you can change the function's parameters. With a little bit of imagination you could make it plot any arbitrary function you enter.

Reference

https://web.archive.org/web/20221003005946/https://www.mathworks.com/help/matlab/ref/guide.html

https://web.archive.org/web/20211021213906/https://www.matlabclass.com/2013/11/study-of-graphical-user-interface-in.html

TODO: