The Charm of Graphical User Interface

Abstract

In this chapter we introduce the use of GUIDE, which is the MATLAB Graphical User Interface Development Environment. This tool enables the user to create Graphical User Interfaces (GUI) that can be used to facilitate interaction with your programs.

Appendices

Appendix

Referring to Fig. 8.2, we give a short description of the remaining menu items that weren’t previously defined. You can find the same information in the MATLAB help; we have given them here for quick reference.

The File Menu

As you might guess, the File menu provides commands for handling files. Here’s a sketch of the items in the File menu.

New (Ctrl+N) Displays the GUIDE Quick Start dialog box again; that is, you can create more than one GUI at a time.

Open (Ctrl+O) Displays the usual open dialog box to open FIG-files you have already created.

Close (Ctrl+W) Closes the GUI.

Save (Ctrl+S) and Save as… save the current GUI to disk. This item will appear as Save and the name of the GUI, so you can clearly tell from the menu which open GUI it is being saved. It should be noted that when a GUI is saved, two files are automatically saved: The FIG-file and the M-file, both with the same name. However, once it is saved, to run our GUI we need only to prompt its name without any extensions (or you can double click in the FIG-file icon).

Export… This item is very helpful if you want to save one M-file only instead of both an M-file and a FIG-file. When you select this option, MATLAB first saves the current GUI to disk, that is, both the M- and FIG-files. Then it saves another M-file whose code creates the GUI from scratch. The default name for this M-file is the same as that of the saved M-file plus the “_export” suffix. You can change it according to your needs.

Preferences… displays the same dialog box that is displayed from the Preferences item in the MATLAB main windows (see the Preferences for GUIDE section in this chapter).

Print (Ctrl+P) Displays the Print dialog box for printing the GUI figure.

The Edit Menu

The Edit menu provides commands for working in the GUI. Most of these commands are standard to mainstream applications.

Undo (Ctrl+Z) undoes the previous action. GUIDE supports multiple undo operations; simply continue undoing to undo further actions.

Redo Redoes the last undone action. Again, GUIDE supports multiple redo operations, up to the number of undo operations that have been done.

Cut (Ctrl+X) Deletes the selected UiControl from the GUI and copies it into the Clipboard, allowing for pasting it in a different position of the same GUI or into another GUI.

Copy (Ctrl+C) Copies the selected UiControl to the Clipboard, allowing for pasting a copy of it in a different position of the same GUI or into another GUI.

Paste (Ctrl+V) Pastes the UiControl from the Clipboard into the current GUI.

Clear Deletes the selected UiControl.

Select All (Ctrl+A) Selects all the UiControls in the current GUI.

Duplicate (Ctrl+D) Duplicates the selected UiControl.

The View Menu

The View menu provides the means for displaying and moving the various windows of the GUI. Some of these windows are context sensitive, that is, the displayed window differs according to the selected UiControl. Here are the View menu items:

Property inspector Displays the Property inspector window. Property inspector is an interactive tool for exploring and modifying a UiControl’s property values.

Object browser displays a hierarchical list of the UiControls in the GUI. You can select any UiControl from here.

M-File editor displays the application M-file connected with the GUI. If you haven’t already saved the GUI, the Save as dialog box will first appear.

View Callbacks is similar to the previous one because it displays the application M-file connected with the GUI, but here you have the opportunity to jump directly into the callback function that you need. For example, if you need to change a callback function of a given pushbutton, you first select it and then, from the View Callback menu item, you jump directly into its callback function prototype.

The Layout Menu

The layout menu works on the selected UiControls by snapping them to the grid or by moving them backward and forward. We use this last feature when there are UiControls overlapping each other.

Snap to grid ties UiControls to the grid square borders when moved. (The Tools -> Grid and Rulers… menu item allows for displaying the grid and changing its size.)

Bring to Front (Ctrl+F) moves the selected UiControl(s) in front of the others.

Send to Back (Ctrl+B) moves the selected UiControl(s) to the back of the others.

Bring Forward moves the selected UiControl(s) forward by one level, that is, not in front of all UiControl, as Bring to Front does, but only in front of the one overlapping it. Hence, if you have three overlying uincontrols and you want to bring the last one in the second level, this is the item you need to use.

Send Backward moves the selected UiControl(s) back by one level, that is, behind the UiControl directly behind it, but not behind all UiControls, as Send to Back does.

Tools Menu

The Tools menu provides commands for running the GUI, to align UiControls, to display and regulate the grid and the ruler, to create Menus into the GUI, to display the Tab Order editor box, and to set the GUI options.

Run (Ctrl+T) starts running the current GUI.

Align Objects… displays the Align Objects box. This tool allows for aligning and distributing the UiControls within the GUI both vertically and horizontally. Facility with this tool will save considerable time. In practice, when you want to align or distribute two or more UiControls, you first to select them, you then click onto the self-explanatory icon in the Align Objects box, and finally you press the Apply button. The Align option aligns the selected UiControls to the same reference line, while the Distribute option spaces the selected UiControls uniformly with respect to each other. By default, the UiControls are spaced within the bounding box, but you can also space them to a specified value in pixels by selecting the Set spacing option and specifying the pixel value.

Grid and Rulers… displays the Grid and Rulers box. This tool allows for displaying the rulers and the grid in the GUI background. You can also regulate the Grid Size by selecting the desired pixel value for each square from the Grid Size pop-up menu. In this box there is also a duplicate of the snap-to-grid option that we have already discussed in the Layout Menu item. Of course, neither the ruler nor the grid will appear in run mode.

Menu Editor… displays the Menu Editor box. With this option you add Menus and menu items, in addition to context menus into your GUIs. Menus, menu items, and context menus work similarly to UiControls; that is, they perform the action defined in their Callback functions. As for the UiControls, for menus as well, prototype Callback functions are automatically created in the M-file by GUIDE.

Help

The help menu provides two items for help and information.

Using the Layout editor displays a starting guide on “Creating graphical user interfaces.” It is a sort of index from which you can select many different subguides.

Creating GUIs displays a list of sections on how to create graphical user interfaces (GUIs) using GUIDE.

Preferences for GUIDE

There are a number of preferences that you can set for GUIDE. These preferences can be found in three different locations within the Preferences dialog box, which can be invoked from the File menu.

Confirmation preferences:

GUIDE can display a confirmation dialog box when “saving changes” is needed for GUIDE to proceed. Basically, before running (activating) the GUI and before exporting it, any change that has been done has to be saved. If you think that you may not want to keep these changes, then from the MATLAB file menu, select General -> Confirmation Dialogs to access the GUIDE confirmation preferences and tick on “prompt to save on activate” and/or “prompt to save on export” as shown in Fig. 8.19.

Fig. 8.19

Confirmation preferences

Backward Compatibility

If you created a GUI with MATLAB 7.0 or an earlier version, and you need to run it also with older MATLAB versions, then this is the preference that you want.

From the MATLAB File menu, select Preferences and then click on Ensure backward compatibility (-v6) in the Preferences dialog box under General  >  MAT-Files (Fig. 8.20).

Fig. 8.20

Ensure backward compatibility (-v6)

Other Preferences

Finally, five additional preferences for the Layout Editor interface and for M-file comments can be set from the Preferences dialog box, by selecting GUIDE in the left-hand panel. These preferences are self-explanatory. Unless you are already familiar with GUIs, it might be useful to click on “Add comments” for newly generated callback functions (Fig. 8.21).

Fig. 8.21

GUIDE preferences