matlab: graphical user interface cpd workshop
DESCRIPTION
We attended this seminar in out univercity "USMAN INSTITUTE OF TECHNOLOGY" on How to use GUIDE (graphical user interface develeopment enviorment) tool in MATLAB, it was worth 1 cpd point.TRANSCRIPT
![Page 1: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/1.jpg)
Design of Graphical User Interface Applications using MATLAB
Engr. Sofia Yousuf(B.E. Electronic, NED)
![Page 2: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/2.jpg)
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
![Page 3: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/3.jpg)
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
![Page 4: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/4.jpg)
4
Introduction to MATLAB GUIDE Tool
![Page 5: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/5.jpg)
5
GUIDE stands for “Graphical User Interface Development Environment”
This tool is used for the “rapid” development of Graphical User Interfaces
GUIDE
![Page 6: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/6.jpg)
6
There are several ways to launch “GUIDE” within MATLAB
From MATLAB toolbar click the icon :
STARTING GUIDE
![Page 7: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/7.jpg)
7
2) “GUIDE” can also be invoked from the command
window by typing “guide” at the command prompt :
STARTING GUIDE (cont…)
![Page 8: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/8.jpg)
8
3) From the MATLAB start button :
![Page 9: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/9.jpg)
9
GUIDE WINDOW
![Page 10: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/10.jpg)
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
![Page 11: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/11.jpg)
11
GUIDE LAYOUT EDITOR
![Page 12: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/12.jpg)
12
GUI CONTROLS
![Page 13: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/13.jpg)
13
Using the Guide Layout Editor
![Page 14: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/14.jpg)
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
![Page 15: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/15.jpg)
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
![Page 16: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/16.jpg)
16
![Page 17: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/17.jpg)
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
![Page 18: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/18.jpg)
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
![Page 19: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/19.jpg)
19
Property Inspector for
the first static-text box
label control
![Page 20: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/20.jpg)
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
![Page 21: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/21.jpg)
21
The Control in the layout Editor , will look like this :
![Page 22: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/22.jpg)
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:
![Page 23: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/23.jpg)
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
![Page 24: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/24.jpg)
24
Save the GUI
![Page 25: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/25.jpg)
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
![Page 26: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/26.jpg)
26
Running the GUI
Click this icon to run GUI
![Page 27: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/27.jpg)
27
Add the folder to the MATLAB path
![Page 28: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/28.jpg)
28
GUI in the Run Mode
![Page 29: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/29.jpg)
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 !!
![Page 30: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/30.jpg)
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
![Page 31: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/31.jpg)
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
![Page 32: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/32.jpg)
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
![Page 33: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/33.jpg)
33
![Page 34: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/34.jpg)
34
guihandle function
![Page 35: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/35.jpg)
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
![Page 36: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/36.jpg)
36
Programming the GUI
![Page 37: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/37.jpg)
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
![Page 38: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/38.jpg)
38
The piece of code or function that executes in response to events on the controls are called “callbacks”
Callbacks
![Page 39: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/39.jpg)
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
![Page 40: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/40.jpg)
40
![Page 41: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/41.jpg)
41
![Page 42: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/42.jpg)
42
Start writing the code after the comments ,
![Page 43: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/43.jpg)
43
![Page 44: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/44.jpg)
44
Variable name = get( handles.controltag , property)
str1 = get(handles.ed1,'string');
Syntax of “get” function
![Page 45: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/45.jpg)
45
set( handles.controltag, property, propertyvalue/ variable name)
set(handles.ed2,'string',str2);
Syntax of “set” function
![Page 46: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/46.jpg)
46
Execute the GUI
![Page 47: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/47.jpg)
47
Hands – on GUI Development Exercises
![Page 48: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/48.jpg)
48
Identity matrix image GUI
![Page 49: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/49.jpg)
49
Temperature conversion GUI
![Page 50: MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP](https://reader038.vdocument.in/reader038/viewer/2022103016/554a5a53b4c9054b328b4eee/html5/thumbnails/50.jpg)
50
Character count GUI