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
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
'''Title of the script: ''' Creating a '''GUI''' to Print the User Input
+
'''Title of the script:''' Creating a '''GUI''' to Print the User Input
  
 
'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''
 
'''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'''
−
 
+
−
'''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 26: Line 23:
 
In this tutorial, we will learn to:
 
In this tutorial, we will learn to:
  
−
 
+
<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>
  
 
We’ll also learn about the '''string command'''.
 
We’ll also learn about the '''string command'''.
Line 36: Line 33:
  
 
'''System requirement'''
 
'''System requirement'''
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
'''Only narration'''
 
'''Only narration'''
Line 55: Line 38:
 
To record this tutorial, I am using:
 
To record this tutorial, I am using:
  
−
 
+
<ul>
−
 
+
<li><blockquote><p>'''Windows 10''' '''OS'''</p></blockquote></li>
−
 
+
<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 similar 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.
Line 70: Line 52:
 
'''Pre-requisites'''
 
'''Pre-requisites'''
  
 +
https://www.spoken-tutorial.org
 +
|
 +
To follow this tutorial:
  
−
 
+
<ul>
−
https://www.spoken-tutorial.org
+
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li>
−
| To follow this tutorial:
+
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
'''Code Files '''
 
'''Code Files '''
 
|
 
|
 +
<ul>
 +
<li><blockquote><p>The files used in this tutorial are provided in the '''Code files''' link.</p></blockquote></li>
 +
<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:
  
 
What is an '''Edit''' box?
 
What is an '''Edit''' box?
 
|
 
|
 
What is an '''Edit''' box?
 
What is an '''Edit''' box?
−
 
−
 
  
 
An '''Edit''' box is an editable '''string''' which takes input from a user.
 
An '''Edit''' box is an editable '''string''' which takes input from a user.
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
What is a '''Text''' box?
 
What is a '''Text''' box?
Line 99: Line 86:
 
What is a '''Text''' box?
 
What is a '''Text''' box?
  
−
 
+
A '''Text''' box is a non-editable '''string''' used to display text or numbers.
−
 
+
−
A '''Text '''box is a non-editable '''string''' used to display text or numbers.
+
 
|-
 
|-
 
| Cursor on '''Scilab Console Window.'''
 
| Cursor on '''Scilab Console Window.'''
 
|
 
|
 
Let us switch to the '''Scilab console''' window.
 
Let us switch to the '''Scilab console''' window.
−
 
−
 
  
 
Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
 
Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
Line 114: Line 97:
 
Cursor on '''Scilab Console Window,'''
 
Cursor on '''Scilab Console Window,'''
  
−
type '''guibuilder, '''press '''Enter.'''
+
type '''guibuilder,''' press '''Enter.'''
 
|
 
|
−
Now type '''guibuilder '''and''' '''press '''Enter.'''
+
Now type '''guibuilder''' and press '''Enter.'''
−
 
+
−
 
+
  
 
This '''command''' opens two windows.
 
This '''command''' opens two windows.
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUIBuilder Palette''',  
+
Cursor on '''GUIBuilder Palette''',
  
 
click on '''Open.'''
 
click on '''Open.'''
−
| On the '''GUIBuilder Palette, '''click on '''Open '''in the top '''menubar'''.
+
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Open an existing GUI '''window,
+
Cursor on '''Open an existing GUI''' window,
−
 
+
−
 
+
  
 
click on '''Yes.'''
 
click on '''Yes.'''
 
|
 
|
−
A '''prompt''' named '''Open an existing GUI '''appears.
+
A prompt named '''Open an existing GUI''' appears.
  
−
 
+
Click on '''Yes''' to proceed.
−
 
+
−
Click on''' Yes''' to proceed.
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''uigetfile '''window,
+
Cursor on '''uigetfile''' window,
−
 
+
−
 
+
  
 
locate '''printpushbutton.sce.'''
 
locate '''printpushbutton.sce.'''
−
 
−
 
−
 
−
 
  
 
Click on '''Open.'''
 
Click on '''Open.'''
Line 156: Line 127:
 
This opens another window named '''uigetfile'''.
 
This opens another window named '''uigetfile'''.
  
 +
Locate the file '''printpushbutton.sce''' and click on it.
  
−
 
+
Click on '''Open.'''
−
Locate the file '''printpushbutton.sce '''and click on it.
+
−
 
+
−
 
+
−
 
+
−
Click on '''Open. '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on''' Graphic window number 1'''.
+
Cursor on '''Graphic window number 1'''.
  
 
Hover cursor over '''Print pushbutton.'''
 
Hover cursor over '''Print pushbutton.'''
 
|
 
|
 
'''Graphic window number 1''' opens.
 
'''Graphic window number 1''' opens.
−
 
−
 
  
 
It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
 
It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
 
|-
 
|-
−
|  
+
|
−
| Let us add an '''Edit '''box and a '''Text '''box''' '''in this '''GUI'''.
+
 
 +
| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUIBuilder Palette''',''' '''
+
Cursor on '''GUIBuilder Palette''',
  
 
click on '''Edit.'''
 
click on '''Edit.'''
−
| Go to '''GUI Builder Palette''' and click on '''Edit. '''
+
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request '''window,
+
Cursor on '''Scilab Multiple Values Request''' window,
−
 
+
−
 
+
  
 
type '''ed_input, '''
 
type '''ed_input, '''
  
 
type '''Enter the input message.'''
 
type '''Enter the input message.'''
−
 
−
 
  
 
Click '''OK.'''
 
Click '''OK.'''
Line 199: Line 161:
 
A dialog box named '''Scilab Multiple Values Request''' opens.
 
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'''.'''
−
Type ‘'''ed_input’ '''as '''Tag '''and ‘'''Enter the input message’ '''as '''String. '''
+
−
 
+
−
 
+
−
 
+
−
Then click on the '''OK '''button'''. '''
+
 
|-
 
|-
 
|
 
|
Line 212: Line 170:
 
place the '''Edit''' box in the top left side.
 
place the '''Edit''' box in the top left side.
  
−
 
+
Hover cursor over an '''Edit''' Box'''.'''
−
 
+
−
Hover cursor over an '''Edit '''Box'''.'''
+
 
|
 
|
 
Switch to '''Graphic Window number 1.'''
 
Switch to '''Graphic Window number 1.'''
−
 
−
 
  
 
Place the '''Edit''' box above the '''Print''' '''pushbutton.'''
 
Place the '''Edit''' box above the '''Print''' '''pushbutton.'''
  
−
 
+
An '''Edit''' box with the '''string “Enter the input message”''' appears.
−
 
+
−
An '''Edit '''box with the '''string “Enter the input message”''' appears.
+
 
|-
 
|-
 
|
 
|
 
Cursor on '''GUIBuilder Palette''' ,
 
Cursor on '''GUIBuilder Palette''' ,
−
 
−
 
  
 
click on '''Text.'''
 
click on '''Text.'''
 
|
 
|
−
Now, let us take a '''Text '''box.
+
Now, let us take a '''Text''' box.
−
 
+
−
 
+
  
 
On '''GUI Builder Palette''', click on '''Text'''.
 
On '''GUI Builder Palette''', click on '''Text'''.
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scilab Multiple Values Request '''window,
+
Cursor on '''Scilab Multiple Values Request''' window,
  
 
type '''txt_output.'''
 
type '''txt_output.'''
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
Click on '''OK.'''
 
Click on '''OK.'''
 
|
 
|
−
Type '''txt_output '''for '''Tag '''field'''.'''
+
Type '''txt_output''' for '''Tag''' field'''.'''
−
 
+
−
 
+
−
 
+
−
Do not type anything in the '''String '''field.
+
−
 
+
  
 +
Do not type anything in the '''String''' field.
  
 
We will not display any messages until we receive an input from the user.
 
We will not display any messages until we receive an input from the user.
  
−
 
+
Click on the '''OK''' button'''.'''
−
 
+
−
Click on the '''OK '''button'''.'''
+
 
|-
 
|-
 
|
 
|
Line 274: Line 208:
 
|
 
|
 
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.
 
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.
−
 
−
 
  
 
Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''
 
Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''
  
−
 
+
A '''Text''' box with the '''string “UnName3”''' appears.
−
 
+
−
A '''Text '''box with the '''string “UnName3”''' appears.
+
 
|-
 
|-
−
| Cursor on '''Text '''Box'''.'''
+
| Cursor on '''Text''' Box'''.'''
 
|
 
|
−
A default '''string''' value “'''UnName3”''' is assigned to the '''Text '''box.
+
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.
−
 
+
−
 
+
  
 
This is because the '''String''' field was kept empty.
 
This is because the '''String''' field was kept empty.
Line 293: Line 221:
 
| Cursor on the interface.
 
| Cursor on the interface.
 
|
 
|
−
Now the '''GUI''' part is completed.  
+
Now the '''GUI''' part is completed.
−
 
+
−
 
+
  
 
Let us proceed to generate an equivalent '''Scilab''' code.
 
Let us proceed to generate an equivalent '''Scilab''' code.
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUI Builder Palette '''window.
+
Cursor on '''GUI Builder Palette''' window.
  
−
Click on''' Generate, '''and then click on '''Generate GUI code.'''
+
Click on '''Generate,''' and then click on '''Generate GUI code.'''
 
|
 
|
 
Go to the '''GUIBuilder Palette'''.
 
Go to the '''GUIBuilder Palette'''.
  
−
 
+
Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
−
 
+
−
Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code. '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''uiputfile '''window,
+
Cursor on '''uiputfile''' window,
−
 
+
−
 
+
  
 
click on '''Save.'''
 
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.'''
+
We will save this file as '''printuserinput.'''
  
−
 
+
Click on the '''Save''' button'''.'''
−
 
+
−
Click on the '''Save '''button'''. '''
+
 
|-
 
|-
 
|
 
|
−
Cursor on '''GUI Created '''window,
+
Cursor on '''GUI Created''' window,
−
 
+
−
 
+
−
 
+
−
 
+
  
 
click on '''OK.'''
 
click on '''OK.'''
 
|
 
|
−
It shows a dialog box that displays GUI''' created successfully!'''
+
It shows a dialog box that displays GUI '''created successfully!'''
−
 
+
−
 
+
  
 
Click on '''OK.'''
 
Click on '''OK.'''
 
|-
 
|-
 
| Cursor on '''SciNotes''' window,
 
| Cursor on '''SciNotes''' window,
−
| The corresponding '''sce file '''is generated.
+
| The corresponding '''sce file''' is generated.
 
|-
 
|-
 
|
 
|
 
highlight line with '''handles.ed_input.'''
 
highlight line with '''handles.ed_input.'''
−
 
−
 
  
 
Highlight the part inside the '''uicontrol''' parentheses'''.'''
 
Highlight the part inside the '''uicontrol''' parentheses'''.'''
 
|
 
|
−
Notice the '''handle '''for the '''Edit '''box''' '''is''' handles.ed_input'''.
+
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.
−
 
+
−
 
+
  
−
The properties of the '''Edit '''box are defined in its respective''' uicontrol function'''.
+
The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
 
|-
 
|-
 
|
 
|
 
Highlight '''handles.txt_output.'''
 
Highlight '''handles.txt_output.'''
−
 
−
 
−
 
−
 
  
 
Highlight the part inside the '''uicontrol''' parentheses'''.'''
 
Highlight the part inside the '''uicontrol''' parentheses'''.'''
 
|
 
|
−
The '''handle '''for the '''Text '''box''' '''is''' handles.txt_output'''.  
+
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.
−
 
+
−
 
+
  
 
Its properties are defined within its respective '''uicontrol function'''.
 
Its properties are defined within its respective '''uicontrol function'''.
Line 375: Line 276:
 
|
 
|
 
Scroll down to the end.
 
Scroll down to the end.
−
 
−
 
−
 
−
 
−
 
−
 
  
 
Place the cursor within the '''h1_callback function.'''
 
Place the cursor within the '''h1_callback function.'''
Line 386: Line 281:
 
Now, scroll down to the end of the code file.
 
Now, scroll down to the end of the code file.
  
−
 
+
Let us make the '''pushbutton''' interactive.
−
 
+
−
Let us make the''' pushbutton '''interactive.
+
−
 
+
−
 
+
  
 
For that, we will write the '''code''' within the '''h1_callback function.'''
 
For that, we will write the '''code''' within the '''h1_callback function.'''
Line 399: Line 290:
 
within '''h1_callback''',
 
within '''h1_callback''',
  
−
type,  
+
type,
  
 
'''ip = handles.ed_input.string'''
 
'''ip = handles.ed_input.string'''
  
−
Press''' Enter.'''
 
  
 
'''handles.txt_output.string = string(ip)'''
 
'''handles.txt_output.string = string(ip)'''
−
| Type the code as seen here with the same '''syntax'''.
+
| Type the code as seen here with the same syntax.
 
|-
 
|-
 
|
 
|
−
Highlight,''' '''
+
Highlight,
  
 
'''ip = handles.ed_input.string'''
 
'''ip = handles.ed_input.string'''
−
|
+
| The first line will assign the user input from an '''Edit box''' to the variable '''ip.'''
−
The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
+
 
|-
 
|-
 
|
 
|
Line 419: Line 308:
  
 
'''handles.txt_output.string = string(ip) '''
 
'''handles.txt_output.string = string(ip) '''
−
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
+
| The next line will pass the value of variable '''ip''' to a '''Text box'''.
 
|-
 
|-
 +
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
 
|
 
|
−
Highlight '''.string '''after''' Edit '''and '''Text''' box''' handle'''.
+
'''GUI''' supports '''string''' format while taking and passing the values.
−
|
+
−
'''GUI''' supports '''string''' format while taking and '''passing''' the values.
+
−
 
+
−
 
+
  
−
Hence, I have added it after the''' Edit '''and '''Text''' box''' handle'''.
+
Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
 
|-
 
|-
 
| Highlight '''string(ip)'''.
 
| Highlight '''string(ip)'''.
 
|
 
|
−
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.
+
Notice the variable '''‘ip’''' while passing the value back to the '''Text''' box handle.
−
 
+
−
 
+
  
 
It is put within the parentheses of the '''string command.'''
 
It is put within the parentheses of the '''string command.'''
Line 442: Line 326:
 
|-
 
|-
 
|
 
|
−
Cursor on '''Scinotes '''window,
+
Cursor on '''Scinotes''' window,
  
−
Click on '''Execute, '''and then click on''' File with echo.'''
+
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'''.
 
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
 
|-
 
|-
Line 451: Line 335:
 
A window named '''Graphic window number 2''' opens.
 
A window named '''Graphic window number 2''' opens.
  
−
 
+
This shows the '''GUI''' which we just created with the '''pushbutton'''.
−
 
+
−
This shows the '''GUI '''which we just created with the '''pushbutton'''.  
+
−
 
+
−
 
+
  
 
Let us now test the '''GUI'''.
 
Let us now test the '''GUI'''.
Line 461: Line 341:
 
|
 
|
 
Delete '''Enter the input message.'''
 
Delete '''Enter the input message.'''
−
 
−
 
−
 
−
 
  
 
Type '''Welcome to Scilab!'''
 
Type '''Welcome to Scilab!'''
 
|
 
|
−
Delete the '''string “Enter the input message” '''from the '''Edit '''box'''.'''
+
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''
  
−
 
+
Then type “'''Welcome to Scilab!”'''
−
 
+
−
Then type “'''Welcome to Scilab!” '''
+
 
|-
 
|-
 
|
 
|
Line 483: Line 357:
 
Click once on the '''Print''' '''pushbutton'''.
 
Click once on the '''Print''' '''pushbutton'''.
  
−
 
+
The '''Text''' box displays the '''string “Welcome to Scilab!”'''
−
 
+
−
 
+
−
 
+
−
The '''Text''' box''' '''displays the '''string “Welcome to Scilab!”'''
+
 
|-
 
|-
 
|
 
|
 
Cursor on '''Graphic Window number 2.'''
 
Cursor on '''Graphic Window number 2.'''
−
 
−
 
  
 
Delete '''Welcome to Scilab!'''
 
Delete '''Welcome to Scilab!'''
Line 500: Line 368:
 
Let us test this using numbers now.
 
Let us test this using numbers now.
  
−
 
+
Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
−
 
+
−
 
+
−
 
+
−
Delete the '''string “Welcome to Scilab!” '''from the''' Edit '''box and type '''258. '''
+
 
|-
 
|-
 
|
 
|
Line 514: Line 378:
 
|
 
|
 
Click on the '''Print''' '''pushbutton'''.
 
Click on the '''Print''' '''pushbutton'''.
−
 
−
 
−
 
−
 
  
 
The '''Text''' box shows the number '''258''' which we typed just now.
 
The '''Text''' box shows the number '''258''' which we typed just now.
−
 
−
 
  
 
Likewise, you can try some more inputs for your own understanding.
 
Likewise, you can try some more inputs for your own understanding.
Line 530: Line 388:
 
'''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 have:
  
−
 
+
<ul>
−
In this tutorial, we have:
+
<li><blockquote><p>Added an '''Edit''' box to prompt for user input.</p></blockquote></li>
 +
<li><blockquote><p>Added a '''Text''' box to display the output'''.'''</p></blockquote></li>
 +
<li><blockquote><p>Learnt about the '''String command'''.</p></blockquote></li></ul>
 
|-
 
|-
 
|
 
|
Line 544: Line 405:
 
|
 
|
 
As an assignment, please do the following.
 
As an assignment, please do the following.
 +
 +
<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>
 
|-
 
|-
 
|
 
|
Line 550: Line 419:
 
'''Assignment'''
 
'''Assignment'''
 
|
 
|
 +
<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:  
+
Show Slide:
  
 
'''About Spoken Tutorial Project'''
 
'''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 434:
 
| 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 442:
 
|-
 
|-
 
|
 
|
−
Show Slide:  
+
Show Slide:
  
 
'''FOSSEE Forum'''
 
'''FOSSEE Forum'''
Line 584: Line 452:
 
'''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'''
Line 613: Line 477:
 
|
 
|
 
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.
 
|}
 
|}

Latest revision as of 06:49, 24 September 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.

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


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