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

Nancyvarkey at 10:55, 21 September 2021

2021-09-21T10:55:22Z

Show changes

Utkarsha at 03:50, 20 September 2021

2021-09-20T03:50:14Z

Utkarsha at 03:47, 20 September 2021

2021-09-20T03:47:21Z

Utkarsha at 03:33, 20 September 2021

2021-09-20T03:33:54Z

Utkarsha at 03:33, 20 September 2021

2021-09-20T03:33:09Z

PoojaMoolya at 09:52, 15 September 2021

2021-09-15T09:52:14Z

Utkarsha at 16:18, 4 September 2021

2021-09-04T16:18:51Z

Show changes

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

2021-08-06T13:21:15Z

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

New page

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

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

'''Keywords: GUI, GUI Builder Toolbox, Slider, Scilab, Parametric equation, Sphere, 3D, Text box, Axes, callback function, surf, mesh, meshgrid'''

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

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

'''Learning Objectives'''
|
In this''' '''tutorial, we will learn:
|-
|
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 Sphere?'''
|
The''' parametric equation''' of a sphere is:

<math display="block">{x = r}\cos ⁡\theta\mathit{sin\varphi},{y = r}\sin ⁡\theta\mathit{sin\varphi}</math>

'''& '''<math display="block">{z = r}\cos\varphi</math>'''.'''

Where''','''

We will use these three equations to plot the sphere.
|-
|
Show Slide:

'''Commands to create 3D surface plots'''
|
'''Scilab''' offers many ways to create and customize various types of '''3D''' plots.

We will learn to use the '''surf '''and '''mesh '''commands in this tutorial.

These '''commands''' are used to create a''' 3D''' surface plot.
|-
|
Show slide:

'''What is the surf command?'''

'''Only Narration'''
|
The '''surf command''' draws a '''3D parametric''' surface plot.

It essentially creates a surface with a solid edge and solid face colors.

Hence, in this tutorial, the '''surf command''' will plot a colored '''3D''' sphere.
|-
|
Show slide:

'''What is the mesh command?'''

'''Only Narration'''
|
The '''mesh command''' also draws a '''3D parametric''' surface plot.

In this case, the surface has solid edge colors but no face colors.

So, in this tutorial, the '''mesh command''' will plot a '''3D''' sphere with a white surface.
|-
|
Show slide:

'''Scilab Help Documentation'''
|
For more information on '''mesh''' and '''surf commands''' type the following on the''' Scilab console''':

'''''help surf'''''

'''''help mesh'''''
|-
|
|
|-
|
Switch to '''GUIBuilder Toolbox.'''

Open the '''plotting3dcurves.sce''' file.

Video-editor: Please put a textbox on screen. “plotting3dcurves.sce”
|
Locate the '''plotting3dcurves.sce '''file in the saved folder.

Open the file '''plotting3dcurves.sce''' using the '''GUIBuilder''' '''Toolbox.'''
|-
|
On the '''Graphic Window Number 1''',

hover over the '''Slider, Text '''box''' '''and an''' Axes'''.

Video-editor: Please put a textbox on screen. “Tag: sl_radius, String: Radius”
|
It shows the '''GUI''' with three '''objects''', namely '''Slider, Text '''box''' '''and an''' Axes'''.

The '''Slider''' has '''Tag ‘sl_radius’ '''and '''String ‘Radius’. '''

Its value can vary from '''10''' to '''20'''.
|-
|
On the '''Graphic Window Number 1''',

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

Video-editor: Please put a textbox on screen. “Tag: txt_radius, String: Radius”
|
Next we have a '''Text '''box''' '''to display the radius.

It has '''Tag ‘txt_radius’ '''and the''' String''' '''‘Radius’'''.
|-
|
On the '''Graphic Window Number 1''',

hover over the '''Axes'''.

Video-editor: Please put a textbox on screen. “Tag: ax_plot, String: Sphere”
|
Lastly, we have the '''Axes '''to display the plot of the sphere.

It has '''Tag ‘ax_plot’''' and '''String ‘Sphere’'''.

Now let us generate the '''Scilab''' code for the same.
|-
|
On the '''GUIBuilder Palette''' Window,

in the '''menu bar''',

click on '''Generate.'''

Click on '''Generate GUI Code''' .
|
Go to '''GUIBuilder Palette''', and click on '''Generate''' in the '''menu bar.'''

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

type '''''parametric-3d'''''.

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-3d.'''

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

click on '''OK.'''
|
It shows a new dialog''' '''box''' '''that displays “'''GUI created successfully!”'''

Click on '''OK.'''

The corresponding '''Scilab''' code file opens.
|-
|
On '''SciNotes''' Window,

highlight,

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

highlight,

'''handles.ax_plot'''.
| '''handles.ax_plot '''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,

inside '''sl_radius_callback '''function,

highlight,

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

'''''r = strtod(handles.txt_radius.string)'''''
|
Now notice the '''sl_radius_callback function definition'''.

It has two lines of code in it.

The code essentially connects the '''Slider '''to the '''Text''' box.

As a result when the '''Slider''' is moved, its exact value is displayed in the '''Text''' box.

Then the value of the '''Text''' box is stored inside a '''variable ‘r’'''.
|-
|
On the '''SciNotes Window''',

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

'''''function plot_sphere()'''''

'''''delete(handles.ax_plot.children)'''''

'''''u = 0:0.1:2*%pi;'''''

'''''v = 0:0.1:2*%pi; '''''

'''''[phi, theta]= ''''''meshgrid''''''(u,v)'''''

'''''x = r*cos(theta)*sin(phi);'''''

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

'''''z = r*cos(phi);'''''

'''''surf''''''(x, y, z); '''''

'''''//mesh(x, y, z); '''''

'''''xtitle('Plotting sphere', 'X-axis', 'Y-axis')'''''

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

'''''endfunction'''''
|
Now, let us write a '''user-defined function plot_sphere()''' to plot the sphere.

Type the code as shown 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,

'''delete(handles.ax_sphere.children).'''
| First, I have written a '''delete function''' to remove the subplots of the graph.
|-
|
highlight,

'''''u = 0:0.1:2*%pi;'''''

'''''v = 0:0.1:2*%pi; '''''

'''''[phi, theta]= ''''''meshgrid''''''(u,v);'''''
|
Notice the next three lines.

The '''meshgrid command''' is used.

It is used to generate''' u '''and '''v matrices''' for '''three-dimensional''' plots.

The range of '''u''' and '''v''' is defined from '''0''' to '''2𝞹''' with a '''step''' size of '''0.1'''.

Finally, the '''matrices''' '''u''' and '''v''' are stored into '''phi''' and''' theta''' respectively.
|-
|
highlight,

'''''x = r*cos(theta)*sin(phi);'''''

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

'''''z = r*cos(phi);'''''
| Further three lines define the sphere's parametric''' '''equation in terms of '''x, y '''and '''z'''.
|-
|
| Next, we will plot a '''3D parametric''' curve of a sphere.
|-
|
highlight,

'''''surf''''''(x, y, z); '''''
| Firstly, we’ll see the output of the '''surf command'''.
|-
|
highlight,

'''''//mesh(x, y, z); '''''
|
Then next we will see the '''mesh command'''.

For now, I have commented out this line by putting two forward slashes.

Hence the output of only '''surf''' command will be plotted.
|-
|
On the '''SciNotes Window,'''

highlight,

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

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

inside '''sl_radius_callback '''function,

type,

'''''plot_sphere()'''''
|
Now let us call the '''plot_sphere() function''' inside the '''callback function'''.

At the end of '''sl_radius_callback function '''definition''' '''type '''plot_sphere().'''

As a result, varying the radius value on the '''Slider''' the sphere will be plotted.
|-
|
On the '''SciNotes Window''',

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

click on the '''Execute''' button in the '''menu bar.'''

Click on '''File with echo.'''
|
Now, run this simulation by clicking on the '''Execute''' button in the '''menu bar'''.

Click on '''File with echo.'''

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

move the '''Slider''' indicator towards right slowly.
|
We can see that as we move the '''indicator''' on the '''Slider,''' a sphere is being plotted.

The '''surf command''' now plots a colored '''3D''' sphere.
|-
| Close '''Graphic Window Number 2'''.
|
Now let us test the output of the '''mesh command'''.

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

//'''''surf''''''(x, y, z); '''''

'''''mesh(x, y, z); '''''

Press '''Ctrl + S.'''
|
I'll now add two forward slashes before the '''surf '''command to comment it out.

Then I’ll remove the forward slashes added before the '''mesh '''command to now see its output.

Save the code by pressing '''Ctrl + S''' keys together.
|-
|
On '''SciNotes Window,'''

click on '''Execute''',

click on '''File with echo.'''
|
Again, click on the '''Execute''' menu and then on '''File with echo.'''
|-
|
On '''Graphic window Number 2.'''

move the '''Slider''' indicator towards the right slowly.
|
The '''Graphic window Number 2''' will now show the output of the '''mesh '''command.

Let us move the '''Slider''' indicator and observe the output.

As stated earlier, the '''mesh '''command now plots a '''3D''' sphere with a white surface.
|-
|
| So this way we can build a '''GUI '''for plotting a '''3D '''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.

'''Parametric''' equations:<math display="block">{x = r}\cos ⁡\theta\mathit{sin\varphi},{y = r}\sin ⁡\theta\mathit{sin\varphi}</math>

'''& '''<math display="block">{z = r}\cos\varphi</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'''
|
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:

'''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 341: / Line 341: @@
 | Further three lines define the sphere's parametric equation in terms of '''x, y''' and '''z'''.
 |-
+| Only narration
 | Next, we will plot a '''3D''' parametric curve of a sphere.
 |-
@@ Line 454: / Line 454: @@
 As stated earlier, the '''mesh''' command now plots a '''3D''' sphere with a white surface.
 |-
+| Only narration
 | So this way we can build a '''GUI''' for plotting a '''3D''' parametric curve in '''Scilab'''.
 |-

@@ Line 13: / Line 13: @@
 '''Title Slide'''
-| Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''3D parametric curves'''”.
+| Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''3D''' parametric curves”.
 |-
+|
@@ Line 23: / Line 23: @@
 <ul>
-<li><blockquote><p>To plot the '''parametric''' equation of a sphere using '''GUI.'''</p></blockquote></li>
+<li><blockquote><p>To plot the parametric equation of a sphere using '''GUI.'''</p></blockquote></li>
-<li><blockquote><p>Use of '''surf command'''.</p></blockquote></li>
+<li><blockquote><p>Use of '''surf '''command.</p></blockquote></li>
-<li><blockquote><p>Use of '''mesh command''' and;</p></blockquote></li>
+<li><blockquote><p>Use of '''mesh''' command and;</p></blockquote></li>
-<li><blockquote><p>Use of '''meshgrid command'''</p></blockquote></li></ul>
+<li><blockquote><p>Use of '''meshgrid''' command</p></blockquote></li></ul>
 |-
+|
@@ Line 77: / Line 77: @@
 |'''What is a Parametric Equation of a Sphere?'''
-The '''parametric equation''' of a sphere is:<br>
+The parametric equation of a sphere is:<br>
 x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ)'''.'''
@@ Line 83: / Line 83: @@
 <ul>
-<li><blockquote><p>'''x''', '''y, z''' are the '''cartesian coordinates''' of a given point on the sphere.</p></blockquote></li>
+<li><blockquote><p>'''x''', '''y, z''' are the cartesian coordinates of a given point on the sphere.</p></blockquote></li>
 <li><blockquote><p>'''r''' is the radius of the sphere and;</p></blockquote></li>
-<li><blockquote><p>'''theta''' &amp; '''phi''' are the '''spherical coordinates'''. They lie in the range '''0''' to '''2𝞹'''.</p></blockquote></li></ul>
+<li><blockquote><p>'''theta''' &amp; '''phi''' are the spherical coordinates. They lie in the range '''0''' to '''2𝞹'''.</p></blockquote></li></ul>
 We will use these three equations to plot the sphere.
@@ Line 98: / Line 98: @@
 We will learn to use the '''surf''' and '''mesh''' commands in this tutorial.
-These '''commands''' are used to create a '''3D''' surface plot.
+These commands are used to create a '''3D''' surface plot.
 |-
+|
@@ Line 108: / Line 108: @@
 |'''What is the surf command?'''
-The '''surf command''' draws a '''3D parametric''' surface plot.
+The '''surf''' command draws a '''3D''' parametric surface plot.
 It essentially creates a surface with a solid edge and solid face colors.
-Hence, in this tutorial, the '''surf command''' will plot a colored '''3D''' sphere.
+Hence, in this tutorial, the '''surf''' command will plot a colored '''3D''' sphere.
 |-
+|
@@ Line 122: / Line 122: @@
 |'''What is the mesh command?'''
-The '''mesh command''' also draws a '''3D parametric''' surface plot.
+The '''mesh''' command also draws a '''3D''' parametric surface plot.
 In this case, the surface has solid edge colors but no face colors.
-So, in this tutorial, the '''mesh command''' will plot a '''3D''' sphere with a white surface.
+So, in this tutorial, the '''mesh''' command will plot a '''3D''' sphere with a white surface.
 |-
+|
@@ Line 133: / Line 133: @@
 '''Scilab Help Documentation'''
+|
-For more information on '''mesh''' and '''surf commands''' type the following on the '''Scilab console''':
+For more information on '''mesh''' and '''surf''' commands type the following on the '''Scilab console''':
 '''''help surf'''''
@@ Line 257: / Line 257: @@
 '''''r = strtod(handles.txt_radius.string)'''''
+|
-Now notice the '''sl_radius_callback function''' definition.
+Now notice the '''sl_radius_callback''' function definition.
 It has two lines of code in it.
@@ Line 298: / Line 298: @@
 '''''endfunction'''''
+|
-Now, let us write a '''user-defined function plot_sphere()''' to plot the sphere.
+Now, let us write a user-defined function '''plot_sphere()''' to plot the sphere.
-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 under the Code files section.
@@ Line 310: / Line 310: @@
 '''delete(handles.ax_sphere.children).'''
-| First, I have written a '''delete function''' to remove the subplots of the graph.
+| First, I have written a '''delete''' function to remove the subplots of the graph.
 |-
+|
@@ Line 323: / Line 323: @@
 Notice the next three lines.
-The '''meshgrid command''' is used.
+The '''meshgrid''' command is used.
 It is used to generate '''u''' and '''v matrices''' for '''three-dimensional''' plots.
@@ Line 342: / Line 342: @@
 |-
+|
-| Next, we will plot a '''3D parametric''' curve of a sphere.
+| Next, we will plot a '''3D''' parametric curve of a sphere.
 |-
+|
@@ Line 348: / Line 348: @@
 '''''<u>surf</u>(x, y, z);'''''
-| Firstly, we’ll see the output of the '''surf command'''.
+| Firstly, we’ll see the output of the '''surf''' command.
 |-
+|
@@ Line 355: / Line 355: @@
 '''''//mesh(x, y, z);'''''
+|
-Then next we will see the '''mesh command'''.
+Then next we will see the '''mesh''' command.
 For now, I have commented out this line by putting two forward slashes.
@@ Line 380: / Line 380: @@
 '''''plot_sphere()'''''
+|
-Now let us call the '''plot_sphere() function''' inside the '''callback function'''.
+Now let us call the '''plot_sphere()''' function inside the '''callback''' function.
-At the end of '''sl_radius_callback function''' definition type '''plot_sphere().'''
+At the end of '''sl_radius_callback''' function definition type '''plot_sphere().'''
 As a result, varying the radius value on the '''Slider''' the sphere will be plotted.
@@ Line 410: / Line 410: @@
 move the '''Slider''' indicator towards right slowly.
+|
-We can see that as we move the '''indicator''' on the '''Slider,''' a sphere is being plotted.
+We can see that as we move the indicator on the '''Slider,''' a sphere is being plotted.
-The '''surf command''' now plots a colored '''3D''' sphere.
+The '''surf''' command now plots a colored '''3D''' sphere.
 |-
 | Close '''Graphic Window Number 2'''.
+|
-Now let us test the output of the '''mesh command'''.
+Now let us test the output of the '''mesh''' command.
 Close the '''Graphic Window Number 2.'''
@@ Line 467: / Line 467: @@
 <ul>
-<li><blockquote><p>Plotted the '''parametric''' equation of a sphere using '''GUI'''.</p></blockquote></li>
+<li><blockquote><p>Plotted the parametric equation of a sphere using '''GUI'''.</p></blockquote></li>
-<li><blockquote><p>Used the '''surf command'''.</p></blockquote></li>
+<li><blockquote><p>Used the '''surf''' command.</p></blockquote></li>
-<li><blockquote><p>Used the '''mesh command''' and;</p></blockquote></li>
+<li><blockquote><p>Used the '''mesh''' command and;</p></blockquote></li>
-<li><blockquote><p>Used the '''meshgrid command'''.</p></blockquote></li></ul>
+<li><blockquote><p>Used the '''meshgrid''' command.</p></blockquote></li></ul>
 |-
+|

@@ Line 147: / Line 147: @@
 Open the '''plotting3dcurves.sce''' file.
+|
 Locate the '''plotting3dcurves.sce''' file in the saved folder.
@@ Line 158: / Line 157: @@
 hover over the '''Slider, Text''' box and an '''Axes'''.
+|
 It shows the '''GUI''' with three '''objects''', namely '''Slider, Text''' box and an '''Axes'''.
@@ Line 171: / Line 169: @@
 hover over the '''Text''' box.
+|
 Next, we have a '''Text''' box to display the radius.
@@ Line 182: / Line 179: @@
 hover over the '''Axes'''.
+|
 Lastly, we have the '''Axes''' to display the plot of the sphere.
@@ Line 210: / Line 206: @@
 Click on '''OK.'''
+|
 I will name this file as '''parametric-3d.'''

@@ Line 77: / Line 77: @@
 |'''What is a Parametric Equation of a Sphere?'''
-The '''parametric equation''' of a sphere is:
+The '''parametric equation''' of a sphere is:<br>
+x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ)'''.'''
-<math display="inline">x\  = \ r\ cos\theta\ sin\varphi\ ,\ y\  = \ r\ \ sin\theta\ sin\varphi\ </math>
-−
-'''&amp;''' <math display="inline">z\  = r\ cos\varphi</math>'''.'''
 Where''','''
@@ Line 488: / Line 485: @@
 <ul>
-<li><blockquote><p>Using '''surf''' and '''mesh''', build a '''GUI''' to plot a '''3D''' hemisphere.</p></blockquote></li></ul>
+<li><blockquote><p>Using '''surf''' and '''mesh''', build a '''GUI''' to plot a '''3D''' hemisphere.<br>Parametric equations: x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ).</p></blockquote></li></ul>
-−
-<blockquote>'''Parametric''' equations:<math display="inline">x\  = \ r\ cos\theta\ sin\varphi\ ,\ y\  = \ r\ \ sin\theta\ sin\varphi\ </math>
-−
-'''&amp;''' <math display="inline">z\  = r\ cos\varphi</math>'''.'''
 </blockquote>
 <ul>
 <li><blockquote><p>Place the hemisphere on a horizontal plane.</p></blockquote></li></ul>

@@ Line 75: / Line 75: @@
 '''What is a Parametric Equation of a Sphere?'''
+|'''What is a Parametric Equation of a Sphere?'''
 The '''parametric equation''' of a sphere is:
@@ Line 108: / Line 109: @@
 '''Only Narration'''
+|'''What is the surf command?'''
 The '''surf command''' draws a '''3D parametric''' surface plot.
@@ Line 121: / Line 123: @@
 '''Only Narration'''
+|'''What is the mesh command?'''
 The '''mesh command''' also draws a '''3D parametric''' surface plot.