programming a gui hanan sedaghat pisheh. for calling gui, we need a function with no inputs or...

87
Programming a GUI Hanan sedaghat pisheh

Upload: jacob-stewart

Post on 26-Dec-2015

221 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Programming a GUI

Hanan sedaghat pisheh

Page 2: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

For calling GUI, we need a function with no inputs or outputs

FirstWe create a m.filem file has the same name as the function

Page 3: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Creating the FunctionCreating the Function

Make sure the function name is the same as the m file’s.

No input and No output

Page 4: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

You can use F5 or play You can use F5 or play buttton to run your rogrambuttton to run your rogram

Write figure in your function and run it.

Page 5: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Setting Figure PropertiesSetting Figure Properties

Syntax for setting figure properties is:

figure('PropertyName',propertyvalue,…)

Page 6: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Some Figure PropertiesSome Figure Properties

PropertyName PropertyValue Example

‘name’ string ‘Example’

‘MenuBar’ ‘none’

{‘figure’}‘none’

‘NumberTitle’ {‘on’}‘off’

‘on’

‘color’ [R, G, B] [0.5, 0.9, 0.7]

‘units’ {‘pixels’}‘normalized’

‘inches’

‘centimeters’

‘points’

‘characters’

‘inches’

‘position’ [x, y, w, l] [2, 3, 2, 1]

Page 7: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ColorColor

vector value for [R, G, B], where each vector element takes a value in the range [0, 1].

Examples:[0, 1, 0] = GREEN[1, 1, 0] = YELLOW[1, 1, 1] = WHITE[0.5 0.5 0.5] = GRAY[0.5 0.2 0.75] = PURPLE

Page 8: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 9: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

PositionPosition

Takes the vector value [x, y, w, l]

Each element is a value in the units specified by the figure property ‘units’

x- Distance from left side of the screen y- Distance from bottom side of the screen w- Width of figure (horizontally) l- Length of figure (vertically)

Page 10: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

UnitsUnits

Safest bet is to use the property value ‘normalized’.

With ‘normalized’ chosen, each element is relative to the screen and takes the value in the range of [0, 1].

[1, 1]

[0, 0]

Page 11: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

0.45

0.25

0.45

0.45

Page 12: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

RANDOM FUNCTIONRANDOM FUNCTION

Creates a random number in the range [0, 1].

Can be used in [R, G, B] vector or even [x, y, w, l] vector

Page 13: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 14: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

UICONTROLUICONTROL

Creates edit boxes, text boxes, pushbuttons, sliders, popup menus and more.

Syntax:Uicontrol(‘propertyName’,property

value)

Page 15: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

UICONTROL Property: UICONTROL Property: ‘‘StyleStyle’’‘style’ property specifies the

UICONTROL type and can have one of the following as its value:

1-pushbutton 7- slider2- toggle button 8- frame3- radio button 9-listbox4-checkbox 10- pop up menu5-edit6-text

Page 16: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

UICONTROL Property: UICONTROL Property: PositionPosition‘position’ behaves similarly to the

FIGURE property, only here the position is taken relative to the figure window. Likewise, ‘units’ is treated in the same vein.

[0,0]

Page 17: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 18: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 19: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

UICONTROL PropertiesUICONTROL PropertiesPropertyNa

mePropertyV

alueExample Explanation

‘string’ string ‘Enter Number’

Writes string in UICONTROL

‘foregroundcolor’

[R, G, B] [0, 0, 0] Font colour

‘backgroundcolor’

[R, G, B] [1, 1, 1] UICONTROL colour

‘visible’ {‘on’}‘off’

‘off’ Sets UICONTROL to visible/invisible

‘callback’ String or function handle

@myfunc1 Execute specified function on UICONTROL interaction

Page 20: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Another uicontrolAnother uicontrol

Page 21: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

We need to give handles for We need to give handles for objects so we could reference them objects so we could reference them later.later.

important Commandimportant CommandGet and set command are going to use

alot.

Syntax:get(handle,’propertName’)

Page 22: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ExamplesExamples

Page 23: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Imagine we want to use Imagine we want to use the color of figure for the the color of figure for the color of the text color of the text backgroundbackground

So we should get the color of the created figure (with handle “f”)

Page 24: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 25: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 26: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 27: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

SET CommandSET Command

Gives pre-existing objects new values for properties.

Syntax:set(handle,’propertyName’,propertyv

alue)

Lets change background color of first text box from green to random.

Page 28: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 29: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

What if we don’t want a dark background but we still want random one ?

Remember: higher values brighter colors

Page 30: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ANSWER:ANSWER:

rand*0.5+0.5

gives us values in the range [0.5 1].

Page 31: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 32: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 33: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

PushbuttonPushbutton

Page 34: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Pushbutton CallbackPushbutton Callback

pushbutton has the ‘callback’ property name with the property value “@DO1”.

This means that whenever the user interacts with the UICONTROL (in our case push the pushbutton), we will execute the function “DO1”.

Page 35: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

““vararginvarargin””stand for variable stand for variable argumentsargumentsThis is due to the fact that the This is due to the fact that the function has no inputs to it.function has no inputs to it.

Page 36: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 37: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Lets try this one :Lets try this one :

Add the number in the edit box with 5 and displayed on the text box1

Remember:1-for convert string to numerical value, weuse the command STR2NUM2-use string in set command

Page 38: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 39: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 40: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

PopupmenuPopupmenu

list of possibilities which user can choose from them.

Page 41: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 42: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Lets try this one:Lets try this one:

we want to have a popupmenu string and we want the user to choose between squaring and cubing the value in the edit box.

Thus when the pushbutton is pressed, the popupmenu value is checked and based on it, the operation performed will be different.

Page 43: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 44: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 45: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

What do you think?What do you think?

Assume we want to have same example as before but this time in addition of pushing button we want an update when user changes the popupmenu

Page 46: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

This means we should give the

popupmenu a callback function

which is the same as pushbutton

callback function.

Page 47: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 48: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ListboxListbox

Its function is very similar to the popupmenu.

Page 49: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 50: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 51: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 52: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

WELCOME TO second SESSION

Page 53: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

LETS HAVE QUICK REVIEWLETS HAVE QUICK REVIEW

Page 54: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 55: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

SliderSliderImportant slider properties include MIN, MAX, VALUE and SLIDERSTEP

properties.

MIN and MAX properties take the values of the minimum and maximum of the slider, respectively.

SLIDERSTEP is a two element vector that controls how much the slider VALUE changes with each click.

The first value of SLIDERSTEP controls how much the slider moves when one of the arrows on its far sides is clicked.

The second element governs the change of slider value when clicking on an empty space in the slider itself.

Both SLIDERSTEP element are scaled to the MIN to MAX scale, meaning they are to be in the range

[0, 1].

Page 56: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 57: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Using the slider to its full Using the slider to its full potentialpotentialWhat we want to do is make the slider control

the number to be inputted.To do this, we give the slider a callback.

When interacting with the slider, its value will be placed in the edit box.

Page 58: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 59: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 60: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Or using another function to Or using another function to squre it:squre it:

Page 61: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 62: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

What if we want the edit box to control the slider?

Page 63: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Just like any other UICONTROL, the edit box can be given a callback as well.

In the edit box callback, we change the value of the slider accordingly

Page 64: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 65: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 66: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

What do you think?What do you think?

Remember how we have set the MAX property of the SLIDER to 10?

Well what if this value is exceeded in the edit box, what should happen?

Page 67: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 68: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

If the value to be set in the slider is higher than its MAX property or lower than it MIN property, then the SLIDER wouldn’t be created.

A solution to this problem is to create an error dialog box whenever this happens, and then proceed to reset the slider.

Page 69: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ERRORDLG FunctionERRORDLG FunctionThe function ERRORDLG produces an

error dialog box with two input parameters.

The second input is the box title, while the first is the error message itself.

Syntax:

errordlg(title,message)

Page 70: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

ExampleExample

Page 71: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 72: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Checkbox UICONTROLCheckbox UICONTROLThe checkbox UICONTROL is similar to

the listbox and popupmenu in which it has a defining VALUE property.

The value for each checkbox can either be “1” (i.e. checked) or “0”.

Another handy property is the ‘string’ property.

Page 73: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 74: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 75: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

RadiobuttonRadiobutton

The radiobutton is very similar to the checkbox.

You can create a radiobutton group. That way, only one of the buttons in the group can be selected “on” (i.e. has the value of “1”)

Page 76: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 77: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 78: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Events

• activating the key board

>> a = waitforbuttonpress

In response, Matlab displays a figure window.

when you place the cursor inside the window and press down the mouse, the variable is set to 0 and the window is minimized.

instead, if you press a key, a is set to 1, and you can also extract that key using

>> get(gcf, ‘CurrentChar’)

Page 79: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 80: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Menus and other choices

items = {‘Car’, ‘Truck’, ‘Motorcycle’, ‘delete’, ‘QUIT’};

menu (‘Next vehicle:’, items)

Clicking on car returns 1, truck 2 etc.

QUIT closes the menu.

Page 81: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 82: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 83: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

questdlg(‘Does this make sense?’, ‘A question for you’)

generates the following dialog box:

Clicking on Yes (No) generates a string ‘Yes’ (‘No’).

Page 84: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Text Box inputs

Here is a way to create a text box:

Suppose the user enters the information as follows:

Then, a becomes:

a =

'Joe' '1/1/2010''8'5''

Page 85: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Input from mouse

You can use ginput function to get the position of mouse.

Page 86: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name
Page 87: Programming a GUI Hanan sedaghat pisheh. For calling GUI, we need a function with no inputs or outputs First We create a m.file m file has the same name

Refrences:Refrences:

Husam Aldahiyat ‘s power pointDr. ravikumar ‘s power points