Special Topics II: Graphical User Interfaces (GUIs) December 8, 2011 Structures Structures (structs, for short) are a way of managing and storing data in most programming languages, including MATLAB. Assuming we want the variable called instructor to store some sort of data about a person. We could do: >> instructor.firstname = Ikenna ; >> instructor.lastname = Odinaka ; >> instructor.age = 24; >> instructor.gender = Male ; >> instructor.ssn = 001100111; Notice that a dot. is used to set the fields of the structure. Similarly, if we wanted to know the firstname or any other field in the instructor structure, we will use the dot. to get it. That is, doing >> instructor.firstname will return Ikenna. A structure called handles will be used quite often when you create graphical user interfaces in MATLAB. GUI Introduction According to MATLAB s help documentation, A graphical user interface (GUI) is a graphical display in one or more windows containing controls, called components, that enable a user to perform interactive tasks. In other words, the user gets to click on buttons or drop-down (pop-up) menus, sliders and so on, to accomplish a goal. In MATLAB, there are two ways to create a fully functional GUI; using GUIDE or programmatically. Simply put, the first method is easy, since MATLAB does most of the dirty work for you. For the second method, you get to control everything about the GUI, from laying it out to programming it to run as desired, all within a script m-file. As you may have already guessed, we will be sticking to the first approach. 1
2 GUIDE MATLAB s Graphical User Interface Development Environment (GUIDE) offers an easy way to lay out the graphical components such as axes, menus, toolbars, push buttons, radio buttons, list boxes, sliders and so on. Using the layout editor, we will be able to drag n drop components onto a window and resize the window or the components to our heart s content. Layout To get started, type guide into the command window, after the prompt (>>), hit Enter. Select the Blank GUI(Default) under GUIDE templates, and hit the OK button. Figure 1: Starting up GUIDE A blank layout area(window) with grid lines should appear. It will be titled untitled.fig, if this is your first session in GUIDE; we will change this before running the GUI.
3 Figure 2: A blank layout window (without component names) On the left side of the window is the component palette, from which we can drag any one of the components onto the layout area. Notice that the names of the components are not visible on the palette. We can change that by going to File >> Preferences... Under GUIDE Preferences, check the box that reads Show names in component palette. Figure 3: A blank layout window (with component names) Click on a push button, and drop it on the layout area. Once its on the layout area, left-click it, to select it.
4 Figure 4: Push button on layout area Notice the label at the bottom-left corner of the window that reads Tag: pushbutton1. This is a property name and value pair of the push button. We can change the value of Tag from pushbutton1 to whatever we desire within the Property inspector. To get the properties for any component, right-click the component, then select Property Inspector. Figure 5: Getting to the Property Inspector via the component s context menu After clicking on Property Inspector, the list of property names and values should appear. Scroll down the list to the property name Tag. To the right of Tag, change the value
5 to whatever variablename yousee fit. Notethat thetagsmust beunique for each component on the layout area, for your GUI to function properly. I changed the push button s tag from pushbutton1 to demo button. After typing the new tag, if you click away from it, it takes effect. Figure 6: Setting the Tag property in the Property Inspector Noticehowthelabelatthebottom-leftcornerofthewindownowreadsTag: demo button. We can also change the text that is shown on the push button by changing the value of its String property via the property inspector. We can also resize the components by clicking and dragging the black square points that surround them. Figure 7: Setting the String property in the Property Inspector
6 After finishing the layout of the GUI, go ahead and save it. An m-file is automatically generated, and its name matches the name of the fig-file (layout file) we just saved. The next step is to program the GUI so that each component does what it is supposed to. Programming Associated with each component of the GUI are functions that we call callbacks. Each callback function is called when a particular kind of user input is received by the component. All the functions involved in making the GUI run are saved in an m-file whose name is identical to the fig-file. MATLAB GUIDE automatically helps you create the skeleton of the basic (most commonly used) callback functions for each component on the layout area. The callback functions are automatically named using the tag of the components on the layout area. To see the callback functions (callbacks) for a given component, in the layout area, right-click the component, then select M-file Editor. Figure 8: Opening the m-file at the callback functions for a given component To see a list of all the callback functions (without the body of the functions), use the Show functions button on the toolbar above the m-file editor. You can click on a function on the list to be directly taken to it. Figure 9: The Show functions button.
7 One particular callback function of interest to us is the Callback function (with C capitalized). Itisthefunctionthatiscalledwhenweclickonapushbuttonoranyothercomponent. Most callback functions (including the Callback function) have three input arguments hobject, eventdata, and handles; eventdata will not be used. hobject is a handle to the component while handles is a structure that holds the handle to every component on the GUI including the figure (GUI) itself. Figure 10: The m-file showing the callback functions including the Callback function. To get the handle to a particular component on the GUI, we use the component s tag as the field for the structure. For instance, for a handle to our push button, whose tag is demo button, we will use handles.demo button. We can also use this handles structure to our advantage; we can save any data that we want to be available to other components by simply adding it as a field of the structure. For instance, if we wanted to make a random vector of 10 entries available to every component, we could do: >> handles.rvec = rand(10, 1); After making changes to the handles structure, it is crucial to save the changes (update the handles structure), otherwise it won t be passed along to other components. To do this, we use the function guidata as follows: >> guidata(hobject, handles); Note that this is usually done at the end of the particular callback function. Figure 11: Using the handles structure to our advantage. Project: Picture Converter In this lab, we will create a GUI that imports a jpeg photo from any folder/directory on the computer, and converts the RGB image into a grayscale image. To begin, we will create a layout of our project. After much contemplating and scratch work, we finally have a clear picture of what the GUI should look like; A pair of axes where
8 the images will be drawn, a push button for importing a jpeg picture, and a push button to convert the image to grayscale. Figure 12: A possible layout of the picture converter After laying out the GUI, our next task is to program the GUI to respond to button clicks made by the user. The Callback function of the push buttons will come in handy here. Some Useful Functions: uigetfile mean imread image imshow colormap Further Help For further help with GUIs in MATLAB, from the main MATLAB window (or the editor), click on the menu bar s help tab, then click on Product Help. Below the search bar to the left, click on Content >> Matlab >> User s Guide >> Creating Graphical User Interfaces. You can read up on how to create a GUI both programmatically and by using GUIDE.
9 Demo Visit the following MATLAB website to learn more about creating a simple graphical user interface: simple gui