1 / 26

Scientific Programming Using MATLAB, Fall 2011-2012

Scientific Programming Using MATLAB, Fall 2011-2012. TIRGUL #10: GUI. GUI = Graphical User Interface A user interface that allows users to interact with programs in more ways than typing (Wikipedia). GUI - example.

maina
Download Presentation

Scientific Programming Using MATLAB, Fall 2011-2012

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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!’

More Related