LENT c09.tex 2/11/2012 17: 32 Page 147 LENT c09.tex 2/11/2012 17: 32 Page 148 148 CHAPTER 9 Building a Graphical User Interface Building a Graphical CHAPTER 9 User Interface 9.1 Getting started with GUIDE 9.2 Starting an action with a GUI element 9.3 Communicating with GUI elements 9.4 Synchronizing information with a GUI element 9.5 Key points from this chapter The graphical user interface development environment (GUIDE) enables the rapid creation FIGURE 9.1 The GUIDE Quick Start window. of a graphical user interface (GUI) for a MATLABprogram. In this chapter we will introduce the GUIDE program and describe how to use it in basic GUI deployment. GUIDE is used to build the GUI, which can then be connected to a program, through a process we will describe in the next chapter. The GUI is contained in two files, a figure file with the suffix .fig, which contains graphical layout information, and an m-file with suffix .m, which contains the main GUI function and a number of subfunctions. This latter file is written in template form by GUIDE, and can be edited to add functionality and connect with other functions. This chapter and the chapter that follows are very tutorial. Much of the information to be conveyed is visual and procedural. The goal is to provide a fairly complete and detailed explanation of the process of GUI creation. A perhaps unfortunate side-effect of this level of detail is that it can leave the reader with the impression that the process is more complex than it is in reality. It actually is not that hard; just a few concepts and processes suffice. 9.1 Getting started with GUIDE To start GUIDE, type guide (no capitals) at the command prompt in the Command window. >> guide The GUIDE Quick Start window will appear, as shown in Figure 9.1. Choose the default option, “Blank GUI” by pressing “OK” or the [Enter] key. The GUIDE FIGURE 9.2 GUIDE window with initially blank GUI panel. window will then appear with the window name “untitled.fig” as shown in Figure 9.2. The window has three areas: (a) on the top are the menus and the menu bar, (b) the left side has buttons to select particular GUI objects, and (c) the main figure-design area starts The GUIDE window can be resized by grabbing the lower right corner with the mouse as a blank panel with grid marks on it. This panel is where the various GUI objects will be and stretching. The GUI figure panel inside can be sized by clicking and dragging on the placed. black square in the lower right corner. Individual controls can be positioned on the figure by clicking on an icon button on the left and dragging a GUI element into position. Try it 147 LENT c09.tex 2/11/2012 17: 32 Page 149 LENT c09.tex 2/11/2012 17: 32 Page 150 9.1 Getting started with GUIDE 149 150 CHAPTER 9 Building a Graphical User Interface Push button Slider Radio button Checkbox Edit textbox Static textbox Pop-up menu Listbox Togglebutton Table Axes Panel Button group ActiveX control FIGURE 9.3 Selection of GUI objects in GUIDE. out—drag several items over and position them on the main figure area. A GUI is designed by positioning and setting the properties of these GUI elements. Most of these GUI objects are instances of a MATLAB class called uicontrol (user interface controls). The GUI objects you can create using the buttons on the left panel of GUIDE are: push button – A button that activates when the user clicks the mouse on it. • slider – Enter a real number by adjusting the position of the slide. • radio button – Changes its state from unselected to selected and back. FIGURE 9.4 Arranging various GUI objects on the panel in GUIDE. • checkbox – Changes state from selected (checked) to unselected (unchecked). • edit textbox – Allows the user to input information by typing text into the window. with this by dragging several items onto the figure. The GUI objects won’t yet respond and • the tool you construct won’t be useful, just experimental. static textbox – Displays some text; useful for labeling items or reporting the results of • a calculation. pop-up menu – Gives the user a list of options from which one may be selected. Saving the GUI to a file • listbox – Presents a list of options that can be scrolled. Several items can be selected at Name and save the GUI you have made by selecting File|Save As and entering the name— • the same time. here enter “SillyTool” (don’t type the quotes) and press Save or [Enter]. It is a very helpful practice to name each GUI file with the suffix “Tool” to distinguish the sort of code it toggle button – Pressed once, it stays down until it is pressed again. • contains. table – Displays data in a tabular form. • NOTE: This convention may seem unnecessary but experience proves it to be very very helpful. axes – A surface on which to display two-dimensional and three-dimensional graphics. I urge you to follow it. Choose names for GUI-based programs of the form <Name>Tool. • panel – Groups controls together visually. • At this point GUIDE does two things, each wonderful in its own way. button group – Groups a set of radio buttons or toggle buttons so that they act together • 1. GUIDE saves all the information you have designed into the GUI, i.e., all the geometric with the result that only one at a time is selected. information and all the properties of every GUI object you put in the frame, into a file activeX control (Windows) – allows the insertion of an ActiveX control made by another named SillyTool.fig. • program. (Only use these if you really know what you’re doing; improperly configured 2. GUIDE also creates a file called SillyTool.m, stores it in the current MATLAB folder, controls can crash MATLAB.) and loads it into the MATLAB editor. This file contains the program that creates and executes the GUI tool you have made. You can adjust the size of a GUI object by clicking on it once to make it the current object, and then dragging the sizing handles, which appear when it’s selected. You can make small Look in the Current Folder window (you may need to click the Current Folder tab) and notice adjustments in the position of the object using the arrow keys. It is a good idea to experiment that these two files have been created: SillyTool.fig and SillyTool.m. The figure file (*.fig) LENT c09.tex 2/11/2012 17: 32 Page 151 LENT c09.tex 2/11/2012 17: 32 Page 152 9.2 Starting an action with a GUI element 151 152 CHAPTER 9 Building a Graphical User Interface FIGURE 9.5 SillyTool running. FIGURE 9.6 A push button with its properties altered in the Property Inspector. is not directly human-readable. It is a binary file that encodes the information about your GUI design. Such a figure file is meant to be edited only by using the GUIDE program. action on the part of the program. Let’s explore how that works by making a very simple The file SillyTool.m is, by contrast, just MATLAB code that GUIDE has generated and GUI, consisting of a single button. which, when executed, will launch and run the tool. It is comprised of a series of functions, Launch GUIDE again from the Command window by typing “guide” at the prompt. In the most of which are just stubs to be filled in later. GUIDE Quickstart panel, select the option to create a blank GUI (rather than to open an You may notice that MATLAB took control and put you into the main MATLAB window existing GUI file). When the GUIDE window appears, select the push button icon from the with the file SillyTool.m loaded in the editor. We won’t explore the file SillyTool.m at panel of uicontrols on the left, and drag a push button onto the panel surface. this point—it’s chock-full of interesting things but is likely a little mystifying and potentially The button initially says “Push Button” on it. Let’s alter this, so the button’s label will be overwhelming right now. Ignore it. But do run the file by pressing the green Run button on different. This is an example of editing the Properties of a uicontrol. To change a property the EDITOR tab. of the button, or any object, double-click on it and the Property Inspector window will pop When you do, you should see your SillyTool running in its own window. Play with each of up. All of the properties of the specific GUI object appear in this window and can be edited. the graphic elements and see how they perform. Many won’t be very impressive just yet; The name of each property is listed in the left column and the value of each property is you will learn how to configure them so they do useful things. But notice the basic behavior listed in the corresponding row of the right column. of the push button compared to the toggle button, the checkbox, the radio button, etc. When At this point we’ll change three properties: you are done, exit SillyTool by clicking on the “close button” at the top corner of the panel (red x on the top right for Windows, red circle on the top left for Mac).