View source for GUI-in-Scilab/C2/Plotting-3D-parametric-curves-in-GUI/English

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

<ul>
<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 '''mesh command''' and;</p></blockquote></li>
<li><blockquote><p>Use of '''meshgrid command'''</p></blockquote></li></ul>
|-
|
Show Slide:

'''System Requirements'''

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

<ul>
<li><blockquote><p>'''Ubuntu 18.04 OS'''</p></blockquote></li></ul>

<ul>
<li><blockquote><p>'''Scilab''' '''6.1.0''' and;</p></blockquote></li>
<li><blockquote><p>'''GUI Builder Toolbox 4.2.1'''</p></blockquote></li></ul>

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:

<ul>
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li>
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
|-
|
Show Slide:

'''Code Files'''
|
<ul>
<li><blockquote><p>The files used in this tutorial are provided in the '''Code files''' link.</p></blockquote></li>
<li><blockquote><p>Please download and extract the files.</p></blockquote></li>
<li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul>
|-
|
Show Slide:

'''What is a Parametric Equation of a Sphere?'''
|'''What is a Parametric Equation of a Sphere?'''

The '''parametric equation''' of a sphere is:<br>
x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ)'''.'''

Where''','''

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

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'''
|'''What is the surf command?'''

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'''
|'''What is the mesh command?'''

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.

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

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

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

|
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 the '''GUIBuilder Palette''', and click on '''Generate''' in the '''menu bar.'''

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

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

Click on '''OK.'''

|
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]= <u>meshgrid</u>(u,v)'''''

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

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

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

'''''<u>surf</u>(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]= <u>meshgrid</u>(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,

'''''<u>surf</u>(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''',

//'''''<u>surf</u>(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:

<ul>
<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 '''mesh command''' and;</p></blockquote></li>
<li><blockquote><p>Used the '''meshgrid command'''.</p></blockquote></li></ul>
|-
|
Show Slide:

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

<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>
<ul>
<li><blockquote><p>Place the hemisphere on a horizontal plane.</p></blockquote></li></ul>

<ul>
<li><blockquote><p>Change radius ‘'''r'''’ from '''1''' to '''10''' using a '''Slider''' and display it in a '''Text''' box.</p></blockquote></li>
<li><blockquote><p>Consider that '''theta''' &amp; '''phi''' vary from '''0''' to '''𝞹.'''</p></blockquote></li>
<li><blockquote><p>Add '''grid lines''' to the plot and '''label''' the '''Axes'''.</p></blockquote></li></ul>
|-
|
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.
|}