Introduction to the Graphical User Interface (GUI) in MATLAB

50
INTRODUCTION TO THE GRAPHICAL USER INTERFACE (GUI) IN MATLAB

description

Introduction to the Graphical User Interface (GUI) in MATLAB. What is a GUI?. Graphical User Interface What? A pictorial based interface that uses menus, buttons, the mouse, and other “graphics” to communicate with the user. [No command line interaction] Examples: The Windows Calculator - PowerPoint PPT Presentation

Transcript of Introduction to the Graphical User Interface (GUI) in MATLAB

Page 1: Introduction to the Graphical User Interface (GUI) in MATLAB

INTRODUCTION TO THE GRAPHICAL USER INTERFACE (GUI) IN MATLAB

Page 3: Introduction to the Graphical User Interface (GUI) in MATLAB

What is a GUI? Graphical User Interface

What? A pictorial based interface that uses menus,

buttons, the mouse, and other “graphics” to communicate with the user. [No command line interaction]

Examples: The Windows Calculator Firefox, Thunderbird, Office Anything you are looking at [on the computer].

Page 4: Introduction to the Graphical User Interface (GUI) in MATLAB

What is a GUI in MATLAB? GUI’s in MATLAB consist of two files:

An “m-file” [******.m] A “fig-file” [******.fig]

The m-file has all of the code that controls the GUI

The fig-file has all of the graphical objects, positions, default values, and links it all together

Page 5: Introduction to the Graphical User Interface (GUI) in MATLAB

MATLAB GUI -- ExampleEdit Text Boxes

Radio Button

Push Button

AxesPanel

Static Text

Pop Up-menu

Page 6: Introduction to the Graphical User Interface (GUI) in MATLAB

MATLAB GUI -- Example

Sliders to Change figure.

This is the “Superquadrics” demo included with MATLAB.

Page 7: Introduction to the Graphical User Interface (GUI) in MATLAB

Handle Graphics Handle graphics are low-level graphic

functions that control characteristics generated by MATLAB. They allow the programmer to have precise control of the appearance of plots and graphics.1

Examples: turning the grid on or off, changing colors or line types of plotted data, changing the marker type or line width.

1 Chapman, Stephen J. MATLAB Programming for Engineers. 2005

Page 8: Introduction to the Graphical User Interface (GUI) in MATLAB

Handle Graphics Each component has a list of properties

that define what it looks like and how it behaves.

Plot Something: Figure Window View Property Editor

More Properties

Page 9: Introduction to the Graphical User Interface (GUI) in MATLAB

Handle Graphics

Page 10: Introduction to the Graphical User Interface (GUI) in MATLAB

Handle Graphics The manipulation of these properties

form the basis of GUIs and GUI programming in MATLAB.

The ‘handle’ >> fh = figure();>> set(fh,'Name','Figure: Meet the World!');>> set(fh,'NumberTitle','off');>> ph = plot([1:10],[1:10].^2);>> set(ph,'LineStyle','--');>> set(ph,'Marker','square');>> set(ph,'MarkerEdgeColor',[1 0 0],

'MarkerFaceColor',[0 1 0]);>> get(ph); get(fh); %Look at all properties

Page 11: Introduction to the Graphical User Interface (GUI) in MATLAB

Handle Graphics The ‘set’ and ‘get’ commands

These are the primary commands that you use to … set and get information about graphic objects, they update the graphical object immediately

Syntax: ‘set’>> set(object_hndl,'PropertyName',propvalue); Syntax: ‘get’>> propvalue = get(object_hndl,'PropertyName');

Page 12: Introduction to the Graphical User Interface (GUI) in MATLAB

Creating a GUI Step 1: Create the graphical components

Using the GUIDE Manually configure each component

Step 2: Program components The GUIDE will generate the primary file, you

must add to this file all of the actions your components will take.

Step 3: Interface with your analysis tools We are working on a way for the user to work

with your code in an efficient manner.

Page 13: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: The GUI – The GuideType ‘guide’ into the command window or:

Page 14: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: The GUI – The Guide Step 1(cont.): Create a new GUI

Page 15: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: The GUI – The Guide

Page 16: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: The GUI – The GuideTool UseLayout Editor Select components from the component palette, at the left side of

the Layout Editor, and arrange them in the layout area.Figure Resize Tab Set the size at which the GUI is initially displayed when you run it.

Menu Editor Create menus and context, i.e., pop-up, menus.

Align Objects Align and distribute groups of components.

Tab Order Editor Set the tab and stacking order of the components in your layout.

Property Inspector Set the properties of the components in your layout. It provides a list of all the properties you can set and displays their current values.

Object Browser Display a hierarchical list of the objects in the GUI.

Run Save and run the current GUI.

M-File Editor Display, in your default editor, the M-file associated with the GUI.

Page 17: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: The GUI – The Guide MATLAB’s help files are going to help you

the most. Search for:

GUIDE: Tools Summary Previous two slides plus more details on each part

Creating a GUI with GUIDE Step by step how to create a simple GUI

Page 18: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: Creating the GUI - [fig file] Place Components

Figure out what you want. Inputs Outputs Parameters / Configuration Options?

Choose appropriate components See List

Place the objects Click on icon [from component palette] Click and drag in Layout Area

Configure the component Double Click on component or right click and click on Property

Inspector. Change attributes

Align components

Page 19: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 1: Complete We have placed our components and

now: Press save

Name your file Up pops an m-file

Notice there is a lot of code There is even more pseudocode

[This is a good thing] Let’s take a closer look

Page 20: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Creating the GUI – [m file] Programming the GUI

GUI Files: An Overview GUI M-File Structure

Callbacks: An Overview Callback Input Arguments Adding Callbacks to GUI M-File

Useful Commands Examples of GUI Components

Page 21: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUISection Description

Comments Displayed at the command line in response to the help command. Edit these as necessary for your GUI.

Initialization GUIDE initialization tasks. Do not edit this code.

Opening function

Performs your initialization tasks before the user has access to the GUI.

Output function

Returns outputs to the MATLAB command line after the opening function returns control and before control returns to the command line.

Component and figure callbacks

Control the behavior of the GUI figure and of individual components. MATLAB calls a callback in response to a particular event for a component or for the figure itself.

Page 22: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Callbacks: An Overview

What is a Callback A function associated with a GUI component. It

controls the behavior by performing an action in response to an event.

Kinds of Callbacks Table

Page 23: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Callback Syntax and Arguments

Most callbacks will look similar to this:% --- Executes on button press in pushbutton1.function pushbutton1_Callback(hObject, eventdata, handles)% hObject handle to pushbutton1 (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)

...

Insert your code after the last comment Read the comments, they might help you

Page 24: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Naming of Callbacks

function pushbutton1_Callback(hObject, eventdata, handles)

name Input Arguments

hObject Handle of the object, e.g., the component eventdata Reserved for later use. handles Structure that contains the handles of all the objects

in the figure. It may also contain application-defined data.

Page 25: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Adding Callbacks

The GUIDE only creates the most common callbacks

You may want to create different ones: Right-click on the component you want

You are now looking at the Layout Editor context menu*

Select View callbacks Select the callback you wish to create The GUIDE will now add it to the m-file and open it.

Page 26: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI There are two key functions:

set sets values

get gets current values

Page 27: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI the get function

We have seen many examples:user_data = get(hObject,’String’);

returns string in hObjectuser_data = get(hObject,’Value’);

returns value in hObjectuser_data = get(hObject,’max’);

returns max possible value in hObject*same for min

Please note: These commands only work when you are inside the

callback function you are trying to “get” the value of.

Page 28: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI the get function

In general: To access data stored in a component somewhere else

in your program:

user_data = get(handles.component_name,’Value’)

Where “component_name” is a component which has a property called ‘Value’

component_name is generally structured like this:[component type] [number] i.e. edit1 - pushbutton3 -

edit2 You may change this [But be careful, read the help files]

Page 29: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI the set function

In general: To set [output] values or strings to components in your

GUI:

set(handles.component_name,’propertyname’,valuetoset)

Where “component_name” is a component which has a property called ‘Value’

You can set any property like this

Page 30: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Important:

You can and most likely will use the following in conjunction with one another:

set getnum2str str2double

Example:set(handles.edittext1,'String',…

num2str(get(handles.slider1,'Value'))); This will set the “String” for edittext1 as the “Value” of

slider1.The num2str is used because the “String” must be a string

and the “Value” is stored as a number so, num2str converts it accordingly.

Page 31: Introduction to the Graphical User Interface (GUI) in MATLAB

Step 2: Programming the GUI Programming

GUI Push Button Toggle Button Radio Button Check Box Edit Text Slider List Box

Components Pop-Up Menu Panel Button Group Axes ActiveX Control

Page 32: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Push Button

Push Button This example contains only a push button. Clicking the button, closes the GUI.

This is the push button's Callback. It displays the string Goodbye at the command line and then closes the GUI.

function pushbutton1_Callback(hObject, eventdata, handles)disp(‘Goodbye’)delete(handles.figure1);

Page 33: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Toggle Button

The callback for a toggle button needs to query the toggle button to determine what state it is in. MATLAB sets the Value property equal to the Max property when the toggle button is pressed (Max is 1 by default) and equal to the Min property when the toggle button is not pressed (Min is 0 by default).

The following code illustrates how to program the callback in the GUI M-file.function togglebutton1_Callback(hObject, eventdata, handles)

button_state = get(hObject,'Value');if button_state == get(hObject,'Max') % Toggle button is pressed-take approperiate action % ...elseif button_state == get(hObject,'Min') % Toggle button is not pressed-take appropriate action ...end

Page 34: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Radio Button

You can determine the current state of a radio button from within its callback by querying the state of its Value property, as illustrated in the following example:if (get(hObject,'Value') == get(hObject,'Max')) % Radio button is selected-take appropriate actionelse % Radio button is not selected-take appropriate actionend

Note: You can use a button group to mange exclusive selection behavior for radio buttons and toggle buttons.

Page 35: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Check Box

You can determine the current state of a check box from within its callback by querying the state of its Value property, as illustrated in the following example:

function checkbox1_Callback(hObject, eventdata, handles)if (get(hObject,'Value') == get(hObject,'Max')) % Checkbox is checked-take approriate actionelse % Checkbox is not checked-take approriate actionend

Page 36: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Edit Text

To obtain the string a user types in an edit box, get the String property in the the Callback.

function edittext1_Callback(hObject, eventdata, handles)user_string = get(hObject,'String');% Proceed with callback

Retrieving Numeric Data from an Edit Text Component MATLAB returns the value of the edit text String

property as a character string. If you want users to enter numeric values, you must convert the characters to numbers. You can do this using the str2double command, which converts strings to doubles. If the user enters nonnumeric characters, str2double returns NaN.

Page 37: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Edit Text (cont.)

You can use the following code in the edit text callback. It gets the value of the String property and converts it to a double. It then checks whether the converted value is NaN (isnan), indicating the user entered a nonnumeric character and displays an error dialog (errordlg). function edittext1_Callback(hObject, eventdata, handles)

user_entry = str2double(get(hObject,'string'));if isnan(user_entry) errordlg('You must enter a numeric value', ...

'Bad Input','modal') returnend

% Proceed with callback...

Page 38: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Slider

You can determine the current value of a slider from within its callback by querying its Value property, as illustrated in the following example:

function slider1_Callback(hObject, eventdata, handles)slider_value = get(hObject,'Value');% Proceed with callback...

The Max and Min properties specify the slider's maximum and minimum values. The slider's range is Max - Min.

Page 39: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components List Box

When the list box Callback is triggered, the list box Value property contains the index of the selected item, where 1 corresponds to the first item in the list. The String property contains the list as a cell array of strings.

This example retrieves the selected string. It assumes listbox1 is the value of the Tag property. Note that it is necessary to convert the value returned from the String property from a cell array to a string.

function listbox1_Callback(hObject, eventdata, handles)index_selected = get(hObject,'Value');list = get(hObject,'String');item_selected = list{index_selected};

% Convert from cell array to string

Page 40: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Pop-Up Menu

When the pop-up menu Callback is triggered, the pop-up menu Value property contains the index of the selected item, where 1 corresponds to the first item on the menu. The String property contains the menu items as a cell array of strings.

Using Only the Index of the Selected Menu Item This example retrieves only the index of the item selected. It

uses a switch statement to take action based on the value. If the contents of the pop-up menu are fixed, then you can use this approach. Else, you can use the index to retrieve the actual string for the selected item.

function popupmenu1_Callback(hObject, eventdata, handles)val = get(hObject,'Value');switch valcase 1% User selected the first itemcase 2% User selected the second itemend% Proceed with callback...

Page 41: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Panel

Panels group GUI components and can make a GUI easier to understand by visually grouping related controls. A panel can contain panels and button groups as well as axes and user interface controls such as push buttons, sliders, pop-up menus, etc. The position of each component within a panel is interpreted relative to the lower-left corner of the panel.

Generally, if the GUI is resized, the panel and its components are also resized. However, you can control the size and position of the panel and its components. You can do this by setting the GUI Resize behavior to Other (Use ResizeFcn) and providing a ResizeFcn callback for the panel.

Note: To set Resize behavior for the figure to Other (Use ResizeFcn), select GUI Options from the Layout Editor Tools menu.

Page 42: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Button Group

Button groups are like panels except that they manage exclusive selection behavior for radio buttons and toggle buttons. If a button group contains a set of radio buttons, toggle buttons, or both, the button group allows only one of them to be selected. When a user clicks a button, that button is selected and all others are deselected. The following figure shows a button group with two radio buttons and

two toggle buttons. Radio Button 1 is selected.

Page 43: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Button Group (cont.)

If a user clicks the other radio button or one of the toggle buttons, it becomes selected and Radio Button 1 is deselected. The following figure shows the result of clicking Toggle Button 2.

The button group's SelectionChangeFcn callback is called whenever a selection is made. Its hObject input argument contains the handle of the selected radio button or toggle button.

Page 44: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Button Group (cont.)

If you have a button group that contains a set of radio buttons and toggle buttons and you want: An immediate action to occur when a radio button or toggle button is

selected, you must include the code to control the radio and toggle buttons in the button group's SelectionChangeFcn callback function, not in the individual toggle button Callback functions. Color Palette provides a practical example of a SelectionChangeFcn callback.

Another component such as a push button to base its action on the selection, then that component's Callback callback can get the handle of the selected radio button or toggle button from the button group's SelectedObject property.

This example of a SelectionChangeFcn callback uses the Tag property of the selected object to choose the appropriate code to execute. Unlike other callbacks, the hObject argument of the SelectionChangeFcn callback contains the handle of the selected radio button or toggle button.

Page 45: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Button Group (cont.)

Example:function uibuttongroup1_SelectionChangeFcn(hObject,eventdata,handles)

switch get(hObject,'Tag') % Get Tag of selected object case 'radiobutton1' % Code for when radiobutton1 is selected. case 'radiobutton2' % Code for when radiobutton2 is selected. case 'togglebutton1' % Code for when togglebutton1 is selected. case 'togglebutton2' % Code for when togglebutton2 is selected. % Continue with more cases as necessary. otherwise % Code for when there is no match.end

Page 46: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components Axes

Axes

Page 47: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming the GUI Components ActiveX Control

ActiveX

Page 48: Introduction to the Graphical User Interface (GUI) in MATLAB

Programming for the GUI Tips:

Set the initial values for everything Deal with invalid inputs (many different ways

to do this) Run most of your code from a pushbutton,

rather than small steps as soon as they enter some data. [Unless carefully designed, then the opposite may work better]

Use the property inspector! Be creative! Explore!

Page 49: Introduction to the Graphical User Interface (GUI) in MATLAB

Creating a MATLAB GUI – Summary

Creating GUI’s in MATLAB Use the GUIDE to create what you see

It will then create the basic m-file Program the m-file

Utilize the callbacks of the components The set, get, num2str, str2num functions are

good Read more about specific details you want

to know more about

Page 50: Introduction to the Graphical User Interface (GUI) in MATLAB

Further Understanding If you really want to understand the GUI

please refer to:MATLAB Programming for Engineers – Stephen J. Chapman Ch 5 “User-Defined Functions” 7.3 “Structure Arrays” 7.4 “Function Handles” Ch 9 “Handle Graphics” ** Ch 10 “Graphical User Interface” ** MATLAB Help files on:

About GUIs in MATLAB Creating Graphical User Interface **

** denotes highest level of importance