MATLAB GUI (Graphical User Interface)

What is GUIDE?
GUIDE, the MATLAB Graphical User Interface development environment, provides a set of tools for
creating graphical user interfaces (GUIs). These tools greatly simplify the process of designing and
building GUIs. You can use the GUIDE tools to:

 Lay out the GUI

Using the GUIDE Layout Editor, you can lay out a GUI easily by clicking and dragging GUI
components — such as panels, buttons, text fields, sliders, menus, and so on — into the layout
area.

 Program the GUI

GUIDE automatically generates an M-file that controls how the GUI operates. The M-file
initializes the GUI and contains a framework for all the GUI callbacks — the commands that are
executed when a user clicks a GUI component. Using the M-file editor, you can add code to the
callbacks to perform the functions you want them to.

Starting GUIDE:
There are many ways to start GUIDE. You can start GUIDE from the:
 Command line by typing guide
 Start menu by selecting MATLAB > GUIDE (GUI Builder)
 MATLAB File menu by selecting New > GUI
 MATLAB toolbar by clicking the GUIDE button

When you start GUIDE, it displays the GUIDE Quick Start dialog box shown in the following
figure.
From the Quick Start dialog, you can

 Create a new GUI from one of the GUIDE templates -- prebuilt GUIs that you can
modify for your own purposes.
 Open an existing GUI.

Once you have selected one of these options, clicking OK opens the GUI in the Layout Editor.

The Layout Editor:

When you open a GUI in GUIDE, it is displayed in the Layout Editor, which is the control
panel for all of the GUIDE tools. The following figure shows the Layout Editor with a blank GUI
template.

You can lay out your GUI by dragging components, such as push buttons, pop-up menus, or axes,
from the component palette, at the left side of the Layout Editor, into the layout area. For
example, if you drag a push button into the layout area, it appears as in the following figure.
Basic Controls:

 axes: something to draw upon

 static text: text that is stuck on the screen, the user can't edit it
 edit box: a white box that the user can type into
 button: performs an action when user clicks on it

GUIDE Tools Summary:

The GUIDE tools are available from the Layout Editor shown in the figure below. The tools are
called out in the figure and described briefly below. Subsequent sections show you how to use
them.

Layout Editor
GUI FIG-Files and M-Files:

GUIDE stores a GUI in two files, which are generated the first time you save or run the GUI:

 A FIG-file, with extension „.fig‟, which contains a complete description of the GUI layout
and the components of the GUI: push buttons, menus, axes, and so on.
 An M-file, with extension „.m‟, which contains the code that controls the GUI, including the
callbacks for its components.

These two files correspond to the tasks of lay out and programming the GUI. When you lay out of the
GUI in the Layout Editor, your work is stored in the FIG-file. When you program the GUI, your work is
stored in the M-file.

Programming the GUI M-file:

After laying out your GUI, you can program the GUI M-file using the M-file editor. GUIDE
automatically generates this file from your layout the first time you save or run the GUI. The GUI M-file
 Initializes the GUI
 Contains code to perform tasks before the GUI appears on the screen, such as creating data or
graphics
 Contains the callback functions that are executed each time a user clicks a GUI component.

Initially, each callback contains just a function definition line. You then use the M-file editor to add code
that makes the component function the way you want it to. To open the M-file, click the M-file Editor
icon on the Layout Editor Toolbar. The following figure shows the M-file for the GUI with Axes and
Menu template.
Use of Callback Functions:

A callback is a function that you write to make components, such as buttons, sliders, or menus,
respond to user input, such as button clicks, slider movements, and menu item selections. You
can view the callback for any of the GUI components by right clicking the selected component on
the layout area. This displays a list of all the callbacks, as shown in the following figure.

Functions and Callbacks in the M-File:

You can add code to the following parts of the GUI M-file:
 Opening function: executes before the GUI becomes visible to the user.
 Output function: outputs data to the command line, if necessary.
 Callbacks: execute each time the user activates the corresponding component of the GUI.

Common Input Arguments:

All functions in the M-file have the following input arguments corresponding to the handles
structure:
 hObject: the handle to the figure or Callback object. Handle objects enable more than one
variable to refer to the same object. Handle-object behavior affects what happens when you
copy handle objects and when you pass them to functions.
 handles: structure with handles and user data. When a variable holds a handle, it actually
holds a reference to the object.
Handle class define objects that references the data contained in the object.
The handles structure is saved at the end of each function with the command
guidata (hObject, handles);
Callbacks:
When a user activates a component of the GUI, the GUI executes the corresponding
callback. The name of the callback is determined by the component‟s Tag property and the type of
callback. For example, a push button with the Tag print_button executes the callback

Callback Properties:
A callback is a function that executes when a user performs a specific action such as clicking a push
button or pressing a keyboard key, or when a component is created or deleted. Each component and menu
item has properties that specify its callbacks. When you create a GUI, you must program the callbacks
you need to control operation of the GUI. The primary mechanism for implementing a GUI is
programming the callbacks of the GUI components used to build the interface.

The following table lists the various callback properties and briefly describes the purpose of each
callback.
 EXAMPLES:
To Display Message Box:

 Create a blank GUI

 On the left side of palette there are buttons which represent the different types of objects
that can be added to GUI. To begin drag a static box over to the top of the grid. Static text is
the text that never changes. Use this for the title of GUI.
 Double-click on this Static Text object, and you will see the properties associated with it (the
“Property Inspector” window will appear). The properties associated with this object include
settings such as its location on the grid, font type, font size, and other such information.
 Insert push button in GUI. Set properties using property Inspector. Change the “String”
property for “Push Button” to “Display”
 Open the callback function associated with Push Button

 In the callback function write function “msgBox(‘Display’). Save file

  In guide click on Run button to start simulation.
 Click on Display button, it will display Message Box.

To Access Elements from One Element to Other:

 In the same GUI add editable text and static text.

 Add button group. Your GUI should look like this

 In the callback function of Display button edit lines

Through above lines we add a numeric value to edit box and display it in message box.

Get is used to get parameters of element and Handles is used for control of element

To Display Sum and Subtract of Numbers:

 Edit layout area as shown below:

  Edit the lines in the callback function of Addition button

 Edit the lines in the callback function of Subtraction button

Output of Addition Output of Subtraction

To Display in Axes:

 Axes enable your GUI to display graphics (e.g., signal, graphs and images). Like all graphics
objects, axes have properties that you can set to control many aspects of its behavior and
appearance.
 Axes are the low-level function for creating axes graphics objects. Axes create an axes
graphics object in the current figure using default property values.
 To work with axes create a GUI as shown below
 Double click on ‘Pop-up Menu’ component to display property inspector and click the icon
just in front of String Property. Edit as shown below:

 Edit the call back function of pop-up Menu:

 Now edit the callback function of pushbutton named “bar”

 Output shown as:

By Clicking on Bar Button By Selecting Cos Function