Difference between revisions of "GUI-in-Scilab/C2/Creating-a-GUI-based-Interest-calculator/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script''': Creating a '''GUI''' based '''Interest''' calculator '''Author: Rashmi Patankar and Iswariya Sasikumar''' {| class= "wikitable" ! '''Visual Cue''' !...")
 
 
Line 21: Line 21:
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
 +
 +
 
|
 
|
 
In this tutorial, we will:
 
In this tutorial, we will:
Line 32: Line 34:
  
 
'''System Requirements'''
 
'''System Requirements'''
 +
 +
 +
 +
 +
 +
  
 
'''Only Narration'''
 
'''Only Narration'''
 +
 +
 
|
 
|
 
To record this tutorial, I am using
 
To record this tutorial, I am using
Line 50: Line 60:
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
 +
 +
  
 
https://spoken-tutorial.org
 
https://spoken-tutorial.org
Line 63: Line 75:
  
 
'''Code Files'''
 
'''Code Files'''
 +
 +
 +
 +
 
|
 
|
 
<ul>
 
<ul>
Line 70: Line 86:
 
|-
 
|-
 
| What is a '''Radiobutton'''?
 
| What is a '''Radiobutton'''?
 +
 +
 +
 +
 +
 +
 
|
 
|
 
<ul>
 
<ul>
Line 79: Line 101:
 
Show Slide:
 
Show Slide:
  
−
Objects to calculate '''simple''' and '''compound interest'''
+
Objects to calculate simple and compound interest
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 
|
 
|
−
To calculate the '''interest''', we need three '''Edit boxes''' to take user inputs.
+
To calculate the interest, we need three '''Edit''' boxes to take user inputs.
  
 
<ul>
 
<ul>
Line 94: Line 126:
 
|
 
|
 
Cursor on '''GUIBuilder''' Palette,
 
Cursor on '''GUIBuilder''' Palette,
−
 
−
Video-editor: Please put a textbox on screen. “guiFigure.sce”.
 
  
 
Hover over '''GUIBuilder''' Palette and '''Graphic window number 1.'''
 
Hover over '''GUIBuilder''' Palette and '''Graphic window number 1.'''
Line 111: Line 141:
  
 
hover over the first '''Edit''' box.
 
hover over the first '''Edit''' box.
−
 
−
Video-editor: Please put a textbox on screen. “String: Enter principal amount, Tag: ed_principal”
 
 
| The first '''Edit''' box has the '''String''' ‘'''Enter principal amount’''' with '''Tag ‘ed_principal’.'''
 
| The first '''Edit''' box has the '''String''' ‘'''Enter principal amount’''' with '''Tag ‘ed_principal’.'''
 +
 +
 
|-
 
|-
 
|
 
|
Line 119: Line 149:
  
 
hover over the second '''Edit''' box.
 
hover over the second '''Edit''' box.
−
 
−
Video-editor: Please put a textbox on screen. “String: Enter rate of interest, Tag: ed_rate”
 
 
| The second '''Edit''' box has the '''String ‘Enter rate of interest’''' with '''Tag ‘ed_rate’.'''
 
| The second '''Edit''' box has the '''String ‘Enter rate of interest’''' with '''Tag ‘ed_rate’.'''
 +
 +
 
|-
 
|-
 
|
 
|
 
Cursor on '''GUIBuilder''' Palette,
 
Cursor on '''GUIBuilder''' Palette,
  
−
hover over the third '''Edit''' box. Video-editor: Please put a textbox on screen. “String: Enter time, Tag: ed_time”
+
hover over the third '''Edit''' box.  
 
| The third '''Edit''' box has the '''String ‘Enter time’''' with '''Tag ‘ed_time’.'''
 
| The third '''Edit''' box has the '''String ‘Enter time’''' with '''Tag ‘ed_time’.'''
 +
 +
 
|-
 
|-
 
|
 
|
Line 133: Line 165:
  
 
hover over the '''Text''' box.
 
hover over the '''Text''' box.
−
 
−
Video-editor: Please put a textbox on screen. “String: UnName4, Tag: txt_answer”
 
 
| The '''Text''' box has the '''String ‘UnName4’''' with '''Tag ‘txt_answer’'''.
 
| 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'''.
+
| Now l will add two '''Radiobuttons''' for Simple interest and Compound interest.
 
|-
 
|-
 
|
 
|
Line 146: Line 178:
 
click '''Radiobutton.'''
 
click '''Radiobutton.'''
 
| Go to '''GUIBuilder Palette''' and click on '''Radiobutton'''.
 
| Go to '''GUIBuilder Palette''' and click on '''Radiobutton'''.
 +
 +
 
|-
 
|-
 
|
 
|
Line 155: Line 189:
 
|
 
|
 
Let us type '''rd_simple''' as the '''Tag''' and '''Simple interest''' as the '''String'''.
 
Let us type '''rd_simple''' as the '''Tag''' and '''Simple interest''' as the '''String'''.
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 167: Line 203:
 
Let us place this '''Radiobutton''' in the middle left of '''Graphic window number 1'''.
 
Let us place this '''Radiobutton''' in the middle left of '''Graphic window number 1'''.
  
−
'''‘Simple interest’ Radio button''' appears.
+
 
 +
 
 +
'''‘Simple interest’ Radiobutton''' appears.
 
|-
 
|-
 
|
 
|
Line 173: Line 211:
  
 
click '''Radiobutton.'''
 
click '''Radiobutton.'''
−
| Let us take another '''Radiobutton''' for the '''Compound interest'''.
+
| Let us take another '''Radiobutton''' for the Compound interest.
 +
 
 +
 
 
|-
 
|-
 
|
 
|
Line 183: Line 223:
 
|
 
|
 
Now I will type '''rd_compound''' as the '''Tag''' and ‘'''Compound interest’''' as the '''String'''.
 
Now I will type '''rd_compound''' as the '''Tag''' and ‘'''Compound interest’''' as the '''String'''.
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 194: Line 236:
 
|
 
|
 
Place this '''Radiobutton''' next to the '''Simple interest Radiobutton'''.
 
Place this '''Radiobutton''' next to the '''Simple interest Radiobutton'''.
 +
 +
  
 
‘'''Compound interest’ Radiobutton''' appears.
 
‘'''Compound interest’ Radiobutton''' appears.
Line 203: Line 247:
 
|
 
|
 
On '''GUIBuilder Palette''' window,
 
On '''GUIBuilder Palette''' window,
 +
 +
  
 
'''Generate&gt;&gt;Generate GUI code.'''
 
'''Generate&gt;&gt;Generate GUI code.'''
Line 216: Line 262:
  
 
Click on '''Save.'''
 
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 '''interest-calculator.'''
 
I will save this file as '''interest-calculator.'''
Line 240: Line 284:
  
 
Notice the '''handles''' and '''properties''' of the objects we took on a '''graphic window'''.
 
Notice the '''handles''' and '''properties''' of the objects we took on a '''graphic window'''.
 +
 +
 
|-
 
|-
 
| Highlight '''handles.ed_principal'''.
 
| Highlight '''handles.ed_principal'''.
Line 263: Line 309:
  
 
function.
 
function.
−
| Now let us write a '''function definition''' for '''rd_simple_callback function'''.
+
| Now let us write a function definition for '''rd_simple_callback function'''.
 
|-
 
|-
 
|
 
|
Line 284: Line 330:
 
'''handles.txt_answer.string = string(SI)'''
 
'''handles.txt_answer.string = string(SI)'''
 
|
 
|
−
Enter the code as seen here with the same '''syntax'''.
+
Enter the code as seen here with the same syntax.
  
 
The same code can be found under the code files section.
 
The same code can be found under the code files section.
  
 
You can use it as explained earlier in this tutorial.
 
You can use it as explained earlier in this tutorial.
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 296: Line 354:
  
 
'''handles.rd_compound.value = 0'''
 
'''handles.rd_compound.value = 0'''
 +
 +
 +
 +
 
|
 
|
 
After clicking the '''Simple interest Radiobutton-'''
 
After clicking the '''Simple interest Radiobutton-'''
Line 303: Line 365:
 
<li><blockquote><p>The following line will deselect the '''Compound interest''' '''Radiobutton'''.</p></blockquote></li></ul>
 
<li><blockquote><p>The following line will deselect the '''Compound interest''' '''Radiobutton'''.</p></blockquote></li></ul>
  
−
This way only one '''button''' remains selected.
+
This way only one button remains selected.
 
|-
 
|-
 
|
 
|
Line 327: Line 389:
  
 
'''SI = (Principal * Rate * Time)/100'''
 
'''SI = (Principal * Rate * Time)/100'''
 +
 +
 
|
 
|
 
Notice the next line.
 
Notice the next line.
Line 362: Line 426:
 
'''handles.txt_answer.string = string(CI)'''
 
'''handles.txt_answer.string = string(CI)'''
 
|
 
|
−
Enter the code as seen here with the same '''syntax'''.
+
Enter the code as seen here with the same syntax.
  
 
The same code can be found under the '''Code files''' section.
 
The same code can be found under the '''Code files''' section.
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 372: Line 450:
  
 
'''handles.rd_simple.value = 0'''
 
'''handles.rd_simple.value = 0'''
 +
 +
 +
 +
 
|
 
|
 
This action is similar to what we have seen earlier.
 
This action is similar to what we have seen earlier.
Line 384: Line 466:
 
Highlight,
 
Highlight,
  
−
'''Principal = strtod(handles.ed_principal.string)Rate = strtod(handles.ed_rate.string)'''
+
'''Principal = strtod(handles.ed_principal.string)'''
 +
 
 +
'''Rate = strtod(handles.ed_rate.string)'''
  
 
'''Time = strtod(handles.ed_time.string)'''
 
'''Time = strtod(handles.ed_time.string)'''
 
| Notice the next three lines are the same as in the '''rd_simple_callback function.'''
 
| Notice the next three lines are the same as in the '''rd_simple_callback function.'''
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 394: Line 482:
 
'''CI = (Principal *(1+( Rate/100))^ Time) - Principal'''
 
'''CI = (Principal *(1+( Rate/100))^ Time) - Principal'''
 
|
 
|
−
The next line will calculate the '''Compound interest'''.
+
The next line will calculate the Compound interest.
  
−
The final result will be stored in '''variable ‘CI'.'''
+
The final result will be stored in variable '''‘CI'.'''
 
|-
 
|-
 
|
 
|
Line 402: Line 490:
  
 
'''handles.txt_answer.string = string(CI)'''
 
'''handles.txt_answer.string = string(CI)'''
−
| The last line will give the value of '''variable ‘CI’''' to the '''Text''' box.
+
| The last line will give the value of variable '''‘CI’''' to the '''Text''' box.
 
|-
 
|-
 
| Press '''Ctrl+S.'''
 
| Press '''Ctrl+S.'''
Line 434: Line 522:
  
 
Delete the '''string “Enter principal amount”''' from the '''Edit''' box and type '''8000'''.
 
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 rate of interest”''' from the '''Edit''' box and type '''7'''.
 +
 +
  
 
Delete the '''string “Enter time”''' from the '''Edit''' box and type '''3'''.
 
Delete the '''string “Enter time”''' from the '''Edit''' box and type '''3'''.
Line 447: Line 539:
 
|
 
|
 
Then click on the '''Simple''' '''interest''' '''Radiobutton.'''
 
Then click on the '''Simple''' '''interest''' '''Radiobutton.'''
 +
 +
  
 
The '''Text''' box shows the desired answer of '''1680''' as expected.
 
The '''Text''' box shows the desired answer of '''1680''' as expected.
Line 458: Line 552:
 
|
 
|
 
Next click on the '''Compound''' '''interest''' '''Radiobutton.'''
 
Next click on the '''Compound''' '''interest''' '''Radiobutton.'''
 +
 +
  
 
Now the '''Text''' box shows the desired answer of '''1800.344''' as expected.
 
Now the '''Text''' box shows the desired answer of '''1800.344''' as expected.
Line 465: Line 561:
  
 
'''Summary'''
 
'''Summary'''
 +
 +
 +
 +
 +
 +
 
|
 
|
 
This brings us to the end of this tutorial.  Let us summarise.
 
This brings us to the end of this tutorial.  Let us summarise.
Line 478: Line 580:
  
 
'''Assignment'''
 
'''Assignment'''
 +
 +
 +
 +
 +
 +
 
|
 
|
 
As an assignment, please do the following.
 
As an assignment, please do the following.

Latest revision as of 16:07, 17 September 2021

Title of script: Creating a GUI based Interest calculator

Author: Rashmi Patankar and Iswariya Sasikumar


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:

  • Learn about Radiobuttons and

  • Calculate simple and compound interest using GUI.

Show Slide:

System Requirements




Only Narration


To record this tutorial, I am using

  • Windows 10 OS

  • Scilab 6.1.0 and

  • GUI Builder Toolbox 4.2.1

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:

  • 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.

What is a Radiobutton?




  • A Radiobutton is a button with two states.

  • They are intended to be mutually exclusive.

  • As a result, at any given time only one button is in a selected state.

Show Slide:

Objects to calculate simple and compound interest






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

  • The first Edit box for principal amount.

  • The second Edit box for rate of interest.

  • The third Edit box for time.

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

  • This line will select the Simple interest Radiobutton.

  • The following line will deselect the Compound interest Radiobutton.

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-

  • The first line will now select the Compound interest Radiobutton.

  • The next line will deselect the Simple interest Radiobutton.

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

  • Learnt about Radiobuttons and

  • Calculated simple and compound interest using GUI.

Show Slide:

Assignment




As an assignment, please do the following.

Create a GUI which has

  • An Edit box to take user input in meters.

  • Two Radiobuttons to convert it into inches and feet.

  • One Text box to display the output.

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.

Contributors and Content Editors

Iswariyas

Retrieved from "https://script.spoken-tutorial.org/index.php?title=GUI-in-Scilab/C2/Creating-a-GUI-based-Interest-calculator/English&oldid=55554"