Building GUI in MATLAB | MATLAB Tutorial

GUI s (also known as graphical user interfaces or UIs) provide point-and-click control of software applications, eliminating the need to learn a language or type commands in order to run the application.

MATLAB apps are self-contained MATLAB programs with GUI front ends that automate a task or calculation. The GUI typically contains controls such as menus, toolbars, buttons, and sliders. Many MATLAB products, such as Curve Fitting Toolbox, Signal Processing Toolbox, and Control System Toolbox include apps with custom user interfaces. We can also create our own custom apps, including their corresponding UIs, for others to use.

The following list shows some important reasons to develop GUIs in MATLAB: –

  • High-level Script Based Development.
  • Seamless Integration with Existing MATLAB computational Power.
  • Operating System Independent GUI Applications.
  • User Interactivity and Real-time Measurements.

Example: – Simple GUI Building.

Creating a MATLAB GUI with GUIDE

GUIDE (GUI development environment) provides tools to design user interfaces for custom apps. Using the GUIDE Layout Editor, we can graphically design the UI. GUIDE then, automatically generates the MATLAB code for constructing the UI, which we can modify to program the behaviour of the app.

This example shows how to use GUIDE to create an app that has a simple user interface (UI), such as the one shown here.

Steps

Open a New UI in the GUIDE Layout Editor

  1. Start GUIDE by typing guide in MATLAB prompt.
  2. In the GUIDE dialogue box, select Blank GUI.
  3. Display the names of the components in the component palette:
  • Select FilePreferences > GUIDE.
  • Select Show names in component palette.
  • Click Okay.

Set the Window Size in GUIDE

Set the size of the window by resizing the grid area in the Layout Editor. Click the lower-right corner and drag it.

Layout the UI

Add, align, and label the components in the UI.

  1. Add the three push buttons to the UI. Select the push button tool from the component palette at the left side of the Layout Editor and drag it into the layout area. Create three buttons.
  2. Add the remaining components to the UI.
  • A static text area
  • A pop-up menu
  • An axes

Arrange the components properly.

Align the Components

If several components have the same parent, we can use the Alignment Tool to align them to one another. To align the three push buttons:

  1. Select all three push buttons by pressingCtrl and clicking them.
  2. SelectTools > Align Objects.

Label the Push Buttons

Each of the three push buttons specifies a plot type: surf, mesh, and contour. This section tells, how to label the buttons with those options.

  1. Select View > Property Inspector.
  2. In the layout area, click the top push button.
  3. In the Property Inspector, select theString property, and then replace the existing value with the word Surf.
  4. Press the Enter. The push button label changes to Surf
  5. Click each of the remaining push buttons in turn and repeat steps 3 and 4. Label the middle push button Mesh, and the bottom button Contour.

 List Pop-Up Menu Items

The pop-up menu provides a choice of three data sets: peaks, membrane, and sinc. These data sets correspond to MATLAB functions of the same name. This section tells, how to list those data sets as choices in the pop-menu.

  1. In the layout area, click the pop-up menu.
  2. In the Property Inspector, click the button next toString. The String dialog box displays.
  3. Replace the existing text with the names of the three data sets: peaks, membrane, and sinc. Press Enter to move to the next line.
  4. When finished editing the items, click Okay.

The first item in the list, peaks, appears in the pop-up menu in the layout area.

 Modify the Static Text

In this UI, the static text serves as a label for the pop-up menu. This section tells, how to change the static text to read Select Data.

  1. In the layout area, click the static text.
  2. In the Property Inspector, click the button next toString. In the String dialog box that displays, replace the existing text with the phrase ‘Select Data’.
  3. ClickOkay.
  4. The phrase‘Select Data’ appears in the static text component above the pop-up menu.

Save the Layout

When we save a layout, GUIDE creates two files, a FIG-file and a code file. The FIG-file, with extension .fig, is a binary file that contains a description of the layout. The code file, with extension .m, contains MATLAB functions that control the app’s behaviour.

Save and run the program by selecting Tools > Run.


This is how it is going to look like, after we’re finished editing the GUI.

Code the Behaviour of the App

% --- Executes just before simple_gis made visible.
function simple_gui_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject handle to figure
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data
% varargin command line arguments to simple_g
%%______________DATA_PLOT_______________________
% Choose default command line output for simple_gui
handles.output = hObject;
 % Update handles structure
guidata(hObject, handles);
% UIWAIT makes simple_gwait for user response 
% uiwait(handles.figure1);
  • This is the available code, when we open the MATLAB editor.

Create data to plot by adding the following code to the opening function after % varagin…

% Create the data to plot.
handles.peaks=peaks(35);
handles.membrane=membrane;
[x,y] = meshgrid(-8:.5:8);
r = sqrt(x.^2+y.^2) + eps;
sinc = sin(r)./r;
handles.sinc = sinc;
% Set the current data value.
handles.current_data = handles.peaks;
surf(handles.current_data)

Code Pop-Up Menu Behaviour

The pop-up menu presents options for plotting the data. When the user selects one of the three plots, MATLAB software sets the pop-up menu Value property to the index of the selected menu item. The pop-up menu callback reads the pop-up menu Value property to determine the item that the menu currently displays, and sets handles.current_data accordingly.

  1. Display the pop-up menu callback in the MATLAB Editor. In the GUIDE Layout Editor, right-click the pop-up menu component, and then selectView Callbacks > Callback.
  2. Add the following code to the popupmenu1_callback.
    % Determine the selected data set.
    str = get(hObject, 'String');
    val = get(hObject,'Value');
    % Set current data to the selected data set.
    switch str{val};
    case 'peaks' % User selects peaks.
    handles.current_data = handles.peaks;
    case 'membrane' % User selects membrane.
    handles.current_data = handles.membrane;
    case 'sinc' % User selects sinc.
    handles.current_data = handles.sinc;
    end
    % Save the handles structure.
    guidata(hObject,handles)
    

Code Push Button Behaviour

Each of the push buttons creates a different type of plot using the data specified by the current selection in the pop-up menu. The push button callbacks get data from the handles structure and then plot it.
1. Display the Surf push button callback in the MATLAB Editor. In the Layout Editor, right-click the Surf push button, and then select View Callbacks > Callback.
2. Add the following code to the callback.

% Display surf plot of the currently selected data.
surf(handles.current_data); 

Repeat steps 1 and 2 to add similar code to the Mesh and Contour push button callbacks.
• Add this code to the Mesh push button callback, pushbutton2_Callback:

% Display mesh plot of the currently selected data.
mesh(handles.current_data);

• Add this code to the Contour push button callback, pushbutton3_Callback:

% Display contour plot of the currently selected data.
contour(handles.current_data);

4.Save the code.

Run the App
In Code the Behavior of the App, we programmed the pop-up menu and the push buttons.  We also created data for them to use and initialized the display. Now, we can run our program to see how it works.
1. Run the program from the Layout Editor by selecting ToolsRun.
2. In the pop-up menu, select Membrane, and then click the Mesh The app displays a mesh plot & Membrane.
3. Try other combinations before closing the window.

Results:

This is how the app looks when it first displays.

Figure. Surf


Figure. Mesh

Figure. Contour


Aspiring Electronics Engineer. Walchandite, MATLAB Trainee, Aptitude Head(ELESA), Badminton Player.