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:''' Installation of '''GUI Builder Toolbox'''
+
'''Title of the script:''' Creating a '''GUI''' to Print the User Input
  
 
'''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, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''
  
  
Line 14: Line 14:
  
 
'''Title Slide'''
 
'''Title Slide'''
−
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
+
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
 
|-
 
|-
 
|
 
|
Line 24: Line 24:
  
 
<ul>
 
<ul>
−
<li><blockquote><p>Install '''GUI Builder Toolbox.'''</p></blockquote></li></ul>
+
<li><blockquote><p>Add an '''Edit''' box to '''prompt''' for user input.</p></blockquote></li>
 +
<li><blockquote><p>Add a '''Text''' box to display the output.</p></blockquote></li></ul>
  
−
<ul>
+
We’ll also learn about the '''string command'''.
−
<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>
+
 
|-
 
|-
 
|
 
|
Line 39: Line 34:
 
'''System requirement'''
 
'''System requirement'''
  
−
Only Narration
+
'''Only narration'''
 
|
 
|
−
To record this tutorial, I am using
+
To record this tutorial, I am using:
  
 
<ul>
 
<ul>
−
<li><blockquote><p>'''Windows 10''' '''OS''' and</p></blockquote></li>
+
<li><blockquote><p>'''Windows 10''' '''OS'''</p></blockquote></li>
−
<li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li></ul>
+
<li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li>
 +
<li><blockquote><p>'''GUI Builder Toolbox 4.2.1'''</p></blockquote></li></ul>
  
−
The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.
+
The process demonstrated in this tutorial is similar in Linux OS also.
  
 
Annotations are added to the tutorial if there are any differences.
 
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.
 
 
|-
 
|-
 
|
 
|
Line 62: Line 52:
 
'''Pre-requisites'''
 
'''Pre-requisites'''
  
−
https://spoken-tutorial.org
+
https://www.spoken-tutorial.org
 
|
 
|
 
To follow this tutorial:
 
To follow this tutorial:
  
 
<ul>
 
<ul>
−
<li><blockquote><p>The learner must have basic knowledge of '''Scilab'''.</p></blockquote></li></ul>
+
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li>
−
 
+
−
<ul>
+
 
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
 
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
 
|-
 
|-
Line 75: Line 63:
 
Show Slide:
 
Show Slide:
  
−
What is a '''GUI Builder Toolbox?'''
+
'''Code Files '''
 
|
 
|
−
What is a '''GUI Builder Toolbox?'''
 
−
 
−
'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
 
−
 
 
<ul>
 
<ul>
−
<li><blockquote><p>Is one of the ways to create a '''GUI'''.</p></blockquote></li>
+
<li><blockquote><p>The files used in this tutorial are provided in the '''Code files''' link.</p></blockquote></li>
−
<li><blockquote><p>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</p></blockquote></li></ul>
+
<li><blockquote><p>Please download and extract the files.</p></blockquote></li>
 +
<li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul>
 
|-
 
|-
 
|
 
|
 
Show Slide:
 
Show Slide:
  
−
Advantages of using '''GUI Builder Toolbox'''
+
What is an '''Edit''' box?
 
|
 
|
−
Now let us look at the advantages of the Toolbox.
+
What is an '''Edit''' box?
  
−
<ul>
+
An '''Edit''' box is an editable '''string''' which takes input from a user.
−
<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 a '''Text''' box?
 
|
 
|
−
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''
+
What is a '''Text''' box?
  
−
This can be done in a number of ways. We will look at one of them.
+
A '''Text''' box is a non-editable '''string''' used to display text or numbers.
 
|-
 
|-
 +
| Cursor on '''Scilab Console Window.'''
 
|
 
|
−
Cursor on '''Scilab console.'''
+
Let us switch to the '''Scilab console''' window.
  
−
Type '''atomsGui'''
+
Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
−
 
+
−
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.
+
Cursor on '''Scilab Console Window,'''
  
−
This window has two panels.
+
type '''guibuilder,''' press '''Enter.'''
−
 
+
−
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'''.
+
Now type '''guibuilder''' and press '''Enter.'''
  
−
It will display the details of the '''toolbox''' after '''installation'''.
+
This '''command''' opens two windows.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Main categories - ATOMS''' window.
+
Cursor on '''GUIBuilder Palette''',
−
 
+
−
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.
+
click on '''Open.'''
 +
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Main categories - ATOMS''' window.
+
Cursor on '''Open an existing GUI''' window,
  
−
Click once on '''GUI Builder''' .
+
click on '''Yes.'''
 
|
 
|
−
Click once on the '''GUI Builder.'''
+
A '''prompt''' named '''Open an existing GUI''' appears.
  
−
This will show the details of this '''toolbox''' on the right side of the window.
+
Click on '''Yes''' to proceed.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Main categories -'''
+
Cursor on '''uigetfile''' window,
  
−
'''ATOMS''' window.
+
locate '''printpushbutton.sce.'''
  
−
Highlight the '''version.'''
+
Click on '''Open.'''
 
|
 
|
−
Scroll up and notice the '''Version''' of the '''toolbox'''.
+
This opens another window named '''uigetfile'''.
  
−
At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''
+
Locate the file '''printpushbutton.sce''' and click on it.
  
−
It could be different when you are watching this tutorial at a later date.
+
Click on '''Open.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''
+
Cursor on '''Graphic window number 1'''.
  
−
Hover cursor over “'''Installation Done”''' message.
+
Hover cursor over '''Print pushbutton.'''
 
|
 
|
−
Click on the '''Install''' button at the bottom of the window.
+
'''Graphic window number 1''' opens.
  
−
If successful, the '''Installation Done''' message appears at the bottom.
+
It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
 
|-
 
|-
−
| Close and reopen Scilab.
 
 
|
 
|
−
After this, we need to restart '''Scilab''' for the changes to take effect.
 
  
−
Let’s close and then reopen '''Scilab'''.
+
| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
 
|-
 
|-
−
| Cursor on the '''Scilab''' '''console.'''
+
|
−
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
+
Cursor on '''GUIBuilder Palette''',
 +
 
 +
click on '''Edit.'''
 +
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab''' '''console. '''
+
Cursor on '''Scilab Multiple Values Request''' window,
  
−
Type '''guibuilder''' and
+
type '''ed_input, '''
  
−
Press '''Enter.'''
+
type '''Enter the input message.'''
 +
 
 +
Click '''OK.'''
 
|
 
|
−
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.
+
A dialog box named '''Scilab Multiple Values Request''' opens.
  
−
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.'''
 
 
|
 
|
−
The '''GUIBuilder Palette''' window is located on the left side.
+
Cursor on '''Graphic Window number 1,'''
  
−
The '''Graphic Window Number 1''' is located on the right side.
+
place the '''Edit''' box in the top left side.
−
|-
+
 
−
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
+
Hover cursor over an '''Edit''' Box'''.'''
 
|
 
|
−
Let us look at the '''GUIBuilder Palette''' window.
+
Switch to '''Graphic Window number 1.'''
  
−
It has objects such as,
+
Place the '''Edit''' box above the '''Print''' '''pushbutton.'''
  
−
<ul>
+
An '''Edit''' box with the '''string “Enter the input message”''' appears.
−
<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,
+
Cursor on '''GUIBuilder Palette''' ,
  
−
hover cursor over '''Left, Right, Up,''' and '''Down.'''
+
click on '''Text.'''
 
|
 
|
−
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.
+
Now, let us take a '''Text''' box.
  
−
They are used to shift the selected objects in the '''GUI'''.
+
On '''GUI Builder Palette''', click on '''Text'''.
 
|-
 
|-
 
|
 
|
−
Cursor on the '''GUIBuilder Palette''' window,
+
Cursor on '''Scilab Multiple Values Request''' window,
  
−
hover cursor over '''W-, W+.'''
+
type '''txt_output.'''
  
−
Hover cursor over '''H-, H+.'''
+
Click on '''OK.'''
 
|
 
|
−
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.
+
Type '''txt_output''' for '''Tag''' field'''.'''
  
−
They enable the user to adjust the width of the selected object.
+
Do not type anything in the '''String''' field.
  
−
'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
+
We will not display any messages until we receive an input from the user.
−
|-
+
 
−
| Cursor on '''Graphic Window number 1.'''
+
Click on the '''OK''' button'''.'''
−
| Objects are placed in '''Graphic window number 1.'''
+
 
|-
 
|-
 
|
 
|
−
Cursor on the '''GUI Builder Palette''' window,
+
Cursor on '''Graphic Window number 1,'''
  
−
click on the '''Pushbutton'''.
+
place the '''Text''' box in the bottom center.
 
|
 
|
−
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.
+
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.
  
−
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'''.'''
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request''' window.
+
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.
  
−
Hover cursor over '''Tag.'''
+
This is because the '''String''' field was kept empty.
 +
|-
 +
| Cursor on the interface.
 
|
 
|
−
A window named '''Scilab Multiple Values Request''' opens.
+
Now the '''GUI''' part is completed.
  
−
Notice the '''Tag''' field. It is a unique '''identifier''' for each '''GUI''' object.
+
Let us proceed to generate an equivalent '''Scilab''' code.
−
 
+
−
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,
+
Cursor on '''GUI Builder Palette''' window.
  
−
hover cursor over '''String.'''
+
Click on '''Generate,''' and then click on '''Generate GUI code.'''
−
| Below '''Tag''', we see the '''String''' field.
+
|
 +
Go to the '''GUIBuilder Palette'''.
 +
 
 +
Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request''' window,
+
Cursor on '''uiputfile''' window,
  
−
Type '''Print''' in the '''String''' field'''.'''
+
click on '''Save.'''
  
−
Click on '''OK.'''
+
Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
 
|
 
|
−
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''
+
We will save this file as '''printuserinput.'''
  
−
I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
+
Click on the '''Save''' button'''.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 1,'''
+
Cursor on '''GUI Created''' window,
  
−
click once in the middle left side.
+
click on '''OK.'''
−
 
+
−
Drag the cursor to draw a line box'''.'''
+
 
|
 
|
−
In the '''Graphic Window number 1,''' click once near the middle left side of the window.
+
It shows a dialog box that displays GUI '''created successfully!'''
  
−
Then drag the mouse diagonally downwards to draw a rectangle.
+
Click on '''OK.'''
−
 
+
−
Notice a line box.
+
−
 
+
−
The size of this can be varied by moving the cursor on the window.
+
 
|-
 
|-
−
| Click again on the window.
+
| Cursor on '''SciNotes''' window,
−
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
+
| The corresponding '''sce file''' is generated.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 1,'''
+
highlight line with '''handles.ed_input.'''
  
−
hover cursor on '''Print pushbutton. '''
+
Highlight the part inside the '''uicontrol''' parentheses'''.'''
 
|
 
|
−
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''
+
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.
  
−
The '''Graphical User Interface''' is now ready.
+
The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
 
|-
 
|-
 
|
 
|
−
Cursor on the '''GUI Builder Palette''' window,
+
Highlight '''handles.txt_output.'''
  
−
click on '''Generate,'''
+
Highlight the part inside the '''uicontrol''' parentheses'''.'''
−
 
+
−
click on '''Generate GUI code . '''
+
 
|
 
|
−
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.
+
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.
  
−
Click on the '''Generate''' menu seen on the top '''menubar'''.
+
Its properties are defined within its respective '''uicontrol function'''.
−
 
+
−
Then click on '''Generate GUI code.'''
+
 
|-
 
|-
 
|
 
|
−
Type '''printpushbuttongui &gt;&gt;''' click '''Save.'''
+
Scroll down to the end.
  
−
Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
+
Place the cursor within the '''h1_callback function.'''
−
| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
+
−
|-
+
 
|
 
|
−
Cursor on '''GUI Created''' window.
+
Now, scroll down to the end of the code file.
  
−
Click on '''OK.'''
+
Let us make the '''pushbutton''' interactive.
−
|
+
−
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.
+
For that, we will write the '''code''' within the '''h1_callback function.'''
 
|-
 
|-
 
|
 
|
 
Cursor on '''SciNotes''' window,
 
Cursor on '''SciNotes''' window,
  
−
highlight '''handles.h1,'''
+
within '''h1_callback''',
  
−
highlight the part inside '''uicontrol''' parentheses.
+
type,
−
|
+
 
−
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''
+
'''ip = handles.ed_input.string'''
  
−
Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
+
Press '''Enter.'''
 +
 
 +
'''handles.txt_output.string = string(ip)'''
 +
| Type the code as seen here with the same '''syntax'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''SciNotes''' window,
+
Highlight,
  
−
highlight the '''h1_callback''' function.
+
'''ip = handles.ed_input.string'''
 +
| The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
 +
|-
 
|
 
|
−
The '''callback function h1_callback''' is defined at the bottom'''.'''
+
Highlight''','''
  
−
Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
+
'''handles.txt_output.string = string(ip) '''
 +
| 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!”).'''
+
Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
−
 
+
|-
−
Hover cursor on '''disp(“Hello World!”).'''
+
| Highlight '''string(ip)'''.
 
|
 
|
−
Let us now write a code within '''h1_callback'''.
+
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.
−
 
+
−
Type, '''disp(“Hello World!”).'''
+
−
 
+
−
This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.
+
  
−
The '''program''' is now complete.
+
It is put within the parentheses of the '''string command.'''
 
|-
 
|-
 
| Press '''CTRL + S.'''
 
| Press '''CTRL + S.'''
−
| Let us save it by pressing the '''Control''' and '''S''' keys together.
+
| Let us save the file by pressing '''Control''' and '''S''' key together.
 
|-
 
|-
 
|
 
|
 
Cursor on '''Scinotes''' window,
 
Cursor on '''Scinotes''' window,
  
−
click on '''Execute.'''
+
Click on '''Execute,''' and then click on '''File with echo.'''
−
| Click on '''Execute''' in the top '''menubar'''.
+
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
 
|-
 
|-
−
| Click on '''File with echo'''
+
| Cursor on '''Graphic Window number 2.'''
−
| 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'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 2.'''
+
Delete '''Enter the input message.'''
  
−
Hover cursor on '''Print pushbutton.'''
+
Type '''Welcome to Scilab!'''
 
|
 
|
−
A window named '''Graphic window number 2''' opens.
+
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''
  
−
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. '''
  
−
click on '''Print.'''
+
Hover cursor over “'''Welcome to Scilab!'''”
 
|
 
|
−
Next, let us test our '''GUI.'''
+
Click once on the '''Print''' '''pushbutton'''.
  
−
Click on the '''Print''' '''pushbutton'''.
+
The '''Text''' box displays the '''string “Welcome to Scilab!”'''
−
 
+
−
The code gets executed.
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Console.'''
+
Cursor on '''Graphic Window number 2.'''
 +
 
 +
Delete '''Welcome to Scilab!'''
  
−
Highlight the message '''Hello World!'''
+
Type 258'''.'''
 
|
 
|
−
Go to the '''Scilab Console''' to see the output.
+
Let us test this using numbers now.
  
−
The '''console''' shows the message “'''Hello World!”'''
+
Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Graphic Window number 2,'''
+
Cursor on '''Graphic Window number 2.'''
  
−
click on the '''Print pushbutton''' three times'''.'''
+
Click on '''Print Pushbutton.'''
 +
 
 +
Hover cursor over number 258'''.'''
 
|
 
|
−
Let us now again click the '''Print pushbutton''' three times.
+
Click on the '''Print''' '''pushbutton'''.
  
−
Notice that on the '''Scilab Console,''' the '''static response''' is generated three times.
+
The '''Text''' box shows the number '''258''' which we typed just now.
  
−
So, for each click on the '''pushbutton,''' a '''static response''' is generated.
+
Likewise, you can try some more inputs for your own understanding.
 
|-
 
|-
 
|
 
|
Line 434: Line 390:
 
'''Summary'''
 
'''Summary'''
 
|
 
|
−
This brings us to the end of this '''tutorial'''. Let us summarize.
+
This brings us to the end of this tutorial.
  
−
In this '''tutorial''', we:
+
Let us summarize.
 +
 
 +
In this tutorial, we have:
  
 
<ul>
 
<ul>
−
<li><blockquote><p>Installed the '''GUI Builder''' '''Toolbox.'''</p></blockquote></li>
+
<li><blockquote><p>Added an '''Edit''' box to '''prompt''' for user input.</p></blockquote></li>
−
<li><blockquote><p>Learnt about the '''GUIBuilder Palette.'''</p></blockquote></li>
+
<li><blockquote><p>Added a '''Text''' box to display the output'''.'''</p></blockquote></li>
−
<li><blockquote><p>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</p></blockquote></li>
+
<li><blockquote><p>Learnt about the '''String command'''.</p></blockquote></li></ul>
−
<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 452: Line 408:
 
As an assignment, please do the following.
 
As an assignment, please do the following.
  
−
Add one more '''pushbutton''' to the current '''GUI''' as described below,
+
<ul>
 +
<li><blockquote><p>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</p></blockquote></li>
 +
<li><blockquote><p>Type in the '''String''' fields of the two '''Edit''' boxes -</p></blockquote>
 +
<ul>
 +
<li><blockquote><p>'''“Enter the input message 1”,'''and</p></blockquote></li>
 +
<li><blockquote><p>'''“Enter the input message 2”.'''</p></blockquote></li></ul>
 +
</li></ul>
 +
|-
 +
|
 +
Show Slide:
  
−
<ol style="list-style-type: decimal;">
+
'''Assignment'''
−
<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>
+
<ul>
 +
<li><blockquote><p>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</p></blockquote></li>
 +
<li><blockquote><p>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</p></blockquote></li></ul>
 
|-
 
|-
−
| 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'''.
Line 477: Line 447:
  
 
'''FOSSEE Forum'''
 
'''FOSSEE Forum'''
−
| Please post your general and technical queries on '''Scilab''' in this forum.
+
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
 
|-
 
|-
 
|
 
|
Line 501: Line 471:
  
 
'''Acknowledgment'''
 
'''Acknowledgment'''
−
| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
+
| '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
 
|-
 
|-
 
|
 
|
Line 508: Line 478:
 
'''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:30, 6 August 2021

Title of the script: Creating a GUI to Print the User Input

Author: Rashmi Patankar, Amandeepsingh Siddhu

Keywords: Edit box, Text box, .string command, Creating a GUI, Print the User Input, GUI Builder Toolbox, Tag, String, callback function, Pushbutton


Visual Cue Narration

Show Slide:

Title Slide

Welcome to the Spoken Tutorial on Creating a GUI to Print User Input in Scilab.

Show Slide:

Learning objectives

In this tutorial, we will learn to:

  • Add an Edit box to prompt for user input.

  • Add a Text box to display the output.

We’ll also learn about the string command.

Show Slide:

System requirement

Only narration

To record this tutorial, I am using:

  • Windows 10 OS

  • Scilab 6.1.0

  • GUI Builder Toolbox 4.2.1

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:

Pre-requisites

https://www.spoken-tutorial.org

To follow this tutorial:

  • The learner must have basic knowledge of Scilab and GUI Builder toolbox.

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

Show Slide:

Code Files

  • The files used in this tutorial are provided in the Code files link.

  • Please download and extract the files.

  • Make a copy and then use them while practising.

Show Slide:

What is an Edit box?

What is an Edit box?

An Edit box is an editable string which takes input from a user.

Show Slide:

What is a Text box?

What is a Text box?

A Text box is a non-editable string used to display text or numbers.

Cursor on Scilab Console Window.

Let us switch to the Scilab console window.

Notice that I already have the GUI Builder Toolbox loaded in Scilab.

Cursor on Scilab Console Window,

type guibuilder, press Enter.

Now type guibuilder and press Enter.

This command opens two windows.

Cursor on GUIBuilder Palette,

click on Open.

On the GUIBuilder Palette, click on Open in the top menubar.

Cursor on Open an existing GUI window,

click on Yes.

A prompt named Open an existing GUI appears.

Click on Yes to proceed.

Cursor on uigetfile window,

locate printpushbutton.sce.

Click on Open.

This opens another window named uigetfile.

Locate the file printpushbutton.sce and click on it.

Click on Open.

Cursor on Graphic window number 1.

Hover cursor over Print pushbutton.

Graphic window number 1 opens.

It shows the GUI with a pushbutton named Print.

Let us add an Edit box and a Text box in this GUI.

Cursor on GUIBuilder Palette,

click on Edit.

Go to GUI Builder Palette and click on Edit.

Cursor on Scilab Multiple Values Request window,

type ed_input,

type Enter the input message.

Click OK.

A dialog box named Scilab Multiple Values Request opens.

Type ‘ed_input’ as Tag and ‘Enter the input message’ as String.

Then click on the OK button.

Cursor on Graphic Window number 1,

place the Edit box in the top left side.

Hover cursor over an Edit Box.

Switch to Graphic Window number 1.

Place the Edit box above the Print pushbutton.

An Edit box with the string “Enter the input message” appears.

Cursor on GUIBuilder Palette ,

click on Text.

Now, let us take a Text box.

On GUI Builder Palette, click on Text.

Cursor on Scilab Multiple Values Request window,

type txt_output.

Click on OK.

Type txt_output for Tag field.

Do not type anything in the String field.

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,

place the Text box in the bottom center.

We’ll place this just below the Print pushbutton in the Graphic window.

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.

This is because the String field was kept empty.

Cursor on the interface.

Now the GUI part is completed.

Let us proceed to generate an equivalent Scilab code.

Cursor on GUI Builder Palette 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.

Cursor on uiputfile window,

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.

Click on the Save button.

Cursor on GUI Created window,

click on OK.

It shows a dialog box that displays GUI created successfully!

Click on OK.

Cursor on SciNotes window, The corresponding sce file is generated.

highlight line with handles.ed_input.

Highlight the part inside the uicontrol parentheses.

Notice the handle for the Edit box is handles.ed_input.

The properties of the Edit box are defined in its respective uicontrol function.

Highlight handles.txt_output.

Highlight the part inside the uicontrol parentheses.

The handle for the Text box is handles.txt_output.

Its properties are defined within its respective uicontrol function.

Scroll down to the end.

Place the cursor within the h1_callback function.

Now, scroll down to the end of the code file.

Let us make the pushbutton interactive.

For that, we will write the code within the h1_callback function.

Cursor on SciNotes window,

within h1_callback,

type,

ip = handles.ed_input.string

Press Enter.

handles.txt_output.string = string(ip)

Type the code as seen here with the same syntax.

Highlight,

ip = handles.ed_input.string

The first line will assign the user input from an Edit box to the variable ip.

Highlight,

handles.txt_output.string = string(ip)

The next line will pass the value of variable ip to a Text box.
Highlight .string after Edit and Text box handle.

GUI supports string format while taking and passing the values.

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.

It is put within the parentheses of the string command.

Press CTRL + S. Let us save the file by pressing Control and S key together.

Cursor on Scinotes window,

Click on Execute, and then click on File with echo.

To execute, click on Execute on the top menubar and then on file with echo.
Cursor on Graphic Window number 2.

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.

Type Welcome to Scilab!

Delete the string “Enter the input message” from the Edit box.

Then type “Welcome to Scilab!”

Cursor on Graphic Window number 2.

Click on Print pushbutton.

Hover cursor over “Welcome to Scilab!”

Click once on the Print pushbutton.

The Text box displays the string “Welcome to Scilab!”

Cursor on Graphic Window number 2.

Delete Welcome to Scilab!

Type 258.

Let us test this using numbers now.

Delete the string “Welcome to Scilab!” from the Edit box and type 258.

Cursor on Graphic Window number 2.

Click on Print Pushbutton.

Hover cursor over number 258.

Click on the Print pushbutton.

The Text box shows the number 258 which we typed just now.

Likewise, you can try some more inputs for your own understanding.

Show Slide:

Summary

This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

  • Added an Edit box to prompt for user input.

  • Added a Text box to display the output.

  • Learnt about the String command.

Show Slide:

Assignment

As an assignment, please do the following.

  • Add one more pushbutton and Edit box to the current GUI.

  • Type in the String fields of the two Edit boxes -

    • “Enter the input message 1”,and

    • “Enter the input message 2”.

Show Slide:

Assignment

  • Name the String fields of the two pushbuttons as “Print 1” and “Print 2”.

  • Modify the callback function to get the output of both the Edit boxes in a single Text box.

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

For any general or technical questions on Scilab, visit the FOSSEE forum and post your question.

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

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=55453"