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: |
|
Show Slide: System Requirements
Only Narration |
To record this tutorial, I am using:
The process demonstrated in this tutorial is identical in Windows OS also.
Annotations are added to the tutorial if there are any differences. |
|
Show Slide: Pre-requisites
|
To follow this tutorial: |
|
Show Slide: Code Files |
|
|
Show Slide: What is a Parametric Equation of a Circle? |
The Parametric Equation of a circle is <math display="block">{x = r}\cos {{\theta \land y} = r}\sin \theta</math>.
Where,
We will use these two equations to plot the circle. |
|
Show Slide: 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? |
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 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 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 the 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’s 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 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 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's go back to the menu bar and click on Execute and then 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 side.
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: |
|
Show Slide: Assignment |
As an assignment, please do the following. <math display="block">{y = a}t^{2}</math>,<math display="block">{x = 2}\mathit{at}</math>
|
|
Show Slide: About Spoken Tutorial Project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
|
Show Slide: Spoken Tutorial Workshops |
|
|
Show Slide: Answers for THIS Spoken Tutorial |
|
| 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. |
