Newsletters - MATLAB Digest
GUI Building with Handle Graphics and GUIDE
by: Bill York
The high performance math and graphics capabilities of MATLAB make it an excellent environment for building technical GUIs as well as producing technical visualizations. MATLAB tools for building GUIs include:
- Handle Graphics- a visualization and GUI building toolkit that provides graphics objects and interface components for constructing GUIs
- GUIDE (Graphical User Interface Development Environment)- a built-in drag-and-drop interface for constructing GUIs
This article describes these tools and provides a detailed example of how to build a tab panel using GUIDE.
Approaches to building GUIs using MATLAB
Handle Graphics provides 2D and 3D graphics objects (lines, patches, surfaces, etc.) and graphical interface components (buttons, checkboxes, menus, etc.). It also includes a collection of user interface related tools, such as a file selection dialog, warning dialog, and data management tools. For an example of what has been built with Handle Graphics, look at the Signal Processing Toolbox primary GUI called FDATool. FDATool uses all the elements and many of the helper functions provided by Handle Graphics. A demo of the FDATool is available at: www.mathworks.com/products/filterdesign/demos.html.
GUIDE provides a drag-and-drop interface for building GUIs with Handle Graphics. GUIDE's callback model is based on local functions, making it readily understandable for most MATLAB programmers. The GUIDE callback model also provides a scalable intercomponent data sharing mechanism.
MATLAB programmers can also use ActiveX create GUIs. Depending on what your GUI presents and whether you need Handle Graphics for visualizations, ActiveX may be more appropriate.
- Handle Graphics and GUIDE enable construction of basic and complicated GUIs that work well on multiple operating systems. If you want to build a GUI that takes advantage of MATLAB graphics and visualization tools, GUIDE is the best option.
- On Windows platforms, ActiveX provides the benefit of allowing GUI builders to combine prebuilt GUI elements or applications and MATLAB graphics in the same window. If you are targeting a Windows only audience and want to use prebuilt ActiveX components in your GUIs, GUIDE with ActiveX is your best option.
The following example highlights some key GUIDE techniques for extending Handle Graphics.
Building a Tab Panel
Source code for this example is available from: www.mathworks.com/matlabcentral/fileexchange/Files.jsp?type=category&id=39&fileId=1741. The Tab Panel is one of the more widely used GUI elements in the Option and Preference dialogs. MATLAB uses them in the desktop to simplify management of multiple docked windows. They are also used on the Page Setup dialog, whick is available from the Handle Graphics figure window. Handle Graphics provides the components necessary to build a tab panel, though you will need to employ a few special techniques to make it work.
The example GUI, tabpanel.m, is a two-tab print options dialog. The first tab shows a few options for PaperOrientation. The second tab shows options for PaperType.
The techniques used to construct this tab panel are:
 |
1. Create a programmatic link between components using UserData and Tag. |
 |
1. Create a programmatic link between components using UserData and Tag.
Tabs and radio buttons require a programmatic link between related components. Handle Graphics provides two ways of making these links: the UserData property and the Tag property. To simplify callback programming, use the same Tag for all the buttons in a tab group. In this example, use the Orientation and Paper Type buttons. Using the same Tag for multiple components also puts the handles of linked components into a single field of the handles structure. For more information on how to use this structure when writing callbacks, see the GUIDE documentation at www.mathworks.com/access/helpdesk/help/techdoc/learn_matlab/f5-998197.html.
To use the same Tag property on multiple components, select them from within GUIDE. Then with the Property Inspector, set the Tag property. For this example the Tag is set to tab_group.
Unlike the Tag property, which can only contain a string, the UserData property can contain any MATLAB matrix. Therefore it cannot be edited in the same way as the Tag property and must be set one component at a time. To set the UserData on one component to 'orientation':
| 1. Double-click on the component. 2. Scroll down to UserData in the Property inspector. 3. Click on the button next to UserData. 4. In the UserData dialog, type 'orientation'. |
 |
2. Create a raised panel by setting a push button's Enable property to 'Inactive'.
GUIDE offers a frame control, which is useful for drawing a box around a group of related components. A raised edge is more common for tab panels. To get the raised panel effect, use an inactive push button. An inactive push button does not look pressed when clicked and will not execute its Callback. Place the push button on the GUIDE layout area, then set the Enable property to 'Inactive' using the Property Inspector.
3. Get precise vertical component alignment using guidelines.
To hide the bottom edge of the push buttons used for tabs, place their bottom one pixel down from the top of the inactive push button. In GUIDE, use a guideline to set the positions accurately.
|
1. Turn on rulers from the Tools->Grid and Rulers dialog. |
 |
4. Select hidden objects with the Object Browser.
One option for laying out multiple tab panels in GUIDE is to lay the components on separate GUIs, and then copy/paste them into the final GUI.
Another option is to use a frame or inactive push button as a panel. The inactive push button is then used for hiding controls related to other tabs while laying out one tab. In the picture below, the listbox on the Paper Type panel is hidden by the inactive push button. By selecting the listbox in the Object Browser, you can bring it forward. Using the same selection technique, you can send the Portrait and Landscape radio buttons behind the inactive push button.
5. Prevent radio button deselection by setting the Enable property to 'Inactive'.
Radio buttons are selectable and deselectable by default. In most user interfaces, radio buttons cannot be deselected once clicked. To deselect a radio button, a linked radio button must be clicked. Setting the Enable property to Inactive simplifies this by causing the radio button to ignore mouse clicks. The Enable property has three states: enabled, inactive, and disabled. The advantage of using inactive over disabled is that an inactive control looks just like an enabled one while a disabled one is grayed out.
In tabpanel.m, the local function orientation_group_Callback uses the set command to make the just-clicked radio button inactive when either the Portrait or Landscape radio button is pressed. From GUIDE, use the Property Inspector to make sure that the Portrait radio button is initially inactive.
6. Hide a button edge with an empty text object.
In tabpanelfcn.m, the local function tab_group_handler places an empty text object near the bottom of the pressed tab push button when a particular tab is clicked. This makes the push button look like part of the inactive push button below it.
7. Disable UIWAIT and modality when debugging.
This example uses UIWAIT to block MATLAB execution until the dialog goes away. This allows the output argument to return data based on what the user selected, (i.e., output = tabpanel). Since MATLAB execution is blocked with a UIWAIT, it is not possible to set or clear breakpoints in the editor. Therefore, it is simplest to comment out the UIWAIT command when you want to do debugging. In tabpanel.m, the command set (hObject, 'WindowStyle', 'modal') makes the figure block access to all other MATLAB windows until the figure goes away. If you want to use breakpoints in the editor, be sure to comment this line out before debugging.
Conclusion
MATLAB programmers have several options for building GUIs: GUIDE, Handle Graphics, and ActiveX. Each has its own unique benefits. With the right techniques, it is possible to create GUIs containing components beyond those provided with GUIDE.
