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.

Outline:

1. About Linear equation of a line,
2. What are Axes,
3. Use of Edit box for taking user input for a, b and c,
4. Use of Text box for displaying the slope and y-intercept,
5. Use of Pushbutton to plot the response of a Linear Equation,
6. Use of Axes to plot an equation of line,
7. Writing Tag and String for all the objects,
8. Auto-generate a Scilab code using GUI Builder toolbox,
9. Write a callback function,
10. Use of strtod command,
11. Use of xgrid command,
12. Test the GUI.

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 Only narration	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 https://spoken-tutorial.org	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? m is slope and c is y-intercept. 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.
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:
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.

Contributors and Content Editors

Amandeeps, Nancyvarkey