How to build a GUI interface in Matlab [tutorial with pictures/screenshots!]

Hello Everybody and welcome to this new tutorials series explaining how to build your own GUI in Matlab, because sometimes it is damn useful!


Building  a GUI in matlab is very very easy, you just have to pay attention to a few little things, as I will explain you on the way.

This series is divided into several parts, each of them analyzes a feature (using buttons, loading data, clear a graphs etc).

Part I: the Hello World program!

In this part, we will create our GUI, a simple application that, when we press a button!, displays the message "Hello World!" in a textbox.


1) Launching the GUI editor.

From the matlab prompt:

>> guide [ENTER]

A window named "GUIDE Quick Start" will appear.

Choose "Blank GUI (default)" and choose a path/name where to save the matlab figure, for example, my_gui.fig
The figure (file with .fig extension) is a window containing all your buttons, graph and so on.
When you'll run your GUI application, you'll execute the fig's content in "run mode" as you will see in a while.



After pressing OK, two windows will appear: a blank GUI window (my_gui.fig) and my_gui.m file already full of code!

When you want to run your application "my_gui" you can either run the .m or the fig file.
Try it! Click the green button on the fig editor. (A Matlab message could appear, asking you either to add the current path to the Matlab path or to just change the path, choose Add to Path).

When you run the gui, you get just a blank window: this is your application and it's black because we haven't anything ... yet! But it's your first (blank) application! Congratulations!

2) Adding button and textboxes.
Move on the figure editor and start putting elements on it.
First: we need a button, a push button to  be precise.
Select on the left menu "the push button" and then "draw" the push button in the right corner of the figure.

Second: from the left menu, choose "static text" and add such a field in the middle of the window.
The final result should be something like this:

Save the window and note, how the corresponding .m file (my_gui.m) will be updated as well.

2) Customizing the gui
Now that we have a push button and text box, it's time to personalize them a little.

Push button
Select the push button you have inserted, right click on it and choose the menu entry called  "Property Inspector".
The window below will appear:

Here we want to modify two properties: string and tag.
The string field is the text that will appear on the button and it's for the user interaction and must have a meaningful content like "exit", "clear graph", "save" etc.
The tag field is the name that the GUI object (button, graph, text...) has within the application and MUST be without spaces and unique within the GUI. Within the program, you need this tag in order to refer to a certain element. For example, when you want to write in a particular text box, you need its tag!

NOTE: while you can be highly free to chose your own texts for the string field, I suggest you to be consistent in choosing the tag field. My convention is to define tags in the format
"Type element" + UNDERSCORE + "what this element does". For the Push button, I have chosen:

string: Display Text
tag: pushbutton_displaytext


NOTE: The string text is optional, the tag is not!


We do not need other modifications for the moment, so just save the window.

Static text
As you did with the push button, select the static text, choose "Property Inspector" and modify "string" and "tag"


string: [blank]
tag: text_textbox
Save the changes.

4) Adding some code.
Now we have to code the behavior of our program:

When we press the "Display Text" push button, the text "Hello World!" in the text box will appear.


To do that, we have to work on the my_gui.m file and use a matlab function called "set"

What we want to do, can be translated in the following steps:

(a) pressing the "Display Text" button
(b) inserting text into the "Text box"
(c) updating the window

When an element (in this case a push button) is pressed, Matlab calls a "callback function".
This is just one of the possible interactions you can have with a graphical elements, since you can, for example, also go over a button without pressing it.

To access the callback function associated to the pushbutton_displaytext, select the button, right click and then View Callback-> Callback

You'll end up in the my_gui.m file, just where the callback function for pushbutton is defined, i.e pushbutton_displaytext_Callback(hObject, eventdata, handles)

There, insert the two lines of code:

set(handles.text_textbox, 'String', 'Hello World!');
guidata(hObject, handles);

What these two lines mean?

set(handles.text_textbox, 'String', 'Hello World!');
The set function takes a GUI object (handles.text_textbox) and edit the field called String with the content Hello World! All our object identifiers are stored as elements of the handles structure. Everything you define in it, is visible TO all the other elements, if you want to set some data globally available for your application, these data (arrays, cells, strings etc) must be elements of the handles structure. THIS IS AN IMPORTANT POINT. 

guidata(hObject, handles);

In matlab, every graphics "object" (a figure) is represented by a "handle" variable. That's the hObject and represents our window, our figure when we run the application. In this "master" handle, all the other handles of our GUI are stored through the handles structure.
By using guidata(hObject, handles) we are updating the content of our program. That's why it is damn important to be there!
When working with GUI, forgetting to use the guidata(hObject, handles) instruction is the most common error!

Run the program.

Now your program is finished and you can run it!


When you press the "Display Text", some text will appear in the text box and .... remain there!

5) Making the application look better: a self test for you.

clear button
If you understood everything until this point, you should be able now to improve the my_gui program adding an extra feature: a clear text button. When you press it, the text in textbox is cleared.

Hint: clearing some text, is like to overwrite it with an empty ( '' in matlab) text.

This is the final view of my_gui program.

Other things you can play around.

Font size
You can change the text size, by accessing the field FontSize text_textbox "property inspector".
For example change it to 20


Background Color
I would like some pale blue as background color for the text box, and some red for the Display Text button. Green, otherwise, seems a suitable choice to the Clear Text button.

That's all for today!
See you next time!