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

Revision as of 17:43, 20 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.</ul>
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 = rcos(Θ) and y = rsin(Θ)* 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 Axes 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. 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.
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 = rcos(theta)* *y = rsin(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 = rcos(theta) y = rsin(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 = 2at.</ul> 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.</ul>
Show Slide: Answers for THIS Spoken Tutorial	Please post your timed queries in this forum.</ul>
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

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

Revision as of 17:43, 20 September 2021

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 15: / Line 15: @@
 | Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''2D''' parametric curves”.
 |-
-|
+|Show Slide:
-Show Slide:
 '''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.</ul>
-<li><blockquote><p>Use the '''delete''' function.</p></blockquote></li></ul>
 |-
-|
+|Show Slide:
-Show Slide:
 '''System Requirements'''
 '''Only Narration'''
-|
+|To record this tutorial, I am using:
-To record this tutorial, I am using:
-<ul>
-<li><blockquote><p>'''Ubuntu 18.04 OS'''</p></blockquote></li></ul>
-<ul>
+*'''Ubuntu 18.04 OS'''
-<li><blockquote><p>'''Scilab''' '''6.1.0''' and</p></blockquote></li>
+*'''Scilab''' '''6.1.0''' and
-<li><blockquote><p>'''GUI Builder Toolbox 4.2.1'''</p></blockquote></li></ul>
+*'''GUI Builder Toolbox 4.2.1'''
 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.
 |-
-|
+|Show Slide:
-Show Slide:
 '''Pre-requisites'''
 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'''
 |
-<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?
-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,
+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.
 |-
-|
+|Show Slide:
-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'''.
+*'''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?'''
-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;)'''
 |-
-|
+|Switch to '''GUIBuilder Toolbox.'''
-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.
-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.
+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.
-|
+|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.'''
@@ Line 134: / Line 112: @@
 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'''.
-|
+|We also have an '''Axes''' 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.
@@ Line 147: / Line 123: @@
 | Now let us add a '''Slider''' to control the radius value.
 |-
-|
+|On '''GUIBuilder Palette,'''
-On '''GUIBuilder Palette,'''
 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.
 |-
-|
+|On '''Scilab Multiple Values Request''' Window,
-On '''Scilab Multiple Values Request''' Window,
 type '''''sl_radius''''' in '''Tag''' field.
@@ Line 164: / Line 137: @@
 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.
 |-
-|
+|On '''Graphic Window Number 1''',
-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''',
-On '''Graphic Window Number 1''',
 move the indicator on the '''Slider''' horizontally.
@@ Line 186: / Line 156: @@
 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.
-|
+|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.
 |-
-|
+|On '''GUIBuilder Palette''' Window,
-On '''GUIBuilder Palette''' Window,
 click on '''sl_radius'''.
 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.
@@ Line 208: / Line 174: @@
 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'''.
 change '''Enable''' property to ‘'''on'''’.
-|
+|Search for the object property '''Enable'''.
-Search for the object property '''Enable'''.
 Change it from '''Off''' to '''On'''.
 |-
-|
+|On the '''Scilab Multiple Values Request''' Window,
-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''''.
-We also have to change one more object property which is ''''Max''''.
 This property will set the upper limit of the '''Slider.'''
@@ Line 232: / Line 194: @@
 Change it from '''1''' to '''10'''.
 |-
-|
+|On the '''Scilab Multiple Values Request''' Window,
-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.'''
-Notice the object property ''''Min'''' which is lower limit of the '''Slider.'''
 It is always set to '''0,''' by default.
@@ Line 247: / Line 207: @@
 Let us save the changes by clicking on the '''OK''' button at the bottom.
 |-
-|
+|On '''Graphic Window Number 1''',
-On '''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.
@@ Line 260: / Line 218: @@
 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 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'''.
 |-
-|
+|On the '''uiputfile''' Window,
-On the '''uiputfile''' Window,
 type '''''parametric-2d'''''.
@@ Line 278: / Line 233: @@
 Click on '''OK.'''
-|
+|I will name this file as '''parametric-2d.'''
-I will name this file as '''parametric-2d.'''
 Click on the '''OK''' button to save it.
 |-
-|
+|Cursor on '''GUI Created''' Window,
-Cursor on '''GUI Created''' Window,
 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.'''
@@ Line 295: / Line 247: @@
 | The corresponding '''Scilab''' code opens.
 |-
-|
+|On '''SciNotes''' Window,
-On '''SciNotes''' Window,
 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'''.
 | '''handles.ax_radius''' is the '''handle''' for the '''Axes'''.
 |-
-|
+|On '''SciNotes''' Window,
-On '''SciNotes''' Window,
 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.
-|
+|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'''.
 |-
-|
+|Cursor on '''SciNotes''' window,
-Cursor on '''SciNotes''' window,
 within '''sl_radius_callback''' type,
@@ Line 330: / Line 276: @@
 '''''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 337: / Line 282: @@
 You can use it as explained earlier in this tutorial.
 |-
-|
+|On '''SciNotes''' Window,
-On '''SciNotes''' Window,
 highlight,
@@ Line 345: / Line 289: @@
 | This line will assign the value of the '''Slider''' to the '''Text''' box'''.'''
 |-
-|
+|On '''SciNotes''' Window,
-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’.'''
-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''',
-On '''SciNotes Window''',
 cursor on new line outside the '''sl_radius_callback''' function, type,
@@ Line 376: / Line 317: @@
 '''''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.
@@ Line 383: / Line 323: @@
 This can also be found in the '''Code files''' section.
 |-
-|
+|On the '''SciNotes Window,'''
-On the '''SciNotes Window,'''
 highlight,
@@ Line 394: / Line 333: @@
 It will vary from '''0 to 4𝝅''' with a step size of '''0.1.'''
 |-
-|
+|On the '''SciNotes Window,'''
-On the '''SciNotes Window,'''
 highlight,
@@ Line 404: / Line 342: @@
 | 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,
 '''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,
@@ Line 420: / Line 356: @@
 '''''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,
 '''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 435: / Line 369: @@
 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.'''
-| 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 '''File with echo.'''
-|
+|We will now execute the code.
-We will now execute the code.
 Click on the '''Execute''' button on the '''menu bar'''.
@@ Line 456: / Line 387: @@
 The '''Graphic Window Number 2''' will appear.
 |-
-|
+|On the '''Graphic Window Number 2''',
-On the '''Graphic Window Number 2''',
 move the '''Slider'''.
@@ Line 466: / Line 396: @@
 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.
@@ Line 477: / Line 406: @@
 And moving the indicator towards the left decreases the radius.
 |-
-|
+|On '''Graphic Window Number 2''',
-On '''Graphic Window Number 2''',
 hover over '''Axes'''.
 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.
@@ Line 492: / Line 419: @@
 Close the '''Graphic Window Number 2'''.
 |-
-|
+|On '''SciNotes Window''',
-On '''SciNotes Window''',
 Type within '''''<u>plot_circle</u>()''''' function and then highlight,
 '''''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'''.
@@ Line 505: / Line 430: @@
 Here, '''children''' refers to the '''subplot''' of the '''Axes'''.
 |-
-|
+|On the '''SciNotes Window''',
-On the '''SciNotes Window''',
 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 '''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'''.'''
-|
+|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.
@@ Line 530: / Line 451: @@
 So, in this way we can build a '''GUI''' for plotting a '''2D''' parametric curve in '''Scilab'''.
 |-
-|
+|Show Slide:
-Show Slide:
 '''Summary'''
-|
+|Let us summarize.
-Let us summarize.
 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'''
-|
+|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.</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>
+*Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.
-<ul>
+*Consider, ''''t'''' varies from '''-10''' to '''10'''.
-<li><blockquote><p>Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.</p></blockquote></li>
+*Add grid lines to the plot and label the '''Axes'''.
-<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'''
-|
+|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.
 |-
-|
+|Show Slide:
-Show Slide:
 '''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.</ul>
-<li><blockquote><p>Please contact us.</p></blockquote></li></ul>
 |-
-|
+|Show Slide:
-Show Slide:
 '''Answers for THIS Spoken Tutorial'''
-|
+|Please post your timed queries in this forum.</ul>
-<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'''
-|
+|The '''FOSSEE''' team coordinates the '''TBC''' project.
-The '''FOSSEE''' team coordinates the '''TBC''' project.
 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.
 |-
-|
+|Show Slide:
-Show Slide:
 '''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'''
-|
+|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.
 |}