Graphic User Interfaces (GUI)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 functionalitiesDialog box Matlab functionalitiesdialog - 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 boxuigetfile - Standard open file dialog box.uigetpref - question dialog box with preference supportuiputfile - Standard save file dialog box.uiopen - Present file selection dialog with appropriate file filters.uisave - GUI Helper function for SAVEuisetcolor - Color selection dialog box.uisetfont - Font selection dialog box.waitbar - Display wait bar.warndlg - Warning dialog box.export2wsdlg - Exports variables to the workspaceprintdlg - Print dialog boxprintpreview - Display preview of figure to be printed

Creating a simple GUICreating a simple GUIUse 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

AxesStatic TextPop-up Menu

Align the components for a better appearance

First select components by pressing Ctrl button.

Then select Tools Align Objects.

Component customizationComponent 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 GUICreation and execution of a GUIAssociated 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 GUICreating a functional GUI

Insert code for each “callback” function to attend the GUI demands, the callback number of inputs are fixed to 4:

- hObject handle of the main figure.

- eventdata reserved for future versions.

- handles struct 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_guihandles.output = hObject; % Update handles structureguidata(hObject, handles); % UIWAIT makes simple_gui wait% for user response (see UIRESUME)% uiwait(handles.figure1);

% Create the data to plothandles.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 setstr = get(hObject, 'String');val = get(hObject,'Value');% Set current data to the selected% data setswitch 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 structureguidata(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 GUIDEGUI 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', [315 220 70 25]);

hpopup = uicontrol('style', 'popupmenu', 'string', {'Peaks', ... 'Membrane', 'Sinc'}, 'position', [300 50 100 25]);

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', [50 60 200 185]);

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', [360 500 450 285]); % 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]); htext = uicontrol('style', 'text', 'string', 'Select Data', ... 'position', [325 90 60 15]);hpopup = uicontrol('style', 'popupmenu', 'string', {'Peaks','Membrane','Sinc'}, ... 'position', [300 50 100 25]);haxes = axes('units', 'pixels', 'position', [50 60 200 185]); align([hsurf hmesh hcontour htext hpopup], 'center', 'none'); % Make the GUI visibleset(hfig, 'Visible', 'on');end

Align the component

s automatical

ly

Changes the figure visibility

Programming the GUI...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; endend

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', {@sbutton_Callback});

More about componentsMore 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', [0 0 .2 1]);% Create three radio buttons in the button group.u0 = uicontrol('Style', 'Radio', 'String', 'Option 1', ... 'parent', h, 'pos', [10 350 100 30], 'HandleVisibility', 'off');u1 = uicontrol('Style', 'Radio', 'String', 'Option 2', ... 'parent', h, 'pos', [10 250 100 30], 'HandleVisibility', 'off');u2 = uicontrol('Style', 'Radio', 'String', 'Option 3', ... 'parent', h, 'pos', [10 150 100 30], 'HandleVisibility', 'off');% Initialize some button group properties. set(h, 'SelectionChangeFcn', @selcbk);set(h, 'SelectedObject', []); % No selectionset(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 - uiresumef = figure;h = uicontrol('Position', [20 20 200 40], '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 - pauseh = 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);endguidlg_time('finalizar');

Many Web sites and commercial publications such as the following provideguidelines 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. http://www.asktog.com/basics/firstPrinciples.html

Galitz, Wilbert, O., Essential Guide to User InterfaceDesign. Wiley, New York, NY, 2002.

GUI Design Handbook — A detailed guide to the use of GUI controls. http://www.fast-consulting.com/GUI%20Design%20Handbook/GDH_FRNTMTR.htm

Johnson, J., GUI Bloopers: Don'ts and Do's for Software Developers and Web Designers. Morgan Kaufmann, San Francisco, CA, 2000.

Usability Glossary — An extensive glossary of terms related to GUI design, usability, and related topics. http://www.usabilityfirst.com/glossary/main.cgi

UsabilityNet — Covers design principles, user-centered design, and other usability and design-related topics. http://www.usabilitynet.org/management/b_design.htm