Introduction to Matlab & Data Analysis Tutorials 12: Graphical User Interface (GUI) Please change directory to directory E:\Matlab (cd E:\Matlab;) From the course website (http://www.weizmann.ac.il/feinberg/courses/EranEden/course_outline.htm) Download: t12.zip Eilon Sharon, Weizmann 2008 ©

Content GUI definition Predefined dialog boxes. GUI terms Using GUIDE to create a GUI

GUI - Definition UI (user interface): The point of contact or method of interaction between a person and a computer or computer program. The UI defines the “look and feel” of the application Windows 1.0

GUI - Definition (Matlab help) A graphical user interface (GUI) is a graphical display that contains devices, or components, that enable a user to perform interactive tasks. To perform these tasks, the user of the GUI does not have to create a script or type commands at the command line. Often, the user does not have to know the details of the task at hand.

Matlab Can Use Operating System Predefined Dialog Boxes For Various Tasks Filter - can contain * Example: [fname, dirpath] = uigetfile('*.m', 'Select a M-file') Title

Useful Dialog Boxes - Examples % Input Boxes: [fname, dirpath] = uigetfile('*.m‘,'Select a M-file') [fname, dirpath] = uiputfile('*.mat') c = uisetcolor([0.5 0 0.5],'My Select Color') fc = uisetfont('My Set Font') % Dialog boxes (Dialog == dlg) msgbox('message box'); errordlg('This is an error Message'); helpdlg('Help:This is a help dialog box'); [selection,ok] = listdlg('ListString',{'a','b','c'}) Try some of these examples

Eilon Sharon, Weizmann 2008 © Creating a GUI 40 GUI examples: http://www.mathworks.com/matlabcentral/fileexchange/24861-41-complete-gui-examples Eilon Sharon, Weizmann 2008 ©

You Can Either Create a GUI Programmatically or Use GUIDE Video Example: http://blogs.mathworks.com/pick/2007/12/28/matlab-basics-guis-without-guide/ Use GUIDE to create a GUI Graphical User Interface Development Environment Use the GUIDE!

The GUI (figure) Contains Components The GUI contains components. Types of components: Buttons: Push button Toggle button Radio Button Check box Lists: Pop up menu List box Button Group Panel Slider Axes

GUI Work in Event Driven Programming Component Each component of the GUI is associated with one or more callback functions The GUI programmer writes the callback functions: The callback function execution is triggered by a particular user action (=event) such as: A button push A mouse click A selection of a menu item cursor passing over a component % --- Executes on button press in pushbutton1. function pushbutton1_Callback(hObject, eventdata, handles) Callback function

Creating a GUI using GUIDE Activate GUIDE, two options: >> guide Press the icon: Choose the Blank GUI option Add components using Drag-and-Drop

First Example – A GUI with Exit button Drag and Drop a “push button”. Double Click on the button to open the “Inspector”. The inspector lets you edit the properties of each component

The Tag Property Is Used as an Identifier of the Component Set the String property to “Exit” Set the Tag property to “exitButton” The Tag property: Sets the name of the automatically generated callback functions Sets the name of the component handle

The GUI Object Contain The GUI Components Objects The GUI object contains the components objects The objects are stored in a hierarchical manner We can browse through the objects using the object browser: The GUI object is of type figure The GUI (figure) is the parent of the push button (uicontrol) The push button is a component of type “uicontrol” Tag

First Run of the GUI Generates the GUI Figure and a M-file At the first run GUIDE generates: A Figure file – hold the GUI figure. A M-file – contains: The GUI main function. Running this function will create and run the GUI The callback functions Lets Run the GUI Save the file as “gui_example1”

The Callback Functions Define the Respond to the Events Our code is now active and we can run it by typing in the command line: >> gui_example1 We now need to add to the automatically generated code the implementation of the callback functions In GUIDE - Right click on the component View callback -> callback % --- Executes on button press in exitButton. function exitButton_Callback(hObject, eventdata, handles) % hObject handle to exitButton (see GCBO) % eventdata reserved – to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA)

Adding our Respond to the Click Inside the Callback Function % --- Executes on button press in exitButton. function exitButton_Callback(hObject, eventdata, handles) % hObject handle to exitButton (see GCBO) % eventdata reserved – to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) close(); In response to a click on the Exit button we will close the GUI (figure) Notice that the function name contains the tag of the component: exitButton_Callback

The input arguments of the Callback functions are: The Callback Input Arguments Contain Information About the Event, Application Shared Data and Components Handles The input arguments of the Callback functions are: hObject – handle of the called object: The object contains information about the call (event). We retrieve the data using the get function, example: get(hObject,'String') eventdata – reserved - to be defined in a future version of MATLAB… handles - structure with handles and user data Handles is used to pass data between functions!

To Learn About the Callback Functions Input Lets Add Components to Our GUI Add an axes component Make sure the tag is “axes1” Add a push button Set String to “Surf” Set tag to “surf” Add a pop up menu Set tag to “dataSelection” Set string to “peaks membrane” Extra - Add a static text Set string to “Select Data” (you can also change font to 14) Play with the color and font properties

Our GUI Maintains Data Inside The Handles Structure and Pass It Between Functions Goal: Our GUI will choose between two types of data – Peaks Membrane A press on the Surf button will draw the selected data in the axes Implementation: The selected data will be save as handles.cur_data Surf will draw the cur_data

Our GUI Maintains Data Inside The Handles Structure and Pass It Between Functions In the M-file go to: function gui_example_OpeningFcn(hObject, eventdata, handles, varargin) Add: % Choose default command line output for gui_example handles.output = hObject; handles.peaks = peaks(35); handles.membrane = membrane; handles.cur_data = handles.peaks; % Update handles structure guidata(hObject, handles); The new code guidata – Finds the parent GUI of the hObject (component). Sets handles as a field of the GUI structure (stores handles in the GUI)

The guidata Function – Stores or Retrieves GUI Data guidata(object_handle,data) data = guidata(object_handle) hObject handles The guidata function knows also to retrieve data, but we won’t use this option since GUIDE automatically generated code does this for us Remember: always after you update the handles call: guidata(hObject, handles);

Updating the Current Data at the Data Selection Callback % --- Executes on selection change in dataSelection. function dataSelection_Callback(hObject, eventdata, handles) % Hints: contents = get(hObject,'String') returns dataSelection contents as cell array % contents{get(hObject,'Value')} returns selected item from dataSelection contents = get(hObject,'String'); data_str = contents{get(hObject,'Value')}; switch data_str case 'peaks' handles.cur_data = handles.peaks; case 'membrane' handles.cur_data = handles.membrane; otherwise errordlg('unknown data selected'); end guidata(hObject, handles); Retrieving event data from the called object Remember to use guidata!

Use the Axes Handle to Draw the Plot in Response to a Press on the Surf Button % --- Executes on button press in surf. function surf_Callback(hObject, eventdata, … handles) surf(handles.axes1,handles.cur_data); The axes handle The current data

Our GUI is Now Fully Functional! Run it: >> gui_example

Steps of Computing a GUI Draw the GUI on a piece of paper Create the GUI using GUIDE Create the code of the GUI (callback functions) DEBUG the GUI by using it in various scenarios

Adding a Menu Add a menu: Lets Add the menu Help Update the callback: (GUIDE) Tools ->Menu editor Lets Add the menu Help Inside Help add sub-menu about Change its tag to about Update the callback: function about_Callback(hObject, eventdata, handles) msgbox('A GUI Example. Tutorial 12', 'About');

Exercise Add a push button “Contour” More advance: When push the button will draw contour plot Put both the contour and the surf button inside a panel More advance: Add a button that saves the current GUI as a jpg. Make the selection of the data, redraw the plot using the selected data and the last selected plot type

Resources GUI tips GUIDE Demo http://www.mathworks.com/matlabcentral/fileexchange/loadFile.do?objectId=5439&ref=rssfeed&id=mostDownloadedFiles GUIDE Demo http://www.mathworks.com/support/2007a/matlab/7.4/demos/CreatingaGUIwithGUIDE_viewlet_swf.html http://blogs.mathworks.com/pick/2007/12/28/matlab-basics-guis-without-guide/

Summary We have made a very long way: You have all the necessary tools Matlab syntax Array manipulation, Cells, Structures Programming: Functions Writing efficient code Files & strings manipulation Data analysis GUI You have all the necessary tools Enjoy using Matlab Thanks!