View source for GUI-in-Scilab/C2/Building-a-GUI-to-graph-a-linear-equation/English

'''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.

{| border=1
! '''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.
|}