Difference between revisions of "GUI-in-Scilab/C2/Building-a-GUI-to-graph-a-linear-equation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 1: Line 1:
−
'''Title of the script:''' Building '''GUI''' to graph a Linear Equation
+
'''Title of the script: Building GUI to graph a Linear Equation'''
  
 
'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''
 
'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''
Line 13: Line 13:
  
 
'''Title Slide'''
 
'''Title Slide'''
−
| Welcome to the '''Spoken Tutorial''' on ‘Building '''GUI''' to graph a Linear Equation’ in '''Scilab'''.
+
| Welcome to the '''Spoken Tutorial''' on '''Building GUI to graph a Linear Equation''' in '''Scilab'''.
 
|-
 
|-
 
|
 
|
Line 24: Line 24:
 
*About the '''Axes'''.
 
*About the '''Axes'''.
  
−
*How to plot the linear equation of a line using '''GUI'''.
+
*How to plot the '''linear equation''' of a line using '''GUI'''.
 
|-
 
|-
 
|
 
|
Line 68: Line 68:
  
 
What is the Linear Equation of a line'''?'''
 
What is the Linear Equation of a line'''?'''
−
|
+
|'''What is the Linear Equation of a line?'''
−
What is the Linear Equation of a line'''?'''
+
  
−
*The linear equation of a line has the general form of Ax + By = C
+
*The '''linear equation''' of a line has the general form of '''Ax + By = C'''
−
*It’s slope intercept form is y = mx + c'''.''' Where,
+
*Its '''slope intercept''' form is '''y = mx + c'''
 +
Where,
 +
'''m''' is '''slope''' and
  
−
<blockquote>m is slope and
+
'''c''' is '''y-intercept'''.
  
−
c is y-intercept.
 
−
</blockquote>
 
 
*After comparing these two forms we get,
 
*After comparing these two forms we get,
  
−
<blockquote>m = -A/B and
+
'''m = -A/B''' and
  
−
c = C/B.
+
'''c = C/B'''
−
</blockquote>
+
  
−
We will use these two equations to plot a graph of a Linear Equation of a line.
+
 
 +
We will use these two equations to plot a graph of a '''linear equation''' of a line.
 
|-
 
|-
 
|
 
|
Line 91: Line 90:
  
 
What are '''Axes'''?
 
What are '''Axes'''?
−
|
+
|'''What are Axes'''?
−
What are '''Axes'''?
+
  
 
'''Axes''' is a '''GUI''' object that allows users to view graphical representations.
 
'''Axes''' is a '''GUI''' object that allows users to view graphical representations.
Line 103: Line 101:
 
'''Objects''' for graphing Linear equation
 
'''Objects''' for graphing Linear equation
 
|
 
|
−
Following objects are needed on a graphic window to plot Linear equation of line.
+
Following objects are needed on a graphic window to plot '''linear equation''' of line.
  
−
*Three '''Edit''' boxes to take user input for '''A, B''' and '''C'''.
+
*Three '''Edit''' boxes to take '''user input''' for '''A, B''' and '''C'''.
−
*Two '''Text''' boxes to display the answer of slope and y-intercept.
+
*Two '''Text''' boxes to display the answer of '''slope''' and '''y-intercept'''.
 
*One '''Pushbutton''' to calculate and plot.
 
*One '''Pushbutton''' to calculate and plot.
 
*One '''Axes''' for displaying the graph.
 
*One '''Axes''' for displaying the graph.
Line 122: Line 120:
 
Notice '''Graphic window number 1.'''
 
Notice '''Graphic window number 1.'''
  
−
It opens the '''GUI''' with the three '''Edit''' boxes''',''' a '''Pushbutton''' and two '''Text''' boxes.
+
It opens the '''GUI''' with the three '''Edit''' boxes, a '''Pushbutton''' and two '''Text''' boxes.
 
|-
 
|-
 
|
 
|
 
Cursor on '''Graphic window number 1''' window,
 
Cursor on '''Graphic window number 1''' window,
  
−
hover over the '''Edit''' box with '''String''' '''“Enter the value of A”'''.
+
hover over the '''Edit''' box with '''String “Enter the value of A”'''.
  
−
| The first '''Edit''' box has the '''string''' '''“Enter the value of A”''' with '''Tag “ed_A”.'''
+
| The first '''Edit''' box has the '''string “Enter the value of A”''' with '''Tag “ed_A”.'''
 
|-
 
|-
 
|
 
|
 
Cursor on '''Graphic window number 1''' window,
 
Cursor on '''Graphic window number 1''' window,
  
−
hover over the '''Edit''' box with '''String''' '''“Enter the value of B”'''.
+
hover over the '''Edit''' box with '''String “Enter the value of B”'''.
  
−
| The second '''Edit''' box has the '''string''' '''“Enter the value of B”''' with '''Tag “ed_B”.'''
+
| The second '''Edit''' box has the '''String “Enter the value of B”''' with '''Tag “ed_B”.'''
 
|-
 
|-
 
|
 
|
 
Cursor on '''Graphic window number 1''' window,
 
Cursor on '''Graphic window number 1''' window,
  
−
hover over the '''Edit''' box with '''String''' '''“Enter the value of C”'''.
+
hover over the '''Edit''' box with '''String “Enter the value of C”'''.
  
−
| The third '''Edit''' box has the '''string''' '''“Enter the value of C”''' with '''Tag “ed_C”.'''
+
| The third '''Edit''' box has the '''String “Enter the value of C”''' with '''Tag “ed_C”.'''
 
|-
 
|-
 
|
 
|
Line 161: Line 159:
 
Cursor on '''Graphic window number 1''' window,
 
Cursor on '''Graphic window number 1''' window,
  
−
hover over the '''Text''' box with '''String''' '''“UnName5”'''.
+
hover over the '''Text''' box with '''String “UnName5”'''.
  
 
| The second '''Text''' box has the '''string “UnName5”''' with '''Tag “txt_y_int”'''.
 
| The second '''Text''' box has the '''string “UnName5”''' with '''Tag “txt_y_int”'''.
Line 168: Line 166:
 
Cursor on '''Graphic window number 1''' window,
 
Cursor on '''Graphic window number 1''' window,
  
−
hover over the '''Pushbutton''' with '''String''' '''“Plot”'''.
+
hover over the '''Pushbutton''' with '''String “Plot”'''.
  
 
|
 
|
Line 179: Line 177:
 
Only narration  
 
Only narration  
  
−
| Now let us add the '''Axes''' to display the graph of a linear equation.
+
| Now let us add the '''Axes''' to display the graph of a '''linear equation'''.
 
|-
 
|-
 
|
 
|
Line 251: Line 249:
 
|-
 
|-
 
| Highlight '''handles.ed_A'''.
 
| Highlight '''handles.ed_A'''.
−
| '''handles.ed_A''' is the '''handle''' for taking user input for '''A.'''
+
| '''handles.ed_A''' is the '''handle''' for taking '''user input''' for '''A.'''
 
|-
 
|-
 
| Highlight '''handles.ed_B'''.
 
| Highlight '''handles.ed_B'''.
−
| '''handles.ed_B''' is the '''handle''' for taking user input for '''B.'''
+
| '''handles.ed_B''' is the '''handle''' for taking '''user input''' for '''B.'''
 
|-
 
|-
 
| Highlight '''handles.ed_C'''.
 
| Highlight '''handles.ed_C'''.
−
| '''handles.ed_C''' is the '''handle''' for taking user input for '''C.'''
+
| '''handles.ed_C''' is the '''handle''' for taking '''user input''' for '''C.'''
 
|-
 
|-
 
| Highlight '''handles.txt_slope'''.
 
| Highlight '''handles.txt_slope'''.
Line 274: Line 272:
 
Cursor on '''SciNotes''' window,
 
Cursor on '''SciNotes''' window,
  
−
highlight the '''pb_plot_callback''' function.
+
highlight the '''pb_plot_callback function'''.
 
| Now let us write a '''function''' definition for '''pb_plot_callback function'''.
 
| Now let us write a '''function''' definition for '''pb_plot_callback function'''.
 
|-
 
|-
Line 321: Line 319:
 
'''C = strtod(handles.ed_c.string)'''
 
'''C = strtod(handles.ed_c.string)'''
 
|
 
|
−
The first three lines of code will take inputs for '''A, B''' and '''C''' from the '''Edit''' boxes.
+
The first three lines of code will take '''inputs''' for '''A, B''' and '''C''' from the '''Edit''' boxes.
  
−
Then they will be assigned to their respective variables.
+
Then they will be assigned to their respective '''variables'''.
 
|-
 
|-
 
|
 
|
Line 332: Line 330:
 
'''y_int = C/B'''
 
'''y_int = C/B'''
 
|
 
|
−
The next two lines will calculate the slope and y-intercept.
+
The next two lines will calculate the '''slope''' and '''y-intercept'''.
  
−
They will then be stored in the variables '''slope''' and '''y_int'''.
+
They will then be stored in the '''variables slope''' and '''y_int'''.
 
|-
 
|-
 
|
 
|
Line 348: Line 346:
  
 
'''x = 0:0.1:2*%pi'''
 
'''x = 0:0.1:2*%pi'''
−
| The following line will set the value of '''x''' from '''0''' to '''2 pi''' with an interval of 0.1.
+
| The following line will set the value of '''x''' from '''0''' to '''2 pi''' with an '''interval''' of '''0.1'''.
 
|-
 
|-
 
|
 
|
Line 360: Line 358:
  
 
'''plot (x,y)'''
 
'''plot (x,y)'''
−
| At last, the response of '''x''' versus '''y''' is plotted to see the output.
+
| At last, the '''response''' of '''x''' versus '''y''' is plotted to see the output.
 
|-
 
|-
 
|
 
|
Line 366: Line 364:
  
 
'''xtitle(‘Graph of linear equation’, “X-axis”, “Y-axis”)'''
 
'''xtitle(‘Graph of linear equation’, “X-axis”, “Y-axis”)'''
−
| Then, using the '''xtitle''' command, we will do the labeling.
+
| Then, using the '''xtitle command''', we will do the '''labeling'''.
 
|-
 
|-
 
|
 
|
Line 373: Line 371:
 
'''xgrid()'''
 
'''xgrid()'''
 
|
 
|
−
To make the '''plot''' look more presentable, the '''xgrid''' command is used'''.'''
+
To make the '''plot''' look more presentable, the '''xgrid command''' is used.
  
 
The '''grid lines''' will be enabled on the plot as a result of this.
 
The '''grid lines''' will be enabled on the plot as a result of this.
Line 412: Line 410:
 
Type,
 
Type,
  
−
2 as a value for '''A''' in the first '''Edit''' box''','''
+
2 as a value for '''A''' in the first '''Edit box''',
  
−
7 as a value for '''B''' in the second '''Edit''' box''','''
+
7 as a value for '''B''' in the second '''Edit box''',
  
−
4 as a value for '''C''' in the third '''Edit''' box'''.'''
+
4 as a value for '''C''' in the third '''Edit box'''.
  
 
Then click on '''Plot'''.
 
Then click on '''Plot'''.
Line 423: Line 421:
 
Cursor on '''Graphic Window number 2,'''
 
Cursor on '''Graphic Window number 2,'''
  
−
hover cursor over slope and '''y''' intercept Text boxes.
+
hover cursor over '''slope''' and '''y intercept Text''' boxes.
−
| These are the slope and '''y''' intercept values for the linear equation.
+
| These are the '''slope''' and '''y intercept''' values for the '''linear equation'''.
 
|-
 
|-
 
|
 
|
Line 433: Line 431:
 
Notice that the graph is labelled and has '''grid lines''' on it.
 
Notice that the graph is labelled and has '''grid lines''' on it.
  
−
This way we have plotted a linear equation of a line using '''GUI'''.
+
This way we have plotted a '''linear equation''' of a line using '''GUI'''.
 
|-
 
|-
 
|
 
|
Line 445: Line 443:
  
 
*About the '''Axes'''.
 
*About the '''Axes'''.
−
*How to plot a linear equation of a line using '''GUI'''.
+
*How to plot a '''linear equation''' of a line using '''GUI'''.
 
|-
 
|-
 
|
 
|
Line 456: Line 454:
 
Create a '''GUI''' to,
 
Create a '''GUI''' to,
  
−
*Plot an equation of y = e^(Ax).
+
*Plot an equation of '''y = e^(Ax)'''.
 
*Take '''‘A’''' as '''input''' from the user.
 
*Take '''‘A’''' as '''input''' from the user.
−
*Consider, x varies from 0 to 2*pi.
+
*Consider, '''x''' varies from '''0''' to '''2*pi'''.
 
|-
 
|-
 
| Show Slide: '''About Spoken Tutorial Project'''
 
| Show Slide: '''About Spoken Tutorial Project'''

Latest revision as of 16:39, 22 October 2021

Title of the script: Building GUI to graph a Linear Equation

Author: Rashmi Patankar, Amandeepsingh Siddhu

Keywords: Axes, plot the response of a Linear Equation, strtod command, xgrid command.

Visual Cue Narration

Show Slide:

Title Slide

Welcome to the Spoken Tutorial on Building GUI to graph a Linear Equation in Scilab.

Show Slide:

Learning objectives

In this tutorial, we will learn:

  • About the Axes.
  • How to plot the linear equation of a line using GUI.

Show Slide:

System requirement

To record this tutorial, I am using

  • Windows 10 OS
  • Scilab 6.1.0
  • GUI Builder Toolbox 4.2.1

The process demonstrated in this tutorial is similar in Linux OS.

Annotations are added to the tutorial if there are any differences.

Show Slide:

Pre-requisites

https://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 the Linear Equation of a line?

What is the Linear Equation of a line?
  • The linear equation of a line has the general form of Ax + By = C
  • Its slope intercept form is y = mx + c

Where, m is slope and

c is y-intercept.

  • After comparing these two forms we get,

m = -A/B and

c = C/B


We will use these two equations to plot a graph of a linear equation of a line.

Show Slide:

What are Axes?

What are Axes?

Axes is a GUI object that allows users to view graphical representations.

It displays graphs and images.

Show slide:

Objects for graphing Linear equation

Following objects are needed on a graphic window to plot linear equation of line.

  • Three Edit boxes to take user input for A, B and C.
  • Two Text boxes to display the answer of slope and y-intercept.
  • One Pushbutton to calculate and plot.
  • One Axes for displaying the graph.

Cursor on GUIBuilder Palette window.

I have already opened the linearequation.sce file using the GUIBuilder toolbox.

Cursor on Graphic window number 1 window,

hover cursor over the six objects.

Notice Graphic window number 1.

It opens the GUI with the three Edit boxes, a Pushbutton and two Text boxes.

Cursor on Graphic window number 1 window,

hover over the Edit box with String “Enter the value of A”.

The first Edit box has the string “Enter the value of A” with Tag “ed_A”.

Cursor on Graphic window number 1 window,

hover over the Edit box with String “Enter the value of B”.

The second Edit box has the String “Enter the value of B” with Tag “ed_B”.

Cursor on Graphic window number 1 window,

hover over the Edit box with String “Enter the value of C”.

The third Edit box has the String “Enter the value of C” with Tag “ed_C”.

Only narration

Now let us look at the Text boxes which are at the bottom left side of the window.

Cursor on Graphic window number 1 window,

hover over the Text box with String “UnName4”.

The first Text box has the string “UnName4” with Tag “txt_slope”.

Cursor on Graphic window number 1 window,

hover over the Text box with String “UnName5”.

The second Text box has the string “UnName5” with Tag “txt_y_int”.

Cursor on Graphic window number 1 window,

hover over the Pushbutton with String “Plot”.

Between the Edit boxes and Text boxes, a Pushbutton is present.

It has pb_plot as tag and Plot as string.

Only narration

Now let us add the Axes to display the graph of a linear equation.

Cursor on GUIBuilder Palette window,

click on Axes.

On the left side of GUI Builder Palette, click on Axes.

Cursor on Scilab Multiple Values Request window,

type ax_plot as Tag,

type Plot as a String.

Click on OK.

Type ax_plot as Tag, and Plot as a String.

Then click on OK.

Cursor on Graphic Window number 1,

place the Axes on the right side.

I will place the Axes in the middle right side of the Graphic Window number 1.

Only narration

The GUI is now complete. Let us generate the Scilab code.

Cursor on the GUI Builder Palette window,

click on Generate,

click on Generate GUI Code.

Go to GUIBuilder Palette, click on Generate in the menu bar.

Then click on the Generate GUI Code.

Type axesplotgui.

Click Save.

I will name this file as axesplotgui.

Click on Save.

Cursor on GUI Created window.

Click on OK.

It shows a dialog box that displays GUI created successfully!

Click on OK.

Cursor on SciNotes window.

You can see that the corresponding Scilab code has been generated.

Inside this file, notice the handles of the seven

objects.

Highlight handles.ed_A. handles.ed_A is the handle for taking user input for A.
Highlight handles.ed_B. handles.ed_B is the handle for taking user input for B.
Highlight handles.ed_C. handles.ed_C is the handle for taking user input for C.
Highlight handles.txt_slope. handles.txt_slope is the handle for displaying the slope.
Highlight handles.txt_y_int. handles.txt_y_int is the handle for displaying the y-intercept.
Highlight handles.pb_plot. handles.pb_plot is the handle for Pushbutton Plot.
Highlight handles.ax_plot. handles.ax_plot is the handle for displaying the plot.

Cursor on SciNotes window,

highlight the pb_plot_callback function.

Now let us write a function definition for pb_plot_callback function.

Cursor on SciNotes window,

type within pb_plot_callback.

A = strtod(handles.ed_A.string)

B = strtod(handles.ed_B.string)

C = strtod(handles.ed_C.string)

slope = -A/B

y_int = C/B

handles.txt_slope.string = string(slope)

handles.txt_y_int.string = string(y_int)

x = 0:0.1:2*%pi

y = C/B - (A/B)*x

plot (x,y)

xtitle(‘Graph of linear equation’, ‘X-axis’, ‘Y-axis’)

xgrid()

Enter the code as seen here, with the same syntax.

The same code can be found under the Code files section.

You can use it as explained earlier in this tutorial.

Highlight,

A = strtod(handles.ed_a.string)

B = strtod(handles.ed_b.string)

C = strtod(handles.ed_c.string)

The first three lines of code will take inputs for A, B and C from the Edit boxes.

Then they will be assigned to their respective variables.

Highlight,

slope = -A/B

y_int = C/B

The next two lines will calculate the slope and y-intercept.

They will then be stored in the variables slope and y_int.

Highlight,

handles.txt_slope.string = string(slope)

handles.txt_y_int.string = string(y_int)

Further two lines will give slope and y-int values to their respective Text boxes.

Highlight,

x = 0:0.1:2*%pi

The following line will set the value of x from 0 to 2 pi with an interval of 0.1.

Highlight,

y = C/B - (A/B)*x

Once the value of x is set, the value of y is calculated.

Highlight,

plot (x,y)

At last, the response of x versus y is plotted to see the output.

Highlight,

xtitle(‘Graph of linear equation’, “X-axis”, “Y-axis”)

Then, using the xtitle command, we will do the labeling.

Highlight,

xgrid()

To make the plot look more presentable, the xgrid command is used.

The grid lines will be enabled on the plot as a result of this.

Cursor on SciNotes window,

press CTRL + S.

The program is now complete.

Let us save it by pressing Control and S keys together.

Cursor on Scinotes window,

click on Execute, and then click on File with echo.

To run the file, click on Execute in the menubar.

Then click on File with echo from the drop-down.

Cursor on Graphic Window number 2.

Type,

2 in place of Enter the value of A,

7 in place of Enter the value of B,

4 in place of Enter the value of C.

Click on Plot.

Graphic window number 2 opens with 6 boxes and 1 axes.

Type,

2 as a value for A in the first Edit box,

7 as a value for B in the second Edit box,

4 as a value for C in the third Edit box.

Then click on Plot.

Cursor on Graphic Window number 2,

hover cursor over slope and y intercept Text boxes.

These are the slope and y intercept values for the linear equation.

Cursor on Graphic Window number 2,

hover cursor on axes plot.

Notice that the graph is labelled and has grid lines on it.

This way we have plotted a linear equation of a line using GUI.

Show Slide:

Summary

This brings us to the end of this tutorial. Let us summarize.

In this tutorial, we have learnt:

  • About the Axes.
  • How to plot a linear equation of a line using GUI.

Show Slide:

Assignment

As an assignment, please do the following.

Create a GUI to,

  • Plot an equation of y = e^(Ax).
  • Take ‘A’ as input from the user.
  • Consider, x varies from 0 to 2*pi.
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

The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to 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:

Acknowledgment

Spoken Tutorial project is funded by the Ministry of Education, Government of India.

Show Slide:

Thank you

This is Amandeepsingh Siddhu, a FOSSEE intern 2021, IIT Bombay signing off.

Thanks for joining.

Contributors and Content Editors

Amandeeps, Nancyvarkey

Retrieved from "https://script.spoken-tutorial.org/index.php?title=GUI-in-Scilab/C2/Building-a-GUI-to-graph-a-linear-equation/English&oldid=55633"