Graphic User Interfaces (GUI) GUI provides a way to interact friendly with possibly complex programs. There are two types of GUI: - MDI: multiple document interfaces. - SDI: single document interfaces. GUIs provide components that allow the interaction with the underly programs/functions/dataset. Main components: menus, toolbars, axes, push buttons, radio buttons, list box y sliders, etc. GUIs provide mechanisms to manage/save user information

Example of GUI using: - Three buttons that provide the main interaction with the GUI. - Static text component. - Pop-up menu: contains a list of different functions to plot. - Axes component: provides the graphic output How does a GUI work? Each component, even the main figure, is associated with special functions called callbacks. Callbacks are executed automatically at every action Callbacks input parameters disclose exactly the type of action

Dialog box Matlab functionalities dialog - Create dialog figure. errordlg - Error dialog box. helpdlg - Help dialog box. inputdlg - Input dialog box. listdlg - List selection dialog box. menu - Generate a menu of choices for user input. msgbox - Message box. questdlg - Question dialog box. uigetdir - Standard open directory dialog box uigetfile - Standard open file dialog box. uigetpref - question dialog box with preference support uiputfile - Standard save file dialog box. uiopen - Present file selection dialog with appropriate file filters. uisave - GUI Helper function for SAVE uisetcolor - Color selection dialog box. uisetfont - Font selection dialog box. waitbar - Display wait bar. warndlg - Warning dialog box. export2wsdlg - Exports variables to the workspace printdlg - Print dialog box printpreview - Display preview of figure to be printed

Creating a simple GUI Use the guide function with default Blank GUI selection. Visualize the component names using the Preferences Matlab dialog: File  Preferences, then choose tab GUIDE and select option “Show names in component palette”. redimensionar

Select and drag each required component Push Buttons Axes Static Text Pop-up Menu Align the components for a better appearance First select components by pressing Ctrl button. Then select Tools  Align Objects.

Component customization Change component properties: View  Property Inspector Select string property for each component, modify the content or type in the component name according to the particular case. Example: for pop-up menu introduce the texts “Peaks”, “Membrane” and “Sinc” in separate lines.

The “…OpeningFcn” entry in the toolbar, under functions list (V7 V8 allows to customize (load initial data, appearance) the GUI before opening. Creation and execution of a GUI Associated to the GUI there are two files: (1) binary.fig extension that contain GUI content for design, (2) ascii.m extension with GUI code including callbacks functions. After designing the GUI save and execute the code (button ) Example: change GUI background color.

Creating a functional GUI Insert code for each “callback” function to attend the GUI demands, the callback number of inputs are fixed to 4: - hObjecthandle of the main figure. - eventdatareserved for future versions. - handlesstruct with all the components’ handle. Alternatively, it can contain useful information - varargin cell-array that allow in a tricky way the input of more than 4 parameters. handles allows to interact with all the GUI controls and that users can input information and thus interact with the GUI. If some “callback” function modify the handles struct, it must updated it at the GUI level to avoid loss of information: guidata(hObject, handles)

% --- Executes just before simple_gui is made visible. function simple_gui_OpeningFcn(hObject, eventdata, handles, varargin) % This function has no output args, see OutputFcn. % hObject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % varargin command line arguments to simple_gui (see VARARGIN)... % Choose default command line % output for simple_gui handles.output = hObject; % Update handles structure guidata(hObject, handles); % UIWAIT makes simple_gui wait % for user response (see UIRESUME) % uiwait(handles.figure1); % Create the data to plot handles.peaks=peaks(35); handles.membrane=membrane; [x,y] = meshgrid(-8:.5:8); r = sqrt(x.^2+y.^2) + eps; sinc = sin(r)./r; handles.sinc = sinc; % Set the current data value. handles.current_data =... handles.peaks; surf(handles.current_data Add this initialization code to the “…openingFcn” callback

Adding functionalities… The pop-up menu allow users to select among different graphics. Right click on top of the pop- up menu to create callback function and insert code: View Callbacks  Callback

Pop-up menu callback % Determine the selected data set str = get(hObject, 'String'); val = get(hObject,'Value'); % Set current data to the selected % data set switch str{val}; case 'Peaks' handles.current_data =... handles.peaks; case 'Membrane' handles.current_data =... handles.membrane; case 'Sinc' handles.current_data =... handles.sinc; end % Save the handles structure guidata(hObject,handles) Surf button callback surf(handles.current_data); Mesh button callback mesh(handles.current_data); Contour button callback contour(handles.current_data); “String” and “Value” allow to access the user selection Functions get and set allow access and modification of property values.

GUI programming without using GUIDE Matlab GUIs can be created completely straighforward: f = figure('visible', 'off', 'position', [360,500,450,285]); Call figure to create the GUI frame and use “visible” and “position” properties to set figure visibility and position. hsurf = uicontrol('style', 'pushbutton',... 'string', 'Surf', 'position', [ ]); hpopup = uicontrol('style', 'popupmenu', 'string', {'Peaks',... 'Membrane', 'Sinc'}, 'position', [ ]); Call uicontrol to create components and use “style” and “string” properties to select the type of control and customized it. ha = axes('units', 'pixels', 'position', [ ]); Call axes to create graphical component and use “units” to select the units that should be accounted for axes position.

function simple_gui % 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. % Create and hide the GUI as it is being constructed. hfig = figure('visible', 'off', 'position', [ ]); % Construct the components. hsurf = uicontrol('style', 'pushbutton', 'string', 'Surf',... 'position', [ ]); hmesh = uicontrol('style', 'pushbutton', 'string', 'Mesh',... 'position', [ ]); hcontour = uicontrol('style', 'pushbutton', 'string', 'Countour',... 'position', [ ]); htext = uicontrol('style', 'text', 'string', 'Select Data',... 'position', [ ]); hpopup = uicontrol('style', 'popupmenu', 'string', {'Peaks','Membrane','Sinc'},... 'position', [ ]); haxes = axes('units', 'pixels', 'position', [ ]); align([hsurf hmesh hcontour htext hpopup], 'center', 'none'); % Make the GUI visible set(hfig, 'Visible', 'on'); end Align the components automatically Changes the figure visibility

Programming the GUI... Resizing the GUI can have undesirable results. There are two choices: Change components’s dimension units to normalized in order to obtain a better result. After that, the bottom-left and upper-right corners have positions (0,0) and (1,1) respectively. set([f hsurf hmesh hcontour htext hpopup haxes], 'units', 'normalized'); You can also change the GUI presentation name and remove the toolbar: set(hfig, 'name', 'Simple GUI'); set(hfig, 'NumberTitle', 'off'); set(hfig, 'MenuBar', 'none'); Call movegui GUI location to a new position: movegui(f, 'center');

The callbacks functions can be programmed as nested functions to produce a more straightforward code function pmenu_Callback(source,... eventdata) % Determine the selected data set. str = get(source, 'String'); val = get(source,'Value'); % Set current data. switch str{val}; case 'Peaks' current_data = peaks_data; case 'Membrane' current_data = membrane_data; case 'Sinc' current_data = sinc_data; end function sbutton_Callback(source, … eventdata) surf(current_data); end function mbutton_Callback(source, … eventdata) mesh(current_data); end function cbutton_Callback(source, … eventdata) contour(current_data); end You can link the previous nested functions to corresponding components by using the 'callback’ property. For example: hsurf = uicontrol(..., 'callback',

More about components Toggle Button : Create using uicontrol('style', 'togglebutton',...). They are used to represent two states (down/up). If they are contained inside a Button Group component, then only one can be active at the same time. Check Box : Create using uicontrol('style', 'checkbox',...). Very similar to Toggle Button it can be selected or not, but you can have several selected at the same time. Radio Button : Create using uicontrol('style', 'radiobutton',...). The behavior is identical to Toggle Buttons’. Edit Text : Create using uicontrol('style', 'edit',...). It allows users to enter input as strings. If you intend to enter a number as number use the function str2num to read the string content. Slider : Create using uicontrol('style', 'slider',...). They can be horizontal or vertical and are used to slide content that is not currently visible.

% Create the button group. h = uibuttongroup('visible', 'off', 'Position', [ ]); % Create three radio buttons in the button group. u0 = uicontrol('Style', 'Radio', 'String', 'Option 1',... 'parent', h, 'pos', [ ], 'HandleVisibility', 'off'); u1 = uicontrol('Style', 'Radio', 'String', 'Option 2',... 'parent', h, 'pos', [ ], 'HandleVisibility', 'off'); u2 = uicontrol('Style', 'Radio', 'String', 'Option 3',... 'parent', h, 'pos', [ ], 'HandleVisibility', 'off'); % Initialize some button group properties. set(h, set(h, 'SelectedObject', []); % No selection set(h, 'Visible', 'on'); List Box : Create using uicontrol('style', 'listbox',...). Visualize several options allowing to users the selection of one or several simultaneously. Button Group : It is like a panel or container that is used to provide an automatic exclusive behavior to contained Radio and Toggle buttons. Example:

function selcbk(source, eventdata) disp(source); disp([eventdata.EventName, ' ', get(eventdata.OldValue, 'String'),... ' ', get(eventdata.NewValue, 'String')]); disp(get(get(source, 'SelectedObject'), 'String')) Other commonly used component properties: - enable: 'on' ('off') indicate that state is active (inactive). - max: Scalar value, max=1 by default. - min: Scalar value, min=0 by default.. - position: Vector of 4 elements, i.e. [distance from left, distance from right, witdh, height]. - string: Allow to read content. It can be an string or a cell-array of strings. - value: scalar or vector, the output depend on the component and user action. Other components and the use of ActiveX components?

You can also add an image to a button img = rand(16,64,3); set(handles.pushbutton1, 'CData', img); Use of uiwait - uiresume f = figure; h = uicontrol('Position', [ ], 'String', 'Continue',... 'Callback', 'uiresume(gcbf)'); disp('This will print immediately'); uiwait(gcf); disp('This will print after you click Continue'); close(f); Use of waitbar - pause h = waitbar(0,'Please wait...'); for it = 1:1000, % computation here pause(0.01); waitbar(it/1000, h) end guidlg_time('inicializar'); for it = 1:1000, % computation here pause(0.01); guidlg_time(it/1000); end guidlg_time('finalizar');

Many Web sites and commercial publications such as the following provide guidelines for designing GUIs: AskTog — Essays on good design and a list of First Principles for good user interface design. The author, Tognazzini, is a well-respected user interface designer. Galitz, Wilbert, O., Essential Guide to User InterfaceDesign. Wiley, New York, NY, GUI Design Handbook — A detailed guide to the use of GUI controls. Johnson, J., GUI Bloopers: Don'ts and Do's for Software Developers and Web Designers. Morgan Kaufmann, San Francisco, CA, Usability Glossary — An extensive glossary of terms related to GUI design, usability, and related topics. UsabilityNet — Covers design principles, user-centered design, and other usability and design-related topics.