View source for GUI-in-Scilab/C2/Creating-a-GUI-based-exponent-calculator/English

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

'''System Requirements'''








'''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 and'''</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.

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><p>The learner must have basic knowledge of '''Scilab''' and '''Graphical User Interface.'''</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>
|-
|
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'''.
|-
| Only narration



|
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&gt;&gt;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.'''
|


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'''&gt;&gt;'''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 '''4.'''

Delete '''Enter an exponent.'''

Type '''2'''.
|
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><p>Calculated the exponent of a number using '''GUI''' and</p></blockquote></li>
<li><blockquote><p>Used '''strtod''' command.</p></blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''







|
As an assignment activity, please do the following.

Create a '''GUI''' which has

<ul>
<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>One '''Text box''' to display the answer of these operations.</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'''
|
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.
|}