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

'''Title of script''': Creating a '''GUI''' based '''Interest''' 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 Interest calculator”.'''
|-
|
Show Slide:

'''Learning Objectives'''


|
In this tutorial, we will:

<ul>
<li><blockquote><p>Learn about '''Radiobuttons''' and</p></blockquote></li>
<li><blockquote><p>Calculate simple and compound interest using '''GUI.'''</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 '''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>
|-
| What is a '''Radiobutton'''?






|
<ul>
<li><blockquote><p>A '''Radiobutton''' is a button with two states.</p></blockquote></li>
<li><blockquote><p>They are intended to be mutually exclusive.</p></blockquote></li>
<li><blockquote><p>As a result, at any given time only one '''button''' is in a selected state.</p></blockquote></li></ul>
|-
|
Show Slide:

Objects to calculate simple and compound interest










|
To calculate the interest, we need three '''Edit''' boxes to take user inputs.

<ul>
<li><blockquote><p>The first '''Edit box''' for principal amount.</p></blockquote></li>
<li><blockquote><p>The second '''Edit box''' for rate of interest.</p></blockquote></li>
<li><blockquote><p>The third '''Edit box''' for time.</p></blockquote></li></ul>

After that, we need two '''Radiobuttons''' to calculate Simple and Compound interest.

Lastly, one '''Text''' box is required to display the answer.
|-
|
Cursor on '''GUIBuilder''' Palette,

Hover over '''GUIBuilder''' Palette and '''Graphic window number 1.'''

Hover over three '''Edit''' boxes and one '''Text''' box
|
I have already opened the '''guiFigure.sce''' file using the '''GUIBuilder toolbox'''.

The '''GUIBuilder Palette''' and '''Graphic window number 1''' open up.

The graphic window shows the '''GUI''' with three '''Edit''' boxes and one '''Text''' box.
|-
|
Cursor on '''GUIBuilder Palette,'''

hover over the first '''Edit''' box.
| The first '''Edit''' box has the '''String''' ‘'''Enter principal amount’''' with '''Tag ‘ed_principal’.'''


|-
|
Cursor on '''GUIBuilder''' Palette,

hover over the second '''Edit''' box.
| The second '''Edit''' box has the '''String ‘Enter rate of interest’''' with '''Tag ‘ed_rate’.'''


|-
|
Cursor on '''GUIBuilder''' Palette,

hover over the third '''Edit''' box. 
| The third '''Edit''' box has the '''String ‘Enter time’''' with '''Tag ‘ed_time’.'''


|-
|
Cursor on '''GUIBuilder''' Palette,

hover over the '''Text''' box.
| The '''Text''' box has the '''String ‘UnName4’''' with '''Tag ‘txt_answer’'''.


|-
|
Only narration
| Now l will add two '''Radiobuttons''' for Simple interest and Compound interest.
|-
|
On '''GUIBuilder Palette''',

click '''Radiobutton.'''
| Go to '''GUIBuilder Palette''' and click on '''Radiobutton'''.


|-
|
On '''Scilab Multiple Values Request''' window,

type '''rd_simple''' and type '''Simple interest.'''

Click on '''OK.'''
|
Let us type '''rd_simple''' as the '''Tag''' and '''Simple interest''' as the '''String'''.



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

place '''Radiobutton''' in the middle left.

Hover cursor over '''Simple''' '''interest''' '''Radiobutton'''.
|
Let us place this '''Radiobutton''' in the middle left of '''Graphic window number 1'''.



'''‘Simple interest’ Radiobutton''' appears.
|-
|
On '''GUIBuilder Palette''',

click '''Radiobutton.'''
| Let us take another '''Radiobutton''' for the Compound interest.


|-
|
On '''Scilab Multiple Values Request''' window,

type '''rd_compound''' and type '''Compound interest.'''

Click on '''OK.'''
|
Now I will type '''rd_compound''' as the '''Tag''' and ‘'''Compound interest’''' as the '''String'''.



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

place '''Radiobutton''' in the middle right.

Hover cursor over '''Radiobutton'''
|
Place this '''Radiobutton''' next to the '''Simple interest Radiobutton'''.



‘'''Compound interest’ Radiobutton''' appears.
|-
|

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



'''Generate&gt;&gt;Generate GUI code.'''
|
Let us save the file.

Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' and then on the '''Generate GUI code'''.
|-
|
Save as '''interest-calculator'''.

Click on '''Save.'''
|
I will save this file as '''interest-calculator.'''

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

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

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

highlight '''handles''' for '''principal, rate, time, simple interest, compound interest''' and '''answer'''.
|
You 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_principal'''.
| '''handles.ed_principal''' is the '''handle''' for principal amount.
|-
| Highlight '''handles.ed_rate'''.
| '''handles.ed_rate''' is the '''handle''' for rate.
|-
| Highlight '''handles.ed_time'''.
| '''handles.ed_time''' is the '''handle''' for time.
|-
| Highlight '''handles.txt_answer'''.
| '''handles.txt_answer''' is the '''handle''' for answer'''.'''
|-
| Highlight '''handles.rd_simple'''.
| '''handles.rd_simple''' is the '''handle''' for simple interest.
|-
| Highlight '''handles.rd_compound'''.
| '''handles.rd_compound''' is the '''handle''' for compound interest.
|-
|
Hover cursor over '''rd_simple_callback'''

function.
| Now let us write a function definition for '''rd_simple_callback function'''.
|-
|
Cursor on '''SciNotes''' window,

type within '''rd_simple_callback'''.

'''handles.rd_simple.value = 1'''

'''handles.rd_compound.value = 0'''

'''Principal = strtod(handles.ed_principal.string)'''

'''Rate = strtod(handles.ed_rate.string)'''

'''Time = strtod(handles.ed_time.string)'''

'''SI = (Principal * Rate * Time)/100'''

'''handles.txt_answer.string = string(SI)'''
|
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,

'''handles.rd_simple.value = 1'''

'''handles.rd_compound.value = 0'''




|
After clicking the '''Simple interest Radiobutton-'''

<ul>
<li><blockquote><p>This line will select the '''Simple interest Radiobutton'''.</p></blockquote></li>
<li><blockquote><p>The following line will deselect the '''Compound interest''' '''Radiobutton'''.</p></blockquote></li></ul>

This way only one button remains selected.
|-
|
Highlight,

'''Principal = strtod(handles.ed_principal.string)'''
| Next line then assigns the user input for principal value to variable '''‘Principal’'''.
|-
|
Highlight,

'''Rate = strtod(handles.ed_rate.string)'''
| Its next line assigns the user input for rate of interest to variable '''‘Rate’'''.
|-
|
Highlight,

'''Time = strtod(handles.ed_time.string)'''
| The further line assigns the user input for time to the variable '''‘Time’'''.
|-
|
Highlight,

'''SI = (Principal * Rate * Time)/100'''


|
Notice the next line.

This equation will perform the calculations.

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

'''handles.txt_answer.string = string(SI)'''
| The last line will give the value of the variable '''‘SI’''' to the '''Text''' box.
|-
| Hover cursor over '''rd_compound_callback''' function.
| Next I will write a function definition for '''rd_compound_callback''' function'''.'''
|-
|
Cursor on '''SciNotes''' window,

type within '''rd_compound_callback'''.

'''handles.rd_compound.value = 1'''

'''handles.rd_simple.value = 0'''

'''Principal = strtod(handles.ed_principal.string)'''

'''Rate = strtod(handles.ed_rate.string)'''

'''Time = strtod(handles.ed_time.string)'''

'''CI = (Principal *(1+( Rate/100))^ Time) - Principal'''

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

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














|-
|
Highlight,

'''handles.rd_compound.value = 1'''

'''handles.rd_simple.value = 0'''




|
This action is similar to what we have seen earlier.

After clicking the '''Compound interest''' '''Radiobutton-'''

<ul>
<li><blockquote><p>The first line will now select the '''Compound interest''' '''Radiobutton'''.</p></blockquote></li>
<li><blockquote><p>The next line will deselect the '''Simple interest Radiobutton'''.</p></blockquote></li></ul>
|-
|
Highlight,

'''Principal = strtod(handles.ed_principal.string)'''

'''Rate = strtod(handles.ed_rate.string)'''

'''Time = strtod(handles.ed_time.string)'''
| Notice the next three lines are the same as in the '''rd_simple_callback function.'''




|-
|
Highlight,

'''CI = (Principal *(1+( Rate/100))^ Time) - Principal'''
|
The next line will calculate the Compound interest.

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

'''handles.txt_answer.string = string(CI)'''
| The last line will give the value of variable '''‘CI’''' to the '''Text''' box.
|-
| Press '''Ctrl+S.'''
| Let us save the '''Scilab code''' by pressing '''Ctrl''' 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'''.

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

delete '''Enter the principal amount here. '''

Type '''8000.'''

Delete '''Enter rate of interest.'''

Type '''7'''.

Delete '''Enter time.'''

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

Delete the '''string “Enter principal amount”''' from the '''Edit''' box and type '''8000'''.



Delete the '''string “Enter rate of interest”''' from the '''Edit''' box and type '''7'''.



Delete the '''string “Enter time”''' from the '''Edit''' box and type '''3'''.
|-
|
On '''Graphic window number 1,'''

click on '''Simple interest radiobutton'''.

Hover cursor over '''Text''' box.
|
Then click on the '''Simple''' '''interest''' '''Radiobutton.'''



The '''Text''' box shows the desired answer of '''1680''' as expected.
|-
|
On '''Graphic window number 1,'''

click on '''Compound interest radiobutton'''.

Hover cursor over '''Text''' box.
|
Next click on the '''Compound''' '''interest''' '''Radiobutton.'''



Now the '''Text''' box shows the desired answer of '''1800.344''' as expected.
|-
|
Show Slide:

'''Summary'''






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

In this tutorial, we have:

<ul>
<li><blockquote><p>Learnt about '''Radiobuttons''' and</p></blockquote></li>
<li><blockquote><p>Calculated simple and compound interest using '''GUI.'''</p></blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''






|
As an assignment, please do the following.

Create a '''GUI''' which has

<ul>
<li><blockquote><p>An '''Edit''' box to take user input in meters.</p></blockquote></li>
<li><blockquote><p>Two '''Radiobuttons''' to convert it into inches and feet.</p></blockquote></li>
<li><blockquote><p>One '''Text''' box to display the output.</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 this site.
|-
| 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.
|}