View source for 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'''

{|border=1
! '''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 = r*cos(Θ) and y = r*sin(Θ)'''

where,
*'''x''' &amp; '''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(&lt;handle of an object&gt;)'''
|-
|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 <u>plot_circle</u>()'''''

'''''theta = 0:0.1:4*%pi'''''

'''''x = r*cos(theta)'''''

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

'''''<u>plot</u>(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 '''''<u>plot_circle</u>()''''' 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 '''<br>y = a*(t)^2, x = 2*a*t.</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.
|}