Graphical User Interfaces in MATLAB 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. GUIDE stores the GUI layout in a FIG-file. 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 the most commonly used callbacks for each component -- the commands that execute 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. Graphic Object Hierarchy in MATLAB

Startup and Layout To start up GUIDE, type in “guide” at the command prompt. Select “Blank GUI (Default)”. You will see a grid with a grey background. Save this file as example1.fig. You will notice that as soon as you do this, matlab generates an Mfile called example1.m which automatically generates some initialization code. You can now test your gui by typing “example1” in the command prompt. This should bring up an empty GUI, like what you see when you type in “figure”. UiControls

Once you have a blank gui, let’s now try to add some interesting functionality. You will notice a pallette on the left with different objects that you can add to your gui, such as a push button, static text, etc. These are called User Interface Controls (uicontrols). Let’s start by adding a title to our GUI. Select a Static Text Box and add it to the top of your GUI. Property Inspector You can view and change the properties for any uicontrol by double clicking on the control or right clicking and selecting property inspector. The property inspector displays all attributes assigned to a particular uicontrol. Some of the important ones we will consider today are: • • • •

String CallBack Tag UserData

Let us change the title of our GUI by changing the Property “String”. Callback functions Now, let us start doing some more interesting things. Example: Add a button to the GUI that displays “Hello World!” when you click on it: • Add a push button to your GUI figure. • Change the String to “Hello World” and the Tag to “HelloWorldButton” • Save the figure file. • Now go to your M-file and you will notice that a new function called HelloWorldButton_Callback has been added. This function is called a callback function. It is called every time the uicontrol receives an input. (in this case, when you click on the button) • Add the following line : disp(‘Hello World!’); • Now Save the m-file and test your GUI. What do you see? A callback function is generated every time you add a uicontrol to your GUI. If you look at the property inspector for the uicontrol, it will have this function in the Callback property. You can change the name of the associated function but it is always advisable to use the default name so that you don’t get confused. Get and Set The property inspector will give initial values for the attributes. However, if you want to change properties/attributes of a uicontrol while running your GUI, you

need to use some of these functions. The functions Get and Set are very important for accessing uicontrols on the GUI. Example: Add a button to the GUI that displays “Bye Bye World!” in a text box when you click on it. • •

Add a push button and text box in your GUI figure. Carry out the next three steps as above. Add the following line to the callback function for your new button: set(handles.edit1,'String','Bye Bye World!');

Example: Add a button with the String “Browse” and textbox to the GUI. Edit the callback so that when you click on the Browse button, you can navigate through the file system and locate a file. The textbox should be updated with the full file name (Path and filename). Add this to the Push button callback: [filename, pathname, filterindex] = uigetfile('*', 'Pick a file'); set(handles.edit2,'String',[pathname,'/',filename]); Axes Many times you would like to present visual data within your GUI. For this, you use axes objects. Example, add an axes figure to your gui which plots sin(x) for x = -pi:0.1:pi when the pushbutton is clicked. • •

Add a pushbutton and axes to the gui. Save the file In the pushbutton callback function, type: x = -pi:0.1:pi axes(axes1); plot(sin(x),x);

Global Variables Global variables allow functions to share variables. You should be very careful while using global variables especially because you don’t want to overwrite a variable wrongly. However, global variables can be useful when you want to update data in your GUI. Usage:

Whenever a function is using a global variable, it must declare it in the beginning (at the top of the function). Eg: global x; If no declaration is made, then MATLAB assumes that the variable is local. Example: Add a pushbutton and textbox where the textbox displays the global variable called “counter”. Everytime the push button is clicked on, the global variable x is incremented by 1 and the textbox is updated. First you have to make sure that x is given a value when the GUI starts. If no value is given to it, then it may point to junk. Remember the function example1_OpeningFcn is called every time the GUI is opened for the first time. In example1_OpeningFcn, add: global counter; counter = 0; Once you have added your pushbutton and textbox in your gui and saved it, you can add the following to the pushbutton callback: global x; x = x+1; set(handles.edit3,'String',x); Sharing Variables in GUIs If you notice, the object handles is already passed to all functions. Therefore all uicontrols and properties of uicontrols are also accessible to all functions without the need for an explicit global variable declaration. Every uicontrol has a property called UserData which can store a variable. This is very useful to use. It is also a cleaner method for exchanging data between functions. Example: Add a textbox and a start button and stop button to your gui. The textbox starts with an initial value of 0. When the start button is pressed, the value in the textbox increments every second. It stops when the stop button is pressed. If the start button is pressed again, it resumes from where it stopped. Add the two buttons and the textbox to the GUI. In the Start button callback, add: set(handles.pushbutton5,'UserData',1); while get(handles.pushbutton5,'Userdata')==1 x = str2num(get(handles.edit3,'String')); x = x+1; set(handles.edit3,'String',x);

pause(1); end In the Stop button callback, add: set(handles.pushbutton5,'UserData',0); Exercises: Create a GUI that can read in an image from a file and display it. Steps: 1. Use GUIDE to generate a new GUI. 2. Create a Push Button that will let you browse and select a file. 3. Create an axes that will display the image. 4. In the Browsing Push Button callback function, add code to select the user chosen filename and path. 5. In the same call back function, read in the image file using the function imread. (Example: I = imread(fullfilenamewithpath);) 6. Next, output the file onto the axes using the image function. (Example: image(I);) 7. Test your GUI using different image files. 8. A color image is read into MATLAB as a 3 dimensional matrix, which stores each color band (Red, Green and Blue) in the third dimension. A simple way to convert a color image to gray scale is by taking the mean along the third dimension. Add a button to your gui which reads in an image (just like before) but displays the grayscale image. (Use colormap('gray') before image(I) ). 9. Add a edit box to your gui. Save it. 10. If the Tag of your edit box is edit1, then add the following to the callback function: s = get(handles.edit1,'String'); msgbox(s);

Type in something into the edit box and press enter. What do you see?