Difference between revisions of "GUI-in-Scilab/C2/Creating-a-GUI-based-exponent-calculator/English"
| Line 24: | Line 24: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>Calculate the | + | <li><blockquote><p>Calculate the exponent of a number using '''GUI''' and</p></blockquote></li> |
| − | <li><blockquote><p>Use of '''strtod | + | <li><blockquote><p>Use of '''strtod''' command.</p></blockquote></li></ul> |
|- | |- | ||
| | | | ||
| Line 107: | Line 107: | ||
| | | | ||
| − | To calculate the | + | To calculate the exponent of a number, we need two inputs. |
| − | The first input is a | + | The first input is a base number and the second input is an exponent. |
|- | |- | ||
| | | | ||
| Line 187: | Line 187: | ||
click on '''Text'''. | click on '''Text'''. | ||
| − | | To display | + | | To display output, go to the '''GUIBuilder Palette''' and click on '''Text'''. |
|- | |- | ||
| | | | ||
| Line 202: | Line 202: | ||
Keep the '''String''' field empty. | Keep the '''String''' field empty. | ||
| − | We will not display any messages until we receive from the | + | We will not display any messages until we receive from the user. |
Then click on '''OK'''. | Then click on '''OK'''. | ||
| Line 294: | Line 294: | ||
On '''SciNotes''' window, | On '''SciNotes''' window, | ||
| − | highlight '''handles''' for | + | 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 301: | Line 301: | ||
|- | |- | ||
| Highlight '''handles.ed_base'''. | | Highlight '''handles.ed_base'''. | ||
| − | | '''handles dot ed underscore base''' is the '''handle''' for | + | | '''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 | + | | '''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 | + | | '''handles dot txt underscore output''' is the '''handle''' for output. |
|- | |- | ||
| Highlight '''handles.pb_cal.''' | | Highlight '''handles.pb_cal.''' | ||
| Line 346: | Line 346: | ||
'''base = strtod(handles.ed_base.string)''' | '''base = strtod(handles.ed_base.string)''' | ||
| − | | The first line assigns the user input for a | + | | 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)''' | '''exponent = strtod(handles.ed_exponent.string)''' | ||
| − | | The second line assigns the user input for an | + | | 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. | It is not possible to do calculations when the value is in '''string''' format. | ||
| − | Hence I have put the '''handles''' inside the '''strtod | + | Hence I have put the '''handles''' inside the '''strtod''' command. |
| − | This | + | This command will convert the value from the '''string''' format to a '''decimal''' format. |
|- | |- | ||
| | | | ||
| Line 376: | Line 376: | ||
This equation will perform the calculations. | This equation will perform the calculations. | ||
| − | The final result will be stored in the | + | The final result will be stored in the variable ‘out’. |
|- | |- | ||
| | | | ||
| Line 382: | Line 382: | ||
'''handles.txt_output.string = string(out)''' | '''handles.txt_output.string = string(out)''' | ||
| − | | The last line will give the value of a | + | | The last line will give the value of a variable ‘out’ to the '''Text box'''. |
|- | |- | ||
| Press '''Ctrl+S.''' | | Press '''Ctrl+S.''' | ||
| Line 392: | Line 392: | ||
'''Execute'''>>'''file''' '''with echo''' | '''Execute'''>>'''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 448: | Line 448: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>Calculated the | + | <li><blockquote><p>Calculated the exponent of a number using '''GUI''' and</p></blockquote></li> |
| − | <li><blockquote><p>Used '''strtod | + | <li><blockquote><p>Used '''strtod''' command.</p></blockquote></li></ul> |
|- | |- | ||
| | | | ||
| Line 468: | Line 468: | ||
<ul> | <ul> | ||
| − | <li><blockquote><p>Two '''Edit boxes''' to take two numbers from the | + | <li><blockquote><p>Two '''Edit boxes''' to take two numbers from the user.</p></blockquote></li> |
| − | <li><blockquote><p>Four '''pushbuttons''' to perform | + | <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> | ||
|- | |- | ||
Revision as of 16:52, 15 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:
|
|
Show Slide: System Requirements
|
To record this tutorial, I am using
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
|
To follow this tutorial:
|
|
Show Slide: Code Files
|
|
|
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. |
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. |
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:
|
|
Show Slide: Assignment
|
As an assignment activity, please do the following. Create a GUI which has
|
|
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. |
