To days Outline

1. To days Outline • Graphical User Interface (GUI) • Exercise on this days topics Lecture 6

2. Graphical User Interface (GUI) • Can make programs easier to use by providing them with: • Pushbuttons • List boxes • Sliders • Menus • Etc Lecture 6

3. Graphical User Interface (GUI) • The GUI should behave in an understandable and predictable manner. • GUI’s are event driven • A event could be a mouse click or a key press. Lecture 6

4. Graphical User Interface (GUI) • Three principal elements required to create a MATLAB GUI: • Components. Each item in a GUI is a graphical component. • Controls: • Pushbuttons, edit boxes, sliders etc. • Static elements: • Frames and text strings • Menus • Axes Lecture 6

5. Graphical User Interface (GUI) • Figures: • The components must be within a figure window. • Callbacks: • The GUI must perform some kind of action if a user clicks the mouse on a button or the keyboard. (event) • The code executed in response to an event is known as a callback. • There must be a callback to each graphical component on the GUI. Lecture 6

6. Graphical User Interface (GUI) Lecture 6

7. Graphical User Interface (GUI) • The basic steps to create a MATLAB GUI • Decide what elements are required and what function of each element. Draw a rough layout on paper. • Use the MATLAB tool: Graphical user interface development tool, guide. To layout all components on a figure. • Use a MATALB tool called: Property Inspector to set a name (a tag), color etc. Lecture 6

8. Graphical User Interface (GUI) • Save the figure to a file. When the figure is saved, two files will be created on the disk with the same name but with different extension. • filename.fig and filename.m • The fig contains the created GUI. • The m-file contains the code to load the figure and skeleton callbacks for each GUI element. • Write code to implement the behavior associated with each callback function Lecture 6

9. Graphical User Interface (GUI) • GUIDE Lecture 6

10. Graphical User Interface (GUI) • Property inspector • Property names and corresponding property values. • These values can be set in the property inspector. • When the program is running we can still change these values by using the set command. • …and view the values by using the get command Lecture 6

11. Graphical User Interface (GUI) Lecture 6

12. Graphical User Interface (GUI) • Pushbutton • Create a GUI with one pushbutton and a text field. • The program shall count the number of times the user clicks on the button. • Display the number of clicks in the text field. Lecture 6

13. Graphical User Interface (GUI) • In the GUIDE we start by creating a pushbutton. • In the property inspector: String: ClickButton Tag: ClickButton • We must also create a text field. • In the property inspector: String: Number of clicks = 0 Tag: Clicks • We save the GUI as Pbutton.fig • This is our figure that we have created in the GUIDE. • MATLAB will automatically create an m-file: • Pbutton.m • This file contains skeleton callback functions to the graphical objects. Lecture 6

14. Graphical User Interface (GUI) • The callback function will have the same name as the tag. • function tag_Callback(hObject, eventdata, handles) • All callback functions have handles to all graphical object as an input argument. • handles is a structure with all graphical handles. • We can access all objects from a callback function Lecture 6

15. Graphical User Interface (GUI) • Toggle buttons • Every time a user clicks on it a callback is generated. • Two states • On = 1 • Off = 0 • Val=get(handles.togglebutton,’Value’) • Radio buttons/Check boxes • Every time a user clicks on it a callback is generated. • Two states • On = 1 • Off = 0 • Val=get(handles. radiobutton,’Value’) Lecture 6

16. Graphical User Interface (GUI) • Text fields • Graphical object that displays a text string • Text fields do not create callbacks. • Can be changed in other callback functions by using: • Set(handles.text,’String’,str) • Edit boxes • Allows a user to enter a text string • Generates a callback when the user presses the Enter Key • sentence=get(handles.edit,'String'); Lecture 6

17. Graphical User Interface (GUI) Example: • Let a user write a sentence in an edit box. • Rewrite the sentence backwards in a text field Lecture 6

18. Graphical User Interface (GUI) • Frames • Used for drawing boxes around logically related objects • Frames do not generate callbacks Lecture 6

19. Graphical User Interface (GUI) • Popup Menus • Allows a user to select one of a mutually exclusive list of options • The list of options is specified by a cell array of strings Example: • Create a popup menu with three options. • Display the users choice in a text field Lecture 6

20. Graphical User Interface (GUI) • List boxes • Functionality as popup menus • The difference between them is that a user can choose more then one line. • To enable multiple line choices set the max-min difference greater then 1 in the property editor. Lecture 6

21. Graphical User Interface (GUI) • Sliders • Allows users to select values from a continues range. • Generate callbacks Example: • Construct a GUI with a slider. • Display actual value in a text field. Lecture 6

22. Graphical User Interface (GUI) • Dialog boxes • A special type of figure • Used to display information or to get information from the user. • Errordlg • Helpdlg • Inputdlg • Etc Lecture 6

23. Graphical User Interface (GUI) • Menus • Use the menu editor in GUIDE • Menus generate callbacks Lecture 6

24. Exercises on this days topics • Create a GUI that plots the water level in the water tanks. • We will use the differential equation from the tank process. • Create a GUI with: • A start button. • Axes that are plotting the levels • Check boxes so that the user could chose which tank he/she wants to see. • Add more features if you like. Lecture 6

25. Exercises on this days topics function xprim=TankODE(t,x) A=2734e-6; a=7e-6; km=2.7e-6; g=9.82; alfa=a/A; beta=km/A; xprim = [(beta*5-alfa*sqrt(x(1)*2*g)) alfa*sqrt(x(1)*2*g)-alfa*sqrt(x(2)*2*g)]; Return To solve the equation [time,x]=ode45(@TankODE,[0 500],[0 0]); Lecture 6