1. GUI development with Matlab: GUI Front Panel Components 1 GUI front panel components In this section, we will look at -GUI front panel components -Programming the components

2. GUI development with Matlab: GUI Front Panel Components 2 Classes of GUI components 1.Analog input 2.Discrete input 3.Display output 4.Groups

3. GUI development with Matlab: GUI Front Panel Components 3 Analog input An analog input component receives user- defined choices that are analog The GUI components in this class are -Edit text -Slider

4. GUI development with Matlab: GUI Front Panel Components 4 Discrete input A discrete input component receives user- defined choices that are discrete (clear cut choices)

5. GUI development with Matlab: GUI Front Panel Components 5 Discrete input Discrete input components -Radio button -Checkbox -Popup menu -Listbox -Push button -Toggle button

6. GUI development with Matlab: GUI Front Panel Components 6 Display output A display output component is used to show the result of the GUI calculation/processing The GUI components in this class are -Axes -Static text They have no Callbacks

7. GUI development with Matlab: GUI Front Panel Components 7 Groups A groups component is used to put several components together as ‘one package’ GUI components in this class -Panel -Button group

8. GUI development with Matlab: GUI Front Panel Components 8 Example 1 Create a GUI that says ‘Hello’ when you press a Push button.

9. GUI development with Matlab: GUI Front Panel Components 9 Example 1 (solution) -Start GUIDE -Drag and drop a Push Button to the front panel

10. GUI development with Matlab: GUI Front Panel Components 10 Example 1 (solution)

11. GUI development with Matlab: GUI Front Panel Components 11 Example 1 (solution) -Double click on the Push Button to change its properties (String and Tag)

12. GUI development with Matlab: GUI Front Panel Components 12 Example 1 (solution) The ‘String’ field is what will be seen by the GUI user. You can change it to e.g. ‘Say Hello’ The ‘Tag’ is the name that Matlab recognizes for this component. It is recommended that you change it to e.g. ‘PB_hello’

13. GUI development with Matlab: GUI Front Panel Components 13 Example 1 (solution) -You’ve finished designing the front panel. -Now program the Callback (in an mfile).

14. GUI development with Matlab: GUI Front Panel Components 14 Example 1 (solution) Press this to open the ‘mfile editor’ and program the Callback. PS – be prepared to give it a filename to save

15. GUI development with Matlab: GUI Front Panel Components 15 Example 1 (solution) -Now look for a function ‘PB_hello_Callback’. The mfile automatically creates a function using the name that you gave the component (PB_hello) and adds ‘Callback’ behind it. -Under the function, write the commands that you want it to execute.

16. GUI development with Matlab: GUI Front Panel Components 16 Example 1 (solution) This is the command that you have typed

17. GUI development with Matlab: GUI Front Panel Components 17 Example 1 (solution) -Now you’re ready to go! -Execute the GUI Press to execute

18. GUI development with Matlab: GUI Front Panel Components 18 Example 1 (solution) -It will appear as a Figure.

19. GUI development with Matlab: GUI Front Panel Components 19 Example 1 (solution) -The result Displays ‘Hello’ as commanded

20. GUI development with Matlab: GUI Front Panel Components 20 Example 1 (solution) -The result Displays ‘Hello’ as commanded

21. GUI development with Matlab: GUI Front Panel Components 21 You have just seen … -How to design the front panel -The use of a Tag and String -How to program a Callback -The process of creating and executing a simple GUI Now we’ll look at the how to program each GUI component, and the syntax

22. GUI development with Matlab: GUI Front Panel Components 22 Edit Text A component that allows the user to enter text – string or number.

23. GUI development with Matlab: GUI Front Panel Components 23 >>K=get(hObject,'string'); If you entered ‘abc’ into the Edit Text, then the command above will make K = ‘abc’ Edit Text (Callback) Retrieves the ‘string’ entered by user. This is a standard command. A variable. You can call it anything.

24. GUI development with Matlab: GUI Front Panel Components 24 At this point, K is a string. If the user enters a number, it will still be a string. To change it to a number, >>K_num=str2double(K); Edit Text (Callback) Another variable that you can call anything.

25. GUI development with Matlab: GUI Front Panel Components 25 To pass the variable K for processing (to another Callback), type >>handles.K=K; >>guidata(hObject,handles); Edit Text (Callback) Another variable. But must be in the format ‘handles.anyname’ Standard command line used to ‘save’ all handles information.

26. GUI development with Matlab: GUI Front Panel Components 26 Slider A component that allows the user to select a value from the slider, between the pre-specified minimum and maximum.

27. GUI development with Matlab: GUI Front Panel Components 27 Slider The maximum and minimum values of the slider can be set in the Property Inspector.

28. GUI development with Matlab: GUI Front Panel Components 28 >>K=get(hObject,'value'); >>handles.K=K; >>guidata(hObject,handles); Slider (Callback) This is a standard command. A slider will always return a numerical value, that’s why the label ‘value’. Reminder: These commands are used if you want the value of ‘K’ to be passed to other Callbacks for further processing.

29. GUI development with Matlab: GUI Front Panel Components 29 Radio button A radio button acts as an option to be chosen by the user. The user clicks on the button the make the choice.

30. GUI development with Matlab: GUI Front Panel Components 30 >>K=get(hObject,'value'); Radio button (Callback) ‘value’ will be equal to 1 if the user selects the radio button. Otherwise it will be 0.

31. GUI development with Matlab: GUI Front Panel Components 31 Checkbox Identical to the Radiobutton, except in a different form.

32. GUI development with Matlab: GUI Front Panel Components 32 >>K=get(hObject,'value'); Checkbox (Callback) ‘value’ will be equal to 1 if the user selects the checkbox. Otherwise it will be 0.

33. GUI development with Matlab: GUI Front Panel Components 33 Pop-up menu A pop-up menu, when clicked, displays a list of options for the user to choose from.

34. GUI development with Matlab: GUI Front Panel Components 34 Pop-up menu To generate the list of options for the user 1. Press this button in the ‘String’ field 2. And this window will appear

35. GUI development with Matlab: GUI Front Panel Components 35 Pop-up menu To generate the list of options (cont.) 3. Type in the options, each separated by ‘Enter’

36. GUI development with Matlab: GUI Front Panel Components 36 >>K=get(hObject,'value'); Pop-up menu (Callback) ‘value’ will indicate the index of the choice made. Example: If the 2 nd choice is made, then ‘value’=2.

37. GUI development with Matlab: GUI Front Panel Components 37 Listbox Identical to the Pop-up menu, except that the options are already visible without being clicked on. (To see options in Pop-up menu, need to click on it first).

38. GUI development with Matlab: GUI Front Panel Components 38 Pushbutton A push-button is one that will execute a series of commands when pushed. No specific Callback commands. Just type in the commands you want to execute.

39. GUI development with Matlab: GUI Front Panel Components 39 Toggle button Gives a state when pressed.

40. GUI development with Matlab: GUI Front Panel Components 40 >>K=get(hObject,'value'); Toggle button (Callback) ‘value’ will be equal to 1 if the toggle button is pressed. Otherwise it will be 0.

41. GUI development with Matlab: GUI Front Panel Components 41 Static text Allows you to type text on your GUI. Also allows you to output text depending on the user’s actions.

42. GUI development with Matlab: GUI Front Panel Components 42 Static text No Callback generated for Static Text. To output ‘user-dependent’ text, type >>set(handles.StaticText,'string',‘Your text’); Standard command The Tag of the Static Text (you assigned). Format is handles.Tag Text to output

43. GUI development with Matlab: GUI Front Panel Components 43 Axes Allows the user to plot graphs

44. GUI development with Matlab: GUI Front Panel Components 44 Axes No Callback generated for Axes. To plot a graph, type >>axes(handles.axes1); You have now referred to a specific graph. Now type whatever plotting commands you wish to. Standard command The Tag of the axes (you assigned). Format is handles.Tag

45. GUI development with Matlab: GUI Front Panel Components 45 Extra: Retrieving data You can also retrieve data from another component without that Callback sending out the data (see example on Edit Text and Slider) e.g. – you want to retrieve the data (choice) from a Listbox

46. GUI development with Matlab: GUI Front Panel Components 46 Extra: Retrieving data In the Listbox Callback >>K=get(hObject,'value'); >>K=handles.K; >>guidata(hObject,handles); Then in the Pushbutton Callback >>K=handles.K; >>guidata(hObject,handles); To send data out Retrieve data

47. GUI development with Matlab: GUI Front Panel Components 47 Extra: Retrieving data You don’t have to do that! There is an alternative! In the Pushbutton Callback >> get(handles.tag, ‘value’); The tag of the Listbox The value returned by the Listbox

48. GUI development with Matlab: GUI Front Panel Components 48 Extra: Retrieving data If the component is not activated, the default returned value will be 1

49. GUI development with Matlab: GUI Front Panel Components 49 Example 2 Create a GUI that plots the function entered by the user when the user pushes a Push Button -The user can enter the upper and lower bounds of the x-axis, and the resolution. -A pop-up menu enables the user to choose the graph colour – blue (default), red, green or yellow.

50. GUI development with Matlab: GUI Front Panel Components 50 Example 2 (solution)

51. GUI development with Matlab: GUI Front Panel Components 51 Example 2 (solution) Now let’s look at how to program the Callbacks It can all be done within the Push Button Callback

52. GUI development with Matlab: GUI Front Panel Components 52 Example 2 (solution) >>lowbound=get(handles.Edtxt_lowbound,'string'); >>lowbound_no=str2double(lowbound); Tag of the Edit Text box which enters the lower bound of the x-axis Retrieve data Converts the string to a numeric value

53. GUI development with Matlab: GUI Front Panel Components 53 Example 2 (solution) Do the same for the -Upper bound -Interval -Function entered by the user (but no need to convert to number)

54. GUI development with Matlab: GUI Front Panel Components 54 Example 2 (solution) >>for i=1:((upbound_no-lowbound_no)/interval_no)+1; >> u(i)=lowbound_no+interval_no*(i-1); >> x=u(i); >> y(i)=eval(graph_func); >>end >>hline=plot(u,y); Data retrieved by the graph function Giving the plotted line a name, to set properties later

55. GUI development with Matlab: GUI Front Panel Components 55 Example 2 (solution) >>1+1 >>‘1+1’ >> eval(‘1+1’) >> x=3; eval(‘x+4’) This will give a number 2 This will still give a string ‘1+1’ This will give a number 7s

56. GUI development with Matlab: GUI Front Panel Components 56 Example 2 (solution) >>linecolour=get(handles.Popup_colour,'value'); >>linestyle=get(handles.Listbox_style,'value'); Retrieve data on what user specified with regard to line colour and style

57. GUI development with Matlab: GUI Front Panel Components 57 Example 2 (solution) >>switch linecolour >> case 1 >> set(hline,'color','b'); >> case 2 >> set(hline,'color','r'); >> case 3 >> set(hline,'color','y'); >>end This is why we gave the line a name earlier A property field (standard command) of the line

58. GUI development with Matlab: GUI Front Panel Components 58 Example 2 (solution) >>switch linestyle >> case 1 >> set(hline,'linestyle','-'); >> case 2 >> set(hline,'linestyle',':'); >> case 3 >> set(hline,'linestyle','--'); >>end

59. GUI development with Matlab: GUI Front Panel Components 59 Example 2 (solution) >>grid_on=get(handles.Radio_grid,'value'); >>if grid_on==1 >> grid on; >>else >> grid off; >>end If the Radio button is clicked, it will return a value of 1

60. GUI development with Matlab: GUI Front Panel Components 60 Example 2 (solution) Now, test the GUI -Enter the function in terms of ‘x’ -Enter the lower bound, upper bound, and interval -Press the Plot It button -Make other modifications in terms of line colour, style and grid

61. GUI development with Matlab: GUI Front Panel Components 61 Example 3 Create a GUI with the following features -Calculates the volume of a cuboid when the user enters the height, width and depth -Outputs the result in a Static Text box

62. GUI development with Matlab: GUI Front Panel Components 62 Example 3 (solution) Tag – Edtxt_height Tag – Edtxt_width Tag – Edtxt_depth Tag – Pb_calculate Tag – Sttxt_result

63. GUI development with Matlab: GUI Front Panel Components 63 Example 3 (solution) In the Edtxt_height Callback >>height=get(hObject,'String'); >>height_num=str2double(height); >>handles.height_num=height_num; >>guidata(hObject, handles);

64. GUI development with Matlab: GUI Front Panel Components 64 Example 3 (solution) In the Edtxt_width Callback >>width=get(hObject,'String'); >>width_num=str2double(width); >>handles.width_num=width_num; >>guidata(hObject, handles);

65. GUI development with Matlab: GUI Front Panel Components 65 Example 3 (solution) In the Edtxt_depth Callback >>depth=get(hObject,'String'); >>depth_num=str2double(depth); >>handles.depth_num=depth_num; >>guidata(hObject, handles);

66. GUI development with Matlab: GUI Front Panel Components 66 Example 3 (solution) In the PB_calculate Callback >>depth_num=handles.depth_num; >>width_num=handles.width_num; >>height_num=handles.height_num; >>result=depth_num*width_num*height_num >>result_str=num2str(result) >>set(handles.Sttxt_result,'string',result_str) Convert the number to a string first before sending out to the Static Text

67. GUI development with Matlab: GUI Front Panel Components 67 Conclusion Looked at the GUI front-panel buttons Looked at how to program them 2 examples for practice