Difference between revisions of "GUI-in-Scilab/C2/Plotting-2D-parametric-curves-in-GUI/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(4 intermediate revisions by 2 users not shown)
Line 13: Line 13:
  
 
'''Title Slide'''
 
'''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”.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
−
|
+
|In this tutorial, we will learn to:
−
In this tutorial, we will learn to:
+
  
−
<ul>
+
*Plot the '''Parametric equation''' of a circle using '''GUI'''
−
<li><blockquote><p>Plot the '''Parametric equation''' of a circle using '''GUI'''.</p></blockquote></li>
+
*Use a '''Slider''' to vary the radius of a circle and
−
<li><blockquote><p>Use a '''Slider''' to vary the radius of a circle and</p></blockquote></li>
+
*Use the '''delete function'''.
−
<li><blockquote><p>Use the '''delete function'''.</p></blockquote></li></ul>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''System Requirements'''
 
'''System Requirements'''
  
 
'''Only Narration'''
 
'''Only Narration'''
−
|
+
|To record this tutorial, I am using:
−
To record this tutorial, I am using:
+
  
−
<ul>
+
*'''Ubuntu 18.04 OS'''
−
<li><blockquote><p>'''Ubuntu 18.04 OS'''</p></blockquote></li></ul>
+
*'''Scilab''' '''6.1.0''' and
−
 
+
*'''GUI Builder Toolbox 4.2.1'''
−
<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.
 
The process demonstrated in this tutorial is identical in '''Windows OS''' also.
Line 47: Line 39:
 
Annotations are added to the tutorial if there are any differences.
 
Annotations are added to the tutorial if there are any differences.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
  
 
https://www.spoken-tutorial.org
 
https://www.spoken-tutorial.org
−
|
+
|To follow this tutorial:
−
To follow this tutorial:
+
  
−
<ul>
+
*The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''
−
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li>
+
*For pre-requisite '''Scilab''' tutorials please visit this website.
−
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Code Files'''
 
'''Code Files'''
 
|
 
|
−
<ul>
+
*The files used in this tutorial are provided in the '''Code files''' link.
−
<li><blockquote><p>The files used in this tutorial are provided in the '''Code files''' link.</p></blockquote></li>
+
*Please download and extract the files.
−
<li><blockquote><p>Please download and extract the files.</p></blockquote></li>
+
*Make a copy and then use them while practising.
−
<li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''What is a Parametric Equation of a Circle?'''
 
'''What is a Parametric Equation of a Circle?'''
−
|'''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>'''.'''
+
The '''Parametric Equation''' of a circle is '''x = r*cos(Θ)''' and '''y = r*sin(Θ)'''
  
−
Where,
+
where,
−
 
+
*'''x''' &amp; '''y''' are the '''coordinates''' for a given point on the circle and
−
<ul>
+
*'''r''' is the radius of the circle.
−
<li><blockquote><p>'''x''' &amp; '''y''' are the coordinates for a given point on the circle and</p></blockquote></li>
+
−
<li><blockquote><p>'''r''' is the radius of the circle.</p></blockquote></li></ul>
+
  
 
We will use these two '''equations''' to plot the circle.
 
We will use these two '''equations''' to plot the circle.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''What is a Slider?'''
 
'''What is a Slider?'''
 
|'''What is a Slider?'''
 
|'''What is a Slider?'''
  
−
'''Slider''' is an object that allows the user to dynamically change the value of a '''parameter'''.
+
*'''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.
+
*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'''.
+
*The user can also alter the values by clicking on any point on the '''Slider'''.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''What is a delete function?'''
 
'''What is a delete function?'''
 
|'''What is a delete function?'''
 
|'''What is a delete function?'''
  
−
The '''delete''' function is used to delete the '''graphical response'''.
+
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'''.
+
The '''object’s handle''' whose response is to be deleted, is '''passed''' as an '''argument'''.
  
 
Syntax: '''delete(&lt;handle of an object&gt;)'''
 
Syntax: '''delete(&lt;handle of an object&gt;)'''
 
|-
 
|-
−
|
+
|Switch to '''GUIBuilder Toolbox.'''
−
Switch to '''GUIBuilder Toolbox.'''
+
  
 
Open the '''plotting2dcurves.sce''' file.
 
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.
−
|
+
−
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'''.
 
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.
+
Now let us look at the '''objects''' that are taken on this '''Graphic''' window.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 1''',
−
On '''Graphic Window Number 1''',
+
  
 
hover over the '''Text''' box.
 
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.
−
|
+
−
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.'''
 
Hence, a default value '''UnName1''' is assigned to it as '''String.'''
Line 136: Line 112:
 
The '''Text''' box will display the exact value of the radius that the '''Slider''' has selected.
 
The '''Text''' box will display the exact value of the radius that the '''Slider''' has selected.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 1''',
−
On '''Graphic Window Number 1''',
+
  
 
hover over '''Axes'''.
 
hover over '''Axes'''.
  
−
Video-editor: Please put a textbox on screen. “Tag: ax_radius, String:Circle”
+
|We also have an '''Axis''' with the '''Tag ‘ax_radius’''' and the '''String''' as ‘'''Circle'''’.
−
|
+
−
We also have an '''Axes''' with the '''Tag''' '''‘ax_radius’''' and the '''String''' as ‘'''Circle'''’.
+
  
 
This will display the '''response''' of the circle.
 
This will display the '''response''' of the circle.
 
|-
 
|-
−
|
+
| Only narration
 
| Now let us add a '''Slider''' to control the radius value.
 
| Now let us add a '''Slider''' to control the radius value.
 
|-
 
|-
−
|
+
|On '''GUIBuilder Palette,'''
−
On '''GUIBuilder Palette,'''
+
  
 
click on the '''Slider'''.
 
click on the '''Slider'''.
−
|
+
|On the '''GUIBuilder''' '''Palette''', click on the '''Slider'''.
−
On the '''GUIBuilder''' '''Palette''', click on the '''Slider'''.
+
  
 
The '''Scilab Multiple Values Request''' window appears.
 
The '''Scilab Multiple Values Request''' window appears.
 
|-
 
|-
−
|
+
|On '''Scilab Multiple Values Request''' Window,
−
On '''Scilab Multiple Values Request''' Window,
+
  
 
type '''''sl_radius''''' in '''Tag''' field.
 
type '''''sl_radius''''' in '''Tag''' field.
Line 167: Line 137:
  
 
Click on '''OK.'''
 
Click on '''OK.'''
−
|
+
|Type '''''sl_radius''''' in the '''Tag''' field and '''''Radius''''' in the '''String''' field.
−
Type '''''sl_radius''''' in the '''Tag''' field and '''''Radius''''' in the '''String''' field.
+
  
 
Close the window by clicking on the '''OK''' button.
 
Close the window by clicking on the '''OK''' button.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 1''',
−
On '''Graphic Window Number 1''',
+
  
 
place the '''Slider''' above the '''Text''' box.
 
place the '''Slider''' above the '''Text''' box.
 
| Now place the '''Slider''' above the '''Text''' box.
 
| Now place the '''Slider''' above the '''Text''' box.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 1''',
−
On '''Graphic Window Number 1''',
+
  
 
move the indicator on the '''Slider''' horizontally.
 
move the indicator on the '''Slider''' horizontally.
Line 189: Line 156:
 
We must first enable the '''Slider''' to do so. Let us do that.
 
We must first enable the '''Slider''' to do so. Let us do that.
 
|-
 
|-
−
|
+
|On '''GUIBuilder Palette''' Window,
−
On '''GUIBuilder Palette''' Window,
+
  
 
cursor on the right side panel.
 
cursor on the right side panel.
−
|
+
|Go to the '''GUIBuilder Palette''' and look at the right side panel.
−
Go to the '''GUIBuilder Palette''' and look at the right side panel.
+
  
−
It displays a list of '''Tag''' names for the objects on the '''Graphic''' window.
+
It displays a list of '''Tag''' names for the '''objects''' on the '''Graphic''' window.
 
|-
 
|-
−
|
+
|On '''GUIBuilder Palette''' Window,
−
On '''GUIBuilder Palette''' Window,
+
  
 
click on '''sl_radius'''.
 
click on '''sl_radius'''.
  
 
Click on '''Object Properties'''.
 
Click on '''Object Properties'''.
−
|
+
|Click on '''sl_radius.'''
−
Click on '''sl_radius.'''
+
  
 
Then click on the '''Object Properties''' button at the bottom right of the window.
 
Then click on the '''Object Properties''' button at the bottom right of the window.
Line 211: Line 174:
 
The '''Scilab Multiple Values Request''' window will open.
 
The '''Scilab Multiple Values Request''' window will open.
 
|-
 
|-
−
|
+
|On the '''Scilab Multiple Values Request''' Window,
−
On the '''Scilab Multiple Values Request''' Window,
+
  
 
hover over '''Enable'''.
 
hover over '''Enable'''.
  
−
change '''Enable''' property to ‘'''on'''’.
+
change '''Enable''' property to ‘'''ON'''’.
−
|
+
|Search for the '''object''' property '''Enable'''.
−
Search for the object property '''Enable'''.
+
  
−
Change it from '''Off''' to '''On'''.
+
Change it from '''OFF''' to '''ON'''.
 
|-
 
|-
−
|
+
|On the '''Scilab Multiple Values Request''' Window,
−
On the '''Scilab Multiple Values Request''' Window,
+
  
 
highlight '''Max''' field.
 
highlight '''Max''' field.
  
 
Change the value from '''1 to 10'''.
 
Change the value from '''1 to 10'''.
−
|
+
|We also have to change one more '''object''' property which is ''''Max''''.
−
We also have to change one more object property which is ''''Max''''.
+
  
 
This property will set the upper limit of the '''Slider.'''
 
This property will set the upper limit of the '''Slider.'''
Line 235: Line 194:
 
Change it from '''1''' to '''10'''.
 
Change it from '''1''' to '''10'''.
 
|-
 
|-
−
|
+
|On the '''Scilab Multiple Values Request''' Window,
−
On the '''Scilab Multiple Values Request''' Window,
+
  
 
highlight '''Min''' field.
 
highlight '''Min''' field.
  
 
Click on '''OK''' button.
 
Click on '''OK''' button.
−
|
+
|Notice the '''object''' property ''''Min'''' which is lower limit of the '''Slider.'''
−
Notice the object property ''''Min'''' which is lower limit of the '''Slider.'''
+
  
 
It is always set to '''0,''' by default.
 
It is always set to '''0,''' by default.
−
 
−
Now, let us 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.
 
 
|-
 
|-
−
|
+
|Point to '''Min'''
−
On '''Graphic Window Number 1''',
+
|Now, let us vary the value of the radius using the '''Slider''' from '''0 to 10'''.
 +
|-
 +
|Click on '''Ok''' button
 +
|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'''.
 
hover cursor over the '''Graphic Window Number 1'''.
−
|
+
|Now, I will generate the '''Scilab''' code for the same.
−
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.
 
In the code file, we will write the code to connect the '''Slider''' and the '''Text''' box.
Line 261: Line 218:
 
As a result, the '''Text''' box will display the exact value of the '''Slider'''.
 
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.
 
|-
 
|-
−
|
+
|On the '''GUIBuilder Palette''' Window,
−
On the '''GUIBuilder Palette''' Window,
+
  
 
click on '''Generate,'''
 
click on '''Generate,'''
  
 
Click on '''Generate GUI Code'''.
 
Click on '''Generate GUI Code'''.
−
|
+
|On the '''GUIBuilder Palette''' click on the '''Generate''' in the '''menu bar.'''
−
On the '''GUIBuilder Palette''' click on the '''Generate''' in the '''menu bar.'''
+
  
 
Then click on '''Generate GUI Code'''.
 
Then click on '''Generate GUI Code'''.
 
|-
 
|-
−
|
+
|On the '''uiputfile''' Window,
−
On the '''uiputfile''' Window,
+
  
 
type '''''parametric-2d'''''.
 
type '''''parametric-2d'''''.
Line 281: Line 235:
 
Click on '''OK.'''
 
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.'''
−
|
+
−
I will name this file as '''parametric-2d.'''
+
  
 
Click on the '''OK''' button to save it.
 
Click on the '''OK''' button to save it.
 
|-
 
|-
−
|
+
|Cursor on '''GUI Created''' Window,
−
Cursor on '''GUI Created''' Window,
+
  
 
click on '''OK.'''
 
click on '''OK.'''
−
|
+
|A dialog box appears and displays the message '''“GUI created successfully!”'''
−
A '''dialog''' box appears and displays the message “'''GUI created successfully!”'''
+
  
 
Click on '''OK.'''
 
Click on '''OK.'''
Line 299: Line 249:
 
| The corresponding '''Scilab''' code opens.
 
| The corresponding '''Scilab''' code opens.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
highlight '''handles.txt_radius'''.
 
highlight '''handles.txt_radius'''.
−
| '''handles.txt_radius''' is the '''handle''' for the '''Text''' box.
+
|'''handles.txt_radius''' is the '''handle''' for the '''Text''' box.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
highlight '''handles.ax_radius'''.
 
highlight '''handles.ax_radius'''.
 
| '''handles.ax_radius''' is the '''handle''' for the '''Axes'''.
 
| '''handles.ax_radius''' is the '''handle''' for the '''Axes'''.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
highlight '''handles.sl_radius'''.
 
highlight '''handles.sl_radius'''.
−
| '''handles.sl_radius''' is the '''handle''' for the '''Slider'''.
+
|'''handles.sl_radius''' is the '''handle''' for the '''Slider'''.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
cursor on '''sl_radius_callback''' Function.
 
cursor on '''sl_radius_callback''' Function.
−
|
+
|Now, let us write a '''function definition''' for '''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'''.
+
The '''function''' will basically '''link''' the '''Text''' box and the '''Slider'''.
 
|-
 
|-
−
|
+
|Cursor on '''SciNotes''' window,
−
Cursor on '''SciNotes''' window,
+
  
 
within '''sl_radius_callback''' type,
 
within '''sl_radius_callback''' type,
Line 334: Line 278:
  
 
'''''r = strtod(handles.txt_radius.string)'''''
 
'''''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.
 
The same code can be found in a file in the '''Code files''' section on this video page.
Line 341: Line 284:
 
You can use it as explained earlier in this tutorial.
 
You can use it as explained earlier in this tutorial.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
highlight,
 
highlight,
  
 
'''handles.txt_radius.string = string(handles.sl_radius.value)'''
 
'''handles.txt_radius.string = string(handles.sl_radius.value)'''
−
| This line will assign the value of the '''Slider''' to the '''Text''' box'''.'''
+
| This line will assign the value of the '''Slider''' to the '''Text''' box.
 
|-
 
|-
−
|
+
|On '''SciNotes''' Window,
−
On '''SciNotes''' Window,
+
  
 
highlight,
 
highlight,
  
 
'''r = strtod(handles.txt_radius.string)'''
 
'''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.
 
|-
 
|-
−
|
+
|On '''SciNotes Window''',
−
On '''SciNotes Window''',
+
  
 
cursor on new line outside the '''sl_radius_callback''' function, type,
 
cursor on new line outside the '''sl_radius_callback''' function, type,
Line 380: Line 319:
  
 
'''''endfunction'''''
 
'''''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'''.
Line 387: Line 325:
 
This can also be found in the '''Code files''' section.
 
This can also be found in the '''Code files''' section.
 
|-
 
|-
−
|
+
|On the '''SciNotes Window,'''
−
On the '''SciNotes Window,'''
+
  
 
highlight,
 
highlight,
Line 396: Line 333:
 
First, we have defined the range of '''theta'''.
 
First, we have defined the range of '''theta'''.
  
−
It will vary from '''0 to 4𝝅''' with a step size of '''0.1.'''
+
It will vary from '''0 to 4𝝅''' with a '''step size''' of '''0.1.'''
 
|-
 
|-
−
|
+
|On the '''SciNotes Window,'''
−
On the '''SciNotes Window,'''
+
  
 
highlight,
 
highlight,
Line 408: Line 344:
 
| 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'''.
 
|-
 
|-
−
|
+
|On the '''SciNotes Window,'''
−
On the '''SciNotes Window,'''
+
  
 
highlight,
 
highlight,
  
 
'''plot(x,y)'''
 
'''plot(x,y)'''
−
| The following line will plot the circle.
+
|The following line will plot the circle.
 
|-
 
|-
−
|
+
|On the '''SciNotes Window,'''
−
On the '''SciNotes Window,'''
+
  
 
highlight,
 
highlight,
Line 424: Line 358:
  
 
'''''xgrid()'''''
 
'''''xgrid()'''''
−
| The next two lines are used to add labels and grid lines to the '''Axes'''.
+
|The next two lines are used to add '''labels''' and '''grid lines''' to the '''Axes'''.
 
|-
 
|-
−
|
+
|On '''SciNotes Window''',
−
On '''SciNotes Window''',
+
  
 
Inside the '''sl_radius_callback Function''' type,
 
Inside the '''sl_radius_callback Function''' type,
  
 
'''plot_circle()'''
 
'''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()'''
+
At the end of the '''sl_radius_callback function definition''', type '''plot_circle()'''
  
 
As a result, when we move the '''Slider''', the circle is plotted for each radius value.
 
As a result, when we move the '''Slider''', the circle is plotted for each radius value.
 
|-
 
|-
−
|
+
|On the '''SciNotes Window''',
−
On the '''SciNotes Window''',
+
  
 
press '''Ctrl''' + '''S.'''
 
press '''Ctrl''' + '''S.'''
−
| Let us save the code by pressing '''Ctrl''' + '''S''' keys together on the keyboard.
+
|Let us save the code by pressing '''Ctrl''' + '''S''' keys together on the keyboard.
 
|-
 
|-
−
|
+
|On '''SciNotes Window''',
−
On '''SciNotes Window''',
+
  
 
click on '''Execute''' Button on '''menubar.'''
 
click on '''Execute''' Button on '''menubar.'''
  
 
Click on '''File with echo.'''
 
Click on '''File with echo.'''
−
|
+
|We will now '''execute''' the code.
−
We will now execute the code.
+
  
 
Click on the '''Execute''' button on the '''menu bar'''.
 
Click on the '''Execute''' button on the '''menu bar'''.
Line 460: Line 389:
 
The '''Graphic Window Number 2''' will appear.
 
The '''Graphic Window Number 2''' will appear.
 
|-
 
|-
−
|
+
|On the '''Graphic Window Number 2''',
−
On the '''Graphic Window Number 2''',
+
  
 
move the '''Slider'''.
 
move the '''Slider'''.
Line 467: Line 395:
 
hover over '''Text''' box.
 
hover over '''Text''' box.
  
−
move the '''Slider''' indicator on the right side'''.'''
+
move the '''Slider''' indicator on the right side.
  
−
move the '''Slider''' indicator on the left side'''.'''
+
move the '''Slider''' indicator on the left side.
−
|
+
|Let us move the indicator given on the '''Slider.'''
−
Let us move the indicator given on the '''Slider.'''
+
  
 
We can see that as we move the indicator, a circle is being plotted.
 
We can see that as we move the indicator, a circle is being plotted.
Line 481: Line 408:
 
And moving the indicator towards the left decreases the radius.
 
And moving the indicator towards the left decreases the radius.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 2''',
−
On '''Graphic Window Number 2''',
+
  
 
hover over '''Axes'''.
 
hover over '''Axes'''.
  
 
Close '''Graphic Window Number 2'''.
 
Close '''Graphic Window Number 2'''.
−
|
+
|But, the earlier responses are still visible.
−
But, the earlier responses are still visible.
+
  
 
Let us delete them by adding a single line.
 
Let us delete them by adding a single line.
  
−
This line is to be written at the start of '''plot_circle() function''' definition'''.'''
+
This line is to be written at the start of '''plot_circle() function definition'''.
  
 
Close the '''Graphic Window Number 2'''.
 
Close the '''Graphic Window Number 2'''.
 
|-
 
|-
−
|
+
|On '''SciNotes Window''',
−
On '''SciNotes Window''',
+
  
−
Type within '''''<u>plot_circle</u>()''''' function and then highlight,
+
Type within '''''<u>plot_circle</u>()'' function''' and then highlight,
  
 
'''''delete(handles.ax_radius.children)'''''
 
'''''delete(handles.ax_radius.children)'''''
−
|
+
|Type the line as shown here with the same '''syntax'''.
−
Type the line as shown here with the same syntax.
+
  
 
This line deletes all the '''children''' of the current '''Axes'''.
 
This line deletes all the '''children''' of the current '''Axes'''.
Line 509: Line 432:
 
Here, '''children''' refers to the '''subplot''' of the '''Axes'''.
 
Here, '''children''' refers to the '''subplot''' of the '''Axes'''.
 
|-
 
|-
−
|
+
|On the '''SciNotes Window''',
−
On the '''SciNotes Window''',
+
  
 
Press '''Ctrl''' + '''S''' on the keyboard.
 
Press '''Ctrl''' + '''S''' on the keyboard.
−
| Let us save the work by pressing '''Ctrl''' + '''S''' keys together.
+
|Let us save the work by pressing '''Ctrl''' + '''S''' keys together.
 
|-
 
|-
−
|
+
|On '''SciNotes Window''',
−
On '''SciNotes Window''',
+
  
 
click on '''Execute,'''
 
click on '''Execute,'''
  
 
Click on '''File with echo.'''
 
Click on '''File with echo.'''
−
| Let us go back to the '''menu bar''' and click on '''Execute''' and then click on '''File with echo'''.
+
|Let us go back to the '''menu bar''' and click on '''Execute''' and then click on '''File with echo'''.
 
|-
 
|-
−
|
+
|On '''Graphic Window Number 2,'''
−
On '''Graphic Window Number 2,'''
+
  
−
move the '''Slider''' indicator to the right and then on the left side'''.'''
+
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.
−
Now move the '''Slider''' indicator to the right and then to the left.
+
  
 
The earlier responses are now deleted and no longer visible.
 
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'''.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Summary'''
 
'''Summary'''
−
|
+
|Let us summarize.
−
Let us summarize.
+
  
 
In this tutorial, we have:
 
In this tutorial, we have:
−
 
+
*Plotted the '''Parametric equation''' of a circle using '''GUI'''.
−
<ul>
+
*Used a '''Slider''' to vary the radius of a circle and
−
<li><blockquote><p>Plotted the '''Parametric''' equation of a circle using '''GUI'''.</p></blockquote></li>
+
*Used the '''delete function'''.
−
<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>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Assignment'''
 
'''Assignment'''
−
|
+
|As an assignment, please do the following.
−
As an assignment, please do the following.
+
  
−
<ul>
+
*Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations <br>y = a*(t)^2, x = 2*a*t'''
−
<li><blockquote><p>Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations'''.</p></blockquote></li></ul>
+
*Change ''''a'''' from '''-1''' to '''1''' using a '''Slider''' and display it in a '''Text''' box.
−
 
+
*Consider, ''''t'''' varies from '''-10''' to '''10'''.
−
<blockquote><math display="inline">y = at^{2}</math>,<math display="inline">x = 2at</math>
+
*Add '''grid lines''' to the plot and '''label''' the '''Axes'''.
−
</blockquote>
+
−
<ul>
+
−
<li><blockquote><p>Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.</p></blockquote></li>
+
−
<li><blockquote><p>Consider, ''''t'''' varies from '''-10''' to '''10'''.</p></blockquote></li>
+
−
<li><blockquote><p>Add grid lines to the plot and label the '''Axes'''.</p></blockquote></li></ul>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''About Spoken Tutorial Project'''
 
'''About Spoken Tutorial Project'''
−
|
+
|The video at the following link summarises the '''Spoken Tutorial''' project.
−
The video at the following link summarises the '''Spoken Tutorial''' project.
+
  
 
Please download and watch it.
 
Please download and watch it.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Spoken Tutorial Workshops'''
 
'''Spoken Tutorial Workshops'''
 
|
 
|
−
<ul>
+
*We conduct workshops using '''Spoken Tutorials''' and give certificates.
−
<li><blockquote><p>We conduct workshops using '''Spoken Tutorials''' and give certificates.</p></blockquote></li>
+
*Please contact us.
−
<li><blockquote><p>Please contact us.</p></blockquote></li></ul>
+
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Answers for THIS Spoken Tutorial'''
 
'''Answers for THIS Spoken Tutorial'''
−
|
+
|Please post your timed queries in this forum.
−
<ul>
+
−
<li><blockquote><p>Please post your timed queries in this forum.</p></blockquote></li></ul>
+
 
|-
 
|-
−
| Show Slide: '''FOSSEE Forum'''
+
|Show Slide: '''FOSSEE Forum'''
−
| Please post your general and technical queries on '''Scilab''' in this forum.
+
|Please post your general and technical queries on '''Scilab''' in this forum.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Textbook Companion project'''
 
'''Textbook Companion project'''
−
|
+
|The '''FOSSEE''' team coordinates the '''TBC''' project.
−
The '''FOSSEE''' team coordinates the '''TBC''' project.
+
  
 
For more details, please visit this site.
 
For more details, please visit this site.
 
|-
 
|-
−
| Show Slide: '''Lab Migration'''
+
|Show Slide: '''Lab Migration'''
−
|
+
|The '''FOSSEE''' team coordinates the '''Lab Migration project'''.
−
The '''FOSSEE''' team coordinates the '''Lab Migration project'''.
+
  
 
For more details, please visit this site.
 
For more details, please visit this site.
 
|-
 
|-
−
|
+
|Show Slide:
−
Show Slide:
+
  
 
'''Acknowledgements'''
 
'''Acknowledgements'''
−
| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
+
|The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
 
|-
 
|-
−
|
+
|Show slide:
−
Show slide:
+
  
 
'''Thank you'''
 
'''Thank you'''
−
|
+
|This is '''Utkarsh Anand''', a '''FOSSEE''' intern 2021, IIT Bombay signing off.
−
This is '''Utkarsh Anand''', a '''FOSSEE''' intern 2021, IIT Bombay signing off.
+
  
 
Thanks for joining.
 
Thanks for joining.
 
|}
 
|}

Latest revision as of 14:39, 21 September 2021

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

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:
  • Plot the Parametric equation of a circle using GUI
  • Use a Slider to vary the radius of a circle and
  • Use the delete function.
Show Slide:

System Requirements

Only Narration

To record this tutorial, I am using:
  • Ubuntu 18.04 OS
  • Scilab 6.1.0 and
  • GUI Builder Toolbox 4.2.1

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:
  • The learner must have basic knowledge of Scilab and GUI Builder toolbox.
  • 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.
Show Slide:

What is a Parametric Equation of a Circle?

What is a Parametric Equation of a Circle?

The Parametric Equation of a circle is x = r*cos(Θ) and y = r*sin(Θ)

where,

  • x & y are the coordinates for a given point on the circle and
  • r is the radius of the circle.

We will use these two equations to plot the circle.

Show Slide:

What is a Slider?

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?

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.

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.

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.

We also have an Axis with the Tag ‘ax_radius’ and the String as ‘Circle’.

This will display the response of the circle.

Only narration 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 the 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 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.

Point to Min Now, let us vary the value of the radius using the Slider from 0 to 10.
Click on Ok button 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.

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 the 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 keys together 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 us go back to the menu bar and click on Execute and then click 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.

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:

  • Plotted the Parametric equation of a circle using GUI.
  • Used a Slider to vary the radius of a circle and
  • Used the delete function.
Show Slide:

Assignment

As an assignment, please do the following.
  • Create a GUI to plot a Parabola using its parametric equations
    y = a*(t)^2, x = 2*a*t
  • Change 'a' from -1 to 1 using a Slider and display it in a Text box.
  • Consider, 't' varies from -10 to 10.
  • Add grid lines to the plot and label the Axes.
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.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Utkarsha

Retrieved from "https://script.spoken-tutorial.org/index.php?title=GUI-in-Scilab/C2/Plotting-2D-parametric-curves-in-GUI/English&oldid=55567"