Difference between revisions of "GUI-in-Scilab/C2/Building-a-GUI-to-graph-a-linear-equation/English"
Nancyvarkey (Talk | contribs) |
|||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | '''Title of the script: | + | '''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 | + | | Welcome to the '''Spoken Tutorial''' on '''Building GUI to graph a Linear Equation''' in '''Scilab'''. |
|- | |- | ||
| | | | ||
| Line 22: | Line 22: | ||
In this tutorial, we will learn: | In this tutorial, we will learn: | ||
| − | + | *About the '''Axes'''. | |
| − | + | ||
| − | + | *How to plot the '''linear equation''' of a line using '''GUI'''. | |
| − | + | ||
|- | |- | ||
| | | | ||
| Line 33: | Line 31: | ||
'''System requirement''' | '''System requirement''' | ||
| − | |||
| | | | ||
To record this tutorial, I am using | 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'''. | The process demonstrated in this tutorial is similar in '''Linux OS'''. | ||
| Line 55: | Line 51: | ||
To follow this tutorial: | 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. | |
| − | + | ||
|- | |- | ||
| | | | ||
| Line 66: | Line 60: | ||
'''Code Files ''' | '''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: | Show Slide: | ||
| − | What is the | + | What is the Linear Equation of a line'''?''' |
| − | | | + | |'''What is the Linear Equation of a line?''' |
| − | What is the | + | |
| − | + | *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 | + | '''c = C/B''' |
| − | + | ||
| − | We will use these two equations to plot a graph of a ''' | + | |
| + | We will use these two equations to plot a graph of a '''linear equation''' of a line. | ||
|- | |- | ||
| | | | ||
| Line 99: | Line 90: | ||
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 109: | Line 99: | ||
Show slide: | Show slide: | ||
| − | '''Objects''' for graphing | + | '''Objects''' for graphing Linear equation |
| | | | ||
| − | Following objects are needed on a graphic window to plot | + | 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. | Cursor on '''GUIBuilder Palette''' window. | ||
| − | |||
| I have already opened the '''linearequation.sce''' file using the '''GUIBuilder toolbox'''. | | I have already opened the '''linearequation.sce''' file using the '''GUIBuilder toolbox'''. | ||
|- | |- | ||
| Line 128: | Line 116: | ||
Cursor on '''Graphic window number 1''' window, | Cursor on '''Graphic window number 1''' window, | ||
| − | + | hover cursor over the six '''objects'''. | |
| | | | ||
Notice '''Graphic window number 1.''' | Notice '''Graphic window number 1.''' | ||
| − | It opens the '''GUI''' with the three '''Edit''' 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 | + | 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 | + | |
|- | |- | ||
| | | | ||
Cursor on '''Graphic window number 1''' window, | Cursor on '''Graphic window number 1''' window, | ||
| − | hover over the '''Edit''' box with '''String | + | 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 ''' | + | |
|- | |- | ||
| | | | ||
Cursor on '''Graphic window number 1''' window, | Cursor on '''Graphic window number 1''' window, | ||
| − | hover over the '''Edit''' box with '''String | + | 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 ''' | + | |
|- | |- | ||
| | | | ||
| + | |||
| + | Only narration | ||
| Now let us look at the '''Text''' boxes which are at the bottom left side of the window. | | Now let us look at the '''Text''' boxes which are at the bottom left side of the window. | ||
| Line 167: | Line 154: | ||
hover over the '''Text''' box with '''String''' '''“UnName4”'''. | hover over the '''Text''' box with '''String''' '''“UnName4”'''. | ||
| − | |||
| The first '''Text''' box has the '''string “UnName4”''' with '''Tag “txt_slope”'''. | | The first '''Text''' box has the '''string “UnName4”''' with '''Tag “txt_slope”'''. | ||
|- | |- | ||
| Line 173: | Line 159: | ||
Cursor on '''Graphic window number 1''' window, | Cursor on '''Graphic window number 1''' window, | ||
| − | hover over the '''Text''' box with '''String | + | 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 181: | Line 166: | ||
Cursor on '''Graphic window number 1''' window, | Cursor on '''Graphic window number 1''' window, | ||
| − | hover over the '''Pushbutton''' with '''String | + | hover over the '''Pushbutton''' with '''String “Plot”'''. |
| − | |||
| | | | ||
Between the '''Edit''' boxes and '''Text''' boxes, a '''Pushbutton''' is present. | Between the '''Edit''' boxes and '''Text''' boxes, a '''Pushbutton''' is present. | ||
| Line 191: | Line 175: | ||
| | | | ||
| − | | Now let us add the '''Axes''' to display the graph of a '''linear equation | + | Only narration |
| + | |||
| + | | Now let us add the '''Axes''' to display the graph of a '''linear equation'''. | ||
|- | |- | ||
| | | | ||
| Line 219: | Line 205: | ||
|- | |- | ||
| | | | ||
| + | |||
| + | Only narration | ||
| The '''GUI''' is now complete. Let us generate the '''Scilab''' code. | | The '''GUI''' is now complete. Let us generate the '''Scilab''' code. | ||
| Line 238: | Line 226: | ||
Click '''Save.''' | Click '''Save.''' | ||
| − | |||
| | | | ||
I will name this file as '''axesplotgui.''' | I will name this file as '''axesplotgui.''' | ||
| Line 262: | 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 285: | Line 272: | ||
Cursor on '''SciNotes''' window, | Cursor on '''SciNotes''' window, | ||
| − | highlight the '''pb_plot_callback''' | + | highlight the '''pb_plot_callback function'''. |
| − | | Now let us write a '''function | + | | Now let us write a '''function''' definition for '''pb_plot_callback function'''. |
|- | |- | ||
| | | | ||
| Line 317: | Line 304: | ||
'''xgrid()''' | '''xgrid()''' | ||
| | | | ||
| − | Enter the code as seen here, with the same | + | Enter the code as seen here, with the same syntax. |
The same code can be found under the '''Code files''' section. | The same code can be found under the '''Code files''' section. | ||
| Line 332: | 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 345: | Line 332: | ||
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 | + | They will then be stored in the '''variables slope''' and '''y_int'''. |
|- | |- | ||
| | | | ||
| Line 359: | 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 371: | 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 377: | 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 384: | 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 402: | Line 389: | ||
click on '''Execute,''' and then click on '''File with echo.''' | click on '''Execute,''' and then click on '''File with echo.''' | ||
| | | | ||
| − | To | + | To run the file, click on '''Execute''' in the '''menubar'''. |
Then click on '''File with echo''' from the drop-down. | Then click on '''File with echo''' from the drop-down. | ||
| Line 423: | Line 410: | ||
Type, | Type, | ||
| − | 2 as a value for '''A''' in the first '''Edit | + | 2 as a value for '''A''' in the first '''Edit box''', |
| − | 7 as a value for '''B''' in the second '''Edit | + | 7 as a value for '''B''' in the second '''Edit box''', |
| − | 4 as a value for '''C''' in the third '''Edit | + | 4 as a value for '''C''' in the third '''Edit box'''. |
Then click on '''Plot'''. | Then click on '''Plot'''. | ||
| Line 434: | Line 421: | ||
Cursor on '''Graphic Window number 2,''' | Cursor on '''Graphic Window number 2,''' | ||
| − | hover cursor over '''slope''' and '''y intercept''' | + | 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 451: | Line 438: | ||
'''Summary''' | '''Summary''' | ||
| | | | ||
| − | This brings us to the end of this | + | This brings us to the end of this tutorial. Let us summarize. |
| − | In this | + | In this tutorial, we have learnt: |
| − | + | *About the '''Axes'''. | |
| − | + | *How to plot a '''linear equation''' of a line using '''GUI'''. | |
| − | + | ||
|- | |- | ||
| | | | ||
| Line 468: | Line 454: | ||
Create a '''GUI''' to, | 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''' | | 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:
|
|
Show Slide: System requirement |
To record this tutorial, I am using
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 |
To follow this tutorial:
|
|
Show Slide: Code Files |
|
|
Show Slide: What is the Linear Equation of a line? |
What is the Linear Equation of a line?
Where, m is slope and c is y-intercept.
m = -A/B and c = C/B
|
|
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.
|
|
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:
|
|
Show Slide: Assignment |
As an assignment, please do the following. Create a GUI to,
|
| 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. |
