Difference between revisions of "GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English"
Nancyvarkey (Talk | contribs) |
|||
| Line 26: | Line 26: | ||
<ul> | <ul> | ||
<li><blockquote><p>Install '''GUI Builder Toolbox.'''</p></blockquote></li></ul> | <li><blockquote><p>Install '''GUI Builder Toolbox.'''</p></blockquote></li></ul> | ||
| − | |||
<ul> | <ul> | ||
<li><blockquote><p>About '''GUIBuilder Palette.'''</p></blockquote></li></ul> | <li><blockquote><p>About '''GUIBuilder Palette.'''</p></blockquote></li></ul> | ||
| − | |||
<ul> | <ul> | ||
<li><blockquote><p>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li> | <li><blockquote><p>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li> | ||
| Line 45: | Line 43: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>'''Windows 10 | + | <li><blockquote><p>'''Windows 10 OS''' and</p></blockquote></li> |
<li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li></ul> | <li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li></ul> | ||
| Line 80: | Line 78: | ||
What is a '''GUI Builder Toolbox?''' | What is a '''GUI Builder Toolbox?''' | ||
| − | '''GUI Builder | + | '''GUI Builder Toolbox''' in '''Scilab:''' |
<ul> | <ul> | ||
| Line 94: | Line 92: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>The | + | <li><blockquote><p>The '''toolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</p></blockquote></li> |
<li><blockquote><p>This allows the user to build the '''GUI''' with ease.</p></blockquote></li> | <li><blockquote><p>This allows the user to build the '''GUI''' with ease.</p></blockquote></li> | ||
<li><blockquote><p>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</p></blockquote></li></ul> | <li><blockquote><p>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</p></blockquote></li></ul> | ||
| Line 100: | Line 98: | ||
| | | | ||
| − | | | + | |Let’s first learn to '''install''' the '''GUI Builder toolbox. ''' |
| − | Let’s first learn to '''install''' the '''GUI Builder toolbox. ''' | + | |
This can be done in a number of ways. We will look at one of them. | This can be done in a number of ways. We will look at one of them. | ||
| Line 111: | Line 108: | ||
and press '''Enter.''' | and press '''Enter.''' | ||
| − | | | + | |Open '''Scilab.''' |
| − | Open '''Scilab.''' | + | |
In the '''Scilab console''' window, type '''atomsGui.''' | In the '''Scilab console''' window, type '''atomsGui.''' | ||
| Line 139: | Line 135: | ||
Click once on the '''GUI.''' | Click once on the '''GUI.''' | ||
| | | | ||
| − | Click once on the '''GUI''' seen on the left panel | + | Click once on the '''GUI''' seen on the left panel. |
This will show the list of '''toolboxes''' available in the '''GUI''' category. | This will show the list of '''toolboxes''' available in the '''GUI''' category. | ||
| Line 159: | Line 155: | ||
Highlight the '''version.''' | Highlight the '''version.''' | ||
| | | | ||
| − | Scroll up and notice the ''' | + | Scroll up and notice the '''version''' of the '''toolbox'''. |
| − | At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.''' | + | At the time of recording this video, the current '''version''' of the '''toolbox''' is '''4.2.1.''' |
It could be different when you are watching this tutorial at a later date. | It could be different when you are watching this tutorial at a later date. | ||
| Line 184: | Line 180: | ||
|- | |- | ||
| | | | ||
| − | Cursor on '''Scilab | + | Cursor on '''Scilab console. ''' |
Type '''guibuilder''' and | Type '''guibuilder''' and | ||
| Line 194: | Line 190: | ||
This '''command''' opens two windows. | This '''command''' opens two windows. | ||
|- | |- | ||
| − | | Cursor on '''GUIBuilder | + | | Cursor on '''GUIBuilder palette''' window and '''Graphic Window Number 1.''' |
| | | | ||
The '''GUIBuilder Palette''' window is located on the left side. | The '''GUIBuilder Palette''' window is located on the left side. | ||
| Line 243: | Line 239: | ||
click on the '''Pushbutton'''. | click on the '''Pushbutton'''. | ||
| | | | ||
| − | Let us create a '''GUI''' by placing objects in | + | Let us create a '''GUI''' by placing objects in this window. |
| − | Go to the '''GUI Builder | + | Go to the '''GUI Builder palette''' and click on the '''Pushbutton'''. |
|- | |- | ||
| | | | ||
| Line 263: | Line 259: | ||
|- | |- | ||
| Type '''h1''' in the '''Tag''' field'''.''' | | Type '''h1''' in the '''Tag''' field'''.''' | ||
| − | | I will type '''h1''' in the '''Tag''' field | + | | I will type '''h1''' in the '''Tag''' field. |
|- | |- | ||
| | | | ||
| Line 278: | Line 274: | ||
Click on '''OK.''' | Click on '''OK.''' | ||
| | | | ||
| − | The text in the '''String''' field is the display name for the object in the '''Graphic | + | The text in the '''String''' field is the display name for the object in the '''Graphic''' window. |
I will type '''Print''' in the '''String''' field and then, click on '''OK'''. | I will type '''Print''' in the '''String''' field and then, click on '''OK'''. | ||
| Line 316: | Line 312: | ||
click on '''Generate GUI code . ''' | click on '''Generate GUI code . ''' | ||
| | | | ||
| − | To generate the '''Scilab | + | To generate the '''Scilab code,''' go to the '''GUI Builder palette''' window. |
| − | Click on the '''Generate''' menu seen on the top ''' | + | Click on the '''Generate''' menu seen on the top '''menu bar'''. |
Then click on '''Generate GUI code.''' | Then click on '''Generate GUI code.''' | ||
| Line 339: | Line 335: | ||
| Cursor on '''SciNotes''' window. | | Cursor on '''SciNotes''' window. | ||
| | | | ||
| − | Immediately, the corresponding '''Scilab file''' opens | + | Immediately, the corresponding '''Scilab file''' opens. |
Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided. | Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided. | ||
| Line 359: | Line 355: | ||
highlight the '''h1_callback''' function. | highlight the '''h1_callback''' function. | ||
| | | | ||
| − | The '''callback function h1_callback''' is defined at the bottom | + | The '''callback function h1_callback''' is defined at the bottom. |
Code written within this '''function''' will get executed on pressing the '''pushbutton.''' | Code written within this '''function''' will get executed on pressing the '''pushbutton.''' | ||
| Line 374: | Line 370: | ||
Type, '''disp(“Hello World!”).''' | Type, '''disp(“Hello World!”).''' | ||
| − | This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed. | + | This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when '''executed'''. |
The '''program''' is now complete. | The '''program''' is now complete. | ||
| Line 385: | Line 381: | ||
click on '''Execute.''' | click on '''Execute.''' | ||
| − | | Click on '''Execute''' in the top ''' | + | | Click on '''Execute''' in the top '''menu bar'''. |
|- | |- | ||
| Click on '''File with echo''' | | Click on '''File with echo''' | ||
| Line 397: | Line 393: | ||
A window named '''Graphic window number 2''' opens. | A window named '''Graphic window number 2''' opens. | ||
| − | The '''pushbutton''' named '''Print''' appears in the graphic window. | + | The '''pushbutton''' named '''Print''' appears in the '''graphic''' window. |
|- | |- | ||
| | | | ||
| Line 404: | Line 400: | ||
click on '''Print.''' | click on '''Print.''' | ||
| | | | ||
| − | Next, let us test our '''GUI.''' | + | Next, let us '''test''' our '''GUI.''' |
Click on the '''Print''' '''pushbutton'''. | Click on the '''Print''' '''pushbutton'''. | ||
| − | The code gets executed. | + | The code gets '''executed'''. |
|- | |- | ||
| | | | ||
| Line 440: | Line 436: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>Installed the '''GUI Builder | + | <li><blockquote><p>Installed the '''GUI Builder Toolbox.'''</p></blockquote></li> |
| − | <li><blockquote><p>Learnt about the '''GUIBuilder | + | <li><blockquote><p>Learnt about the '''GUIBuilder palette.'''</p></blockquote></li> |
<li><blockquote><p>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li> | <li><blockquote><p>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li> | ||
<li><blockquote><p>Learnt about '''Tag''' and '''String''' for the object.</p></blockquote></li> | <li><blockquote><p>Learnt about '''Tag''' and '''String''' for the object.</p></blockquote></li> | ||
Revision as of 20:09, 8 August 2021
Title of the script: Installation of GUI Builder Toolbox
Author: Rashmi Patankar, Amandeepsingh Siddhu
Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.
| Visual Cue | Narration |
|---|---|
|
Show Slide: Title Slide |
Welcome to the Spoken Tutorial on Installation of GUI Builder Toolbox in Scilab. |
|
Show Slide: Learning objectives |
In this tutorial, we will learn to:
|
|
Show Slide: System requirement Only Narration |
To record this tutorial, I am using
The process demonstrated in this tutorial is identical in Linux OS also. Annotations are added to the tutorial if there are any differences. |
|
Show Slide: Installation Requirements |
For the installation of GUI Builder Toolbox, a working Internet connection is required. |
|
Show Slide: Pre-requisites |
To follow this tutorial:
|
|
Show Slide: What is a GUI Builder Toolbox? |
What is a GUI Builder Toolbox? GUI Builder Toolbox in Scilab:
|
|
Show Slide: Advantages of using GUI Builder Toolbox |
Now let us look at the advantages of the Toolbox.
|
| Let’s first learn to install the GUI Builder toolbox.
This can be done in a number of ways. We will look at one of them. | |
|
Cursor on Scilab console. Type atomsGui and press Enter. |
Open Scilab.
In the Scilab console window, type atomsGui. The commands are case sensitive. Hence, please retain the syntax as shown here. Press Enter. |
| Cursor on Main categories - ATOMS window. |
The Main categories - ATOMS window opens. This window has two panels. The left panel displays a list of toolbox categories. |
| Cursor on the blank right panel. |
Notice that the right panel is blank since I have not installed the toolbox. It will display the details of the toolbox after installation. |
|
Cursor on Main categories - ATOMS window. Click once on the GUI. |
Click once on the GUI seen on the left panel. This will show the list of toolboxes available in the GUI category. |
|
Cursor on Main categories - ATOMS window. Click once on GUI Builder . |
Click once on the GUI Builder. This will show the details of this toolbox on the right side of the window. |
|
Cursor on Main categories - ATOMS window. Highlight the version. |
Scroll up and notice the version of the toolbox. At the time of recording this video, the current version of the toolbox is 4.2.1. It could be different when you are watching this tutorial at a later date. |
|
Cursor on Main categories - ATOMS window, Click Install. Hover cursor over “Installation Done” message. |
Click on the Install button at the bottom of the window. If successful, the Installation Done message appears at the bottom. |
| Close and reopen Scilab. |
After this, we need to restart Scilab for the changes to take effect. Let’s close and then reopen Scilab. |
| Cursor on the Scilab console. | Notice that the GUI Builder Toolbox gets loaded upon starting Scilab. |
|
Cursor on Scilab console. Type guibuilder and Press Enter. |
Now, type guibuilder in the Scilab console, and press Enter. This command opens two windows. |
| Cursor on GUIBuilder palette window and Graphic Window Number 1. |
The GUIBuilder Palette window is located on the left side. The Graphic Window Number 1 is located on the right side. |
| Cursor on GUIBuilder Palette window, Hover cursor over the Pushbutton, Radiobutton, Checkbox, Edit, Text box . |
Let us look at the GUIBuilder Palette window. It has objects such as,
|
|
Cursor on the GUIBuilder Palette window, hover cursor over Left, Right, Up, and Down. |
On the right, the direction keys Up, Down, Left, and Right are provided. They are used to shift the selected objects in the GUI. |
|
Cursor on the GUIBuilder Palette window, hover cursor over W-, W+. Hover cursor over H-, H+. |
Below the direction keys, notice W- (W minus) and W+ (W plus) keys. They enable the user to adjust the width of the selected object. H- (H minus) and H+ (H plus) are given to adjust the height of the selected object. |
| Cursor on Graphic Window number 1. | Objects are placed in Graphic window number 1. |
|
Cursor on the GUI Builder Palette window, click on the Pushbutton. |
Let us create a GUI by placing objects in this window. Go to the GUI Builder palette and click on the Pushbutton. |
|
Cursor on Scilab Multiple Values Request window. Hover cursor over Tag. |
A window named Scilab Multiple Values Request opens. Notice the Tag field. It is a unique identifier for each GUI object. It allows you to give a name to the object. A Tag can be a number or an alphabet or its combination. Users can assign any value as a Tag. |
| Type h1 in the Tag field. | I will type h1 in the Tag field. |
|
Cursor on Scilab Multiple Values Request window, hover cursor over String. |
Below Tag, we see the String field. |
|
Cursor on Scilab Multiple Values Request window, Type Print in the String field. Click on OK. |
The text in the String field is the display name for the object in the Graphic window. I will type Print in the String field and then, click on OK. |
|
Cursor on Graphic Window number 1, click once in the middle left side. Drag the cursor to draw a line box. |
In the Graphic Window number 1, click once near the middle left side of the window. Then drag the mouse diagonally downwards to draw a rectangle. Notice a line box. The size of this can be varied by moving the cursor on the window. |
| Click again on the window. | Click again on the Graphic Window to place the pushbutton. |
|
Cursor on Graphic Window number 1, hover cursor on Print pushbutton. |
Notice that a pushbutton named Print appears on Graphic Window number 1. The Graphical User Interface is now ready. |
|
Cursor on the GUI Builder Palette window, click on Generate, click on Generate GUI code . |
To generate the Scilab code, go to the GUI Builder palette window. Click on the Generate menu seen on the top menu bar. Then click on Generate GUI code. |
|
Type printpushbuttongui >> click Save. Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.” |
I will save this file as printpushbuttongui and click on Save. |
|
Cursor on GUI Created window. Click on OK. |
A confirmation message is displayed which says, “GUI created successfully!” Click on OK. |
| Cursor on SciNotes window. |
Immediately, the corresponding Scilab file opens. Inside this file, all the properties of the figure and object are provided. |
|
Cursor on SciNotes window, highlight handles.h1, highlight the part inside uicontrol parentheses. |
handles.h1 is the handle for the pushbutton. Inside the uicontrol parentheses the properties of the pushbutton are given. |
|
Cursor on SciNotes window, highlight the h1_callback function. |
The callback function h1_callback is defined at the bottom. Code written within this function will get executed on pressing the pushbutton. |
|
Cursor on SciNotes window. Type, disp(“Hello World!”). Hover cursor on disp(“Hello World!”). |
Let us now write a code within h1_callback. Type, disp(“Hello World!”). This command will display “Hello World!” on the Scilab console when executed. The program is now complete. |
| Press CTRL + S. | Let us save it by pressing the Control and S keys together. |
|
Cursor on Scinotes window, click on Execute. |
Click on Execute in the top menu bar. |
| Click on File with echo | Then click on File with echo from the drop-down. |
|
Cursor on Graphic Window number 2. Hover cursor on Print pushbutton. |
A window named Graphic window number 2 opens. The pushbutton named Print appears in the graphic window. |
|
Cursor on Graphic Window number 2, click on Print. |
Next, let us test our GUI. Click on the Print pushbutton. The code gets executed. |
|
Cursor on Scilab Console. Highlight the message Hello World! |
Go to the Scilab Console to see the output. The console shows the message “Hello World!” |
|
Cursor on Graphic Window number 2, click on the Print pushbutton three times. |
Let us now again click the Print pushbutton three times. Notice that on the Scilab Console, the static response is generated three times. So, for each click on the pushbutton, a static response is generated. |
|
Show Slide: Summary |
This brings us to the end of this tutorial. Let us summarize. In this tutorial, we:
|
|
Show Slide: Assignment |
As an assignment, please do the following. Add one more pushbutton to the current GUI as described below,
|
| Show Slide: About Spoken Tutorial Project |
The video at the following link summarises the Spoken Tutorial project. Please download and watch it. |
| Show Slide: Spoken Tutorial Workshops |
The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
| Show Slide: Answers for THIS Spoken Tutorial | Please post your timed queries in this forum. |
|
Show Slide: FOSSEE Forum |
Please post your general and technical queries on Scilab in this forum. |
|
Show Slide: Textbook Companion Project |
The FOSSEE team coordinates the TBC project. For more details, please visit this site. |
|
Show Slide: Lab Migration |
The FOSSEE team coordinates the Lab Migration project. For more details, please visit this site. |
|
Show Slide: Acknowledgment |
The Spoken Tutorial project is funded by the Ministry of Education, Government of India. |
|
Show Slide: Thank you |
This is Amandeepsingh Siddhu, a FOSSEE intern 2021, IIT Bombay signing off. Thanks for joining. |
