GUI-in-Scilab/C2/Plotting-2D-parametric-curves-in-GUI/English - Revision history

Nancyvarkey at 09:09, 21 September 2021

2021-09-21T09:09:26Z

Show changes

Nancyvarkey at 12:13, 20 September 2021

2021-09-20T12:13:08Z

Show changes

Utkarsha at 03:57, 20 September 2021

2021-09-20T03:57:10Z

Utkarsha at 03:05, 20 September 2021

2021-09-20T03:05:35Z

Utkarsha at 03:03, 20 September 2021

2021-09-20T03:03:37Z

PoojaMoolya at 09:31, 15 September 2021

2021-09-15T09:31:54Z

Utkarsha at 16:12, 4 September 2021

2021-09-04T16:12:19Z

Show changes

Utkarsha: Created page with "'''Title of the script:''' Building a '''GUI''' for plotting 2D parametric curves '''Author: Rashmi Patankar, Utkarsh Anand''' '''Keywords: GUI, GUI Builder Toolbox, Slider..."

2021-08-06T13:15:10Z

Created page with "'''Title of the script:''' Building a '''GUI''' for plotting 2D parametric curves '''Author: Rashmi Patankar, Utkarsh Anand''' '''Keywords: GUI, GUI Builder Toolbox, Slider..."

New page

'''Title of the script:''' Building a '''GUI''' for plotting 2D parametric curves

'''Author: Rashmi Patankar, Utkarsh Anand'''

'''Keywords: GUI, GUI Builder Toolbox, Slider, delete, Scilab, Parametric equation, Circle, 2D, Text box, Axes, callback function, Tag, String'''

{|border = 1
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting 2D parametric curves”.
|-
|
Show Slide:

'''Learning Objectives'''
| In this''' '''tutorial, we will learn to:
|-
|
Show Slide:

'''System Requirements'''

'''Only Narration'''
|
To record this tutorial, I am using:

The process demonstrated in this tutorial is identical in '''Windows OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

'''Code Files'''
|
|-
|
Show Slide:

'''What is a Parametric Equation of a Circle?'''
|
The''' Parametric Equation''' of a circle is <math display="block">{x = r}\cos ⁡{{\theta \land y} = r}\sin ⁡\theta</math>'''.'''

Where,

We will use these two '''equations''' to plot the circle.
|-
|
Show Slide:

'''What is a Slider?'''
|
'''Slider''' is an object that allows the user to dynamically change the value of a '''parameter'''.

It allows the user to move an indicator horizontally to set new values.

The user can also alter the values by clicking on any point on the '''Slider'''.
|-
|
Show Slide:

'''What is a delete function?'''
|
The '''delete '''function is used to delete the '''graphical response'''.

The '''object’s''' '''handle''' whose response is to be deleted, is passed as an '''argument'''.

Syntax: '''delete(<handle of an object>)'''
|-
|
Switch to '''GUIBuilder Toolbox.'''

Open the '''plotting2dcurves.sce '''file.

Video-editor: Please put a textbox on screen. “plotting2dcurves.sce”
|
Let us look at how to use a''' Slider''' to plot a circle with varying radii.

I have opened the '''plotting2dcurves.sce''' file using the '''GUIBuilder toolbox'''.

Now let us look at the '''objects''' that are taken on this graphic window.
|-
|
On '''Graphic Window Number 1''',

hover over the '''Text '''box.

Video-editor: Please put a textbox on screen. “Tag: txt_radius”
|
We have a '''Text '''box with the '''Tag''' '''‘txt_radius'''’ and the '''String '''part is kept empty.

Hence a default value '''UnName1''' is assigned to it as '''String.'''

The '''Text''' box will display the exact value of the radius that the '''Slider''' has selected.
|-
|
On '''Graphic Window Number 1''',

hover over '''Axes'''.

Video-editor: Please put a textbox on screen. “Tag: ax_radius, String:Circle”
|
We also have an '''Axes''' with the '''Tag''' '''‘ax_radius’''' and '''String '''as ‘'''Circle'''’.

This will display the '''response''' of the circle.
|-
|
| Now let us add a '''Slider '''to control the radius value.
|-
|
On '''GUIBuilder Palette,'''

click on the '''Slider'''.
|
On the '''GUIBuilder''' '''Palette''', click on the '''Slider'''.

The '''Scilab Multiple Values Request''' window appears.
|-
|
On '''Scilab Multiple Values Request '''Window,

type '''''sl_radius''''' in '''Tag''' field.

Type '''''Radius''''' in '''String''' field.

Click on '''OK.'''
|
Type '''''sl_radius '''''in the '''Tag''' field and '''''Radius''''' in the '''String''' field.

Close the window by clicking on the '''OK''' button.
|-
|
On '''Graphic Window Number 1''',

place the '''Slider''' above the '''Text '''box.
|
Now place the '''Slider''' above the '''Text '''box.
|-
|
On '''Graphic Window Number 1''',

move the indicator on the '''Slider '''horizontally.
|
Then move the '''Slider''' indicator horizontally to vary the value.

However, we find that we are unable to move the indicator.

We must first enable the '''Slider''' to do so. Let us do that.
|-
|
On '''GUIBuilder Palette '''Window,

cursor on the right side panel.
|
Go to '''GUIBuilder Palette''' and look at the right side panel.

It displays a list of '''Tag''' names for the objects on the '''Graphic '''window.
|-
|
On '''GUIBuilder Palette '''Window,

click on '''sl_radius'''.

Click on '''Object Properties'''.
|
Click on the '''sl_radius.'''

Then click on the '''Object Properties''' button at the bottom right of the window.

The '''Scilab Multiple Values Request '''window will open.
|-
|
On the '''Scilab Multiple Values Request''' Window,

hover over '''Enable'''.

change '''Enable''' property to ‘'''on'''’.
|
Search for the object property '''Enable'''.

Change it from '''Off '''to '''On'''.
|-
|
On the '''Scilab Multiple Values Request''' Window,

highlight '''Max''' field.

Change the value from '''1 to 10'''.
|
We also have to change one more object property which is ''''Max''''.

This property will set the upper limit of the '''Slider.'''

Change it from '''1 '''to''' 10'''.
|-
|
On the '''Scilab Multiple Values Request''' Window,

highlight '''Min''' field.

Click on '''OK''' button.
|
Notice the object property ''''Min'''' which is lower limit of the '''Slider.'''

It is always set to '''0, '''by default.

Now let’s vary the value of the radius using the '''Slider''' from '''0 to 10'''.

Let us save the changes by clicking on the '''OK''' button at the bottom.
|-
|
On '''Graphic Window Number 1''',

hover cursor over the '''Graphic Window Number 1'''.
|
Now I will generate the '''Scilab''' code for the same.

In the code file, we will write the code to connect the '''Slider''' and the '''Text''' box.

As a result, the '''Text''' box will display the exact value of the '''Slider'''.

We will also write a '''user-defined function''' to plot the circle.
|-
|
On the '''GUIBuilder Palette''' Window,

click on '''Generate,'''

Click on '''Generate GUI Code'''.
|
On the '''GUIBuilder Palette''' click on the '''Generate''' in the '''menu bar.'''

Then click on '''Generate GUI Code'''.
|-
|
On the '''uiputfile''' Window,

type '''''parametric-2d'''''.

Click on '''OK.'''

Video-editor: Please put a textbox on screen. “In Windows OS, click on Save button.”
|
I will name this file as '''parametric-2d.'''

Click on the '''OK''' button to save it.
|-
|
Cursor on '''GUI Created '''Window,

click on '''OK.'''
|
A '''dialog '''box''' '''appears and displays the message “'''GUI created successfully!”'''

Click on '''OK.'''
|-
| Cursor on '''SciNotes''' Window.
| The corresponding '''Scilab''' code opens.
|-
|
On '''SciNotes''' Window,

highlight '''handles.txt_radius'''.
| '''handles.txt_radius '''is the '''handle''' for the '''Text '''box.
|-
|
On '''SciNotes''' Window,

highlight '''handles.ax_radius'''.
| '''handles.ax_radius '''is the '''handle''' for the '''Axes'''.
|-
|
On '''SciNotes''' Window,

highlight '''handles.sl_radius'''.
| '''handles.sl_radius '''is the '''handle''' for the '''Slider'''.
|-
|
On '''SciNotes''' Window,

cursor on '''sl_radius_callback''' Function.
|
Now let us write a function definition for '''sl_radius_callback '''function.

The function will basically link the '''Text '''box and the '''Slider'''.
|-
|
Cursor on '''SciNotes''' window,

within '''sl_radius_callback''' type,

'''''handles.txt_radius.string = string(handles.sl_radius.value)'''''

'''''r = strtod(handles.txt_radius.string)'''''
|
Type the code as shown here with the same '''syntax'''.

The same code can be found in a file in the '''Code files''' section on this video page.

You can use it as explained earlier in this tutorial.
|-
|
On '''SciNotes''' Window,

highlight,

'''handles.txt_radius.string = string(handles.sl_radius.value)'''
|
This line will assign the value of the '''Slider''' to the '''Text '''box'''.'''
|-
|
On '''SciNotes''' Window,

highlight,

'''r = strtod(handles.txt_radius.string)'''
|
Next, we will assign the radius value from the '''Text''' box to a '''variable ‘r’.'''

Later on, we can use the '''variable ‘r'''’ while writing the equation of a circle.
|-
|
On '''SciNotes Window''',

cursor on new line outside the '''sl_radius_callback''' function, type,

'''''function ''''''plot_circle''''''()'''''

'''''theta = 0:0.1:4*%pi'''''

'''''x = r*cos(theta)'''''

'''''y = r*sin(theta)'''''

'''''plot''''''(x,y)'''''

'''''xtitle('Plot of circle', 'X-axis', 'Y-axis')'''''

'''''xgrid()'''''

'''''endfunction'''''
|
Further we will write a '''user defined function plot_circle()''' to plot the circle.

Type the code in the same way as before, with the same '''syntax'''.

This can also be found in the '''Code files''' section.
|-
|
On the '''SciNotes Window,'''

highlight,

'''''theta = 0:0.1:4*%pi'''''
|
First, we have defined the range of '''theta'''.

It will vary from '''0 to 4𝝅 '''with a step size of''' 0.1.'''
|-
|
On the '''SciNotes Window,'''

highlight,

'''''x = r*cos(theta) '''''

'''''y = r*sin(theta)'''''
| The next two lines define the '''parametric equation''' of the circle in terms of '''x''' and '''y'''.
|-
|
On the '''SciNotes Window,'''

highlight,

'''plot(x,y)'''
| The following line will plot the circle.
|-
|
On the '''SciNotes Window,'''

highlight,

'''''xtitle('Plot of circle', 'X-axis', 'Y-axis')'''''

'''''xgrid()'''''
| The next two lines are used to add labels and grid lines to the '''Axes'''.
|-
|
On '''SciNotes Window''',

Inside the '''sl_radius_callback Function '''type,

'''plot_circle()'''
|
Let us call the '''plot_circle() '''function inside the '''callback function'''.

At the end of '''sl_radius_callback '''function definition type '''plot_circle()'''

As a result, when we move the '''Slider''', the circle is plotted for each radius value.
|-
|
On the '''SciNotes Window''',

press '''Ctrl '''+''' S.'''
| Let us save the code by pressing '''Ctrl '''+''' S''' on the keyboard.
|-
|
On '''SciNotes Window''',

click on '''Execute '''Button on '''menubar.'''

Click on '''File with echo.'''
|
We will now execute the code.

Click on the '''Execute '''button on the '''menu bar'''.

Then click on '''File with echo.'''

The '''Graphic Window Number 2''' will appear.
|-
|
On the '''Graphic Window Number 2''',

move the '''Slider'''.

hover over '''Text''' box.

move the '''Slider '''indicator on the right side'''.'''

move the '''Slider '''indicator on the left side'''.'''
|
Let us move the indicator given on the '''Slider.'''

We can see that as we move the indicator, a circle is being plotted.

Notice the '''Text''' box. The value of the radius is also getting changed along with it.

Moving the indicator towards the right increases the radius.

And moving the indicator towards the left decreases the radius.
|-
|
On '''Graphic Window Number 2''',

hover over''' Axes'''.

Close '''Graphic Window Number 2'''.
|
But, the earlier responses are still visible.

Let us delete them by adding a single line.

This line is to be written at the start of '''plot_circle() function definition.'''

Close the '''Graphic Window Number 2'''.
|-
|
On '''SciNotes Window''',

Type within '''''plot_circle''''''()'''''''' '''function and then highlight,

'''''delete(handles.ax_radius.children)'''''
|
Type the line as shown here with the same syntax.

This line deletes all the '''children '''of the current '''Axes'''.

Here, '''children '''refers to the '''subplot''' of the '''Axes'''.
|-
|
On the '''SciNotes Window''',

Press '''Ctrl '''+''' S''' on the keyboard.
| Let us save the work by pressing '''Ctrl '''+''' S''' keys together.
|-
|
On '''SciNotes Window''',

click on '''Execute,'''

Click on '''File with echo.'''
|
Let's go back to the '''menu bar''' and click on '''Execute''' and then on '''File with echo'''.
|-
|
On''' Graphic Window Number 2,'''

move the '''Slider '''indicator to the right and then on the left side'''.'''
|
Now move the '''Slider''' indicator to the right and then to the left side.

The earlier responses are now deleted and no longer visible.

So in this way, we can build a '''GUI '''for plotting a '''2D parametric '''curve in '''Scilab'''.
|-
|
Show Slide:

'''Summary'''
|
Let us summarize.

In this''' '''tutorial, we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<math display="block">{y = a}t^{2}</math>,<math display="block">{x = 2}\mathit{at}</math>
|-
|
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'''
|
|-
|
Show Slide:

'''Answers for THIS Spoken Tutorial'''
|
|-
| 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:

'''Acknowledgements'''
| The''' Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
|-
|
Show slide:

'''Thank you'''
|
This is '''Utkarsh Anand''', a '''FOSSEE''' intern 2021, IIT Bombay signing off.

Thanks for joining.
|}

@@ Line 13: / Line 13: @@
 '''Title Slide'''
-| Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting 2D parametric curves”.
+| Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''2D''' parametric curves”.
 |-
+|
@@ Line 23: / Line 23: @@
 <ul>
-<li><blockquote><p>Plot the '''Parametric equation''' of a circle using '''GUI'''.</p></blockquote></li>
+<li><blockquote><p>Plot the Parametric equation of a circle using '''GUI'''.</p></blockquote></li>
 <li><blockquote><p>Use a '''Slider''' to vary the radius of a circle and</p></blockquote></li>
-<li><blockquote><p>Use the '''delete function'''.</p></blockquote></li></ul>
+<li><blockquote><p>Use the '''delete''' function.</p></blockquote></li></ul>
 |-
+|
@@ Line 76: / Line 76: @@
 |'''What is a Parametric Equation of a Circle?'''
-The '''Parametric Equation''' of a circle is x = r*cos(Θ) and y = r*sin(Θ)'''.'''
+The Parametric Equation of a circle is x = r*cos(Θ) and y = r*sin(Θ)'''.'''
 Where,
@@ Line 144: / Line 144: @@
 This will display the '''response''' of the circle.
 |-
+| Only narration
 | Now let us add a '''Slider''' to control the radius value.
 |-
@@ Line 258: / Line 258: @@
 As a result, the '''Text''' box will display the exact value of the '''Slider'''.
-We will also write a '''user-defined function''' to plot the circle.
+We will also write a '''user-defined''' function to plot the circle.
 |-
+|
@@ Line 331: / Line 331: @@
 '''''r = strtod(handles.txt_radius.string)'''''
+|
-Type the code as shown here with the same '''syntax'''.
+Type the code as shown here with the same syntax.
 The same code can be found in a file in the '''Code files''' section on this video page.
@@ Line 352: / Line 352: @@
 '''r = strtod(handles.txt_radius.string)'''
+|
-Next, we will assign the radius value from the '''Text''' box to a '''variable ‘r’.'''
+Next, we will assign the radius value from the '''Text''' box to a variable '''‘r’.'''
-Later on, we can use the '''variable ‘r'''’ while writing the equation of a circle.
+Later on, we can use the variable '''‘r'''’ while writing the equation of a circle.
 |-
+|
@@ Line 377: / Line 377: @@
 '''''endfunction'''''
+|
-Further, we will write a '''user defined function plot_circle()''' to plot the circle.
+Further, we will write a '''user defined''' function '''plot_circle()''' to plot the circle.
-Type the code in the same way as before, with the same '''syntax'''.
+Type the code in the same way as before, with the same syntax.
 This can also be found in the '''Code files''' section.
@@ Line 402: / Line 402: @@
 '''''y = r*sin(theta)'''''
-| The next two lines define the '''parametric equation''' of the circle in terms of '''x''' and '''y'''.
+| The next two lines define the parametric equation of the circle in terms of '''x''' and '''y'''.
 |-
+|
@@ Line 429: / Line 429: @@
 '''plot_circle()'''
+|
-Let us call the '''plot_circle()''' function inside the '''callback function'''.
+Let us call the '''plot_circle()''' function inside the callback function.
 At the end of the '''sl_radius_callback''' function definition, type '''plot_circle()'''
@@ Line 528: / Line 528: @@
 The earlier responses are now deleted and no longer visible.
-So, in this way we can build a '''GUI''' for plotting a '''2D parametric''' curve in '''Scilab'''.
+So, in this way we can build a '''GUI''' for plotting a '''2D''' parametric curve in '''Scilab'''.
 |-
+|
@@ Line 540: / Line 540: @@
 <ul>
-<li><blockquote><p>Plotted the '''Parametric''' equation of a circle using '''GUI'''.</p></blockquote></li>
+<li><blockquote><p>Plotted the Parametric equation of a circle using '''GUI'''.</p></blockquote></li>
 <li><blockquote><p>Used a '''Slider''' to vary the radius of a circle and</p></blockquote></li>
-<li><blockquote><p>Used the '''delete function'''.</p></blockquote></li></ul>
+<li><blockquote><p>Used the '''delete''' function.</p></blockquote></li></ul>
 |-
+|
@@ Line 552: / Line 552: @@
 <ul>
-<li><blockquote><p>Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations''',<br>y = a*(t)^2, x = 2*a*t.</p></blockquote></li></ul>
+<li><blockquote><p>Create a '''GUI''' to plot a '''Parabola''' using its parametric equations,<br>y = a*(t)^2, x = 2*a*t.</p></blockquote></li></ul>
 <ul>
 <li><blockquote><p>Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.</p></blockquote></li>

@@ Line 115: / Line 115: @@
 Open the '''plotting2dcurves.sce''' file.
+|
 Let us look at how to use a '''Slider''' to plot a circle with varying radii.
@@ Line 128: / Line 127: @@
 hover over the '''Text''' box.
+|
 We have a '''Text''' box with the '''Tag''' '''‘txt_radius'''’ and the '''String''' part is kept empty.
@@ Line 141: / Line 139: @@
 hover over '''Axes'''.
+|
 We also have an '''Axes''' with the '''Tag''' '''‘ax_radius’''' and the '''String''' as ‘'''Circle'''’.
@@ Line 281: / Line 278: @@
 Click on '''OK.'''
+|
 I will name this file as '''parametric-2d.'''

@@ Line 76: / Line 76: @@
 |'''What is a Parametric Equation of a Circle?'''
-The '''Parametric Equation''' of a circle is <math display="inline">x\  = \ r\ cos\theta\ \ \text{and\ }y\  = \ r\ \ sin\theta</math>'''.'''
+The '''Parametric Equation''' of a circle is x = r*cos(Θ) and y = r*sin(Θ)'''.'''
 Where,
@@ Line 556: / Line 556: @@
 <ul>
-<li><blockquote><p>Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations'''.</p></blockquote></li></ul>
+<li><blockquote><p>Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations''',<br>y = a*(t)^2, x = 2*a*t.</p></blockquote></li></ul>
-−
-<blockquote><math display="inline">y = at^{2}</math>,<math display="inline">x = 2at</math>
-</blockquote>
 <ul>
 <li><blockquote><p>Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.</p></blockquote></li>

@@ Line 74: / Line 74: @@
 '''What is a Parametric Equation of a Circle?'''
+|'''What is a Parametric Equation of a Circle?'''
 The '''Parametric Equation''' of a circle is <math display="inline">x\  = \ r\ cos\theta\ \ \text{and\ }y\  = \ r\ \ sin\theta</math>'''.'''
@@ Line 89: / Line 90: @@
 '''What is a Slider?'''
+|'''What is a Slider?'''
 '''Slider''' is an object that allows the user to dynamically change the value of a '''parameter'''.
@@ Line 100: / Line 102: @@
 '''What is a delete function?'''
+|'''What is a delete function?'''
 The '''delete''' function is used to delete the '''graphical response'''.