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

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 <math display="inline">x\ = \ r\ cos\theta\ \ \text{and\ }y\ = \ r\ \ sin\theta</math>. 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. Video-editor: Please put a textbox on screen. “plotting2dcurves.sce”	Let us look at how to use a Slider to plot a circle with varying radii. I have opened the plotting2dcurves.sce file using the GUIBuilder toolbox. Now let us look at the objects that are taken on this graphic window.
On Graphic Window Number 1, hover over the Text box. Video-editor: Please put a textbox on screen. “Tag: txt_radius”	We have a Text box with the Tag ‘txt_radius’ and the String part is kept empty. Hence, a default value UnName1 is assigned to it as String. The Text box will display the exact value of the radius that the Slider has selected.
On Graphic Window Number 1, hover over Axes. Video-editor: Please put a textbox on screen. “Tag: ax_radius, String:Circle”	We also have an Axes with the Tag ‘ax_radius’ and the String as ‘Circle’. This will display the response of the circle.
	Now let us add a Slider to control the radius value.
On GUIBuilder Palette, click on the Slider.	On the GUIBuilder Palette, click on the Slider. The Scilab Multiple Values Request window appears.
On Scilab Multiple Values Request Window, type sl_radius in Tag field. Type Radius in String field. Click on OK.	Type sl_radius in the Tag field and Radius in the String field. Close the window by clicking on the OK button.
On Graphic Window Number 1, place the Slider above the Text box.	Now place the Slider above the Text box.
On Graphic Window Number 1, move the indicator on the Slider horizontally.	Then move the Slider indicator horizontally to vary the value. However, we find that we are unable to move the indicator. We must first enable the Slider to do so. Let us do that.
On GUIBuilder Palette Window, cursor on the right side panel.	Go to 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. Video-editor: Please put a textbox on screen. “In Windows OS, click on Save button.”	I will name this file as parametric-2d. Click on the OK button to save it.
Cursor on GUI Created Window, click on OK.	A dialog box appears and displays the message “GUI created successfully!” Click on OK.
Cursor on SciNotes Window.	The corresponding Scilab code opens.
On SciNotes Window, highlight handles.txt_radius.	handles.txt_radius is the handle for the Text box.
On SciNotes Window, highlight handles.ax_radius.	handles.ax_radius is the handle for the Axes.
On SciNotes Window, highlight handles.sl_radius.	handles.sl_radius is the handle for the Slider.
On SciNotes Window, cursor on sl_radius_callback Function.	Now, let us write a function definition for sl_radius_callback function. The function will basically link the Text box and the Slider.
Cursor on SciNotes window, within sl_radius_callback type, handles.txt_radius.string = string(handles.sl_radius.value) r = strtod(handles.txt_radius.string)	Type the code as shown here with the same syntax. The same code can be found in a file in the Code files section on this video page. You can use it as explained earlier in this tutorial.
On SciNotes Window, highlight, handles.txt_radius.string = string(handles.sl_radius.value)	This line will assign the value of the Slider to the Text box.
On SciNotes Window, highlight, r = strtod(handles.txt_radius.string)	Next, we will assign the radius value from the Text box to a variable ‘r’. Later on, we can use the variable ‘r’ while writing the equation of a circle.
On SciNotes Window, cursor on new line outside the sl_radius_callback function, type, function plot_circle() theta = 0:0.1:4*%pi x = r*cos(theta) y = r*sin(theta) plot(x,y) xtitle('Plot of circle', 'X-axis', 'Y-axis') xgrid() endfunction	Further, we will write a user defined function plot_circle() to plot the circle. Type the code in the same way as before, with the same syntax. This can also be found in the Code files section.
On the SciNotes Window, highlight, theta = 0:0.1:4*%pi	First, we have defined the range of theta. It will vary from 0 to 4𝝅 with a step size of 0.1.
On the SciNotes Window, highlight, x = r*cos(theta) y = r*sin(theta)	The next two lines define the parametric equation of the circle in terms of x and y.
On the SciNotes Window, highlight, plot(x,y)	The following line will plot the circle.
On the SciNotes Window, highlight, xtitle('Plot of circle', 'X-axis', 'Y-axis') xgrid()	The next two lines are used to add labels and grid lines to the Axes.
On SciNotes Window, Inside the sl_radius_callback Function type, plot_circle()	Let us call the plot_circle() function inside the callback function. At the end of 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. <math display="inline">y = at^{2}</math>,<math display="inline">x = 2at</math> 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