Matlab GUIsMaking Matlab Interactive

Today’s topicsWhat is a GUI?How does a GUI work?Where do you begin?Ways to build MATLAB GUIs

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)

GUI componentsMenusToolbarsPush buttonsRadio buttonsList boxesSliders

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

callbacksExecution of callbacks is triggered by user action

or events

Event-driven ProgrammingExample: User clicks a button and callback

execution is asynchronous, or triggered by events external to the software

There are two ways to code callbacksAs MATLAB language functions store in files*As strings containing MATLAB expressions or

commands

*preferred

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.

Where do you begin?Like all programs, GUIs begin with design

Who will the user beWhat do you want the GUI to doHow will users interact with the GUIWhat components will be needed for the GUI to

function

Ways to build GUIsTwo 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

GUIDEOpen 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

ProgrammaticallyLet’s create the simple GUI shown before

Functions we will usealign: 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 screenuicontrol: Create user interface control objects,

such as push buttons, static text, and pop-up menus.

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

2. Creating the figureA 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

3. Add componentsAdd 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]);

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

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]);

Add the axesha = 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');

Make the GUI visible%Make the GUI visible.

set(f,'Visible','on’)

Try it out>>simple_gui2

Initialize the GUINormal 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');

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;

Create a plot in the axes% Create a plot in the axes.

current_data = peaks_data;

surf(current_data);

% 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');

Programming the GUIProgram 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');

% 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

end

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

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

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});