1. A short intermission about function handles and cell arrays A MATLAB function may be referenced by a handle. >> sphere(100)

2. A short intermission about function handles and cell arrays A MATLAB function may be referenced by a handle. s = @sphere [XX YY ZZ] = feval(s,100)

3. Example function draw(function_handle, function_parameter) [XX YY ZZ] = feval(function_handle, function_parameter); surf_handle = surf(XX,YY,ZZ); ax = get(surf_handle,'parent'); shading(ax,'INTERP') What would be the result of: draw(s,100) ? draw(@cylinder,100) ?

4. Cell arrays are similar to normal arrays … but They use curly brackets { } They store elements of different types

5. x = {s 6} x = @sphere [6] x{1} ans = @sphere x{2} ans = 6

6. Continuing with GUI

7. Graphic Objects figure axes 2D-plot 3D-plot axis labels title GUI objects pushbutton toggle edit text menu

8. The UIcontrols are common interface controlers Help us perform specific actions or set the variables for future actions Actions and options are selected by the mouse, some UIcontrols are also editable so we can use the keyboard as well Interface controllers

9. We can create UIcontrols simply by implementing the following syntax handle_to_UI=uicontrol(‘Property Name’,’Property Value’);

10. Interface controllers UIcontrol types are defined by their ‘style’ property: Check box 'checkbox'Editable text field 'edit' Toggle button 'toggle' 'Pop-up menus 'popupmenu' Push button 'pushbuttonList box 'listbox' Radio button 'radiobutton' Static text 'text' Slider 'slider'Frame 'frame'

11. Essential properties: Callback – A string with one or more commands that is executed when the controller is activated. May be empty – ''

12. Example uicontrol('style','pushbutton','callback','close(gcf)');

13. Interface controllers are graphic objects Essential properties: Callback – A string with one or more commands that is executed when the controller is activated. May be empty - '' Recommendation – always call a function that does what you want.

14. function closeCurrentFigure(hCallingButton,... eventData) close(gcf) End uicontrol('style','pushbutton',... 'callback',{@closeCurrentFigure});

15. Interface controllers are graphic objects Essential properties: Callback – A string with one or more commands that is executed when the controller is activated. May be empty - '' Recommendation – always call a function that does what you want. Tag – a string that may be used as a unique identifier of the controller. h = findobj('Tag','1');

16. Essential properties : Units – 'pixels' (default) or 'norm' (recommended) or Position – The vector [Left-lower-corner-X Left-lower-corner-Y width height] If you want to use the 'norm' units you should declare it before the position is set.

17. Essential properties : Value – a scalar String UserData – a matrix

18. hToCheckBox = uicontrol('Style', 'checkbox',... 'Position',[20 450 120 20],... 'String','Check Box example‘,... ‘Callback’,’’) Checkboxes allow the user to turn on/off a number of independent options Note: the position is measured in pixels from the left-bottom corner of the figure Checkboxes

19. Represented by the Value property : 1 for checked 0 for unchecked >>state=get(hToCheckBox,’Value’) These values correspond to the Max and Min properties of the uicontrol which by default are 1 and 0 respectively Checkbox state

20. Example function OnOffFrame uicontrol('style', 'toggle',... 'position', [50 100 150 200],... 'backgroundColor‘, 'b',... 'foregroundColor', 'r',... 'tag', 'onOff',... 'string', 'on',... 'FontSize', 40,... 'callBack', {@onOff},... 'userData', 1);

21. function OnOffFrame uicontrol('style', 'toggle',... 'position', [50 100 150 200],... 'backgroundColor‘, 'b',... 'foregroundColor', 'r',... 'tag', 'onOff',... 'string', 'on',... 'FontSize', 40,... 'callBack', {@onOff},... 'userData', 1); Cell array A handle to the function onOff

22. function OnOffFrame uicontrol(: : :); function onOff(hCallingButton, eventData) state = get(hCallingButton,'userData'); if (state) %on set(hCallingButton,... 'string', 'off',... 'backgroundColor', 'r',... 'foregroundColor', 'b',... 'userData', 0); else set(hCallingButton,'string', 'on',... 'backgroundColor', 'b',... 'foregroundColor', 'r',... 'userData', 1); end end

23. function OnOffFrame uicontrol(: : :); function onOff(hCallingButton, eventData) state = get(hCallingButton,'userData'); if (state) %on set(hCallingButton,... 'string', 'off',... 'backgroundColor', 'r',... 'foregroundColor', 'b',... 'userData', 0); else set(hCallingButton,'string', 'on',... 'backgroundColor', 'b',... 'foregroundColor', 'r',... 'userData', 1); end end A handle to the calling controller A matrix (in this case empty)

25. Graphic objects Figure Axes

26. UI controllers pushdown button toggle button radio buttons text editor text slider

27. UI menu

28. Initialize figure, UI controllers and menu my_first_GUI – flow chart

29. Initialize figure, UI controllers and menu my_first_GUI – flow chart Activated? Perform callback yes no UI 1 wait

30. Initialize figure, UI controllers and menu my_first_GUI – flow chart Activated? Perform callback yes no UI 1 wait Activated? Perform callback yes no UI 2 wait

31. Initialize figure, UI controllers and menu my_first_GUI – flow chart Activated? Perform callback yes no UI 1 wait Activated? Perform callback yes no UI 2 wait Kill? display? Calculate and update figure yes no yes no Get parameters from UI Close figure Main program

32. function run (the drawing engine) function draw (actually draws) my_first_GUI – flow of information t C axes handles edit uicontrol C slider uicontrol speed toggle uicontrol On/off pushButton uicontrol kill uimenu figure colormap radioButton uicontrol type

33. Step I – setting the scene function my_first_gui draw_figure(600,600) end

34. Step I – setting the scene function my_first_gui draw_figure(600,600) end function draw_figure(width, height) screen_size = get(0,'screenSize'); left = screen_size(1)+5; bottom = screen_size(4)-height-40;

35. Step I – setting the scene function my_first_gui draw_figure(600,600) end function draw_figure(width, height) screen_size = get(0,'screenSize'); left = screen_size(1)+5; bottom = screen_size(4)-height-40; figure('position',[left bottom width height],... 'menuBar','none'); end

37. Step II – subplots function my_first_gui draw_figure('the_figure',600,600) main_axes = subplot(7,7,[1 2 3 4 5 6... 8 9 10 11 12 13... 15 16 17 18 19 20... 22 23 24 25 26 27... 29 30 31 32 33 34... 36 37 38 39 40 41]); small_axes = subplot(7,7,[7 14]); end function draw_figure(tag, width, height) screen_size = get(0,'screenSize'); left = screen_size(1)+5; bottom = screen_size(4)-height-40; figure('position',[left bottom width height],... 'tag', tag,... 'menuBar','none'); end

39. Toggle buttons (or switches) are best suited for choosing between options like true/false, on/off and so on Buttons

40. Step III – the on/off button uicontrol('style','toggle',... 'position',[0 10 60 30],... 'backgroundColor','b',... 'foregroundColor','r',... 'tag','onOff',... 'string','on',... 'callBack',{@onOff},... 'userData',1); on

41. Step III – the on/off button function onOff(calling_button, eventData) state = get(calling_button,'userData'); if (state) %on set(calling_button,'string','off',... 'backgroundColor','r',... 'foregroundColor','b',... 'userData',0); else set(calling_button,'string','on',... 'backgroundColor','b',... 'foregroundColor','r',... 'userData',1); end end on

42. function onOff(calling_button, eventData) state = get(calling_button,'userData'); if (state) %on set(calling_button,'string','off',... 'backgroundColor','r',... 'foregroundColor','b',... 'userData',0); else set(calling_button,'string','on',... 'backgroundColor','b',... 'foregroundColor','r',... 'userData',1); end end on

43. Push buttons are designed to launch a specific action like starting or stopping an execution, resetting the content of a form etc. Buttons

44. uicontrol('style', 'pushbutton',... 'position',[65 10 60 30],... 'backgroundColor','b',... 'foregroundColor','r',... 'tag','close',... 'string','close',... 'callBack', {@close_all},... 'userData',0); Step IV– the close button on close

45. function close_all(calling_button, eventData) set(calling_button,'userData',1); end onclose

46. function close_all(calling_button, eventData) set(calling_button,'userData',1); end onclose Why don’t we close the figure?

47. Sliders Sliders provide an easy way to gradually change values between a given range. Three ways to move the slider

48. Sliders The user has three possible way to change the position of the slider 1.Click the arrow buttons => small value changes 2.Click the trough => large value changes 3.Click and drag the slider => depends on user The default changes are 1% and 10%

49. Sliders The range of the slider is defined with the Min and Max uicontrol properties. The amount of change related to an user click is controlled with the SliderStep property which is a two element vector ([0.01 0.1] default) hToVertSlider= uicontrol('Style','slider',... 'Position',[160 10 20 120],... 'Min',10,... 'Max',20,... 'Value ',15,... 'SliderStep',[0.1 0.25],... 'Callback','') We must set a value between Min and Max

50. Sliders Given the setting from Min, Max and SliderStep the amount of change to the current Value are as follow: For an arrow click: Value = Value + SliderStep(1) * (Max – Min) 16 =15 + 0.1 * (20 - 10) For a trough click: Value = Value + SliderStep(2) * (Max – Min) 17.5 =15 + 0.25 * (20 - 10)

51. Step V– the speed slider uicontrol('style','slider',.... 'position',[130 10 450 30],... 'tag','speedSlider',... 'max',pi/2,... 'min',0.01,... 'value',pi/4);

52. Step V– the speed slider uicontrol('style','slider',.... 'position',[130 10 450 30],... 'tag','speedSlider',... 'max',pi/2,... 'min',0.01,... 'value',pi/4); What about the callback?

53. Text and editable text Static texts are commonly used to give instructions or to display other controllers values (such as sliders) …’Style’,’text’,… Static text can not execute callbacks. Editable texts gets string input from the GUI user. When the user enters the edit field and change its content, only the String property is affected. Editable text can execute callbacks

54. Step VI – the text frame uicontrol('style','text',... 'string','C',... 'tag','C_title',... 'position',[490 290 60 70],... 'backgroundColor','y'); What about the callback?

55. Step VII – the edit window uicontrol('style','edit',... 'string','1',... 'value',1,... 'tag','C',... 'position',[500 300 40 40],... 'callback', {@getC}); function getC(calling_button, eventData) s = get(calling_button,'string'); set(calling_button,'value',str2double(s)); end

56. Radio Buttons Radio buttons are similar to checkboxes but designed to specify options that are mutually exclusive like in multiple-choice questions hToRadio1 = uicontrol('Style', 'radio',... 'Position',[20 300 120 20],... 'String','Option1',... 'Callback', {@ turnOffTheOtherButtons},... 'Value',1) Selected

57. Function turnOffTheOtherButtons h = findobj('Tag','option1'); set(h,'Value',0); : Do we need a different function for each button?

58. Step VIII – the radio buttons uicontrol('style','radio',... 'string','surf',... 'callback', {@plotTypeButtons},... 'tag','plot_type',... 'position',[490 250 80 30],... 'value',1,... 'userdata',1); uicontrol('style','radio',... 'string','contour3',... 'callback', {@plotTypeButtons},... 'tag','plot_type',... 'position',[490 220 80 30],... 'value',0,... 'userdata',0);

59. Step VIII – the radio buttons function plotTypeButtons(calling_button, eventData) handles = findobj('tag','plot_type'); set(handles,'value',0); set(calling_button,'value',1); end

60. Step IX - Now lets use it function run(main_axes, small_axes) onOff = findobj('tag','onOff'); speedSlider = findobj('tag','speedSlider'); C_window = findobj('tag','C'); close_button = findobj('tag','close'); type_handels = findobj('tag','plot_type');

61. Step IX - Now lets use it function run(main_axes, small_axes) onOff = findobj('tag','onOff'); speedSlider = findobj('tag','speedSlider'); C_window = findobj('tag','C'); close_button = findobj('tag','close'); type_handles = findobj('tag','plot_type'); How does type_handles differ from the other handles?

62. kill = get(close_button,'userData'); [x y] = meshgrid(-2:0.2:2); t = 0.001; while (~kill) on = get(onOff,'userData'); C = get(C_window,'value'); speed = get(speedSlider,'value'); kill = get(close_button,'userData'); activeB = findobj(type_handels,'value',1); plotType = get(activeB,'userdata'); if (on) draw(x,y,main_axes,small_axes,t,C,plot_type); t = t + speed; if (t >= 2*pi) t = 0.0001; end pause(0.1); end

63. kill = get(close_button,'userData'); [x y] = meshgrid(-2:0.2:2); t = 0.001; while (~kill) on = get(onOff,'userData'); C = get(C_window,'value'); speed = get(speedSlider,'value'); kill = get(close_button,'userData'); activeB = findobj(type_handels,'value',1); plotType = get(activeB,'userdata'); if (on) draw(x,y,main_axes,small_axes,t,C,plot_type); t = t + speed; if (t >= 2*pi) t = 0.0001; end pause(0.1); end

64. kill = get(close_button,'userData'); [x y] = meshgrid(-2:0.2:2); t = 0.001; while (~kill) on = get(onOff,'userData'); C = get(C_window,'value'); speed = get(speedSlider,'value'); kill = get(close_button,'userData'); activeB = findobj(type_handels,'value',1); plotType = get(activeB,'userdata'); if (on) draw(x,y,main_axes,small_axes,t,C,plot_type); t = t + speed; if (t >= 2*pi) t = 0.0001; end pause(0.1); end

65. kill = get(close_button,'userData'); [x y] = meshgrid(-2:0.2:2); t = 0.001; while (~kill) on = get(onOff,'userData'); C = get(C_window,'value'); speed = get(speedSlider,'value'); kill = get(close_button,'userData'); activeB = findobj(type_handels,'value',1); plotType = get(activeB,'userdata'); if (on) draw(x,y,main_axes,small_axes,t,C,plot_type); t = t + speed; if (t >= 2*pi) t = 0.0001; end pause(0.1); end

66. kill = get(close_button,'userData'); [x y] = meshgrid(-2:0.2:2); t = 0.001; while (~kill) on = get(onOff,'userData'); C = get(C_window,'value'); speed = get(speedSlider,'value'); kill = get(close_button,'userData'); activeB = findobj(type_handels,'value',1); plotType = get(activeB,'userdata'); if (on) draw(x,y,main_axes,small_axes,t,C,plot_type); t = t + speed; if (t >= 2*pi) t = 0.0001; end pause(0.1); end fig = findobj('tag','the_figure'); close(fig); end

67. cm = uimenu('tag','colorMap','label','Color Map'); Step XI – Adding color map menu

68. cm = uimenu('tag','colorMap','label','Color Map'); uimenu(cm, 'label','jet', ‘callback',{@set_colorMap,jet}); uimenu(cm, 'label','hot', 'callback',{@set_colorMap,hot}); uimenu(cm, 'label','cool', 'callback',{@set_colorMap,cool}); Step XI – Adding color map menu function set_colorMap(calling_manu, eventData,colorMap) set(gcf,'colorMap',colorMap); parent = get(calling_manu,'parent'); all = get(parent,'children'); set(all,'checked','off'); set(calling_manu,'checked','on'); end

69. hToCheckBox = uicontrol('Style', 'checkbox',... 'Position',[20 450 120 20],... 'String','Check Box example‘,... ‘Callback’,’’) Checkboxes allow the user to turn on/off a number of independent options Note: the position is measured in pixels from the left-bottom corner of the figure Checkboxes