GUI-in-Scilab/C2/Creating-a-GUI-based-exponent-calculator/English - Revision history

Iswariyas at 08:07, 17 September 2021

2021-09-17T08:07:34Z

Iswariyas at 11:22, 15 September 2021

2021-09-15T11:22:55Z

Iswariyas at 11:00, 15 September 2021

2021-09-15T11:00:59Z

Iswariyas at 10:38, 15 September 2021

2021-09-15T10:38:28Z

Iswariyas: Created page with "'''Title of script''': Creating a '''GUI''' based exponent calculator '''Author: Rashmi Patankar and Iswariya Sasikumar''' {| class= "wikitable" ! '''Visual Cue''' ! '''Narr..."

2021-08-06T17:54:37Z

Created page with "'''Title of script''': Creating a '''GUI''' based exponent calculator '''Author: Rashmi Patankar and Iswariya Sasikumar''' {| class= "wikitable" ! '''Visual Cue''' ! '''Narr..."

New page

'''Title of script''': Creating a '''GUI''' based exponent calculator

'''Author: Rashmi Patankar and Iswariya Sasikumar'''

{| class= "wikitable"
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
|
Hello and welcome to the Spoken Tutorial on

“'''Creating a GUI based exponent calculator”.'''
|-
|
Show Slide:

'''Learning Objectives'''
|
In this tutorial, we will learn how to:

<ul>
<li><blockquote>Calculate the '''exponent''' of a number using '''GUI''' and</blockquote></li>
<li><blockquote>Use of '''strtod command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System Requirements'''

'''Only narration'''
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10 OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0 and'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</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:

'''Pre-requisites'''

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

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

'''Code Files'''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
On '''GUIBuilder toolbox''',

hover cursor over '''GUIBuilder Palette''' window and '''Graphic window number 1'''.
|
I have already opened the '''GUIBuilder toolbox.'''

As we can see there are two windows.

The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic window number 1''' is on the right side.

Let us start by creating the '''GUI'''.
|-
|

|
To calculate the '''exponent''' of a number, we need two inputs.

The first input is a '''base''' number and the second input is an '''exponent'''.
|-
|
On '''GUIBuilder Palette''',

click '''Edit.'''
| For the first input, go to the '''GUIBuilder Palette''' and click on '''Edit'''.
|-
|
On '''Scilab Multiple Values Request''' window,

type '''ed_base''' in '''Tag''' field,

type '''Enter''' '''the base''' in '''String''' field'''.'''

Click on '''OK.'''
|
A window named '''Scilab Multiple Values Request''' will open.

Type '''ed underscore base''' as the '''Tag''' and '''Enter the base''' as the '''String'''.

Then click on '''OK'''.
|-
|
On '''Graphic window number 1,'''

Place the '''Edit''' box in window's top left side.

Hover cursor over an '''Edit''' box.
|
Switch to the '''Graphic window number 1'''.

Place the '''Edit box''' in the window's top left side, by considering a suitable size.

An '''Edit box''' with the '''string “Enter the base”''' appears.
|-
|
On '''GUIBuilder palette''',

click on '''Edit'''.
| Let us take another '''Edit box''' for the second input.
|-
|
On '''Scilab Multiple Values Request''' window''','''

type '''ed_exponent''' in '''Tag''' field,

type '''Enter''' '''an exponent''' in '''String''' field'''.'''

Click on '''OK.'''
|
I will type '''ed underscore exponent''' as the '''Tag''' and '''Enter''' '''an exponent''' as the '''String'''.

Then click on '''OK'''.
|-
|
On '''Graphic window number 1,'''

Place the '''Edit''' box in window's top right side.

Hover cursor over an '''Edit''' box.
|
Consider a suitable size of the '''Edit''' box.

Place it in the top right side of the '''Graphic window number 1'''.

An '''Edit box''' with the '''string “Enter an exponent”''' appears.
|-
|
On '''GUIBuilder Palette''' window,

click on '''Text'''.
| To display '''output''', go to the '''GUIBuilder Palette''' and click on '''Text'''.
|-
|
On '''Scilab Multiple Values Request''' window,

type '''txt_output''' in '''Tag''' field'''.'''

Click on '''OK.'''
|
I will type '''txt underscore output''' as the '''Tag'''.

Keep the '''String''' field empty.

We will not display any messages until we receive from the '''user'''.

Then click on '''OK'''.
|-
|
On '''Graphic window number 1,'''

place the '''Text''' box at bottom.

Hover cursor over '''Text''' box.
|
I will place the '''Text box''' at the bottom of the '''Graphic window number 1'''.

A '''Text box''' with the '''string “UnName3”''' appears.
|-
|
On '''GUIBuilder Palette window''',

click on '''Pushbutton'''.
|
To perform the calculations, I will add a '''pushbutton'''.

Go to '''GUIBuilder Palette''' and click on '''Pushbutton'''.
|-
|
On the '''Scilab Multiple Values Request''' window,

type '''pb_cal''' in '''Tag''' field and type '''Calculate''' in '''String''' field'''.'''

Click on '''OK.'''
|
Further I will type '''pb underscore cal''' as the '''Tag''' and '''Calculate''' as the '''String''' for the '''pushbutton'''.

Then click on '''OK'''.
|-
|
On '''Graphic window number 1,'''

place the '''Pushbutton''' in the middle.

Hover cursor over '''Pushbutton.'''

Hover cursor over two '''Edit''' boxes and '''Text''' box.
|
Let us place the '''Pushbutton''' in the middle of the '''Graphic window number 1'''.

A '''pushbutton''' with the '''string “Calculate”''' appears.

As a result, the '''pushbutton''' has two '''Edit boxes''' above it and a '''Text box''' below it.
|-
|

| Now the '''GUI''' part is completed.
|-
|
On '''GUIBuilder Palette''' window,

'''Generate>>Generate GUI code.'''
|
To save this file, go to the '''GUIBuilder Palette'''.

Click on '''Generate''' and then on the '''Generate GUI code'''.
|-
|
On '''uiputfile''' window,

save as '''exponent-calculator'''.

Click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
I will save this file as '''exponent-calculator.'''

Click on '''Save'''.
|-
|
On '''GUI created window,'''

click on '''OK.'''
|
A pop-up opens with the message “'''GUI created successfully'''.”

Click on '''OK'''.
|-
|
On '''SciNotes''' window,

highlight '''handles''' for '''base, exponent output''' and '''Calculate'''.
|
We can see that the corresponding '''Scilab code''' has been generated.

Notice the '''handles''' and '''properties''' of the objects we took on a '''graphic window'''.
|-
| Highlight '''handles.ed_base'''.
| '''handles dot ed underscore base''' is the '''handle''' for '''base'''.
|-
| Highlight '''handles.ed_exponent'''.
| '''handles dot ed underscore exponent''' is the '''handle''' for '''exponent'''.
|-
| Highlight '''handles.txt_output.'''.
| '''handles dot txt underscore output''' is the '''handle''' for '''output.'''
|-
| Highlight '''handles.pb_cal.'''
| '''handles dot pb underscore cal''' is the '''handle''' for '''Pushbutton.'''
|-
| Hover cursor over '''pb_cal_callback''' function.
| Now let us write a '''function definition''' for '''pb_cal_callback function'''.
|-
|
Cursor on '''SciNotes''' window,

type within '''pb_cal_callback'''.

Type,

'''base = strtod(handles.ed_base.string)'''

'''exponent = strtod(handles.ed_exponent.string)'''

'''out = base^exponent'''

'''handles.txt_output.string = string(out)'''
|
Enter the code as seen here with the same syntax.

The same code can be found under the '''Code files''' section.

You can use it as explained earlier in this tutorial.
|-
|
Highlight,

'''base = strtod(handles.ed_base.string)'''
| The first line assigns the user input for a '''base''' value to the '''variable ‘base’'''.
|-
|
Highlight,

'''exponent = strtod(handles.ed_exponent.string)'''
| The second line assigns the user input for an '''exponent''' to the '''variable ‘exponent’'''.
|-
|
On '''SciNotes''' window,

within '''pb_cal_callback.'''

highlight '''strtod''' command.
|
It is not possible to do calculations when the value is in '''string''' format.

Hence I have put the '''handles''' inside the '''strtod command.'''

This '''command''' will convert the value from the '''string''' format to a '''decimal''' format.
|-
|
Highlight,

'''out = base^exponent'''
|
Notice the next line.

This equation will perform the calculations.

The final result will be stored in the '''variable ‘out.''''
|-
|
Highlight,

'''handles.txt_output.string = string(out)'''
| The last line will give the value of a '''variable ‘out’''' to the '''Text box'''.
|-
| Press '''Ctrl+S.'''
| Let us save all our work by pressing '''Control''' and '''S''' keys together.
|-
|
On '''Scinotes''' window,

'''Execute'''>>'''file''' '''with echo'''
|
'''Execute''' this by clicking '''Execute''' on the '''menubar''' and then on '''File with echo'''.

The '''Graphic window number 2''' opens.
|-
|
On '''Graphic window number 2,'''

delete '''Enter the base. '''

Type '''2.'''

Delete '''Enter an exponent.'''

Type '''4'''.
|
Now let us test the '''GUI.'''

I will calculate '''4''' to the '''power 2'''.

Delete the '''string “Enter the base”''' from the '''Edit box''' and type '''4'''.

Delete the '''string “Enter an exponent”''' from the '''Edit box''' and type '''2'''.
|-
|
On '''Graphic window number 2,'''

click on '''Calculate Pushbutton'''.

Hover cursor over '''Text''' box.
|
Then click on the '''Calculate Pushbutton.'''

The '''Text box''' shows the desired answer of '''16''' as we expected.

This way we can perform numeric calculations using '''GUI''' in '''Scilab'''.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial. Let us summarise.

In this tutorial, we have:

<ul>
<li><blockquote>Calculated the '''exponent''' of a number using '''GUI''' and</blockquote></li>
<li><blockquote>Used '''strtod command'''.</blockquote></li></ul>
|-
|
Show Slide:

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

Create a '''GUI''' which has

<ul>
<li><blockquote>Two '''Edit boxes''' to take two numbers from the '''user'''.</blockquote></li>
<li><blockquote>Four '''pushbuttons''' to perform '''addition''', '''subtraction''', '''multiplication''' and '''division'''.</blockquote></li>
<li><blockquote>One '''Text box''' to display the answer of these operations.</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'''
|
We conduct workshops using '''Spoken Tutorials''' and give certificates.

Please contact 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 these sites.
|-
|
Show Slide:

'''Lab Migration'''
|
The '''FOSSEE''' team coordinates the '''Lab Migration''' project.

For more details, please visit this site.
|-
|
Show Slide:

'''Acknowledgement'''
| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
|-
|
Show Slide:

'''Thank you'''
|
This is '''Iswariya Sasikumar''', a '''FOSSEE''' intern 2021,IIT Bombay signing off.

Thanks for joining.
|}

@@ Line 24: / Line 24: @@
 <ul>
-<li><blockquote><p>Calculate the '''exponent''' of a number using '''GUI''' and</p></blockquote></li>
+<li><blockquote><p>Calculate the exponent of a number using '''GUI''' and</p></blockquote></li>
-<li><blockquote><p>Use of '''strtod command'''.</p></blockquote></li></ul>
+<li><blockquote><p>Use of '''strtod''' command.</p></blockquote></li></ul>
 |-
+|
@@ Line 107: / Line 107: @@
+|
-To calculate the '''exponent''' of a number, we need two inputs.
+To calculate the exponent of a number, we need two inputs.
-The first input is a '''base''' number and the second input is an '''exponent'''.
+The first input is a base number and the second input is an exponent.
 |-
+|
@@ Line 187: / Line 187: @@
 click on '''Text'''.
-| To display '''output''', go to the '''GUIBuilder Palette''' and click on '''Text'''.
+| To display output, go to the '''GUIBuilder Palette''' and click on '''Text'''.
 |-
+|
@@ Line 202: / Line 202: @@
 Keep the '''String''' field empty.
-We will not display any messages until we receive from the '''user'''.
+We will not display any messages until we receive from the user.
 Then click on '''OK'''.
@@ Line 294: / Line 294: @@
 On '''SciNotes''' window,
-highlight '''handles''' for '''base, exponent output''' and '''Calculate'''.
+highlight '''handles''' for base, exponent output and Calculate.
+|
 We can see that the corresponding '''Scilab code''' has been generated.
@@ Line 301: / Line 301: @@
 |-
 | Highlight '''handles.ed_base'''.
-| '''handles dot ed underscore base''' is the '''handle''' for '''base'''.
+| '''handles dot ed underscore base''' is the '''handle''' for base.
 |-
 | Highlight '''handles.ed_exponent'''.
-| '''handles dot ed underscore exponent''' is the '''handle''' for '''exponent'''.
+| '''handles dot ed underscore exponent''' is the '''handle''' for exponent.
 |-
 | Highlight '''handles.txt_output.'''.
-| '''handles dot txt underscore output''' is the '''handle''' for '''output.'''
+| '''handles dot txt underscore output''' is the '''handle''' for output.
 |-
 | Highlight '''handles.pb_cal.'''
@@ Line 346: / Line 346: @@
 '''base = strtod(handles.ed_base.string)'''
-| The first line assigns the user input for a '''base''' value to the '''variable ‘base’'''.
+| The first line assigns the user input for a base value to the variable ‘base’.
 |-
+|
@@ Line 352: / Line 352: @@
 '''exponent = strtod(handles.ed_exponent.string)'''
-| The second line assigns the user input for an '''exponent''' to the '''variable ‘exponent’'''.
+| The second line assigns the user input for an exponent to the variable ‘exponent’.
 |-
+|
@@ Line 363: / Line 363: @@
 It is not possible to do calculations when the value is in '''string''' format.
-Hence I have put the '''handles''' inside the '''strtod command.'''
+Hence I have put the '''handles''' inside the '''strtod''' command.
-This '''command''' will convert the value from the '''string''' format to a '''decimal''' format.
+This command will convert the value from the '''string''' format to a '''decimal''' format.
 |-
+|
@@ Line 376: / Line 376: @@
 This equation will perform the calculations.
-The final result will be stored in the '''variable ‘out.''''
+The final result will be stored in the variable ‘out’.
 |-
+|
@@ Line 382: / Line 382: @@
 '''handles.txt_output.string = string(out)'''
-| The last line will give the value of a '''variable ‘out’''' to the '''Text box'''.
+| The last line will give the value of a variable ‘out’ to the '''Text box'''.
 |-
 | Press '''Ctrl+S.'''
@@ Line 392: / Line 392: @@
 '''Execute'''&gt;&gt;'''file''' '''with echo'''
+|
-'''Execute''' this by clicking '''Execute''' on the '''menubar''' and then on '''File with echo'''.
+Execute this by clicking '''Execute''' on the '''menubar''' and then on '''File with echo'''.
 The '''Graphic window number 2''' opens.
@@ Line 448: / Line 448: @@
 <ul>
-<li><blockquote><p>Calculated the '''exponent''' of a number using '''GUI''' and</p></blockquote></li>
+<li><blockquote><p>Calculated the exponent of a number using '''GUI''' and</p></blockquote></li>
-<li><blockquote><p>Used '''strtod command'''.</p></blockquote></li></ul>
+<li><blockquote><p>Used '''strtod''' command.</p></blockquote></li></ul>
 |-
+|
@@ Line 468: / Line 468: @@
 <ul>
-<li><blockquote><p>Two '''Edit boxes''' to take two numbers from the '''user'''.</p></blockquote></li>
+<li><blockquote><p>Two '''Edit boxes''' to take two numbers from the user.</p></blockquote></li>
-<li><blockquote><p>Four '''pushbuttons''' to perform '''addition''', '''subtraction''', '''multiplication''' and '''division'''.</p></blockquote></li>
+<li><blockquote><p>Four '''pushbuttons''' to perform addition, subtraction, multiplication and division.</p></blockquote></li>
 <li><blockquote><p>One '''Text box''' to display the answer of these operations.</p></blockquote></li></ul>
 |-

@@ Line 83: / Line 83: @@
 Let us start by creating the '''GUI'''.
 |-
+| Only narration
+|

@@ Line 20: / Line 20: @@
 '''Learning Objectives'''
+|
 In this tutorial, we will learn how to:
@@ Line 116: / Line 120: @@
 click '''Edit.'''
 | For the first input, go to the '''GUIBuilder Palette''' and click on '''Edit'''.
 |-
+|
@@ Line 152: / Line 158: @@
 click on '''Edit'''.
 | Let us take another '''Edit box''' for the second input.
 |-
+|
@@ Line 162: / Line 170: @@
 Click on '''OK.'''
+|
@@ Line 188: / Line 196: @@
 click on '''Text'''.
 | To display output, go to the '''GUIBuilder Palette''' and click on '''Text'''.
 |-
+|
@@ Line 236: / Line 246: @@
+|
 Further I will type '''pb underscore cal''' as the '''Tag''' and '''Calculate''' as the '''String''' for the '''pushbutton'''.
 Then click on '''OK'''.
@@ Line 276: / Line 288: @@
 Click on '''Save.'''
+|
 Click on '''Save'''.
@@ Line 313: / Line 325: @@
 |-
 | Hover cursor over '''pb_cal_callback''' function.
-| Now let us write a '''function definition''' for '''pb_cal_callback function'''.
+| Now let us write a function definition for '''pb_cal_callback function'''.
 |-
+|
@@ Line 365: / Line 377: @@
 Hence I have put the '''handles''' inside the '''strtod''' command.
-This command will convert the value from the '''string''' format to a '''decimal''' format.
+This command will convert the value from the '''string''' format to a decimal format.
 |-
+|

@@ Line 31: / Line 31: @@
 '''System Requirements'''
 '''Only narration'''
@@ Line 49: / Line 56: @@
 '''Pre-requisites'''
 https://spoken-tutorial.org
@@ Line 62: / Line 71: @@
 '''Code Files'''
+|
 <ul>
@@ Line 70: / Line 83: @@
+|
 On '''GUIBuilder toolbox''',
 hover cursor over '''GUIBuilder Palette''' window and '''Graphic window number 1'''.
+|
 I have already opened the '''GUIBuilder toolbox.'''
@@ Line 84: / Line 103: @@
 |-
 | Only narration
+|
@@ Line 108: / Line 129: @@
 Type '''ed underscore base''' as the '''Tag''' and '''Enter the base''' as the '''String'''.
 Then click on '''OK'''.
@@ Line 139: / Line 162: @@
 Click on '''OK.'''
+|
 I will type '''ed underscore exponent''' as the '''Tag''' and '''Enter''' '''an exponent''' as the '''String'''.
 Then click on '''OK'''.
@@ Line 166: / Line 193: @@
 type '''txt_output''' in '''Tag''' field'''.'''
 Click on '''OK.'''
@@ Line 185: / Line 214: @@
+|
 I will place the '''Text box''' at the bottom of the '''Graphic window number 1'''.
 A '''Text box''' with the '''string “UnName3”''' appears.
@@ Line 218: / Line 249: @@
+|
 Let us place the '''Pushbutton''' in the middle of the '''Graphic window number 1'''.
 A '''pushbutton''' with the '''string “Calculate”''' appears.
@@ Line 242: / Line 275: @@
 Click on '''Save.'''
+|
 I will save this file as '''exponent-calculator.'''
@@ Line 302: / Line 335: @@
 You can use it as explained earlier in this tutorial.
 |-
+|
@@ Line 359: / Line 398: @@
+|
 On '''Graphic window number 2,'''
 delete '''Enter the base. '''
-Type '''2.'''
+Type '''4.'''
 Delete '''Enter an exponent.'''
-Type '''4'''.
+Type '''2'''.
+|
 Now let us test the '''GUI.'''
@@ Line 373: / Line 414: @@
 Delete the '''string “Enter the base”''' from the '''Edit box''' and type '''4'''.
 Delete the '''string “Enter an exponent”''' from the '''Edit box''' and type '''2'''.
 |-
+|
@@ Line 393: / Line 438: @@
 '''Summary'''
+|
 This brings us to the end of this tutorial. Let us summarise.
@@ Line 406: / Line 455: @@
 '''Assignment'''
+|
 As an assignment activity, please do the following.