Scientific Programming Using MATLAB, Fall 2011-2012

1. Scientific Programming Using MATLAB, Fall 2011-2012 TIRGUL #10: GUI

2. GUI = Graphical User Interface • A user interface that allows users to interact with programs in more ways than typing (Wikipedia)

3. GUI - example • This GUI plots a distribution of certain size, and divides the data into a given number of bins.

4. Creating a GUI • It’s a sequential, 3-step process • Planning and designing • Laying out the GUI components • Programming the GUI

5. Planning and designing • Planning: • What does the GUI do? • Who will be the users? • How will they use the program?  Use cases • Designing: • Draw your vision of the program.

6. Use cases • Use case - a description of a program’s behavior as it responds to a request that originates from the user (Wikipedia). • When designing a GUI, we need to state all the possible use-cases.

7. Example - use cases • What are the use cases in this program?

8. Laying out the GUI components • MATLAB has a GUI to help create GUIs – ‘guide’ • GUIDE = Graphical User Interface Development Environment • Type ‘guide’ in the command to open it • Main components: • Action: push button, toggle button • Choice: radio button, check box, pop-up menu, listbox, slider • User input: edit text • Display: static text • Grouping: panel, button-group • Display graphics: axes • All kinds of other stuff: ActiveX Control

9. Example: empty GUI

10. Design tips • Interface should be nice, logical and easily understood by the user • Use: • Alignment tool • Static text • Panels – to encapsulate relevant objects

11. GUI object properties • Access the properties and their values using the property editor • Double click the object • The properties control all aspects of our object. • 3 particularly useful properties: • ‘String’ – the text that appears on the object • ‘Tag’ – an textual identifier for this object • It’s recommended to give your own meaningful tags, for easy recognition while programming • ‘Value’ – the state of the object. Usually for “choice objects”.

12. Push button / toggle button • Push-button: does something when pressed. “Action button” • Toggle-button: same, only stays down after pressed and needs to be regenerated. • Example: “save now” button when composing mail in gmail. Its regeneration depends on whether we edited the email some more or not. • The property “value” determines if it’s pressed (1) or not (0)

13. Choice objects • Used when the user needs to choose between options. • Binary options: • Check box • Radio button – mutually exclusive • Choices are specified in the ‘string’ property. • ‘value’ property says if the user chose (1) or not (0) • Several options: • Pop-up menu • Listbox • Choices are specified in the ‘string’ property. • ‘value’ property holds the index of the choice the user made

14. Edit text • Gets user input as a string • What the user typed is stored at the ‘string’ property • str2num is useful if the input needs to be numeric

15. Example: plotMyDistribution.fig

16. GUI components are UI-control objects root figure axes UI-control UI-menu UI-contextmenu line light image patch surface rectangle text

17. GUI object handles • All the GUI objects have a handle associated with them • The handles are stored in a structure, called “handles”. • The fieldnames of this structure are the tags, defined for the different objects in the property editor. • Example: handles.myPush  gets handle for the push-button with the tag ‘myPush’

18. Programming the GUI • Saving the FIG-file generates an M-file containing code that initializes and launches the GUI. • The M-file will have the same name as the FIG-file. • Programming the GUI will take place inside this m-file.

19. Callbacks • Callbacks – functions which perform the required action when a component is activated • Every element in the GUI has a callback • The core of our GUI programming will usually take place in the callbacks of the “action objects” – push-buttons or toggle-buttons.

20. A typical callback • Get the values of choice objects, to determine the use-case • Get/define all other values needed (e.g. user input) • Perform actions on variables carrying those values • Setting the relevant object properties

21. Opening function • The first function in every GUI is the opening function. • (Called guiName_OpeningFcn) • This function: • Defines the output of the GUI as its handle • Using this line: handles.output = hObject; • Is usually used to store global data, i.e. data that is used throughout the program. • Example: # of operations that the user performed

22. Global data • We define it by adding a nested structure in the ‘handles’ structure, and adding fields to that structure that match the data. • Example: handles.myData.numOperations = 0; • This is done in the opening function • After defining the structure ‘myData’, we need to update the handle structure. This is done with the command guidata. • Example: guidata(hObject, handles);

23. Using axes in the GUI • axes(axesHandle) - make the axes with the handle axesHandle, the current axes. • Useful when there’s more than one axes in the GUI.

24. Example: plotMyDistribution.m

25. Additional information • GUI tutorial in the course website • A chapter about GUI in the MATLAB Hebrew tutorial • Many, many others online • This is a good one: • http://blinkdagger.com/matlab/matlab-gui-graphical-user-interface-tutorial-for-beginners/

26. Practice • Design and implement a GUI called ‘dispSineCosine’ • In this GUI, the user: • Inputs a frequency • Chooses sine / cosine • The GUI should plot the resulting function in axes when the user presses a push-button with the text ‘GO!’