Design of Graphical User Interface Applications using MATLAB

Engr. Sofia Yousuf(B.E. Electronic, NED)

2

GUI Design and MATLAB Programming Language

Introduction to MATLAB GUI Tool-------- GUIDE

Using the GUIDE Layout Editor

Introduction to Handles in MATLAB

Programming the GUI

Flow of Presentation

3

Programming languages such as c++ or java do not have built-in functions that can be used for solving engineering problems, one needs to create those functions , this makes the program larger to develop and more time consuming

MATLAB has built-in application specific functions , which makes it easier to design programs and so GUIs can be programmed efficiently using these functions

GUI Design and MATLAB

4

Introduction to MATLAB GUIDE Tool

5

GUIDE stands for “Graphical User Interface Development Environment”

This tool is used for the “rapid” development of Graphical User Interfaces

GUIDE

6

There are several ways to launch “GUIDE” within MATLAB

From MATLAB toolbar click the icon :

STARTING GUIDE

7

2) “GUIDE” can also be invoked from the command

window by typing “guide” at the command prompt :

STARTING GUIDE (cont…)

8

3) From the MATLAB start button :

9

GUIDE WINDOW

10

There are two steps for designing GUIs in “GUIDE”

Laying out the GUI in Layout editor

Writing “callbacks” for GUI elements/controls

STEPS OF GUI DESIGN IN GUIDE

11

GUIDE LAYOUT EDITOR

12

GUI CONTROLS

13

Using the Guide Layout Editor

14

The Layout Editor has two purposes:

1 )The Layout Editor is used to lay out controls and design the “look” of the GUI

2) In lay out editor , a designer sets the properties of the controls that constitute the GUI

Layout Editor

15

Use the control palette to drag and drop the following controls into the lay out area

- Three Static - Text Labels

- Two Edit Boxes

- One Push-Button

Arrange and align these controls so that the lay-out area looks somewhat like the one as in the following figure,

Use the grids on the layout editor to align the controls

Resize the controls using the small black boxes around each control

Using the Controls Palette

16

17

The Property Inspector is used to define the properties of the controls in the GUI

Every control in a GUI has its own property inspector dialog box as every control has different properties associated with it

Using the Property Inspector

18

In order to launch the property inspector for a particular control , you can either :

- DOUBLE CLICK ON A PARTICULAR CONTROL

- RIGHT CLICK ON A PARTICULAR CONTROL AND SELECT PROPERTY

INSPECTOR FROM THE CONTEXT MENU OR…

- FROM THE VIEW TAB SELECT PROPERTY INSPECTOR , BE SURE THAT

THE DESIRED CONTROL IS ACTIVE

Launching the Propertyfor a particular control

19

Property Inspector for

the first static-text box

label control

20

From the Property Inspector dialog box , change the string property of the static text box control :From : Static Text

To : Factorial GUI

Click this button

Changing Properties of a Control

21

The Control in the layout Editor , will look like this :

22

Using the same methodology , change the string property of other controls in the GUI so that the GUI look as in the following figure:

23

The tag property of a GUI control is used in programming that GUI control , change the tag property of the controls accordingly

- “Factorial GUI” from text1 to txt1

- “Enter Number” from text2 to txt2

- “Factorial” from text3 to txt3

- “Edit Text” from edit1 to ed1

- “Edit Text” from edit2 to ed2

- “Calculate” from pushbutton1 to pb1

Setting the “Tag” Property

24

Save the GUI

25

As soon as the code is saved, the GUIDE tool automatically creates a code file , which is basically an m-file for the designed GUI as shown in the following figure :

Generation of Code for the GUI

26

Running the GUI

Click this icon to run GUI

27

Add the folder to the MATLAB path

28

GUI in the Run Mode

29

Click the calculate button to execute the operation of GUI

The GUI does not work as there’s no code written for the push-button “Calculate”

So, the next step is to program the GUI Controls for the proper functioning of your GUI Application

Not a Working GUI !!

30

MATLAB creates an identification number of any graphical object it creates

This number is called a MATLAB handle

The tag property is used to identify the handle (identification number) to a particular control

Introduction to object handles

31

Run the following code from the Command Window :

clear all; close all ; clc;

x= [1 2 3 4]; y = x;

h_y = plot(x , y) % handle of the figure window

Example

32

Since a MATLAB GUI is a collection of graphical objects called controls, therefore, MATLAB creates handles for each of these controls

These handles created by MATLAB are used to program the GUI in order to change the property of that control after the GUI is executed

MATLAB Handles and GUI

33

34

guihandle function

35

There are two main handle graphic functions used in a GUI control programming

1)Get : Used to get the property of a particular control in

a GUI

2) Set : Used to set the property of a particular control in

a GUI

Handle Graphic functions used in programming the controls in a GUI

36

Programming the GUI

37

In a GUI , any action that takes place depends upon an event that is occurred on a particular control , for example :

- Click on a pushbutton

- Pressing Enter/Return after entering data into an edit

box

Event Driven Programming

38

The piece of code or function that executes in response to events on the controls are called “callbacks”

Callbacks

39

To develop the callback function for the push-button “Calculate” , right click the control to open the context menu , then select

view callbacks --------> callback

Writing Callback for pushbutton

40

41

42

Start writing the code after the comments ,

43

44

Variable name = get( handles.controltag , property)

str1 = get(handles.ed1,'string');

Syntax of “get” function

45

set( handles.controltag, property, propertyvalue/ variable name)

set(handles.ed2,'string',str2);

Syntax of “set” function

46

Execute the GUI

47

Hands – on GUI Development Exercises

48

Identity matrix image GUI

49

Temperature conversion GUI

50

Character count GUI