GUI development with Matlab: GUI Front Panel Components 1 GUI front panel components In this...

1

GUI development with Matlab: GUI Front Panel Components

GUI front panel components

In this section, we will look at

- GUI front panel components

- Programming the components

2


Classes of GUI components

1. Analog input

2. Discrete input

3. Display output

4. Groups

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


Discrete input

A discrete input component receives user-defined choices that are discrete (clear cut choices)

5


Discrete input

Discrete input components

- Radio button

- Checkbox

- Popup menu

- Listbox

- Push button

- Toggle button

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


Groups

A groups component is used to put several components together as ‘one package’

GUI components in this class

- Panel

- Button group

8


Example 1

Create a GUI that says ‘Hello’ when you press a Push button.

9


Example 1 (solution)

- Start GUIDE

- Drag and drop a Push Button to the front panel

10



11



- Double click on the Push Button to change its properties (String and Tag)

12



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



- You’ve finished designing the front panel.

- Now program the Callback (in an mfile).

14



Press this to open the ‘mfile editor’ and program the Callback.

PS – be prepared to give it a filename to save

15



- 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



This is the command that you have typed

17



- Now you’re ready to go!

- Execute the GUI

Press to execute

18



- It will appear as a Figure.

19



- The result

Displays ‘Hello’ as commanded

20



- The result

Displays ‘Hello’ as commanded

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


Edit Text

A component that allows the user to enter text – string or number.

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


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);


Another variable that you can call anything.

25


To pass the variable K for processing (to another Callback), type

>>handles.K=K;

>>guidata(hObject,handles);


Another variable. But must be in the format ‘handles.anyname’

Standard command line used to ‘save’ all handles information.

26


Slider

A component that allows the user to select a value from the slider, between the pre-specified minimum and maximum.

27


Slider

The maximum and minimum values of the slider can be set in the Property Inspector.

28


>>K=get(hObject,'value');

>>handles.K=K;


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


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



Radio button (Callback)

‘value’ will be equal to 1 if the user selects the radio button. Otherwise it will be 0.

31


Checkbox

Identical to the Radiobutton, except in a different form.

32



Checkbox (Callback)

‘value’ will be equal to 1 if the user selects the checkbox. Otherwise it will be 0.

33


Pop-up menu

A pop-up menu, when clicked, displays a list of options for the user to choose from.

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


Pop-up menu

To generate the list of options (cont.)

3. Type in the options, each separated by ‘Enter’

36



Pop-up menu (Callback)

‘value’ will indicate the index of the choice made.Example: If the 2nd choice is made, then ‘value’=2.

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


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


Toggle button

Gives a state when pressed.

40



Toggle button (Callback)

‘value’ will be equal to 1 if the toggle button is pressed. Otherwise it will be 0.

41


Static text

Allows you to type text on your GUI.

Also allows you to output text depending on the user’s actions.

42


Static text

No Callback generated for Static Text.

To output ‘user-dependent’ text, type

>>set(handles.StaticText,'string',‘Your text’);

Standard command

Standard command

The Tag of the Static Text (you assigned). Format is handles.Tag

Text to output

43


Axes

Allows the user to plot graphs

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


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



In the Listbox Callback>>K=get(hObject,'value');

>>K=handles.K;


Then in the Pushbutton Callback>>K=handles.K;


To send data out

Retrieve data

47



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



If the component is not activated, the default returned value will be 1

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



51



Now let’s look at how to program the Callbacks

It can all be done within the Push Button Callback

52



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



Do the same for the

- Upper bound

- Interval

- Function entered by the user (but no need to convert to number)

54



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



>>1+1

>>‘1+1’

>> eval(‘1+1’)

>> x=3; eval(‘x+4’)

This will give a number 2

This will give a number 2

This will still give a string ‘1+1’

This will give a number 7s

56



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



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



>>switch linestyle>> case 1>> set(hline,'linestyle','-');>> case 2>> set(hline,'linestyle',':');>> case 3>> set(hline,'linestyle','--');>>end

59



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



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


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



Tag – Edtxt_height

Tag – Edtxt_width

Tag – Edtxt_depth

Tag – Pb_calculate

Tag – Sttxt_result

63



In the Edtxt_height Callback>>height=get(hObject,'String');

>>height_num=str2double(height);

>>handles.height_num=height_num;

>>guidata(hObject, handles);

64



In the Edtxt_width Callback>>width=get(hObject,'String');

>>width_num=str2double(width);

>>handles.width_num=width_num;


65



In the Edtxt_depth Callback>>depth=get(hObject,'String');

>>depth_num=str2double(depth);

>>handles.depth_num=depth_num;


66



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


Conclusion

• Looked at the GUI front-panel buttons• Looked at how to program them• 2 examples for practice

GUI development with Matlab: GUI Front Panel Components 1 GUI front panel components In this...

Documents

Transcript of GUI development with Matlab: GUI Front Panel Components 1 GUI front panel components In this...