MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP

1,629 views

Published on

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.

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,629
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
203
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

MATLAB: GRAPHICAL USER INTERFACE CPD WORKSHOP

  1. 1. Engr. Sofia Yousuf (B.E. Electronic, NED)
  2. 2. Flow of Presentation  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
  3. 3. GUI Design and MATLAB 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
  4. 4. Introduction to MATLAB GUIDE Tool
  5. 5. GUIDE GUIDE stands for “Graphical User Interface Development Environment”  This tool is used for the “rapid” development of Graphical User Interfaces
  6. 6. STARTING GUIDE There are several ways to launch “GUIDE” within MATLAB  From MATLAB toolbar click the icon :
  7. 7. STARTING GUIDE (cont…) 2) “GUIDE” can also be invoked from the command window by typing “guide” at the command prompt :
  8. 8. 3) From the MATLAB start button :
  9. 9. GUIDE WINDOW
  10. 10. STEPS OF GUI DESIGN IN GUIDE There are two steps for designing GUIs in “GUIDE”  Laying out the GUI in Layout editor  Writing “callbacks” for GUI elements/controls
  11. 11. GUIDE LAYOUT EDITOR
  12. 12. GUI CONTROLS
  13. 13. Using the Guide Layout Editor
  14. 14. Layout Editor 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
  15. 15. Using the Controls Palette  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
  16. 16. Using the Property Inspector  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
  17. 17. Launching the Property for a particular control 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
  18. 18. Property Inspector for the first static-text box label control
  19. 19. Changing Properties of a Control 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
  20. 20. The Control in the layout Editor , will look like this :
  21. 21. Using the same methodology , change the string property of other controls in the GUI so that the GUI look as in the following figure:
  22. 22. Setting the “Tag” Property  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
  23. 23. Save the GUI
  24. 24. Generation of Code for the GUI 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 :
  25. 25. Running the GUI Click this icon to run GUI
  26. 26. Add the folder to the MATLAB path
  27. 27. GUI in the Run Mode
  28. 28. Not a Working GUI !! 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
  29. 29. Introduction to object handles 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
  30. 30. Example 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
  31. 31. MATLAB Handles and GUI 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
  32. 32. guihandle function
  33. 33. Handle Graphic functions used in programming the controls in a GUI 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 1) Set : Used to set the property of a particular control in a GUI
  34. 34. Programming the GUI
  35. 35. Event Driven Programming 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
  36. 36. Callbacks  The piece of code or function that executes in response to events on the controls are called “callbacks”
  37. 37. Writing Callback for pushbutton To develop the callback function for the push-button “Calculate” , right click the control to open the context menu , then select view callbacks --------> callback
  38. 38.  Start writing the code after the comments ,
  39. 39. Syntax of “get” function Variable name = get( handles.controltag , property) str1 = get(handles.ed1,'string');
  40. 40. Syntax of “set” function set( handles.controltag, property, propertyvalue/ variable name) set(handles.ed2,'string',str2);
  41. 41. Execute the GUI
  42. 42. Hands – on GUI Development Exercises
  43. 43. Identity matrix image GUI
  44. 44. Temperature conversion GUI
  45. 45. Character count GUI

×