Difference between revisions of "GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 1: Line 1:
−
'''Title of the script: ''' Creating a '''GUI''' to Print the User Input
+
'''Title of the script:''' Installation of '''GUI Builder Toolbox'''
  
 
'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''
 
'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''
  
−
 
+
'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''
−
 
+
−
'''Keywords: Edit '''box, '''Text '''box, '''.string '''command, Creating a '''GUI, '''Print the User Input
+
−
 
+
  
  
 
{| border=1
 
{| border=1
−
| '''Visual Cue'''
+
! '''Visual Cue'''
−
| '''Narration'''
+
! '''Narration'''
 
|-
 
|-
 
|
 
|
Line 17: Line 14:
  
 
'''Title Slide'''
 
'''Title Slide'''
−
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
+
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
 
|-
 
|-
 
|
 
|
Line 26: Line 23:
 
In this tutorial, we will learn to:
 
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>
−
We’ll also learn about the '''string command'''.
+
<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>
 
|-
 
|-
 
|
 
|
Line 37: Line 39:
 
'''System requirement'''
 
'''System requirement'''
  
 +
Only Narration
 +
|
 +
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
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
'''Only narration'''
+
 
|
 
|
−
To record this tutorial, I am using:
+
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>
−
 
+
−
The process demonstrated in this tutorial is similar in Linux OS also.
+
−
 
+
−
 
+
−
 
+
−
Annotations are added to the tutorial if there are any differences.
+
 
|-
 
|-
 
|
 
|
 
Show Slide:
 
Show Slide:
  
−
'''Pre-requisites'''
+
What is a '''GUI Builder Toolbox?'''
−
 
+
|
 +
What is a '''GUI Builder Toolbox?'''
  
 +
'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
  
−
https://www.spoken-tutorial.org
+
<ul>
−
| To follow this tutorial:
+
<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:  
+
Show Slide:
  
−
'''Code Files '''
+
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>
 
|-
 
|-
 
|
 
|
−
Show Slide:
 
  
−
What is an '''Edit''' box?
 
 
|
 
|
−
What is an '''Edit''' box?
+
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.
−
 
+
−
An '''Edit''' box is an editable '''string''' which takes input from a user.
+
 
|-
 
|-
 
|
 
|
−
Show Slide:
+
Cursor on '''Scilab console.'''
 +
 
 +
Type '''atomsGui'''
  
−
What is a '''Text''' box?
+
and press '''Enter.'''
 
|
 
|
−
What is a '''Text''' box?
+
Open '''Scilab.'''
  
 +
In the '''Scilab console''' window, type '''atomsGui.'''
  
 +
The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.
  
−
A '''Text '''box is a non-editable '''string''' used to display text or numbers.
+
Press '''Enter.'''
 
|-
 
|-
−
| Cursor on '''Scilab Console Window.'''
+
| Cursor on '''Main categories - ATOMS''' window.
 
|
 
|
−
Let us switch to the '''Scilab console''' window.
+
The '''Main categories - ATOMS''' window opens.
  
 +
This window has two panels.
  
−
 
+
The left panel displays a list of '''toolbox categories'''.
−
Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
+
 
|-
 
|-
 +
| Cursor on the blank right panel.
 
|
 
|
−
Cursor on '''Scilab Console Window,'''
+
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.
  
−
type '''guibuilder, '''press '''Enter.'''
+
It will display the details of the '''toolbox''' after '''installation'''.
 +
|-
 
|
 
|
−
Now type '''guibuilder '''and''' '''press '''Enter.'''
+
Cursor on '''Main categories - ATOMS''' window.
  
−
 
+
Click once on the '''GUI.'''
−
 
+
−
This '''command''' opens two windows.
+
−
|-
+
 
|
 
|
−
Cursor on '''GUIBuilder Palette''',
+
Click once on the '''GUI''' seen on the left panel'''.'''
  
−
click on '''Open.'''
+
This will show the list of '''toolboxes''' available in the '''GUI''' category.
−
| On the '''GUIBuilder Palette, '''click on '''Open '''in the top '''menubar'''.
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Open an existing GUI '''window,
+
Cursor on '''Main categories - ATOMS''' window.
  
−
 
+
Click once on '''GUI Builder''' .
−
 
+
−
click on '''Yes.'''
+
 
|
 
|
−
A '''prompt''' named '''Open an existing GUI '''appears.
+
Click once on the '''GUI Builder.'''
−
 
+
−
 
+
  
−
Click on''' Yes''' to proceed.
+
This will show the details of this '''toolbox''' on the right side of the window.
 
|-
 
|-
 
|
 
|
−
Cursor on '''uigetfile '''window,
+
Cursor on '''Main categories -'''
  
 +
'''ATOMS''' window.
  
−
 
+
Highlight the '''version.'''
−
locate '''printpushbutton.sce.'''
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
Click on '''Open.'''
+
 
|
 
|
−
This opens another window named '''uigetfile'''.
+
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.
−
Locate the file '''printpushbutton.sce '''and click on it.
+
−
 
+
−
 
+
−
 
+
−
Click on '''Open. '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on''' Graphic window number 1'''.
+
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''
  
−
Hover cursor over '''Print pushbutton.'''
+
Hover cursor over “'''Installation Done”''' message.
 
|
 
|
−
'''Graphic window number 1''' opens.
+
Click on the '''Install''' button at the bottom of the window.
  
−
 
+
If successful, the '''Installation Done''' message appears at the bottom.
−
 
+
−
It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
+
−
|-
+
−
|
+
−
| Let us add an '''Edit '''box and a '''Text '''box''' '''in this '''GUI'''.
+
 
|-
 
|-
 +
| Close and reopen Scilab.
 
|
 
|
−
Cursor on '''GUIBuilder Palette''',''' '''
+
After this, we need to restart '''Scilab''' for the changes to take effect.
  
−
click on '''Edit.'''
+
Let’s close and then reopen '''Scilab'''.
−
| Go to '''GUI Builder Palette''' and click on '''Edit. '''
+
|-
 +
| Cursor on the '''Scilab''' '''console.'''
 +
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request '''window,
+
Cursor on '''Scilab''' '''console. '''
  
 +
Type '''guibuilder''' and
  
−
 
+
Press '''Enter.'''
−
type '''ed_input, '''
+
−
 
+
−
type '''Enter the input message.'''
+
−
 
+
−
 
+
−
 
+
−
Click '''OK.'''
+
 
|
 
|
−
A dialog box named '''Scilab Multiple Values Request''' opens.
+
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.
  
−
 
+
This '''command''' opens two windows.
−
 
+
−
Type ‘'''ed_input’ '''as '''Tag '''and ‘'''Enter the input message’ '''as '''String. '''
+
−
 
+
−
 
+
−
 
+
−
Then click on the '''OK '''button'''. '''
+
 
|-
 
|-
 +
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
 
|
 
|
−
Cursor on '''Graphic Window number 1,'''
+
The '''GUIBuilder Palette''' window is located on the left side.
  
−
place the '''Edit''' box in the top 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''' .
−
 
+
−
Hover cursor over an '''Edit '''Box'''.'''
+
 
|
 
|
−
Switch to '''Graphic Window number 1.'''
+
Let us look at the '''GUIBuilder Palette''' window.
  
 +
It has objects such as,
  
−
 
+
<ul>
−
Place the '''Edit''' box above the '''Print''' '''pushbutton.'''
+
<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>
−
An '''Edit '''box with the '''string “Enter the input message”''' appears.
+
<li><blockquote><p>A '''Text box''', and many more.</p></blockquote></li></ul>
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUIBuilder Palette''' ,
+
Cursor on the '''GUIBuilder Palette''' window,
−
 
+
−
 
+
  
−
click on '''Text.'''
+
hover cursor over '''Left, Right, Up,''' and '''Down.'''
 
|
 
|
−
Now, let us take a '''Text '''box.
+
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.
  
−
 
+
They are used to shift the selected objects in the '''GUI'''.
−
 
+
−
On '''GUI Builder Palette''', click on '''Text'''.
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request '''window,
+
Cursor on the '''GUIBuilder Palette''' window,
  
−
type '''txt_output.'''
+
hover cursor over '''W-, W+.'''
  
−
 
+
Hover cursor over '''H-, H+.'''
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
Click on '''OK.'''
+
 
|
 
|
−
Type '''txt_output '''for '''Tag '''field'''.'''
+
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.
−
Do not type anything in the '''String '''field.
+
|-
−
 
+
| Cursor on '''Graphic Window number 1.'''
−
 
+
| Objects are placed in '''Graphic window number 1.'''
−
 
+
−
We will not display any messages until we receive an input from the user.
+
−
 
+
−
 
+
−
 
+
−
Click on the '''OK '''button'''.'''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 1,'''
+
Cursor on the '''GUI Builder Palette''' window,
  
−
place the '''Text''' box in the bottom center.
+
click on the '''Pushbutton'''.
 
|
 
|
−
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.
+
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.
  
−
 
+
Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
−
 
+
−
Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''
+
−
 
+
−
 
+
−
 
+
−
A '''Text '''box with the '''string “UnName3”''' appears.
+
 
|-
 
|-
−
| Cursor on '''Text '''Box'''.'''
 
 
|
 
|
−
A default '''string''' value “'''UnName3”''' is assigned to the '''Text '''box.
+
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.
  
−
This is because the '''String''' field was kept empty.
+
It allows you to give a name to the object.
−
|-
+
−
| Cursor on the interface.
+
−
|
+
−
Now the '''GUI''' part is completed.
+
−
 
+
  
 +
A '''Tag''' can be a number or an alphabet or its combination.
  
−
Let us proceed to generate an equivalent '''Scilab''' code.
+
Users can assign any value as a '''Tag'''.
 +
|-
 +
| Type '''h1''' in the '''Tag''' field'''.'''
 +
| I will type '''h1''' in the '''Tag''' field'''.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUI Builder Palette '''window.
+
Cursor on '''Scilab Multiple Values Request''' window,
−
 
+
−
Click on''' Generate, '''and then click on '''Generate GUI code.'''
+
−
|
+
−
Go to the '''GUIBuilder Palette'''.
+
−
 
+
−
 
+
  
−
Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code. '''
+
hover cursor over '''String.'''
 +
| Below '''Tag''', we see the '''String''' field.
 
|-
 
|-
 
|
 
|
−
Cursor on '''uiputfile '''window,
+
Cursor on '''Scilab Multiple Values Request''' window,
  
 +
Type '''Print''' in the '''String''' field'''.'''
  
−
 
+
Click on '''OK.'''
−
click on '''Save.'''
+
−
 
+
−
 
+
−
 
+
−
Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
+
 
|
 
|
−
We will save this file as''' printuserinput.'''
+
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'''.
−
 
+
−
Click on the '''Save '''button'''. '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUI Created '''window,
+
Cursor on '''Graphic Window number 1,'''
  
 +
click once in the middle left side.
  
−
 
+
Drag the cursor to draw a line box'''.'''
−
 
+
−
 
+
−
click on '''OK.'''
+
 
|
 
|
−
It shows a dialog box that displays GUI''' created successfully!'''
+
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.
  
−
Click on '''OK.'''
+
The size of this can be varied by moving the cursor on the window.
 
|-
 
|-
−
| Cursor on '''SciNotes''' window,
+
| Click again on the window.
−
| The corresponding '''sce file '''is generated.
+
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
 
|-
 
|-
 
|
 
|
−
highlight line with '''handles.ed_input.'''
+
Cursor on '''Graphic Window number 1,'''
  
−
 
+
hover cursor on '''Print pushbutton. '''
−
 
+
−
Highlight the part inside the '''uicontrol''' parentheses'''.'''
+
 
|
 
|
−
Notice the '''handle '''for the '''Edit '''box''' '''is''' handles.ed_input'''.
+
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''
−
 
+
−
 
+
  
−
The properties of the '''Edit '''box are defined in its respective''' uicontrol function'''.
+
The '''Graphical User Interface''' is now ready.
 
|-
 
|-
 
|
 
|
−
Highlight '''handles.txt_output.'''
+
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.'''
−
Highlight the part inside the '''uicontrol''' parentheses'''.'''
+
|-
 
|
 
|
−
The '''handle '''for the '''Text '''box''' '''is''' handles.txt_output'''.
+
Type '''printpushbuttongui &gt;&gt;''' 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'''.
−
Its properties are defined within its respective '''uicontrol function'''.
+
 
|-
 
|-
 
|
 
|
−
Scroll down to the end.
+
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.
−
 
+
−
 
+
−
Place the cursor within the '''h1_callback function.'''
+
 
|
 
|
−
Now, scroll down to the end of the code file.
+
Immediately, the corresponding '''Scilab file''' opens'''.'''
−
 
+
−
 
+
−
 
+
−
Let us make the''' pushbutton '''interactive.
+
−
 
+
−
 
+
  
−
For that, we will write the '''code''' within the '''h1_callback function.'''
+
Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
 
|-
 
|-
 
|
 
|
 
Cursor on '''SciNotes''' window,
 
Cursor on '''SciNotes''' window,
  
−
within '''h1_callback''',
+
highlight '''handles.h1,'''
  
−
type,
+
highlight the part inside '''uicontrol''' parentheses.
−
 
+
|
−
'''ip = handles.ed_input.string'''
+
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''
−
 
+
−
Press''' Enter.'''
+
  
−
'''handles.txt_output.string = string(ip)'''
+
Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
−
| Type the code as seen here with the same '''syntax'''.
+
 
|-
 
|-
 
|
 
|
−
Highlight,''' '''
+
Cursor on '''SciNotes''' window,
  
−
'''ip = handles.ed_input.string'''
+
highlight the '''h1_callback''' function.
−
|
+
−
The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
+
−
|-
+
 
|
 
|
−
Highlight''','''
+
The '''callback function h1_callback''' is defined at the bottom'''.'''
  
−
'''handles.txt_output.string = string(ip) '''
+
Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
−
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
+
 
|-
 
|-
 
|
 
|
−
Highlight '''.string '''after''' Edit '''and '''Text''' box''' handle'''.
+
Cursor on '''SciNotes''' window.
−
|
+
−
'''GUI''' supports '''string''' format while taking and '''passing''' the values.
+
  
 +
Type, '''disp(“Hello World!”).'''
  
−
 
+
Hover cursor on '''disp(“Hello World!”).'''
−
Hence, I have added it after the''' Edit '''and '''Text''' box''' handle'''.
+
−
|-
+
−
| Highlight '''string(ip)'''.
+
 
|
 
|
−
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.
+
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.
  
−
It is put within the parentheses of the '''string command.'''
+
The '''program''' is now complete.
 
|-
 
|-
 
| Press '''CTRL + S.'''
 
| Press '''CTRL + S.'''
−
| Let us save the file by pressing '''Control''' and '''S''' key together.
+
| Let us save it by pressing the '''Control''' and '''S''' keys together.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scinotes '''window,
+
Cursor on '''Scinotes''' window,
  
−
Click on '''Execute, '''and then click on''' File with echo.'''
+
click on '''Execute.'''
−
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
+
| Click on '''Execute''' in the top '''menubar'''.
 
|-
 
|-
−
| Cursor on '''Graphic Window number 2.'''
+
| Click on '''File with echo'''
−
|
+
| Then click on '''File with echo''' from the drop-down.
−
A window named '''Graphic window number 2''' opens.
+
−
 
+
−
 
+
−
 
+
−
This shows the '''GUI '''which we just created with the '''pushbutton'''.
+
−
 
+
−
 
+
−
 
+
−
Let us now test the '''GUI'''.
+
 
|-
 
|-
 
|
 
|
−
Delete '''Enter the input message.'''
+
Cursor on '''Graphic Window number 2.'''
  
−
 
+
Hover cursor on '''Print pushbutton.'''
−
 
+
−
 
+
−
 
+
−
Type '''Welcome to Scilab!'''
+
 
|
 
|
−
Delete the '''string “Enter the input message” '''from the '''Edit '''box'''.'''
+
A window named '''Graphic window number 2''' opens.
  
−
 
+
The '''pushbutton''' named '''Print''' appears in the graphic window.
−
 
+
−
Then type “'''Welcome to Scilab!” '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 2.'''
+
Cursor on '''Graphic Window number 2,'''
−
 
+
−
Click on '''Print pushbutton. '''
+
  
−
Hover cursor over “'''Welcome to Scilab!'''”
+
click on '''Print.'''
 
|
 
|
−
Click once on the '''Print''' '''pushbutton'''.
+
Next, let us test our '''GUI.'''
  
 +
Click on the '''Print''' '''pushbutton'''.
  
−
 
+
The code gets executed.
−
 
+
−
 
+
−
The '''Text''' box''' '''displays the '''string “Welcome to Scilab!”'''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 2.'''
+
Cursor on '''Scilab Console.'''
  
−
 
+
Highlight the message '''Hello World!'''
−
 
+
−
Delete '''Welcome to Scilab!'''
+
−
 
+
−
Type 258'''.'''
+
 
|
 
|
−
Let us test this using numbers now.
+
Go to the '''Scilab Console''' to see the output.
−
 
+
−
 
+
−
 
+
−
 
+
  
−
Delete the '''string “Welcome to Scilab!” '''from the''' Edit '''box and type '''258. '''
+
The '''console''' shows the message “'''Hello World!”'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 2.'''
+
Cursor on '''Graphic Window number 2,'''
  
−
Click on '''Print Pushbutton.'''
+
click on the '''Print pushbutton''' three times'''.'''
−
 
+
−
Hover cursor over number 258'''.'''
+
 
|
 
|
−
Click on the '''Print''' '''pushbutton'''.
+
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.
−
 
+
−
 
+
−
The '''Text''' box shows the number '''258''' which we typed just now.
+
−
 
+
−
 
+
−
 
+
−
Likewise, you can try some more inputs for your own understanding.
+
 
|-
 
|-
 
|
 
|
Line 530: Line 434:
 
'''Summary'''
 
'''Summary'''
 
|
 
|
−
This brings us to the end of this tutorial.  
+
This brings us to the end of this '''tutorial'''. Let us summarize.
  
−
Let us summarize.
+
In this '''tutorial''', we:
  
−
 
+
<ul>
−
 
+
<li><blockquote><p>Installed the '''GUI Builder''' '''Toolbox.'''</p></blockquote></li>
−
In this tutorial, we have:
+
<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>
 
|-
 
|-
 
|
 
|
Line 544: Line 451:
 
|
 
|
 
As an assignment, please do the following.
 
As an assignment, please do the following.
−
|-
 
−
|
 
−
Show Slide:
 
  
−
'''Assignment'''
+
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'''
−
Show Slide:  
+
−
 
+
−
'''About Spoken Tutorial Project'''
+
 
|
 
|
 
The video at the following link summarises the '''Spoken Tutorial project'''.
 
The video at the following link summarises the '''Spoken Tutorial project'''.
−
 
−
 
  
 
Please download and watch it.
 
Please download and watch it.
Line 564: Line 466:
 
| Show Slide: '''Spoken Tutorial Workshops'''
 
| Show Slide: '''Spoken Tutorial Workshops'''
 
|
 
|
−
The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
+
The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
−
 
+
−
 
+
  
 
For more details, please write to us.
 
For more details, please write to us.
Line 574: Line 474:
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
'''FOSSEE Forum'''
 
'''FOSSEE Forum'''
−
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
+
| Please post your general and technical queries on '''Scilab''' in this forum.
 
|-
 
|-
 
|
 
|
Line 584: Line 484:
 
'''Textbook Companion Project'''
 
'''Textbook Companion Project'''
 
|
 
|
−
The '''FOSSEE''' team coordinates the '''TBC''' project.  
+
The '''FOSSEE''' team coordinates the '''TBC''' project.
−
 
+
−
 
+
  
 
For more details, please visit this site.
 
For more details, please visit this site.
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
'''Lab Migration'''
 
'''Lab Migration'''
 
|
 
|
−
The '''FOSSEE '''team coordinates the '''Lab Migration project.'''
+
The '''FOSSEE''' team coordinates the '''Lab Migration project.'''
−
 
+
−
 
+
  
 
For more details, please visit this site.
 
For more details, please visit this site.
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
'''Acknowledgment'''
 
'''Acknowledgment'''
−
| '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
+
| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
 
|-
 
|-
 
|
 
|
Line 612: Line 508:
 
'''Thank you'''
 
'''Thank you'''
 
|
 
|
−
This is '''Amandeepsingh Siddhu''', a FOSSEE intern 2021, IIT Bombay signing off.
+
This is '''Amandeepsingh Siddhu''', a '''FOSSEE''' intern 2021, IIT Bombay signing off.
−
 
+
−
 
+
  
 
Thanks for joining.
 
Thanks for joining.
 
|}
 
|}

Revision as of 19:03, 6 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:

  • Install GUI Builder Toolbox.

  • About GUIBuilder Palette.

  • Create a Graphical User Interface using GUI Builder Toolbox.

  • Add Tag and String for the object.

  • Generate a static response on the Scilab console.

Show Slide:

System requirement

Only Narration

To record this tutorial, I am using

  • Windows 10 OS and

  • Scilab 6.1.0

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:

  • The learner must have basic knowledge of Scilab.

  • For pre-requisite Scilab tutorials please visit this website.

Show Slide:

What is a GUI Builder Toolbox?

What is a GUI Builder Toolbox?

GUI Builder Toolbox in Scilab:

  • Is one of the ways to create a GUI.

  • GUI is the abbreviation for Graphical User Interface.

Show Slide:

Advantages of using GUI Builder Toolbox

Now let us look at the advantages of the Toolbox.

  • The toolbox auto-generates a Scilab code for a GUI with object handle properties.

  • This allows the user to build the GUI with ease.

  • In the absence of this toolbox, users must write code from scratch to build the GUI.

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,

  • A Pushbutton,

  • A Radiobutton,

  • A Checkbox,

  • An Edit box,

  • A Text box, and many more.

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

  • Installed the GUI Builder Toolbox.

  • Learnt about the GUIBuilder Palette.

  • Created a Graphical User Interface using GUI Builder Toolbox.

  • Learnt about Tag and String for the object.

  • Generated a static response on the Scilab console.

Show Slide:

Assignment

As an assignment, please do the following.

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

  1. Add String name as 'Press here' for the Pushbutton.

  2. Write a callback function to display the message 'Good day!' on the Scilab console.

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.

Contributors and Content Editors

Amandeeps

Retrieved from "https://script.spoken-tutorial.org/index.php?title=GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English&oldid=55452"