1. Matlab GUIs Making Matlab Interactive

2. Today’s topics What is a GUI? How does a GUI work? Where do you begin? Ways to build MATLAB GUIs

3. What is a GUI? Graphical display containing controls (components) that enable interactive tasks The user does not need to write a script or type commands to accomplish the tasks The user need not understand the details of how the tasks are preformed (technically true but dangerous of course)

4. GUI components Menus Toolbars Push buttons Radio buttons List boxes Sliders

5. How does a GUI work? Most GUIs wait for the user to manipulate a control and then respond to each action in turn. Each control has one or more routines known as callbacks Execution of callbacks is triggered by user action or events

6. Event-driven Programming Example: User clicks a button and callback execution is asynchronous, or triggered by events external to the software There are two ways to code callbacks As MATLAB language functions store in files* As strings containing MATLAB expressions or commands *preferred

7. Although you can provide a callback with certain data and make it do anything you want, you cannot control when callbacks will execute. That is, when your GUI is being used, you have no control over the sequence of events that trigger particular callbacks or what other callbacks might still be running at those times. This distinguishes event-driven programming from other types of control flow, for example, processing sequential data files.

8. Where do you begin? Like all programs, GUIs begin with design Who will the user be What do you want the GUI to do How will users interact with the GUI What components will be needed for the GUI to function

10. Ways to build GUIs Two ways: Use GUIDE (GUI Development Environment), an interactive GUI construction kit Create code files that generate GUIs as functions or scripts (programmatic approach) You can create a GUI with GUIDE and then modify it programmatically. However, you cannot create a GUI programmatically and later modify it with GUIDE

12. GUIDE Open GUIDE by typing “guide” at the matlab prompt Open GUID by right click on a.fig file and choosing “Open in GUIDE” We will create a GUI using GUIDE in the lab associated with these lectures

13. Programmatically Let’s create the simple GUI shown before

14. Functions we will use align: Align GUI components such as user interface controls and axes. axes: Create axes objects. figure: Create figure objects. A GUI is a figure object. movegui: Move GUI figure to specified location on screen uicontrol: Create user interface control objects, such as push buttons, static text, and pop-up menus.

15. 1. Create a function file function simple_gui2 % SIMPLE_GUI2 Select a data set from the pop-up menu, then % click one of the plot-type push buttons. Clicking the button % plots the selected data in the axes. [This info shows up using help] %Must leave a blank space after comment block end

16. 2. Creating the figure A GUI is a figure, so first we create the figure and position it on the screen % Initialize and hide the GUI as it is being constructed. f = figure('Visible','off','Position',[360,500,450,285]) Dist from left, dist from bottom, width, height

18. 3. Add components Add the three push buttons % Construct the components. hsurf = uicontrol('Style','pushbutton',... 'String','Surf','Position',[315,220,70,25]); hmesh = uicontrol('Style','pushbutton',... 'String','Mesh','Position',[315,180,70,25]); hcontour = uicontrol('Style','pushbutton',... 'String','Countour','Position',[315,135,70,25]);

20. uicontrol function creates the push buttons. Each statement uses a series of property/value pairs to define a push button.

21. Add the pop-up menu and its labels hpopup = uicontrol('Style','popupmenu',... 'String',{'Peaks','Membrane','Sinc'},... 'Position',[300,50,100,25]); htext = uicontrol('Style','text','String','Select Data',... 'Position',[325,90,60,15]);

23. Add the axes ha = axes('Units','pixels','Position',[50,60,200,185]); Align the components (except the axes) along their centers align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');

25. Make the GUI visible %Make the GUI visible. set(f,'Visible','on’) Try it out >>simple_gui2

26. Initialize the GUI Normal the component and figure units so it resizes properly % Change units to normalized so components resize automatically. set([f,hsurf,hmesh,hcontour,htext,hpopup],'Units','normalized');

27. Need to generate the data to plot % Generate the data to plot. peaks_data = peaks(35); membrane_data = membrane; [x,y] = meshgrid(-8:.5:8); r = sqrt(x.^2+y.^2) + eps; sinc_data = sin(r)./r;

28. Create a plot in the axes % Create a plot in the axes. current_data = peaks_data; surf(current_data);

29. % Assign the GUI a name to appear in the window title. set(f,'Name','Simple GUI') % Move the GUI to the center of the screen. movegui(f,'center') % Make the GUI visible. set(f,'Visible','on');

30. Programming the GUI Program the pop-up menu % Read the pop-up menu Value property to determine which item is currently displayed and make it the current data. This callback automatically has access to current_data because this function is nested at a lower level. function popup_menu_Callback(source,eventdata) % Determine the selected data set. str = get(source, 'String'); val = get(source,'Value');

31. % Set current data to the selected data set. switch str{val}; case 'Peaks' % User selects Peaks. current_data = peaks_data; case 'Membrane' % User selects Membrane. current_data = membrane_data; case 'Sinc' % User selects Sinc. current_data = sinc_data; end

32. Program the push button callbacks %Push button callbacks. Each callback plots current_data in the % specified plot type. function surfbutton_Callback(source,eventdata) % Display surf plot of the currently selected data. surf(current_data); end

33. function meshbutton_Callback(source,eventdata) % Display mesh plot of the currently selected data. mesh(current_data); end function contourbutton_Callback(source,eventdata) % Display contour plot of the currently selected data. contour(current_data); end

34. Associate callbacks with their components Revise the uicontrol calls by adding property/value pair Example: hsurf = uicontrol('Style','pushbutton','String','Surf',... 'Position',[315,220,70,25],... 'Callback',{@surfbutton_Callback});