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.

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 Only narration	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 It’s 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. Video-editor: Please put a textbox on screen. “linearequation.sce”.	I have already opened the linearequation.sce file using the GUIBuilder toolbox.
Cursor on Graphic window number 1 window, over 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”. Video-editor: Please put a textbox on screen. “Tag: ed_A, 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”. Video-editor: Please put a textbox on screen. “Tag: ed_B, 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”. Video-editor: Please put a textbox on screen. “Tag: ed_C, String: Enter the value of C”	The third Edit box has the string “Enter the value of C” with Tag “ed_C”.
	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”. Video-editor: Please put a textbox on screen. “Tag: txt_slope, 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”. Video-editor: Please put a textbox on screen. “Tag: txt_y_int, 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”. Video-editor: Please put a textbox on screen. “Tag: pb_plot, String: Plot”	Between the Edit boxes and Text boxes, a Pushbutton is present. It has pb_plot as tag and Plot as string.
	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.
	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. Video-editor: Please put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”	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