Introduction to Matlab’s Graphical User Interface (GUI)

1. Introduction to Matlab’s Graphical User Interface (GUI) • Type “guide” • “Guide” creates interface on a Figure window and code in an M-file. Some hidden code. • The M-file and the Figure window usually have the same name. • We add “objects” in the “Layout editor” and complete “Callback functions” in M-file editor.

2. Try it. • Type “guide”. • The layout window appears. • Add a slider and an edit text box. • We want the text to represent the “value” of the slider. • Right click in the slider, go down to “view callbacks”, and select “Callback”

3. Try it. • You are invited to save the untitled document and then taken to an M-file editor, with the start of you callback function already written. • Notice that the M-file has the same name as the figure.

4. Handles • The main figure has a “handle” in the Matlab environment. • Handles allow Matlab to keep track of figures and graphic objects. • Within the main figure each of our objects (the slider and the text box) also have a handle. Child objects.

5. Handles • We differentiate between or identify objects by their handle. • Matlab has functions to keep track of and list these gui handles. • Run the M-file by typing “h=<yourfunctionname>”. • It doesn’t do much yet! • Don’t confuse the Figure with the Layout editor.

6. Handles • The handle of the figure is returned in variable “h”. • Although “h” only admits to being a double, it gives us access to all the properties of the figure. get(h) returns a copy of the figure’s (object’s) properties including its children. • The “children” are the objects that we have placed on the figure: slider and edit text.

7. Handles, Try it • Type “maindetails=get(h)” • maindetails lists all the properties in the figure. • The structure includes handles to the child objects. • We can use the handles to gain access to the child objects and alter their properties.

8. Properties, get() and set() • We can retrieve a copy of the values associated with a graphic object through its handle by using S=get(h) • The structure contains all the properties of the graphic object. • However, since it is a copy we cannot change the actual information associated with the graphic object.

9. Properties, get() and set() • So in true “OO’” style we must use an access method/function to adjust parameters.. • Set(h,'PropertyName',PropertyValue) • Get(h) or Get(h, ‘PropertyName’) returns the property. • Note ‘quotes’

10. Properties, get() and set() • Alter the ‘visible’ property of the slider using the handles to the child objects of your gui. • Put it back to what it was. • You will need to get the child handles array from the main gui and use set to change the visible property.

11. Example • g=test • get(g) • cld=get(g.Children) • cld=get(g, 'Children') • set(cld(1), 'Visible', 'off') • set(cld(1), 'Visible', 'on')

12. Reference to objects • In the GUI an object’s handles are passed to the callback function in the variable hObject. • Also, the self generated code produces a list of all objects handles in the structure “handles” (see later).

13. Other callbacks • CreateFcn • DeleteFcn • ButtonDownFcn • More….

14. Guihandles() • This function returns an structure of handles of all handle in the gui. • It passes the structure to your callback function in the variable “handles” • So we can access other objects through this structure. • handles.edit1 for example gives us the handle of the edit box.

15. Write some callbacks • Write a call back to display the slider’s position in the edit box. • Do the same, but make the slider move (‘value’) when a value between 0 and 1 is entered in the edit window.

16. Properties we need • We want to display the value of the slider in the edit box. • So we need something to retrieve the value from the slider. • And we need something to give the value to the edit box.

17. Properties we need • We use slider ‘value’ • And edit text ‘string’. • Also need string conversion from num2str and str2num

18. Examples In the slider1 callback get(hObject, 'Value') set(handles.edit1, 'String', num2str(v)) In the edit1 callback • s=get(hObject, 'String') • set(handles.slider1, 'Value', str2num(s))

19. Plot picture to axis • Image(a) will send an image to the current axis • You may need • gca Get current axes • axes Set current axes

20. Lets load a picture • Place an axes on your form. • Place a button which is going to load and display a picture. • Write the callback.

21. Example • In button1 callback • im=imread('test2.bmp'); • image(im)