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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 22: Line 22:
 
*Plot the '''Parametric equation''' of a circle using '''GUI'''
 
*Plot the '''Parametric equation''' of a circle using '''GUI'''
 
*Use a '''Slider''' to vary the radius of a circle and
 
*Use a '''Slider''' to vary the radius of a circle and
*Use the '''delete''' function.</ul>
+
*Use the '''delete function'''.
 
|-
 
|-
 
|Show Slide:
 
|Show Slide:
Line 62: Line 62:
 
|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
+
*'''x''' &amp; '''y''' are the '''coordinates''' for a given point on the circle and
 
*'''r''' is the radius of the circle.
 
*'''r''' is the radius of the circle.
  
Line 116: Line 116:
 
hover over '''Axes'''.
 
hover over '''Axes'''.
  
|We also have an '''Axes''' with the '''Tag ‘ax_radius’''' and the '''String''' as ‘'''Circle'''’.
+
|We also have an '''Axis''' 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.
Line 161: Line 161:
 
|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,
Line 178: Line 178:
 
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,
Line 188: Line 188:
  
 
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 199: Line 199:
  
 
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'''.
+
|Point to '''Min'''
 
+
|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.
+
|-
 +
|Click on '''Ok''' button
 +
|Let us save the changes by clicking on the '''OK''' button at the bottom.
 
|-
 
|-
 
|On '''Graphic Window Number 1''',
 
|On '''Graphic Window Number 1''',
Line 216: 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,
Line 265: Line 267:
  
 
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,
Line 276: 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 287: Line 289:
  
 
'''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,
Line 294: Line 296:
  
 
'''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''',
Line 317: 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'''.
  
 
This can also be found in the '''Code files''' section.
 
This can also be found in the '''Code files''' section.
Line 331: 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,'''
Line 340: Line 342:
  
 
'''''y = r*sin(theta)'''''
 
'''''y = r*sin(theta)'''''
| 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,'''
Line 356: 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''',
Line 363: Line 365:
  
 
'''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.
Line 379: Line 381:
  
 
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 393: 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.'''
  
Line 415: Line 417:
 
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'''.
Line 421: Line 423:
 
|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 444: Line 446:
 
|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:
Line 457: Line 459:
  
 
In this tutorial, we have:
 
In this tutorial, we have:
*Plotted the Parametric equation of a circle using '''GUI'''.
+
*Plotted the '''Parametric equation''' of a circle using '''GUI'''.
 
*Used a '''Slider''' to vary the radius of a circle and
 
*Used a '''Slider''' to vary the radius of a circle and
*Used the '''delete''' function.
+
*Used the '''delete function'''.
 
|-
 
|-
 
|Show Slide:
 
|Show Slide:
Line 466: Line 468:
 
|As an assignment, please do the following.
 
|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>'''
+
*Create a '''GUI''' to plot a '''Parabola''' using its '''parametric equations <br>y = a*(t)^2, x = 2*a*t'''
*Change ''''a'''' from '''-1 to 1''' using a '''Slider''' and display it in a '''Text''' box.
+
*Change ''''a'''' from '''-1''' to '''1''' using a '''Slider''' and display it in a '''Text''' box.
 
*Consider, ''''t'''' varies from '''-10''' to '''10'''.
 
*Consider, ''''t'''' varies from '''-10''' to '''10'''.
*Add grid lines to the plot and label the '''Axes'''.
+
*Add '''grid lines''' to the plot and '''label''' the '''Axes'''.
 
|-
 
|-
 
|Show Slide:
 
|Show Slide:
Line 483: Line 485:
 
|
 
|
 
*We conduct workshops using '''Spoken Tutorials''' and give certificates.
 
*We conduct workshops using '''Spoken Tutorials''' and give certificates.
*Please contact us.</ul>
+
*Please contact us.
 
|-
 
|-
 
|Show Slide:
 
|Show Slide:
  
 
'''Answers for THIS Spoken Tutorial'''
 
'''Answers for THIS Spoken Tutorial'''
|Please post your timed queries in this forum.</ul>
+
|Please post your timed queries in this forum.
 
|-
 
|-
 
|Show Slide: '''FOSSEE Forum'''
 
|Show Slide: '''FOSSEE Forum'''

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