View source for GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

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


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

<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'''.
|-
|
Show Slide:

'''System requirement'''

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

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

<ul>
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li>
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
|-
|
Show Slide:

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

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:

<ul>
<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>
|-
|
Show Slide:

'''Assignment'''
|
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>
|-
|
Show Slide:

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

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