Hello and welcome back to another MATLAB video.
Today, we're going to talk about creating a graphical user interface with GUIDE. This video is probably most appropriate if you're using MATLAB 2015b or earlier. If you are using a newer version, I actually recommend checking out App Designer, which is a new app-building platform in MATLAB.
App Designer simplifies the process of creating the user interface and the code which controls the app's behavior. There's a video on our website that teaches you how to use App Designer. But, anyway, this video is about GUI. So let's jump right into this tutorial.
To get the most out of this video, I recommend following along in your version of MATLAB. So first, let's start by describing what is GUIDE. GUIDE stands for Graphical User Interface Development Environment. It provides you the tools to design user interfaces and create custom apps.
To launch GUIDE, we go into the command window and type GUIDE, and a window will pop up. There's a few options that have common layouts. But let's start from scratch and create a blank GUI. When you hit OK, the new window that pops up on the screen is called the GUIDE Layout Editor. From here, we can design the layout of our GUI by dragging and dropping components from the left onto the canvas.
But before we start doing that, let's go to File, Preferences and check this top box. When I hit Apply, we can see what each icon represents. The GUI that we're going to create, we'll let the user choose from one of three datasets and display one of three different plot types.
First, let's start by resizing the template. We can set this to whatever size we want. And by default, this will be a fixed size and will not be resizable. However, if you want to change this property, we'll go into the Tools menu and click GUI Options.
The dropdown menu for Resize Behavior will let you choose one of three options for resizing. We'll just leave it as non-resizable for now.
So let's go back and add a couple of components to our GUI. First, I'll add an axis. Then I'll add a panel in which I'm going to add some push buttons. I'm adding a panel first, as opposed to just adding three buttons, because it makes it easier to manipulate the buttons as a group.
I can duplicate components by right clicking and hitting Duplicate. I'll create a total of three buttons. And we can align and distribute these buttons by using the Alignment Tool. Let's evenly space them by 20 pixels and have them vertically aligned.
We can make small adjustments to objects' positions by using the arrow keys. And here's a handy tip: when we move the panel, all of its contents will move with it.
Now, let's add two more components: a static text box and a pop-up menu. This will do it for all the components we want to add.
So now, let's go into changing some of the properties of the GUI. We can do this by double clicking on an object or going to View and then Property Inspector. The Property Inspector allows you to view and set object properties. First, let's change the name property of the GUI. This is what's displayed in the GUI title. We'll call it Basic GUI.
Next, let's change the title of the panel. To see the panel's properties, we have to click on the Panel in the Layout Editor. I'll change the title to Plot Types. We'll also change the name of our buttons by editing their string property. In this case, we're going to plot a surf plot, a mesh plot, and a contour plot. We can also change the string property of the popup menu to represent each of the data sets we want to display. And while we're at it, let's change the name of our static text box.
We may want to assign a unique identifier for each UI control. So to do this, we can alter the tag property of each object. GUIDE uses the tag property to name the automatically generated MATLAB functions. It defaults to a generic name, but let's make it more identifiable. We'll see these names again when we create our callbacks.
So now, let's go ahead and repeat this for all the other controls. Another thing we can do is to add some toolbar buttons using the Toolbar Editor. In the Toolbar Editor, you can add your own custom push buttons or toggle buttons or one of the many predefined tools. For this example, we'll add a zoom, pan, rotate, and data cursor button.
At this point, you can run the GUI by clicking the green Run button. This will generate a MATLAB FIG file which displays our GUI. Let's go ahead and save the layout.
So here's what the GUI looks like so far. All of the components are displayed exactly as they were in the editor, including the toolbar. Behind the figure, you'll notice a MATLAB function with the same name as our figure. GUIDE generates two files, as you can see here. The FIG file contains layout information, and the .m file contains implementation code, which you can see here.
So all of the code that you see here right now is automatically generated. And we can add custom code to add functionality for when the user interacts the GUI. We call this custom code Callback Functions. We can use the Go To button to help us navigate to each callback.
So let's go to the opening function. This is the function that gets called first when the GUI runs. In this function, we can load and create data that is to be used in the GUI and we can also do some initial plotting. I'll type all of this out.
So a couple of notes I want to share. First, to share data within the GUI, you use the handle structure which is passed between functions. Second, this auto-generated line specifies what is returned as an output argument when the GUI is called. And finally, this line at the end is required to update the handle's data structure.
Now, we'll switch back to the Layout Editor and let's take a look at the created GUI again. When a GUI is complete and running, the user can click on a user interface control, such as a push button, and MATLAB will execute the associated callback function. To navigate to the callback function in the MATLAB code, right click on the button, go to View Callbacks, and hit Callback. For the first push-button label, surf, we'll create a surface plot of the currently selected data. I'm now going to go ahead and repeat this process for all of the other push-button callbacks with their respective plot types.
Now, let's move on to the pop-up menu. This menu enables the user to select the data to be plotted. Depending on which menu option is selected, the GUI will set the current data to one of three datasets created before.
Since we are changing our data, we need to update our handle's data structure again. If we run our GUI, we can see that it's now fully functional. I'll run through the options to show that it works. And I'll click on these toolbar buttons to show that they work, as well.
Anyway, this wraps up how to create a GUI with GUIDE. Again, this tutorial is really meant for users who are using MATLAB versions 2015b or earlier. Otherwise, I would recommend using App Designer instead.
Thank you, guys, for tuning in. And I'll see you guys in another video.
