View source for GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

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

{| border=1
! '''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:

<ul>
<li><blockquote><p>Install '''GUI Builder Toolbox.'''</p></blockquote></li></ul>

<ul>
<li><blockquote><p>About '''GUIBuilder Palette.'''</p></blockquote></li></ul>

<ul>
<li><blockquote><p>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li>
<li><blockquote><p>Add '''Tag''' and '''String''' for the object.</p></blockquote></li>
<li><blockquote><p>Generate a static response on the '''Scilab console'''.</p></blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

|
To record this tutorial, I am using

<ul>
<li><blockquote><p>'''Windows 10''' '''OS''' and</p></blockquote></li>
<li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li></ul>

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

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote><p>The learner must have basic knowledge of '''Scilab'''.</p></blockquote></li></ul>

<ul>
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote><p>Is one of the ways to create a '''GUI'''.</p></blockquote></li>
<li><blockquote><p>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</p></blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the '''Toolbox'''.

<ul>
<li><blockquote><p>The t'''oolbox''' 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>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</p></blockquote></li></ul>
|-
|

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

<ul>
<li><blockquote><p>A '''Pushbutton, '''</p></blockquote></li>
<li><blockquote><p>A '''Radiobutton,'''</p></blockquote></li>
<li><blockquote><p>A '''Checkbox,'''</p></blockquote></li>
<li><blockquote><p>An '''Edit box,'''</p></blockquote></li>
<li><blockquote><p>A '''Text box''', and many more.</p></blockquote></li></ul>
|-
|
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 '''Graphic Windows number 1'''.

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

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui &gt;&gt;''' click '''Save.'''

| 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 '''menubar'''.
|-
| 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:

<ul>
<li><blockquote><p>Installed the '''GUI Builder''' '''Toolbox.'''</p></blockquote></li>
<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>Learnt about '''Tag''' and '''String''' for the object.</p></blockquote></li>
<li><blockquote><p>Generated a static response on the '''Scilab console'''.</p></blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote><p>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</p></blockquote></li>
<li><blockquote><p>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</p></blockquote></li></ol>
|-
| 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.
|}