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

transcript

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

Classes of GUI components

1. Analog input

2. Discrete input

3. Display output

4. Groups

Analog input

An analog input component receives user-defined choices that are analog

The GUI components in this class are

- Edit text

- Slider

Discrete input

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

Discrete input

Discrete input components

- Radio button

- Checkbox

- Popup menu

- Listbox

- Push button

- Toggle button

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

Groups

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

GUI components in this class

- Panel

- Button group

Example 1

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

Example 1 (solution)

- Start GUIDE

- Drag and drop a Push Button to the front panel

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

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’

- You’ve finished designing the front panel.

- Now program the Callback (in an mfile).

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

PS – be prepared to give it a filename to save

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

This is the command that you have typed

- Now you’re ready to go!

- Execute the GUI

Press to execute

- It will appear as a Figure.

- The result

Displays ‘Hello’ as commanded

- The result

Displays ‘Hello’ as commanded

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

Edit Text

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

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

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.

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.

Slider

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

Slider

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

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

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.

Radio button (Callback)

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

Checkbox

Identical to the Radiobutton, except in a different form.

Checkbox (Callback)

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

Pop-up menu

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

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

Pop-up menu

To generate the list of options (cont.)

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

Pop-up menu (Callback)

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

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

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.

Toggle button

Gives a state when pressed.

Toggle button (Callback)

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

Static text

Allows you to type text on your GUI.

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

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

Allows the user to plot graphs

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

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

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

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

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

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.

Now let’s look at how to program the Callbacks

It can all be done within the Push Button Callback

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

Do the same for the

- Upper bound

- Interval

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

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

>>hline=plot(u,y);

Data retrieved by the graph function

Giving the plotted line a name, to set properties later

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

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

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

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

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

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

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

Tag – Edtxt_height

Tag – Edtxt_width

Tag – Edtxt_depth

Tag – Pb_calculate

Tag – Sttxt_result

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

>>height_num=str2double(height);

>>handles.height_num=height_num;

>>guidata(hObject, handles);

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

>>width_num=str2double(width);

>>handles.width_num=width_num;

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

>>depth_num=str2double(depth);

>>handles.depth_num=depth_num;

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

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