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 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 decription of what it does

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.

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

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:

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...

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: