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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script''': Creating a '''GUI''' based exponent calculator '''Author: Rashmi Patankar and Iswariya Sasikumar''' {| class= "wikitable" ! '''Visual Cue''' ! '''Narr...")
 
 
(3 intermediate revisions by the same user not shown)
Line 20: Line 20:
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
 +
 +
 +
 +
 
|
 
|
 
In this tutorial, we will learn how to:
 
In this tutorial, we will learn how to:
  
 
<ul>
 
<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 31: Line 35:
  
 
'''System Requirements'''
 
'''System Requirements'''
 +
 +
 +
 +
 +
 +
 +
  
 
'''Only narration'''
 
'''Only narration'''
Line 49: Line 60:
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
 +
 +
  
 
https://spoken-tutorial.org
 
https://spoken-tutorial.org
Line 62: Line 75:
  
 
'''Code Files'''
 
'''Code Files'''
 +
 +
 +
 +
 
|
 
|
 
<ul>
 
<ul>
Line 70: Line 87:
 
|
 
|
 
On '''GUIBuilder toolbox''',
 
On '''GUIBuilder toolbox''',
 +
 +
  
 
hover cursor over '''GUIBuilder Palette''' window and '''Graphic window number 1'''.
 
hover cursor over '''GUIBuilder Palette''' window and '''Graphic window number 1'''.
 +
 +
 +
 +
 
|
 
|
 
I have already opened the '''GUIBuilder toolbox.'''
 
I have already opened the '''GUIBuilder toolbox.'''
Line 83: Line 106:
 
Let us start by creating the '''GUI'''.
 
Let us start by creating the '''GUI'''.
 
|-
 
|-
−
|
+
| Only narration
 +
 
 +
 
  
 
|
 
|
−
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 95: Line 120:
 
click '''Edit.'''
 
click '''Edit.'''
 
| For the first input, go to the '''GUIBuilder Palette''' and click on '''Edit'''.
 
| For the first input, go to the '''GUIBuilder Palette''' and click on '''Edit'''.
 +
 +
 
|-
 
|-
 
|
 
|
Line 108: Line 135:
  
 
Type '''ed underscore base''' as the '''Tag''' and '''Enter the base''' as the '''String'''.
 
Type '''ed underscore base''' as the '''Tag''' and '''Enter the base''' as the '''String'''.
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 129: Line 158:
 
click on '''Edit'''.
 
click on '''Edit'''.
 
| Let us take another '''Edit box''' for the second input.
 
| Let us take another '''Edit box''' for the second input.
 +
 +
 
|-
 
|-
 
|
 
|
Line 140: Line 171:
 
|
 
|
 
I will type '''ed underscore exponent''' as the '''Tag''' and '''Enter''' '''an exponent''' as the '''String'''.
 
I will type '''ed underscore exponent''' as the '''Tag''' and '''Enter''' '''an exponent''' as the '''String'''.
 +
 +
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 160: Line 195:
  
 
click on '''Text'''.
 
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 166: Line 203:
  
 
type '''txt_output''' in '''Tag''' field'''.'''
 
type '''txt_output''' in '''Tag''' field'''.'''
 +
 +
  
 
Click on '''OK.'''
 
Click on '''OK.'''
Line 173: Line 212:
 
Keep the '''String''' field empty.
 
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'''.
 
Then click on '''OK'''.
Line 185: Line 224:
 
|
 
|
 
I will place the '''Text box''' at the bottom of the '''Graphic window number 1'''.
 
I will place the '''Text box''' at the bottom of the '''Graphic window number 1'''.
 +
 +
  
 
A '''Text box''' with the '''string “UnName3”''' appears.
 
A '''Text box''' with the '''string “UnName3”''' appears.
Line 205: Line 246:
 
|
 
|
 
Further I will type '''pb underscore cal''' as the '''Tag''' and '''Calculate''' as the '''String''' for the '''pushbutton'''.
 
Further I will type '''pb underscore cal''' as the '''Tag''' and '''Calculate''' as the '''String''' for the '''pushbutton'''.
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 218: Line 261:
 
|
 
|
 
Let us place the '''Pushbutton''' in the middle of the '''Graphic window number 1'''.
 
Let us place the '''Pushbutton''' in the middle of the '''Graphic window number 1'''.
 +
 +
  
 
A '''pushbutton''' with the '''string “Calculate”''' appears.
 
A '''pushbutton''' with the '''string “Calculate”''' appears.
Line 242: Line 287:
  
 
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 '''exponent-calculator.'''
 
I will save this file as '''exponent-calculator.'''
 +
 +
  
 
Click on '''Save'''.
 
Click on '''Save'''.
Line 261: Line 306:
 
On '''SciNotes''' window,
 
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.
 
We can see that the corresponding '''Scilab code''' has been generated.
Line 268: Line 313:
 
|-
 
|-
 
| Highlight '''handles.ed_base'''.
 
| 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'''.
 
| 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.'''.
 
| 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.'''
 
| Highlight '''handles.pb_cal.'''
Line 280: Line 325:
 
|-
 
|-
 
| Hover cursor over '''pb_cal_callback''' function.
 
| 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 302: Line 347:
  
 
You can use it as explained earlier in this tutorial.
 
You can use it as explained earlier in this tutorial.
 +
 +
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 307: Line 358:
  
 
'''base = strtod(handles.ed_base.string)'''
 
'''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 313: Line 364:
  
 
'''exponent = strtod(handles.ed_exponent.string)'''
 
'''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 324: Line 375:
 
It is not possible to do calculations when the value is in '''string''' format.
 
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 337: Line 388:
 
This equation will perform the calculations.
 
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 343: Line 394:
  
 
'''handles.txt_output.string = string(out)'''
 
'''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.'''
 
| Press '''Ctrl+S.'''
Line 353: Line 404:
 
'''Execute'''&gt;&gt;'''file''' '''with echo'''
 
'''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.
 
The '''Graphic window number 2''' opens.
Line 359: Line 410:
 
|
 
|
 
On '''Graphic window number 2,'''
 
On '''Graphic window number 2,'''
 +
 +
  
 
delete '''Enter the base. '''
 
delete '''Enter the base. '''
  
−
Type '''2.'''
+
Type '''4.'''
  
 
Delete '''Enter an exponent.'''
 
Delete '''Enter an exponent.'''
  
−
Type '''4'''.
+
Type '''2'''.
 
|
 
|
 
Now let us test the '''GUI.'''
 
Now let us test the '''GUI.'''
Line 373: Line 426:
  
 
Delete the '''string “Enter the base”''' from the '''Edit box''' and type '''4'''.
 
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'''.
 
Delete the '''string “Enter an exponent”''' from the '''Edit box''' and type '''2'''.
 +
 +
 
|-
 
|-
 
|
 
|
Line 393: Line 450:
  
 
'''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 399: Line 460:
  
 
<ul>
 
<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 406: Line 467:
  
 
'''Assignment'''
 
'''Assignment'''
 +
 +
 +
 +
 +
 +
 +
 
|
 
|
 
As an assignment activity, please do the following.
 
As an assignment activity, please do the following.
Line 412: Line 480:
  
 
<ul>
 
<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>
 
<li><blockquote><p>One '''Text box''' to display the answer of these operations.</p></blockquote></li></ul>
 
|-
 
|-

Latest revision as of 13:37, 17 September 2021

Title of script: Creating a GUI based exponent 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 exponent calculator”.

Show Slide:

Learning Objectives



In this tutorial, we will learn how to:

  • Calculate the exponent of a number using GUI and

  • Use of strtod command.

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 Graphical User Interface.

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

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

  • Calculated the exponent of a number using GUI and

  • Used strtod command.

Show Slide:

Assignment




As an assignment activity, please do the following.

Create a GUI which has

  • Two Edit boxes to take two numbers from the user.

  • Four pushbuttons to perform addition, subtraction, multiplication and division.

  • One Text box to display the answer of these operations.

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.

Contributors and Content Editors

Iswariyas

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