gui in matlab - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/experiment2.pdf · how...
TRANSCRIPT
![Page 1: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/1.jpg)
GUI in MATLAB
Eng. Banan Ahmad Allaqta
IUGGraphical User Interface
![Page 2: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/2.jpg)
What is GUI ?
A graphical user interface (GUI) is a graphical displayin one or more windows containing controls, calledcomponents, that enable a user to perform interactivetasks. The user of the GUI does not have to create ascript or type commands at the command line toaccomplish the tasks. Unlike coding programs toaccomplish tasks, the user of a GUI need notunderstand the details of how the tasks are performed.
G IU
![Page 3: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/3.jpg)
How does a GUI work ?
Each control, and the GUI itself, has one or more user-written routines (executable MATLAB code)known ascallbacks, named for the fact that they "call back" toMATLAB to ask it to do things. The execution of eachcallback is triggered by a particular user action such aspressing a screen button, clicking a mouse button,selecting a menu item, typing a string or a numericvalue, or passing the cursor over a component. TheGUI then responds to these events.
G IU
![Page 4: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/4.jpg)
What is callback
A callback is a function that you write and associatewith a specific GUI component or with the GUI figure.It controls GUI or component behavior by performingsome action in response to an event for itscomponent. This kind of programming is often calledevent-driven programming. When an event occurs fora component, MATLAB invokes the component’scallback that is triggered by that event.
G IU
![Page 5: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/5.jpg)
GUIDE files
GUIDE stores the GUI in two files:
• A FIG-file, with extension .fig, that contains a complete description of the GUI layout and the GUI components, such as push buttons, axes, panels, menus, and so on. The FIG-file is a binary file and you cannot modify it except by changing the layout in GUIDE.
• An M-file, with extension .m, that initially contains initialization code and templates for some callbacks that are needed to control GUI behavior.
G IU
![Page 6: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/6.jpg)
Ways to build MATLAB GUIs
You can build MATLAB GUIs in two ways:
1. Use GUIDE (GUI Development Environment), an interactive GUI construction kit.
2. Create code files that generate GUIs as functions or scripts (programmatic GUI construction).
G IU
![Page 7: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/7.jpg)
Starting GUIDE
There are many ways to start GUIDE. You can start GUIDE from the:
1. Command line by typing guide
2. MATLAB Home menu by
selecting New > GUI
G IU
![Page 8: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/8.jpg)
However you start GUIDE, it displays the GUIDE Quick Start dialog box shown in the following figure:
G IU
Select Blank GUI (default) then click OK
![Page 9: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/9.jpg)
GUIDE Tools summary
G IU
Layout area
Resize box
Componentpalette
{
Run GUIObject browserProperties inspectorM- file editor
Align objects
Toolbar editorTab order editorMenu editor
![Page 10: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/10.jpg)
Component palette
G IU
DescriptionIconComponent
.Generate an action when clickedWhen you click a push button, it appears depressed; when you release the mouse button, the push button appears raised
Push button
Sliders accept numeric input within a specified range by enabling the user to move a sliding bar, which is called a slider or thumb. Users move the slider by clicking the slider and dragging it, by clicking in the trough, or by clicking an arrow.
Slider
display a list of items and enable users to select one or more items.List box
![Page 11: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/11.jpg)
Component palette
G IU
DescriptionIconComponent
Static text controls display lines of text. Static text is typically used to label other controls, provide directions to the user, or indicate values associated with a slider. Users cannot change static text interactively.
Static text
Edit text components are fields that enable users to enter or modify text strings. Use edit text when you want text as input. Users can enter numbers but you must convert them to their numeric equivalents.
Edit text
Pop-up menus open to display a list of choices when users click the arrow.
Pop-up menu
![Page 12: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/12.jpg)
Component palette
G IU
DescriptionIconComponent
generate an action and indicate whether they are turned on or off. When you click a toggle button, it appears depressed, showing that it is on. When you release the mouse button, the toggle button remains depressed until you click it a second time. When you do so, the button returns to the raised state, showing that it is off. Use a button group to manage mutually exclusive toggle buttons.
Toggle Button
generate an action when checked and indicate their state as checked or not checked. Check boxes are useful when providing the user with a number of independent choices.
Check box
![Page 13: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/13.jpg)
Component palette
G IU
DescriptionIconComponent
Radio buttons are similar to check boxes, but radio buttons are typically mutually exclusive within a n group of related radio buttons. That is, when you select one button the previously selected button is deselected. To activate a radio button, click the mouse button on the object. The display indicates the state of the button.
Radio Button
Button groups are like panels but are used to manage exclusive selection behavior for radio buttons and toggle buttons.
Button group
![Page 14: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/14.jpg)
Component palette
G IU
DescriptionIconComponent
Axes enable your GUI to display graphics such as graphs and images.
Axes
Panels arrange GUI components into groups. By visually grouping related controls, panels can make the user interface easier to understand. A panel can have a title and various borders. Panel children can be user interface controls and axes as well as button groups and other panels. The position of each component within a panel is interpreted relative to the panel. If you move the panel, its children move with it and maintain their positions on the panel.
Panel
![Page 15: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/15.jpg)
Example #1: Hello, program
G IU
Toggle off Toggle on
![Page 16: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/16.jpg)
Example #1: Hello, program
G IU
The welcome button code:
![Page 17: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/17.jpg)
Example #2: Sum & Average
G IU
![Page 18: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/18.jpg)
Example #2: Sum and Average
G IU
The calculate button code:
![Page 19: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/19.jpg)
Example #3: Simple calculator
G IU
![Page 20: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/20.jpg)
Example #3: Simple calculator
G IU
The START button code:
The image code:
The return button code:
![Page 21: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/21.jpg)
Example #3: Simple calculator
G IU
The calculate code:
![Page 22: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/22.jpg)
Example #4: Shift & Scale
G IU
![Page 23: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/23.jpg)
Example #4: Shift & Scale
G IU
The sliders codes:
![Page 24: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/24.jpg)
Example #4: Shift & Scale
G IU
The plot button code:
![Page 25: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/25.jpg)
How to Create Executable (.exe) filein MTLAB
G IU
Bounce
![Page 26: GUI in MATLAB - site.iugaza.edu.pssite.iugaza.edu.ps/blaqta/files/2017/01/Experiment2.pdf · How does a GUI work ? Each control, and the GUI itself, has one or more user-written routines](https://reader036.vdocuments.mx/reader036/viewer/2022062912/5d18951b88c99313688df0ed/html5/thumbnails/26.jpg)
Be free to ask any question
G IU