Script | Spoken-Tutorial - User contributions [en]

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

2021-09-24T01:29:17Z

Amandeeps:

'''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
*It’s slope intercept form is y = mx + c'''.''' Where,

<blockquote>m is slope and

c is y-intercept.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

2021-09-24T01:28:26Z

Amandeeps:

'''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
*It’s slope intercept form is y = mx + c'''.''' Where,

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

2021-09-24T01:27:19Z

Amandeeps:

'''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
*It’s '''slope intercept''' form is y = mx + c'''.''' Where,

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

2021-09-24T01:26:39Z

Amandeeps:

'''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
*It’s '''slope intercept''' form is y = mx + c'''.''' Where,

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-09-24T01:19:08Z

Amandeeps:

'''Title of the script:''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit''' box, '''Text''' box, '''.string''' command, Creating a '''GUI,''' Print the User Input, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Add an '''Edit''' box to prompt for user input.</blockquote></li>
<li><blockquote>Add a '''Text''' box to display the output.</blockquote></li></ul>

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text''' box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder,''' press '''Enter.'''
|
Now type '''guibuilder''' and press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
A prompt named '''Open an existing GUI''' appears.

Click on '''Yes''' to proceed.
|-
|
Cursor on '''uigetfile''' window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce''' and click on it.

Click on '''Open.'''
|-
|
Cursor on '''Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|

| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’''' as '''Tag''' and ‘'''Enter the input message’''' as '''String. '''

Then click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit''' Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit''' box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text''' box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output''' for '''Tag''' field'''.'''

Do not type anything in the '''String''' field.

We will not display any messages until we receive an input from the user.

Click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text''' box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text''' Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette''' window.

Click on '''Generate,''' and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''Save.'''

|
We will save this file as '''printuserinput.'''

Click on the '''Save''' button'''.'''
|-
|
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,
| The corresponding '''sce file''' is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.

The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the '''pushbutton''' interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same syntax.
|-
|
Highlight,

'''ip = handles.ed_input.string'''
| The first line will assign the user input from an '''Edit box''' to the variable '''ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will pass the value of variable '''ip''' to a '''Text box'''.
|-
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
|
'''GUI''' supports '''string''' format while taking and passing the values.

Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the variable '''‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes''' window,

Click on '''Execute,''' and then click on '''File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI''' which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''

Then type “'''Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

<ul>
<li><blockquote>Added an '''Edit''' box to prompt for user input.</blockquote></li>
<li><blockquote>Added a '''Text''' box to display the output'''.'''</blockquote></li>
<li><blockquote>Learnt about the '''String command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<ul>
<li><blockquote>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</blockquote></li>
<li><blockquote>Type in the '''String''' fields of the two '''Edit''' boxes -</blockquote>
<ul>
<li><blockquote>'''“Enter the input message 1”,'''and</blockquote></li>
<li><blockquote>'''“Enter the input message 2”.'''</blockquote></li></ul>
</li></ul>
|-
|
Show Slide:

'''Assignment'''
|
<ul>
<li><blockquote>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</blockquote></li>
<li><blockquote>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</blockquote></li></ul>
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-09-24T01:13:00Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a static response on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working Internet connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the '''Toolbox'''.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The commands are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox''' categories.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen '''Scilab'''.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique identifier for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the static response is generated three times.

So, for each click on the '''pushbutton,''' a static response is generated.
|-
|
Show Slide:

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

In this tutorial, we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a static response on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

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

2021-09-23T10:19:58Z

Amandeeps:

'''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
*It’s '''slope intercept''' form is y = mx + c'''.''' Where,

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

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

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

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

2021-09-23T10:19:29Z

Amandeeps:

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

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

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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

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

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

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

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

2021-09-23T10:18:50Z

Amandeeps:

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

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

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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,

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

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

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

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

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

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

2021-09-23T10:16:15Z

Amandeeps:

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

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

<blockquote>m is slope and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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,

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

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

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

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

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

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

2021-09-23T10:11:28Z

Amandeeps:

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

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

<blockquote>m is '''slope''' and

c is '''y-intercept'''.
</blockquote>
*After comparing these two forms we get,

<blockquote>m = -A/B and

c = C/B.
</blockquote>

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,

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

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

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

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

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

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-09-23T10:02:41Z

Amandeeps:

'''Title of the script:''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit''' box, '''Text''' box, '''.string''' command, Creating a '''GUI,''' Print the User Input, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Add an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Add a '''Text''' box to display the output.</blockquote></li></ul>

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text''' box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder,''' press '''Enter.'''
|
Now type '''guibuilder''' and press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
A prompt named '''Open an existing GUI''' appears.

Click on '''Yes''' to proceed.
|-
|
Cursor on '''uigetfile''' window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce''' and click on it.

Click on '''Open.'''
|-
|
Cursor on '''Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|

| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’''' as '''Tag''' and ‘'''Enter the input message’''' as '''String. '''

Then click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit''' Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit''' box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text''' box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output''' for '''Tag''' field'''.'''

Do not type anything in the '''String''' field.

We will not display any messages until we receive an input from the user.

Click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text''' box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text''' Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette''' window.

Click on '''Generate,''' and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''Save.'''

|
We will save this file as '''printuserinput.'''

Click on the '''Save''' button'''.'''
|-
|
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,
| The corresponding '''sce file''' is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.

The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the '''pushbutton''' interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same syntax.
|-
|
Highlight,

'''ip = handles.ed_input.string'''
| The first line will assign the user input from an '''Edit box''' to the variable '''ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will pass the value of variable '''ip''' to a '''Text box'''.
|-
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
|
'''GUI''' supports '''string''' format while taking and passing the values.

Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the variable '''‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes''' window,

Click on '''Execute,''' and then click on '''File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI''' which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''

Then type “'''Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

<ul>
<li><blockquote>Added an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Added a '''Text''' box to display the output'''.'''</blockquote></li>
<li><blockquote>Learnt about the '''String command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<ul>
<li><blockquote>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</blockquote></li>
<li><blockquote>Type in the '''String''' fields of the two '''Edit''' boxes -</blockquote>
<ul>
<li><blockquote>'''“Enter the input message 1”,'''and</blockquote></li>
<li><blockquote>'''“Enter the input message 2”.'''</blockquote></li></ul>
</li></ul>
|-
|
Show Slide:

'''Assignment'''
|
<ul>
<li><blockquote>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</blockquote></li>
<li><blockquote>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</blockquote></li></ul>
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-09-23T09:58:28Z

Amandeeps:

'''Title of the script:''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit''' box, '''Text''' box, '''.string''' command, Creating a '''GUI,''' Print the User Input, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Add an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Add a '''Text''' box to display the output.</blockquote></li></ul>

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text''' box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder,''' press '''Enter.'''
|
Now type '''guibuilder''' and press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
A prompt named '''Open an existing GUI''' appears.

Click on '''Yes''' to proceed.
|-
|
Cursor on '''uigetfile''' window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce''' and click on it.

Click on '''Open.'''
|-
|
Cursor on '''Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|

| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’''' as '''Tag''' and ‘'''Enter the input message’''' as '''String. '''

Then click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit''' Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit''' box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text''' box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output''' for '''Tag''' field'''.'''

Do not type anything in the '''String''' field.

We will not display any messages until we receive an input from the user.

Click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text''' box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text''' Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette''' window.

Click on '''Generate,''' and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as '''printuserinput.'''

Click on the '''Save''' button'''.'''
|-
|
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,
| The corresponding '''sce file''' is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.

The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the '''pushbutton''' interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,

'''ip = handles.ed_input.string'''
| The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes''' window,

Click on '''Execute,''' and then click on '''File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI''' which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''

Then type “'''Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

<ul>
<li><blockquote>Added an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Added a '''Text''' box to display the output'''.'''</blockquote></li>
<li><blockquote>Learnt about the '''String command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<ul>
<li><blockquote>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</blockquote></li>
<li><blockquote>Type in the '''String''' fields of the two '''Edit''' boxes -</blockquote>
<ul>
<li><blockquote>'''“Enter the input message 1”,'''and</blockquote></li>
<li><blockquote>'''“Enter the input message 2”.'''</blockquote></li></ul>
</li></ul>
|-
|
Show Slide:

'''Assignment'''
|
<ul>
<li><blockquote>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</blockquote></li>
<li><blockquote>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</blockquote></li></ul>
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-09-23T09:57:27Z

Amandeeps:

'''Title of the script:''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit''' box, '''Text''' box, '''.string''' command, Creating a '''GUI,''' Print the User Input, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Add an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Add a '''Text''' box to display the output.</blockquote></li></ul>

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text''' box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder,''' press '''Enter.'''
|
Now type '''guibuilder''' and press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
A '''prompt''' named '''Open an existing GUI''' appears.

Click on '''Yes''' to proceed.
|-
|
Cursor on '''uigetfile''' window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce''' and click on it.

Click on '''Open.'''
|-
|
Cursor on '''Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|

| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’''' as '''Tag''' and ‘'''Enter the input message’''' as '''String. '''

Then click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit''' Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit''' box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text''' box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output''' for '''Tag''' field'''.'''

Do not type anything in the '''String''' field.

We will not display any messages until we receive an input from the user.

Click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text''' box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text''' Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette''' window.

Click on '''Generate,''' and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as '''printuserinput.'''

Click on the '''Save''' button'''.'''
|-
|
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,
| The corresponding '''sce file''' is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.

The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the '''pushbutton''' interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,

'''ip = handles.ed_input.string'''
| The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes''' window,

Click on '''Execute,''' and then click on '''File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI''' which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''

Then type “'''Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

<ul>
<li><blockquote>Added an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Added a '''Text''' box to display the output'''.'''</blockquote></li>
<li><blockquote>Learnt about the '''String command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<ul>
<li><blockquote>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</blockquote></li>
<li><blockquote>Type in the '''String''' fields of the two '''Edit''' boxes -</blockquote>
<ul>
<li><blockquote>'''“Enter the input message 1”,'''and</blockquote></li>
<li><blockquote>'''“Enter the input message 2”.'''</blockquote></li></ul>
</li></ul>
|-
|
Show Slide:

'''Assignment'''
|
<ul>
<li><blockquote>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</blockquote></li>
<li><blockquote>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</blockquote></li></ul>
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-09-23T09:51:39Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working Internet connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen '''Scilab'''.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique identifier for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the static response is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-09-23T09:50:47Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working Internet connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen '''Scilab'''.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique identifier for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the static response is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-09-23T09:47:24Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working Internet connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique '''identifier''' for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-09-22T17:07:57Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

The process demonstrated in this tutorial is identical in '''Linux''' '''OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working Internet connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.
|-
|
|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console '''window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS '''window.
|
The '''Main categories - ATOMS '''window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox '''after''' installation'''.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on the '''GUI.'''
|
Click once on the '''GUI '''seen on the left panel'''.'''

This will show the list of''' toolboxes '''available in the '''GUI '''category.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS '''window.

Highlight the''' version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS '''window, Click '''Install.'''

Hover cursor over “'''Installation Done” '''message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen''' Scilab'''.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type''' guibuilder '''and''' '''

Press''' Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette '''window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette '''window is located on the left side.

The '''Graphic Window Number 1 '''is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette '''window.

It has objects such as,
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up, '''and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys,''' '''notice '''W- (W minus) '''and''' W+ (W plus) '''keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus) '''and''' H+ (H plus) '''are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1. '''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI '''by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag '''field. It is a unique identifier for each '''GUI '''object.

It allows you to give a name to the object.

A '''Tag '''can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type''' h1 '''in the '''Tag '''field'''.'''
| I will type '''h1''' in the '''Tag '''field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String '''field.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

Type''' Print '''in the''' String '''field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on''' OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the''' '''cursor''' '''to draw a line box'''.'''
|
In the '''Graphic Window number 1, '''click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window '''to place the '''pushbutton. '''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on''' Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface '''is now ready.
|-
|
Cursor on the '''GUI Builder Palette '''window,

click on '''Generate,'''

click on''' Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type''' printpushbuttongui >> '''click''' Save.'''
| I will save this file as '''printpushbuttongui '''and click on '''Save'''.
|-
|
Cursor on '''GUI Created '''window.

Click on''' OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file '''opens'''.'''

Inside this''' file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol '''parentheses.
|
'''handles.h1''' is the''' handle '''for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback '''function.
|
The '''callback function h1_callback '''is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console '''when executed.

The '''program''' is now complete.
|-
|
Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton '''named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message''' Hello World!'''
|
Go to the '''Scilab Console '''to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton '''three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console, '''the static response is generated three times.

So, for each click on the '''pushbutton,''' a static response is generated.
|-
|
Show Slide:

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

In this tutorial, we:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,
|-
| 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'''
| The '''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.
|}

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

2021-08-06T14:03:44Z

Amandeeps:

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

<ul>
<li><blockquote>About the '''Axes'''.</blockquote></li></ul>

<ul>
<li><blockquote>How to plot the '''linear equation''' of a line using '''GUI'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is the '''Linear Equation''' of a line'''?'''
|
What is the '''Linear Equation''' of a line'''?'''

<ul>
<li><blockquote>The '''linear equation''' of a line has the general form of Ax + By = C</blockquote></li>
<li><blockquote>It’s '''slope intercept''' form is y = mx + c'''.''' Where,</blockquote></li></ul>

<blockquote>m is '''slope''' and

c is '''y-intercept'''.
</blockquote>
<ul>
<li><blockquote>After comparing these two forms we get,</blockquote></li></ul>

<blockquote>m = -A/B and

c = C/B.
</blockquote>
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.

<ul>
<li><blockquote>Three '''Edit''' boxes to take user input for '''A, B''' and '''C'''.</blockquote></li>
<li><blockquote>Two '''Text''' boxes to display the answer of '''slope''' and '''y-intercept'''.</blockquote></li>
<li><blockquote>One '''Pushbutton''' to calculate and plot.</blockquote></li>
<li><blockquote>One '''Axes''' for displaying the graph.</blockquote></li></ul>
|-
|
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:

<ul>
<li><blockquote>About the '''Axes'''.</blockquote></li>
<li><blockquote>How to plot a '''linear equation''' of a line using '''GUI'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Create a '''GUI''' to,

<ol style="list-style-type: decimal;">
<li><blockquote>Plot an equation of y = e^(Ax).</blockquote></li>
<li><blockquote>Take '''‘A’''' as '''input''' from the user.</blockquote></li>
<li><blockquote>Consider, x varies from 0 to 2*pi.</blockquote></li></ol>
|-
| 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.
|}

GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English

2021-08-06T14:02:23Z

Amandeeps:

'''Title of the script:''' '''Object''' properties and alignment in '''GUI'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords:''' Properties of an '''object,''' size of an '''object,''' alignment of '''objects, delete''' an '''object, objects''' of same size, '''objects''' equally spaced.

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on '''Object''' properties and alignment in '''GUI''' in Scilab.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Change the properties of an '''object'''.</blockquote></li>
<li><blockquote>Change the size of an '''object''' and</blockquote></li>
<li><blockquote>Change the alignment of '''objects''' in the '''GUI window'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''Graphical User Interface.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
| Cursor on '''GUIBuilder Palette''' window'''.'''
|
I have opened the '''GUIBuilder toolbox''' in my system.

Please do so in your system, also.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''Open.'''
| On the '''GUIBuilder Palette window,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
It shows a '''dialog''' box that displays '''Open an existing GUI.'''

Click on '''Yes.'''
|-
| Open the file named '''printuserinput.sce'''
| Locate the folder where '''printuserinput.sce''' file is saved and open it.
|-
|
Cursor on '''Graphic window number 1''' window,

hover cursor over the three '''objects'''.
|
Notice the '''Graphic window number 1.'''

It opens the '''GUI''' which has,

<ul>
<li><blockquote>An '''Edit''' box with the '''string “Enter the input message”,'''</blockquote></li>
<li><blockquote>A '''Pushbutton''' with the '''string “Print”''', and</blockquote></li>
<li><blockquote>A '''Text''' box with the '''string “UnName3”'''.</blockquote></li></ul>
|-
|

| Now let us see how to change some of the '''object''' properties of the '''Text''' box'''.'''
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover over the right panel.
|
For this, go to the '''GUIBuilder Palette.'''

Notice the right side panel.

It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

click on '''txt_output.'''
| Click on '''txt_output'''.
|-
|
Cursor on '''Graphic window number 1''' window,

hover over the '''Text''' box.
|
Notice the '''Text''' box in the '''Graphic window'''.

It has a red border indicating that it is selected.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

Click on '''ObjectProperties.'''
| Then click on '''ObjectProperties''' at the bottom right of the '''GUIBuilder Palette''' window'''.'''
|-
| Cursor on the '''Scilab Multiple Values Request''' window.
|
A '''Scilab Multiple Values Request''' window opens.

We see that the '''object''' properties are displayed on the left side.

Respective property values are seen on the right side with some default values.

These values are assigned to the properties that are not predefined.

However, not all of the properties apply to all the '''objects'''.
|-
|
Show Slide:

'''help uicontrol_properties'''

'''help uicontrol_properties'''
|
To learn more about it, users need to type a '''command''' in the '''Scilab Console.'''

Type '''help space uicontrol underscore properties''' to see the detailed help.
|-
| Cursor on the '''Scilab Multiple Values Request''' window.
| Let us now change the properties that are applicable to the '''Text''' box.
|-
|
Cursor on the '''Scilab Multiple Values Request''' window,

as per narration.
|
First we’ll change the '''Background''' color of the '''Text''' box.

We see a vector with the default values [-1,-1,-1].

They specify '''Red, Green, Blue''' color values respectively.

Selecting the values between 0 and 1, will change the color.

Let’s change it to [0.5,0.6,0.7].
|-
|
Cursor on the '''Scilab Multiple Values Request''' window,

as per narration.

Type '''italic.'''
|
Next, we will change the '''Font angle.'''

We see '''normal''' as the default value'''.'''

We will change it to '''italic.'''

This property will set the slant of the '''font'''.
|-
|
Cursor on the '''Scilab Multiple ValuesRequest''' window,

as per narration.

Type '''25.'''
|
We see '''[12]''' as the default '''FontSize''' value'''.'''

We will change it to '''[25].'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest''' window,

as per narration.

Type '''bold.'''
|
Next, the default '''FontWeight''' value is set as '''normal.'''

Let’s change it to '''bold.'''

This will make the '''string''' value '''bold.'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest''' window,

as per narration.
|
Set the '''ForegroundColor''' default value [-1,-1,-1] to [0.7,0.8,0.9].

The color of the '''string''' value will change as a result of this.
|-
|
Cursor on the '''Scilab Multiple Values Request''' window, as per narration.

Type '''center.'''
|
Let us now change the alignment of the '''string''' value.

We see '''left''' as the default '''HorizontalAlignment.'''

Let’s change this to '''center.'''
|-
|
Cursor on the '''Scilab Multiple Values Request''' window,

as per narration.
|
Lastly, we will change the '''String''' property.

The default value is '''UnName3'''.

This property represents the text appearing on an '''object'''.
|-
|
Cursor on the '''Scilab Multiple Values Request''' window,

delete '''UnName3.'''

Click on '''OK.'''
|
Delete '''UnName3''', and we'll keep it empty.

We have now changed enough properties of the '''Text''' box.

Explore the remaining properties later on your own, for better understanding.

Click on '''Ok'''.
|-
|

| Now let us change the location of the '''Text''' box'''.'''
|-
| Cursor on '''GUIBuilder Palette''' window.
| We will return to the '''GUIBuilder Palette''' window and click on '''txt_output''' once.
|-
| Cursor on '''GUIBuilder Palette''' window.
|
We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''.

I will click once on the '''Left''' button.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice that the '''Text''' box has moved slightly to the left.

It can be shifted to any side by using the respective direction buttons.
|-
|
Cursor on '''GUIBuilder Palette''' window,

hover cursor on '''Move''' button'''.'''
|
Another way to move the '''Text''' box is by using the '''Move''' button'''.'''

It is located below the direction buttons'''.'''
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''txt_output.'''

click on '''Move.'''
|
Make sure that the '''txt_output''' is still selected'''.'''

Then click on '''Move'''.
|-
|
Cursor on '''Graphic Window number 1''',

move the cursor across the window'''.'''
|
Now move the cursor across the '''Graphic window'''.

A box with a black border and the same size as the '''Text''' box appears.

Notice that it appears wherever the cursor is moved.
|-
|
Cursor on '''Graphic Window number 1''',

click in the bottom left side of the window'''.'''
|
Let us place the '''Text''' box in the bottom left side by clicking on the window.

This is how we can move the '''Text''' box with the help of the '''Move''' button.
|-
|
Cursor on '''Graphic Window number 1''',

hover cursor on '''Text''' box.
|
Next, let us change the height and width of the '''Text''' box'''.'''

Make sure the '''Text''' box still has a red border indicating it’s selected.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''W+, W-''' buttons'''.'''
|
I will now click on '''W+ (W plus)''' button'''.'''

Notice that this action increases the width of the '''Text''' box.

Similarly, clicking '''W- (W minus)''' will decrease its width.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''H+, H-''' buttons'''.'''
|
Let us now increase the height of the '''Text''' box by clicking the '''H+ (H plus)''' button.

Likewise, we can use the '''H- (H minus)''' button to decrease its height.
|-
| Cursor on '''GUIBuilder Palette''' window,
|
Below this, we have a '''Delete''' button.

This is used to delete the selected object from the '''Graphic Window.'''
|-
|
Cursor on '''GUIBuilder Palette''' window,

hover over the '''Alignments''' button present in the right panel.
| Next, let us learn how to use the '''Alignments''' button.
|-
|
Cursor on '''GUIBuilder Palette''' window,

press and Hold '''Ctrl''', and click on the '''Tag''' value of each object in the right panel.
|
Press and hold the '''Ctrl''' key on your keyboard.

Click on the '''Tag''' value of each '''object''' in the right panel.
|-
| Cursor on '''Graphic Window number 1'''.
| All selected '''objects''' now have a red border indicating they are selected.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''Alignments.'''
| On the bottom right of the '''GUIBuilder Palette''' window, click the '''Alignments''' button.
|-
|
Cursor on '''GUI Alignment''' window,

hover cursor over the three '''Alignment''' sections.
|
A '''GUI Alignment''' window pops up.

This has

<ul>
<li><blockquote>'''Vertical''' '''Alignment''' buttons on the left panel and</blockquote></li>
<li><blockquote>'''Horizontal Alignment''' buttons on the bottom panel.</blockquote></li>
<li><blockquote>The buttons for changing the size are on the right panel.</blockquote></li></ul>
|-
|
Cursor on '''GUI Alignments''' window,

click on the '''Same Width''' and '''Same Height''' button.
| Click once on the '''Same Width''' and '''Same Height''' buttons.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice the selected '''objects''' in the '''Graphic window'''.

They now have the same width and height.

We can see that the '''objects''' are currently placed one below the other.
|-
| Cursor on '''GUI Alignments''' window.
| So, we will use the buttons under '''Vertical''' '''Alignment''' heading'''.'''
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Equally Spaced. '''
| Click once on the '''Equally Spaced''' button'''.'''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged such that they are equally spaced.

Now, let us arrange all the objects to the center of the window.
|-
| Cursor on GUI Alignments window.
| To do so, we will use the buttons under '''Horizontal Alignment''' heading.
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Center.'''
| Click once on the '''Center''' button'''.'''
|-
| Cursor on '''Graphic Window number 1'''.
| The '''objects''' are now arranged in the center.
|-
|

| Learners may pause this video and explore all these options further for better understanding.
|-
| Cursor on '''GUI Alignments''' window.
| Close the '''GUI Alignments''' window.
|-
|

| Let us test our '''GUI''' now.
|-
|
Cursor on '''GUI Builder Palette''' window,

click on '''Generate,''' and click on '''Generate GUI code.'''
|
Go to the '''GUI Builder Palette''' window.

Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''printuserinput.sce'''

Click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.”
|
The '''uiputfile''' window will pop up.

I will select the file '''printuserinput.sce''' that was previously saved.

Click on the '''Save''' button.
|-
|
Cursor on '''File already exists''' window,

click on '''Yes.'''
| On the '''File already exists''' window, click on '''Yes.'''
|-
|
Cursor on '''GUI Created''' Window,

click on '''OK.'''
|
It shows a '''dialog''' box that displays the message “'''GUI created successfully!”'''

Click on '''OK.'''
|-
| Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.”
| If the '''Replace File?''' window pops up, then click on '''Reload. '''
|-
| Close '''Graphic Window number 1.'''
| Close the '''Graphic Window number 1.'''
|-
| Cursor on '''GUIBuilder Palette''' window.
| Minimize the '''GUIBuilder Palette''' window.
|-
| Cursor on '''SciNotes''' window.
| The corresponding updated '''sce file''' is displayed. <<PAUSE>>
|-
| Cursor on '''SciNotes''' window.
|
There is another way to change the '''object''' properties using the '''sce''' file.

We know that each '''object''' has its unique '''handle''' and '''uicontrol function'''.

So, the properties can be changed by modifying the '''object's uicontrol function'''.
|-
|
Cursor on '''SciNotes''' window,

within '''h1 uicontrol''' function,

Highlight,

'''‘Fontsize’ ,[12].'''

Change '''FontSize''' 12 to 20.
|
By using this method, let us change the '''Fontsize''' of a '''pushbutton'''.

I'll make changes in '''uicontrol''' parentheses of '''h1''' which is a '''pushbutton's handle'''.

Change the '''FontSize''' 12 to 20.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute,''' and then click on '''File with echo'''
|
Now let us execute the code.

Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''.
|-
|
Cursor on '''Graphic Window number 1,'''

replace the '''String''' on '''Edit''' box with '''Hello.'''
|
A window named '''Graphic window number 1''' opens.

Let us test the '''GUI'''.

Replace the '''String''' on the '''Edit''' box with “'''Hello”.'''
|-
|
Cursor on '''Graphic Window number 1,'''

click on the '''Print''' '''Pushbutton'''.
|
Click once on the '''Print''' '''Pushbutton'''.

The message “'''Hello'''” appears in the '''Text''' box.
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Text''' box'''.'''
|
Notice that the '''String''' value in the '''Text''' box is now

<ul>
<li><blockquote>Aligned to the center,</blockquote></li>
<li><blockquote>The '''font''' is bigger, '''italic''' and '''bold''', and</blockquote></li>
<li><blockquote>The '''Background''' color and the '''Foreground''' color have changed.</blockquote></li></ul>
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Print Pushbutton.'''
| The string “'''Print'''” on the '''pushbutton''' now has a larger font size.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this '''tutorial'''.

Let us summarize.

In this '''tutorial''', we have:

<ul>
<li><blockquote>Changed the properties of an '''object'''.</blockquote></li>
<li><blockquote>Changed the size of an '''object''' and</blockquote></li>
<li><blockquote>Changed the alignment of '''objects''' in the '''GUI window'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following modifications to the current '''GUI'''.

<ul>
<li><blockquote>Change the '''Background color''' of the '''Edit''' box to [1,0,0]. Observe the color.</blockquote></li>
<li><blockquote>Change the '''FontSize''' to 18 units for the '''Edit''' box'''.'''</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
Rearrange the '''objects''' as follows:

<ul>
<li><blockquote>'''Edit''' box to the left of '''Print Pushbutton'''.</blockquote></li>
<li><blockquote>'''Text''' box to the right of '''Print Pushbutton'''.</blockquote></li></ul>

Now, place the objects with equal spacing.
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-08-06T14:00:57Z

Amandeeps:

'''Title of the script:''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit''' box, '''Text''' box, '''.string''' command, Creating a '''GUI,''' Print the User Input, '''GUI Builder Toolbox, Tag, String, callback function, Pushbutton'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Add an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Add a '''Text''' box to display the output.</blockquote></li></ul>

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

<ul>
<li><blockquote>'''Windows 10''' '''OS'''</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li>
<li><blockquote>'''GUI Builder Toolbox 4.2.1'''</blockquote></li></ul>

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</blockquote></li>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

'''Code Files '''
|
<ul>
<li><blockquote>The files used in this tutorial are provided in the '''Code files''' link.</blockquote></li>
<li><blockquote>Please download and extract the files.</blockquote></li>
<li><blockquote>Make a copy and then use them while practising.</blockquote></li></ul>
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text''' box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder,''' press '''Enter.'''
|
Now type '''guibuilder''' and press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette,''' click on '''Open''' in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI''' window,

click on '''Yes.'''
|
A '''prompt''' named '''Open an existing GUI''' appears.

Click on '''Yes''' to proceed.
|-
|
Cursor on '''uigetfile''' window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce''' and click on it.

Click on '''Open.'''
|-
|
Cursor on '''Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|

| Let us add an '''Edit''' box and a '''Text''' box in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’''' as '''Tag''' and ‘'''Enter the input message’''' as '''String. '''

Then click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit''' Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit''' box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text''' box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output''' for '''Tag''' field'''.'''

Do not type anything in the '''String''' field.

We will not display any messages until we receive an input from the user.

Click on the '''OK''' button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text''' box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text''' Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text''' box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette''' window.

Click on '''Generate,''' and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code.'''
|-
|
Cursor on '''uiputfile''' window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as '''printuserinput.'''

Click on the '''Save''' button'''.'''
|-
|
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,
| The corresponding '''sce file''' is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle''' for the '''Edit''' box is '''handles.ed_input'''.

The properties of the '''Edit''' box are defined in its respective '''uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle''' for the '''Text''' box is '''handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the '''pushbutton''' interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

Press '''Enter.'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,

'''ip = handles.ed_input.string'''
| The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
| Highlight '''.string''' after '''Edit''' and '''Text''' box '''handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the '''Edit''' and '''Text''' box '''handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes''' window,

Click on '''Execute,''' and then click on '''File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI''' which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message”''' from the '''Edit''' box'''.'''

Then type “'''Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!”''' from the '''Edit''' box and type '''258.'''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:

<ul>
<li><blockquote>Added an '''Edit''' box to '''prompt''' for user input.</blockquote></li>
<li><blockquote>Added a '''Text''' box to display the output'''.'''</blockquote></li>
<li><blockquote>Learnt about the '''String command'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

<ul>
<li><blockquote>Add one more '''pushbutton''' and '''Edit''' box to the current '''GUI'''.</blockquote></li>
<li><blockquote>Type in the '''String''' fields of the two '''Edit''' boxes -</blockquote>
<ul>
<li><blockquote>'''“Enter the input message 1”,'''and</blockquote></li>
<li><blockquote>'''“Enter the input message 2”.'''</blockquote></li></ul>
</li></ul>
|-
|
Show Slide:

'''Assignment'''
|
<ul>
<li><blockquote>Name the '''String''' fields of the two '''pushbuttons''' as '''“Print 1”''' and '''“Print 2”.'''</blockquote></li>
<li><blockquote>Modify the '''callback function''' to get the output of both the '''Edit''' boxes in a single '''Text''' box.</blockquote></li></ul>
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-08-06T13:33:59Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique '''identifier''' for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-08-06T13:32:59Z

Amandeeps:

'''Title of the script:''' Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

<ul>
<li><blockquote>Install '''GUI Builder Toolbox.'''</blockquote></li></ul>

<ul>
<li><blockquote>About '''GUIBuilder Palette.'''</blockquote></li></ul>

<ul>
<li><blockquote>Create a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Add '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generate a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

<ul>
<li><blockquote>'''Windows 10''' '''OS''' and</blockquote></li>
<li><blockquote>'''Scilab 6.1.0'''</blockquote></li></ul>

The process demonstrated in this tutorial is identical in '''Linux''' '''OS''' also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
|
To follow this tutorial:

<ul>
<li><blockquote>The learner must have basic knowledge of '''Scilab'''.</blockquote></li></ul>

<ul>
<li><blockquote>For pre-requisite '''Scilab''' tutorials please visit this website.</blockquote></li></ul>
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''

<ul>
<li><blockquote>Is one of the ways to create a '''GUI'''.</blockquote></li>
<li><blockquote>'''GUI''' is the abbreviation for '''Graphical User Interface.'''</blockquote></li></ul>
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.

<ul>
<li><blockquote>The t'''oolbox''' auto-generates a '''Scilab''' code for a '''GUI''' with object handle properties.</blockquote></li>
<li><blockquote>This allows the user to build the '''GUI''' with ease.</blockquote></li>
<li><blockquote>In the absence of this '''toolbox,''' users must write code from scratch to build the '''GUI'''.</blockquote></li></ul>
|-
|

|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console''' window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS''' window.
|
The '''Main categories - ATOMS''' window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox''' after '''installation'''.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on the '''GUI.'''
|
Click once on the '''GUI''' seen on the left panel'''.'''

This will show the list of '''toolboxes''' available in the '''GUI''' category.
|-
|
Cursor on '''Main categories - ATOMS''' window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS''' window.

Highlight the '''version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS''' window, Click '''Install.'''

Hover cursor over “'''Installation Done”''' message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type '''guibuilder''' and

Press '''Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette''' window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette''' window is located on the left side.

The '''Graphic Window Number 1''' is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette''' window.

It has objects such as,

<ul>
<li><blockquote>A '''Pushbutton, '''</blockquote></li>
<li><blockquote>A '''Radiobutton,'''</blockquote></li>
<li><blockquote>A '''Checkbox,'''</blockquote></li>
<li><blockquote>An '''Edit box,'''</blockquote></li>
<li><blockquote>A '''Text box''', and many more.</blockquote></li></ul>
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up,''' and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys, notice '''W- (W minus)''' and '''W+ (W plus)''' keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus)''' and '''H+ (H plus)''' are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1.'''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI''' by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request''' window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag''' field. It is a unique '''identifier''' for each '''GUI''' object.

It allows you to give a name to the object.

A '''Tag''' can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type '''h1''' in the '''Tag''' field'''.'''
| I will type '''h1''' in the '''Tag''' field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String''' field.
|-
|
Cursor on '''Scilab Multiple Values Request''' window,

Type '''Print''' in the '''String''' field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on '''OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the cursor to draw a line box'''.'''
|
In the '''Graphic Window number 1,''' click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window''' to place the '''pushbutton.'''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on '''Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface''' is now ready.
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on '''Generate,'''

click on '''Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type '''printpushbuttongui >>''' click '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui''' and click on '''Save'''.
|-
|
Cursor on '''GUI Created''' window.

Click on '''OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file''' opens'''.'''

Inside this '''file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol''' parentheses.
|
'''handles.h1''' is the '''handle''' for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback''' function.
|
The '''callback function h1_callback''' is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console''' when executed.

The '''program''' is now complete.
|-
| Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes''' window,

click on '''Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton''' named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message '''Hello World!'''
|
Go to the '''Scilab Console''' to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton''' three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console,''' the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:

<ul>
<li><blockquote>Installed the '''GUI Builder''' '''Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about the '''GUIBuilder Palette.'''</blockquote></li>
<li><blockquote>Created a '''Graphical User Interface''' using '''GUI Builder Toolbox.'''</blockquote></li>
<li><blockquote>Learnt about '''Tag''' and '''String''' for the object.</blockquote></li>
<li><blockquote>Generated a '''static response''' on the '''Scilab console'''.</blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,

<ol style="list-style-type: decimal;">
<li><blockquote>Add '''String''' name as ''''Press here'''' for the '''Pushbutton'''.</blockquote></li>
<li><blockquote>Write a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</blockquote></li></ol>
|-
| 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'''
| The '''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.
|}

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

2021-08-06T13:11:13Z

Amandeeps:

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

GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English

2021-08-06T13:10:47Z

Amandeeps:

'''Title of the script: ''' '''Object''' properties and alignment in '''GUI'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: '''Properties of an '''object, '''size of an '''object, '''alignment of '''objects, delete '''an '''object, objects''' of same size, '''objects''' equally spaced.

{| border=1
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on '''Object''' properties and alignment in '''GUI''' in Scilab.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

''' '''

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

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 '''
|
|-
| Cursor on '''GUIBuilder Palette''' window'''.'''
|
I have opened the '''GUIBuilder toolbox''' in my system.

Please do so in your system, also.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''Open.'''
| On the '''GUIBuilder Palette window, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
It shows a '''dialog '''box''' '''that displays '''Open an existing GUI.'''

Click on '''Yes.'''
|-
| Open the file named '''printuserinput.sce'''
| Locate the folder where '''printuserinput.sce '''file is saved and open it.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover cursor over the three '''objects'''.
|
Notice the '''Graphic window number 1.'''

It''' '''opens the '''GUI''' which has,
|-
|
| Now let us see how to change some of the '''object''' properties of the '''Text '''box'''.'''
|-
|
Cursor on the '''GUIBuilder Palette '''window,

hover over the right panel.
|
For this, go to the '''GUIBuilder Palette.'''

Notice the right side panel.

It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

click on '''txt_output. '''
|
Click on '''txt_output'''.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover over the '''Text''' box.
|
Notice the '''Text''' box in the '''Graphic window'''.

It has a red border indicating that it is selected.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

Click on '''ObjectProperties.'''
| Then click on '''ObjectProperties '''at the bottom right of the '''GUIBuilder Palette '''window'''.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window.
|
A '''Scilab Multiple Values Request '''window opens.

We see that the '''object''' properties are displayed on the left side.

Respective property values are seen on the right side with some default values.

These values are assigned to the properties that are not predefined.

However, not all of the properties apply to all the '''objects'''.
|-
|
Show Slide:

'''help uicontrol_properties'''

'''help uicontrol_properties'''
|
To learn more about it, users need to type''' '''a '''command''' in the '''Scilab Console.'''

Type''' help space uicontrol underscore properties '''to see the detailed help.
|-
| Cursor on the '''Scilab Multiple Values Request '''window.
| Let us now change the properties that are applicable to the '''Text''' box.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
First we’ll change the '''Background '''color of the '''Text '''box.

We see a vector with the default values [-1,-1,-1].

They specify''' Red, Green, Blue''' color values respectively.

Selecting the values between 0 and 1, will change the color.

Let’s change it to [0.5,0.6,0.7].
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.

Type '''italic.'''
|
Next, we will change the '''Font angle.'''

We see '''normal '''as the default value'''.'''

We will change it to '''italic.'''

This property will set the slant of the '''font'''.
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''25.'''
|
We see '''[12]''' as the default '''FontSize '''value'''.'''

We will change it to '''[25].'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''bold.'''
|
Next, the default '''FontWeight '''value is set as '''normal.'''

Let’s change it to '''bold.'''

This will make the '''string''' value '''bold.'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.
|
Set the '''ForegroundColor '''default value''' '''[-1,-1,-1] to [0.7,0.8,0.9].

The color of the '''string''' value will change as a result of this.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window, as per narration.

Type '''center.'''
|
Let us now change the alignment of the '''string''' value.

We see '''left''' as the default '''HorizontalAlignment.'''

Let’s change this to '''center.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
Lastly, we will change the '''String''' property.

The default value is '''UnName3'''.

This property represents the text appearing on an''' object'''.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

delete '''UnName3.'''

Click on '''OK.'''
|
Delete '''UnName3''', and we'll keep it empty.

We have now changed enough properties of the '''Text''' box.

Explore the remaining properties later on your own, for better understanding.

Click on '''Ok'''.
|-
|
| Now let us change the location of the '''Text '''box'''.'''
|-
| Cursor on''' GUIBuilder Palette '''window.
| We will return to the '''GUIBuilder Palette '''window and click on '''txt_output '''once.
|-
| Cursor on''' GUIBuilder Palette '''window.
|
We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''.

I will click once on the '''Left''' button.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice that the '''Text '''box has moved slightly to the left.

It can be shifted to any side by using the respective direction buttons.
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover cursor on '''Move '''button'''.'''
|
Another way to move the '''Text '''box is by using the '''Move '''button'''.'''

It is''' '''located below the direction buttons'''. '''
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''txt_output.'''

click on '''Move.'''
|
Make sure that the '''txt_output '''is still selected'''.'''

Then click on '''Move'''.
|-
|
Cursor on '''Graphic Window number 1''',

move''' '''the cursor across the window'''.'''
|
Now move the cursor across the '''Graphic window'''.

A box with a black border and the same size as the '''Text''' box appears.

Notice that it appears wherever the cursor is moved.
|-
|
Cursor on '''Graphic Window number 1''',

click in the bottom left side of the window'''.'''
|
Let us place the '''Text''' box in the bottom left side by clicking on the window.

This is how we can move the '''Text''' box with the help of the '''Move''' button.
|-
|
Cursor on''' Graphic Window number 1''',

hover cursor on '''Text''' box.
|
Next, let us change the height and width of the '''Text '''box'''.'''

Make sure the''' Text''' box still has a red border indicating it’s selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''W+, W- '''buttons'''.'''
|
I will now click on '''W+ (W plus) '''button'''.'''

Notice that this action increases the width of the '''Text''' box.

Similarly, clicking '''W- (W minus) '''will decrease its width.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''H+, H- '''buttons'''.'''
|
Let us now increase the height of the '''Text''' box by clicking the '''H+ (H plus) '''button.

Likewise, we can use the '''H- (H minus) '''button to decrease its height.
|-
| Cursor on''' GUIBuilder Palette '''window,
|
Below this, we have a '''Delete '''button.

This is used to delete the selected object from the '''Graphic Window.'''
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover over the '''Alignments''' button present in the right panel.
| Next, let us learn how to use the '''Alignments''' button.
|-
|
Cursor on''' GUIBuilder Palette '''window,

press and Hold '''Ctrl''', and click on the '''Tag''' value of each object in the right panel.
|
Press and hold the '''Ctrl '''key on your keyboard.

Click on the '''Tag''' value of each''' object''' in the right panel.
|-
| Cursor on '''Graphic Window number 1'''.
| All selected '''objects''' now have a red border indicating they are selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''Alignments.'''
|
On the bottom right of the '''GUIBuilder Palette '''window, click the '''Alignments '''button.
|-
|
Cursor on '''GUI Alignment''' window,

hover cursor over the three '''Alignment '''sections.
|
A '''GUI Alignment''' window pops up.

This has
|-
|
Cursor on '''GUI Alignments''' window,

click on the '''Same Width '''and''' Same Height '''button.
| Click once on the '''Same Width '''and''' Same Height '''buttons.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice the selected '''objects''' in the''' Graphic window'''.

They now have the same width and height.

We can see that the '''objects''' are currently placed one below the other.
|-
|
Cursor on '''GUI Alignments''' window.
| So, we will use the buttons under '''Vertical''' '''Alignment '''heading'''.'''
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Equally Spaced. '''
| Click once on the '''Equally Spaced '''button'''. '''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged such that they are equally spaced.

Now, let us arrange all the objects to the center of the window.
|-
| Cursor on GUI Alignments window.
| To do so, we will use the buttons under '''Horizontal Alignment''' heading.
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Center. '''
| Click once on the '''Center '''button'''.'''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged in the center.
|-
|
| Learners may pause this video and explore all these options further for better understanding.
|-
| Cursor on '''GUI Alignments''' window.
| Close the '''GUI Alignments''' window.
|-
|
| Let us test our '''GUI''' now.
|-
|
Cursor on '''GUI Builder Palette '''window,

click on '''Generate, '''and click on''' Generate GUI code.'''
|
Go to the '''GUI Builder Palette '''window.

Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''printuserinput.sce'''

Click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.”
|
The '''uiputfile '''window will pop up.

I will select the file '''printuserinput.sce''' that was previously saved.

Click on the '''Save '''button.
|-
|
Cursor on '''File already exists '''window,

click on '''Yes.'''
| On the '''File already exists '''window, click on '''Yes.'''
|-
|
Cursor on '''GUI Created '''Window,

click on '''OK.'''
|
It shows a '''dialog '''box''' '''that displays the message “'''GUI created successfully!”'''

Click on '''OK.'''
|-
| Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.”
| If the '''Replace File? '''window pops up, then click on '''Reload. '''
|-
| Close '''Graphic Window number 1.'''
| Close the '''Graphic Window number 1.'''
|-
| Cursor on '''GUIBuilder Palette '''window.
| Minimize the '''GUIBuilder Palette '''window.
|-
| Cursor on '''SciNotes''' window.
| The corresponding updated '''sce file '''is displayed. <<PAUSE>>
|-
| Cursor on '''SciNotes''' window.
|
There is another way to change the '''object''' properties using the '''sce '''file.

We know that each '''object''' has its unique '''handle''' and''' uicontrol function'''.

So, the properties can be changed by modifying the '''object's uicontrol function'''.
|-
|
Cursor on '''SciNotes''' window,

within '''h1 uicontrol''' function,

Highlight,

'''‘Fontsize’ ,[12].'''

Change '''FontSize '''12 to 20.
|
By using this method, let us change the '''Fontsize''' of a '''pushbutton'''.

I'll make changes in '''uicontrol''' parentheses of '''h1''' which is a '''pushbutton's handle'''.

Change the '''FontSize '''12 to 20.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute, '''and then click on''' File with echo'''
|
Now let us execute the code.

Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''.
|-
|
Cursor on '''Graphic Window number 1,'''

replace the '''String '''on '''Edit''' box with '''Hello.'''
|
A window named '''Graphic window number 1''' opens.

Let us test the '''GUI'''.

Replace the '''String '''on the '''Edit''' box with “'''Hello”. '''
|-
|
Cursor on '''Graphic Window number 1,'''

click on the '''Print''' '''Pushbutton'''.
|
Click once on the '''Print''' '''Pushbutton'''.

The message “'''Hello'''” appears in the '''Text '''box.
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Text '''box'''.'''
| Notice that the '''String '''value in the''' Text''' box is now
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Print Pushbutton.'''
| The string “'''Print'''” on the '''pushbutton''' now has a larger font size.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this '''tutorial'''.

Let us summarize.

In this '''tutorial''', we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following modifications to the current '''GUI'''.
|-
|
Show Slide:

'''Assignment'''
|
Rearrange the '''objects''' as follows:

Now, place the objects with equal spacing.
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-08-06T13:06:42Z

Amandeeps:

'''Title of the script: ''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit '''box, '''Text '''box, '''.string '''command, Creating a '''GUI, '''Print the User Input

{| border=1
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

'''Code Files '''
|
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text '''box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder, '''press '''Enter.'''
|
Now type '''guibuilder '''and''' '''press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
A '''prompt''' named '''Open an existing GUI '''appears.

Click on''' Yes''' to proceed.
|-
|
Cursor on '''uigetfile '''window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce '''and click on it.

Click on '''Open. '''
|-
|
Cursor on''' Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|
| Let us add an '''Edit '''box and a '''Text '''box''' '''in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',''' '''

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit. '''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’ '''as '''Tag '''and ‘'''Enter the input message’ '''as '''String. '''

Then click on the '''OK '''button'''. '''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit '''Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit '''box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text '''box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output '''for '''Tag '''field'''.'''

Do not type anything in the '''String '''field.

We will not display any messages until we receive an input from the user.

Click on the '''OK '''button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text '''box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text '''Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text '''box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette '''window.

Click on''' Generate, '''and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as''' printuserinput.'''

Click on the '''Save '''button'''. '''
|-
|
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,
| The corresponding '''sce file '''is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle '''for the '''Edit '''box''' '''is''' handles.ed_input'''.

The properties of the '''Edit '''box are defined in its respective''' uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle '''for the '''Text '''box''' '''is''' handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the''' pushbutton '''interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

Press''' Enter.'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,''' '''

'''ip = handles.ed_input.string'''
|
The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
|
Highlight '''.string '''after''' Edit '''and '''Text''' box''' handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the''' Edit '''and '''Text''' box''' handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes '''window,

Click on '''Execute, '''and then click on''' File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI '''which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message” '''from the '''Edit '''box'''.'''

Then type “'''Welcome to Scilab!” '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box''' '''displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!” '''from the''' Edit '''box and type '''258. '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.
|-
|
Show Slide:

'''Assignment'''
|
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-08-06T13:06:06Z

Amandeeps:

'''Title of the script: '''Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{| border=1
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

The process demonstrated in this tutorial is identical in '''Linux''' '''OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.
|-
|
|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console '''window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS '''window.
|
The '''Main categories - ATOMS '''window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox '''after''' installation'''.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on the '''GUI.'''
|
Click once on the '''GUI '''seen on the left panel'''.'''

This will show the list of''' toolboxes '''available in the '''GUI '''category.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS '''window.

Highlight the''' version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS '''window, Click '''Install.'''

Hover cursor over “'''Installation Done” '''message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type''' guibuilder '''and''' '''

Press''' Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette '''window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette '''window is located on the left side.

The '''Graphic Window Number 1 '''is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette '''window.

It has objects such as,
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up, '''and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys,''' '''notice '''W- (W minus) '''and''' W+ (W plus) '''keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus) '''and''' H+ (H plus) '''are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1. '''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI '''by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag '''field. It is a unique '''identifier''' for each '''GUI '''object.

It allows you to give a name to the object.

A '''Tag '''can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type''' h1 '''in the '''Tag '''field'''.'''
| I will type '''h1''' in the '''Tag '''field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String '''field.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

Type''' Print '''in the''' String '''field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on''' OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the''' '''cursor''' '''to draw a line box'''.'''
|
In the '''Graphic Window number 1, '''click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window '''to place the '''pushbutton. '''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on''' Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface '''is now ready.
|-
|
Cursor on the '''GUI Builder Palette '''window,

click on '''Generate,'''

click on''' Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type''' printpushbuttongui >> '''click''' Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui '''and click on '''Save'''.
|-
|
Cursor on '''GUI Created '''window.

Click on''' OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file '''opens'''.'''

Inside this''' file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol '''parentheses.
|
'''handles.h1''' is the''' handle '''for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback '''function.
|
The '''callback function h1_callback '''is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console '''when executed.

The '''program''' is now complete.
|-
|
Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton '''named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message''' Hello World!'''
|
Go to the '''Scilab Console '''to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton '''three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console, '''the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,
|-
| 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'''
| The '''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.
|}

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

2021-08-06T12:23:32Z

Amandeeps:

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

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

GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English

2021-08-06T12:22:55Z

Amandeeps:

'''Title of the script: ''' '''Object''' properties and alignment in '''GUI'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: '''Properties of an '''object, '''size of an '''object, '''alignment of '''objects, delete '''an '''object, objects''' of same size, '''objects''' equally spaced.

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on '''Object''' properties and alignment in '''GUI''' in Scilab.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

''' '''

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

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 '''
|
|-
| Cursor on '''GUIBuilder Palette''' window'''.'''
|
I have opened the '''GUIBuilder toolbox''' in my system.

Please do so in your system, also.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''Open.'''
| On the '''GUIBuilder Palette window, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
It shows a '''dialog '''box''' '''that displays '''Open an existing GUI.'''

Click on '''Yes.'''
|-
| Open the file named '''printuserinput.sce'''
| Locate the folder where '''printuserinput.sce '''file is saved and open it.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover cursor over the three '''objects'''.
|
Notice the '''Graphic window number 1.'''

It''' '''opens the '''GUI''' which has,
|-
|
| Now let us see how to change some of the '''object''' properties of the '''Text '''box'''.'''
|-
|
Cursor on the '''GUIBuilder Palette '''window,

hover over the right panel.
|
For this, go to the '''GUIBuilder Palette.'''

Notice the right side panel.

It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

click on '''txt_output. '''
|
Click on '''txt_output'''.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover over the '''Text''' box.
|
Notice the '''Text''' box in the '''Graphic window'''.

It has a red border indicating that it is selected.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

Click on '''ObjectProperties.'''
| Then click on '''ObjectProperties '''at the bottom right of the '''GUIBuilder Palette '''window'''.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window.
|
A '''Scilab Multiple Values Request '''window opens.

We see that the '''object''' properties are displayed on the left side.

Respective property values are seen on the right side with some default values.

These values are assigned to the properties that are not predefined.

However, not all of the properties apply to all the '''objects'''.
|-
|
Show Slide:

'''help uicontrol_properties'''

'''help uicontrol_properties'''
|
To learn more about it, users need to type''' '''a '''command''' in the '''Scilab Console.'''

Type''' help space uicontrol underscore properties '''to see the detailed help.
|-
| Cursor on the '''Scilab Multiple Values Request '''window.
| Let us now change the properties that are applicable to the '''Text''' box.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
First we’ll change the '''Background '''color of the '''Text '''box.

We see a vector with the default values [-1,-1,-1].

They specify''' Red, Green, Blue''' color values respectively.

Selecting the values between 0 and 1, will change the color.

Let’s change it to [0.5,0.6,0.7].
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.

Type '''italic.'''
|
Next, we will change the '''Font angle.'''

We see '''normal '''as the default value'''.'''

We will change it to '''italic.'''

This property will set the slant of the '''font'''.
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''25.'''
|
We see '''[12]''' as the default '''FontSize '''value'''.'''

We will change it to '''[25].'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''bold.'''
|
Next, the default '''FontWeight '''value is set as '''normal.'''

Let’s change it to '''bold.'''

This will make the '''string''' value '''bold.'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.
|
Set the '''ForegroundColor '''default value''' '''[-1,-1,-1] to [0.7,0.8,0.9].

The color of the '''string''' value will change as a result of this.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window, as per narration.

Type '''center.'''
|
Let us now change the alignment of the '''string''' value.

We see '''left''' as the default '''HorizontalAlignment.'''

Let’s change this to '''center.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
Lastly, we will change the '''String''' property.

The default value is '''UnName3'''.

This property represents the text appearing on an''' object'''.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

delete '''UnName3.'''

Click on '''OK.'''
|
Delete '''UnName3''', and we'll keep it empty.

We have now changed enough properties of the '''Text''' box.

Explore the remaining properties later on your own, for better understanding.

Click on '''Ok'''.
|-
|
| Now let us change the location of the '''Text '''box'''.'''
|-
| Cursor on''' GUIBuilder Palette '''window.
| We will return to the '''GUIBuilder Palette '''window and click on '''txt_output '''once.
|-
| Cursor on''' GUIBuilder Palette '''window.
|
We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''.

I will click once on the '''Left''' button.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice that the '''Text '''box has moved slightly to the left.

It can be shifted to any side by using the respective direction buttons.
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover cursor on '''Move '''button'''.'''
|
Another way to move the '''Text '''box is by using the '''Move '''button'''.'''

It is''' '''located below the direction buttons'''. '''
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''txt_output.'''

click on '''Move.'''
|
Make sure that the '''txt_output '''is still selected'''.'''

Then click on '''Move'''.
|-
|
Cursor on '''Graphic Window number 1''',

move''' '''the cursor across the window'''.'''
|
Now move the cursor across the '''Graphic window'''.

A box with a black border and the same size as the '''Text''' box appears.

Notice that it appears wherever the cursor is moved.
|-
|
Cursor on '''Graphic Window number 1''',

click in the bottom left side of the window'''.'''
|
Let us place the '''Text''' box in the bottom left side by clicking on the window.

This is how we can move the '''Text''' box with the help of the '''Move''' button.
|-
|
Cursor on''' Graphic Window number 1''',

hover cursor on '''Text''' box.
|
Next, let us change the height and width of the '''Text '''box'''.'''

Make sure the''' Text''' box still has a red border indicating it’s selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''W+, W- '''buttons'''.'''
|
I will now click on '''W+ (W plus) '''button'''.'''

Notice that this action increases the width of the '''Text''' box.

Similarly, clicking '''W- (W minus) '''will decrease its width.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''H+, H- '''buttons'''.'''
|
Let us now increase the height of the '''Text''' box by clicking the '''H+ (H plus) '''button.

Likewise, we can use the '''H- (H minus) '''button to decrease its height.
|-
| Cursor on''' GUIBuilder Palette '''window,
|
Below this, we have a '''Delete '''button.

This is used to delete the selected object from the '''Graphic Window.'''
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover over the '''Alignments''' button present in the right panel.
| Next, let us learn how to use the '''Alignments''' button.
|-
|
Cursor on''' GUIBuilder Palette '''window,

press and Hold '''Ctrl''', and click on the '''Tag''' value of each object in the right panel.
|
Press and hold the '''Ctrl '''key on your keyboard.

Click on the '''Tag''' value of each''' object''' in the right panel.
|-
| Cursor on '''Graphic Window number 1'''.
| All selected '''objects''' now have a red border indicating they are selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''Alignments.'''
|
On the bottom right of the '''GUIBuilder Palette '''window, click the '''Alignments '''button.
|-
|
Cursor on '''GUI Alignment''' window,

hover cursor over the three '''Alignment '''sections.
|
A '''GUI Alignment''' window pops up.

This has
|-
|
Cursor on '''GUI Alignments''' window,

click on the '''Same Width '''and''' Same Height '''button.
| Click once on the '''Same Width '''and''' Same Height '''buttons.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice the selected '''objects''' in the''' Graphic window'''.

They now have the same width and height.

We can see that the '''objects''' are currently placed one below the other.
|-
|
Cursor on '''GUI Alignments''' window.
| So, we will use the buttons under '''Vertical''' '''Alignment '''heading'''.'''
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Equally Spaced. '''
| Click once on the '''Equally Spaced '''button'''. '''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged such that they are equally spaced.

Now, let us arrange all the objects to the center of the window.
|-
| Cursor on GUI Alignments window.
| To do so, we will use the buttons under '''Horizontal Alignment''' heading.
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Center. '''
| Click once on the '''Center '''button'''.'''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged in the center.
|-
|
| Learners may pause this video and explore all these options further for better understanding.
|-
| Cursor on '''GUI Alignments''' window.
| Close the '''GUI Alignments''' window.
|-
|
| Let us test our '''GUI''' now.
|-
|
Cursor on '''GUI Builder Palette '''window,

click on '''Generate, '''and click on''' Generate GUI code.'''
|
Go to the '''GUI Builder Palette '''window.

Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''printuserinput.sce'''

Click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.”
|
The '''uiputfile '''window will pop up.

I will select the file '''printuserinput.sce''' that was previously saved.

Click on the '''Save '''button.
|-
|
Cursor on '''File already exists '''window,

click on '''Yes.'''
| On the '''File already exists '''window, click on '''Yes.'''
|-
|
Cursor on '''GUI Created '''Window,

click on '''OK.'''
|
It shows a '''dialog '''box''' '''that displays the message “'''GUI created successfully!”'''

Click on '''OK.'''
|-
| Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.”
| If the '''Replace File? '''window pops up, then click on '''Reload. '''
|-
| Close '''Graphic Window number 1.'''
| Close the '''Graphic Window number 1.'''
|-
| Cursor on '''GUIBuilder Palette '''window.
| Minimize the '''GUIBuilder Palette '''window.
|-
| Cursor on '''SciNotes''' window.
| The corresponding updated '''sce file '''is displayed. <<PAUSE>>
|-
| Cursor on '''SciNotes''' window.
|
There is another way to change the '''object''' properties using the '''sce '''file.

We know that each '''object''' has its unique '''handle''' and''' uicontrol function'''.

So, the properties can be changed by modifying the '''object's uicontrol function'''.
|-
|
Cursor on '''SciNotes''' window,

within '''h1 uicontrol''' function,

Highlight,

'''‘Fontsize’ ,[12].'''

Change '''FontSize '''12 to 20.
|
By using this method, let us change the '''Fontsize''' of a '''pushbutton'''.

I'll make changes in '''uicontrol''' parentheses of '''h1''' which is a '''pushbutton's handle'''.

Change the '''FontSize '''12 to 20.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute, '''and then click on''' File with echo'''
|
Now let us execute the code.

Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''.
|-
|
Cursor on '''Graphic Window number 1,'''

replace the '''String '''on '''Edit''' box with '''Hello.'''
|
A window named '''Graphic window number 1''' opens.

Let us test the '''GUI'''.

Replace the '''String '''on the '''Edit''' box with “'''Hello”. '''
|-
|
Cursor on '''Graphic Window number 1,'''

click on the '''Print''' '''Pushbutton'''.
|
Click once on the '''Print''' '''Pushbutton'''.

The message “'''Hello'''” appears in the '''Text '''box.
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Text '''box'''.'''
| Notice that the '''String '''value in the''' Text''' box is now
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Print Pushbutton.'''
| The string “'''Print'''” on the '''pushbutton''' now has a larger font size.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this '''tutorial'''.

Let us summarize.

In this '''tutorial''', we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following modifications to the current '''GUI'''.
|-
|
Show Slide:

'''Assignment'''
|
Rearrange the '''objects''' as follows:

Now, place the objects with equal spacing.
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-08-06T12:22:13Z

Amandeeps:

'''Title of the script: ''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit '''box, '''Text '''box, '''.string '''command, Creating a '''GUI, '''Print the User Input

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

'''Code Files '''
|
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text '''box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder, '''press '''Enter.'''
|
Now type '''guibuilder '''and''' '''press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
A '''prompt''' named '''Open an existing GUI '''appears.

Click on''' Yes''' to proceed.
|-
|
Cursor on '''uigetfile '''window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce '''and click on it.

Click on '''Open. '''
|-
|
Cursor on''' Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|
| Let us add an '''Edit '''box and a '''Text '''box''' '''in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',''' '''

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit. '''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’ '''as '''Tag '''and ‘'''Enter the input message’ '''as '''String. '''

Then click on the '''OK '''button'''. '''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit '''Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit '''box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text '''box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output '''for '''Tag '''field'''.'''

Do not type anything in the '''String '''field.

We will not display any messages until we receive an input from the user.

Click on the '''OK '''button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text '''box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text '''Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text '''box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette '''window.

Click on''' Generate, '''and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as''' printuserinput.'''

Click on the '''Save '''button'''. '''
|-
|
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,
| The corresponding '''sce file '''is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle '''for the '''Edit '''box''' '''is''' handles.ed_input'''.

The properties of the '''Edit '''box are defined in its respective''' uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle '''for the '''Text '''box''' '''is''' handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the''' pushbutton '''interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

Press''' Enter.'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,''' '''

'''ip = handles.ed_input.string'''
|
The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
|
Highlight '''.string '''after''' Edit '''and '''Text''' box''' handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the''' Edit '''and '''Text''' box''' handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes '''window,

Click on '''Execute, '''and then click on''' File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI '''which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message” '''from the '''Edit '''box'''.'''

Then type “'''Welcome to Scilab!” '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box''' '''displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!” '''from the''' Edit '''box and type '''258. '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.
|-
|
Show Slide:

'''Assignment'''
|
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-08-06T12:21:30Z

Amandeeps:

'''Title of the script: '''Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

The process demonstrated in this tutorial is identical in '''Linux''' '''OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.
|-
|
|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console '''window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS '''window.
|
The '''Main categories - ATOMS '''window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox '''after''' installation'''.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on the '''GUI.'''
|
Click once on the '''GUI '''seen on the left panel'''.'''

This will show the list of''' toolboxes '''available in the '''GUI '''category.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS '''window.

Highlight the''' version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS '''window, Click '''Install.'''

Hover cursor over “'''Installation Done” '''message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type''' guibuilder '''and''' '''

Press''' Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette '''window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette '''window is located on the left side.

The '''Graphic Window Number 1 '''is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette '''window.

It has objects such as,
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up, '''and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys,''' '''notice '''W- (W minus) '''and''' W+ (W plus) '''keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus) '''and''' H+ (H plus) '''are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1. '''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI '''by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag '''field. It is a unique '''identifier''' for each '''GUI '''object.

It allows you to give a name to the object.

A '''Tag '''can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type''' h1 '''in the '''Tag '''field'''.'''
| I will type '''h1''' in the '''Tag '''field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String '''field.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

Type''' Print '''in the''' String '''field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on''' OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the''' '''cursor''' '''to draw a line box'''.'''
|
In the '''Graphic Window number 1, '''click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window '''to place the '''pushbutton. '''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on''' Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface '''is now ready.
|-
|
Cursor on the '''GUI Builder Palette '''window,

click on '''Generate,'''

click on''' Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type''' printpushbuttongui >> '''click''' Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui '''and click on '''Save'''.
|-
|
Cursor on '''GUI Created '''window.

Click on''' OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file '''opens'''.'''

Inside this''' file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol '''parentheses.
|
'''handles.h1''' is the''' handle '''for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback '''function.
|
The '''callback function h1_callback '''is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console '''when executed.

The '''program''' is now complete.
|-
|
Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton '''named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message''' Hello World!'''
|
Go to the '''Scilab Console '''to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton '''three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console, '''the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,
|-
| 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'''
| The '''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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-08-06T12:14:38Z

Amandeeps:

'''Title of the script: '''Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

The process demonstrated in this tutorial is identical in '''Linux''' '''OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.
|-
|
|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console '''window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS '''window.
|
The '''Main categories - ATOMS '''window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox '''after''' installation'''.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on the '''GUI.'''
|
Click once on the '''GUI '''seen on the left panel'''.'''

This will show the list of''' toolboxes '''available in the '''GUI '''category.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS '''window.

Highlight the''' version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS '''window, Click '''Install.'''

Hover cursor over “'''Installation Done” '''message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type''' guibuilder '''and''' '''

Press''' Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette '''window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette '''window is located on the left side.

The '''Graphic Window Number 1 '''is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette '''window.

It has objects such as,
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up, '''and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys,''' '''notice '''W- (W minus) '''and''' W+ (W plus) '''keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus) '''and''' H+ (H plus) '''are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1. '''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI '''by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag '''field. It is a unique '''identifier''' for each '''GUI '''object.

It allows you to give a name to the object.

A '''Tag '''can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type''' h1 '''in the '''Tag '''field'''.'''
| I will type '''h1''' in the '''Tag '''field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String '''field.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

Type''' Print '''in the''' String '''field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on''' OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the''' '''cursor''' '''to draw a line box'''.'''
|
In the '''Graphic Window number 1, '''click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window '''to place the '''pushbutton. '''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on''' Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface '''is now ready.
|-
|
Cursor on the '''GUI Builder Palette '''window,

click on '''Generate,'''

click on''' Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type''' printpushbuttongui >> '''click''' Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui '''and click on '''Save'''.
|-
|
Cursor on '''GUI Created '''window.

Click on''' OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file '''opens'''.'''

Inside this''' file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol '''parentheses.
|
'''handles.h1''' is the''' handle '''for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback '''function.
|
The '''callback function h1_callback '''is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console '''when executed.

The '''program''' is now complete.
|-
|
Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton '''named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message''' Hello World!'''
|
Go to the '''Scilab Console '''to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton '''three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console, '''the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,
|-
| 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'''
| The '''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.
|}

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

2021-08-06T06:08:56Z

Amandeeps: Created page with "''' Title of the script: '''Building '''GUI''' to graph a '''Linear Equation''' '''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' '''Keywords: Axes, '..."

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

# About '''Linear equation''' of a line,
# What are '''Axes''',
# Use of '''Edit '''box for taking user input for '''a, b''' and '''c''',
# Use of '''Text '''box for displaying the '''slope''' and '''y-intercept''',
# Use of '''Pushbutton '''to plot the response of a '''Linear Equation,'''
# Use of '''Axes''' to plot an equation of line,
# Writing '''Tag '''and '''String '''for all the '''objects''',
# Auto-generate a '''Scilab''' code using '''GUI Builder toolbox,'''
# Write a '''callback '''function,
# Use of '''strtod '''command,
# Use of '''xgrid''' command,
# 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.
|}

GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English

2021-08-06T06:07:00Z

Amandeeps: Created page with "'''Title of the script: ''' '''Object''' properties and alignment in '''GUI''' '''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' '''Keywords: '''Properties of an '''obj..."

'''Title of the script: ''' '''Object''' properties and alignment in '''GUI'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: '''Properties of an '''object, '''size of an '''object, '''alignment of '''objects, delete '''an '''object, objects''' of same size, '''objects''' equally spaced.

'''Outline: '''

# How to change the '''Background '''color,
# How to change the '''Font angle''' of the '''string''',
# How to change the '''Font size''' of the '''string''',
# How to change the '''Font weight''' of the '''string''',
# How to change the '''Foreground '''color,
# How to change the '''Horizontal Alignment''' of the '''string''',
# How to change the '''String''' value,
# How to shift the '''object''' using direction keys,
# How to move '''object''' using ‘'''Move'''’ button,
# How to change the width and height of an '''object''',
# How to '''delete '''an '''object''',
# How to change the alignment of an '''object''',
# How to make all the '''objects''' of same size,
# How to maintain all the '''objects''' equally spaced.

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on '''Object''' properties and alignment in '''GUI''' in Scilab.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

''' '''

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

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 '''
|
|-
| Cursor on '''GUIBuilder Palette''' window'''.'''
|
I have opened the '''GUIBuilder toolbox''' in my system.

Please do so in your system, also.
|-
|
Cursor on '''GUIBuilder Palette''' window,

click on '''Open.'''
| On the '''GUIBuilder Palette window, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
It shows a '''dialog '''box''' '''that displays '''Open an existing GUI.'''

Click on '''Yes.'''
|-
| Open the file named '''printuserinput.sce'''
| Locate the folder where '''printuserinput.sce '''file is saved and open it.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover cursor over the three '''objects'''.
|
Notice the '''Graphic window number 1.'''

It''' '''opens the '''GUI''' which has,
|-
|
| Now let us see how to change some of the '''object''' properties of the '''Text '''box'''.'''
|-
|
Cursor on the '''GUIBuilder Palette '''window,

hover over the right panel.
|
For this, go to the '''GUIBuilder Palette.'''

Notice the right side panel.

It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

click on '''txt_output. '''
|
Click on '''txt_output'''.
|-
|
Cursor on''' Graphic window number 1 '''window,

hover over the '''Text''' box.
|
Notice the '''Text''' box in the '''Graphic window'''.

It has a red border indicating that it is selected.
|-
|
Cursor on the '''GUIBuilder Palette '''window,

Click on '''ObjectProperties.'''
| Then click on '''ObjectProperties '''at the bottom right of the '''GUIBuilder Palette '''window'''.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window.
|
A '''Scilab Multiple Values Request '''window opens.

We see that the '''object''' properties are displayed on the left side.

Respective property values are seen on the right side with some default values.

These values are assigned to the properties that are not predefined.

However, not all of the properties apply to all the '''objects'''.
|-
|
Show Slide:

'''help uicontrol_properties'''

'''help uicontrol_properties'''
|
To learn more about it, users need to type''' '''a '''command''' in the '''Scilab Console.'''

Type''' help space uicontrol underscore properties '''to see the detailed help.
|-
| Cursor on the '''Scilab Multiple Values Request '''window.
| Let us now change the properties that are applicable to the '''Text''' box.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
First we’ll change the '''Background '''color of the '''Text '''box.

We see a vector with the default values [-1,-1,-1].

They specify''' Red, Green, Blue''' color values respectively.

Selecting the values between 0 and 1, will change the color.

Let’s change it to [0.5,0.6,0.7].
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.

Type '''italic.'''
|
Next, we will change the '''Font angle.'''

We see '''normal '''as the default value'''.'''

We will change it to '''italic.'''

This property will set the slant of the '''font'''.
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''25.'''
|
We see '''[12]''' as the default '''FontSize '''value'''.'''

We will change it to '''[25].'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.

Type '''bold.'''
|
Next, the default '''FontWeight '''value is set as '''normal.'''

Let’s change it to '''bold.'''

This will make the '''string''' value '''bold.'''
|-
|
Cursor on the '''Scilab Multiple ValuesRequest '''window,

as per narration.
|
Set the '''ForegroundColor '''default value''' '''[-1,-1,-1] to [0.7,0.8,0.9].

The color of the '''string''' value will change as a result of this.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window, as per narration.

Type '''center.'''
|
Let us now change the alignment of the '''string''' value.

We see '''left''' as the default '''HorizontalAlignment.'''

Let’s change this to '''center.'''
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

as per narration.
|
Lastly, we will change the '''String''' property.

The default value is '''UnName3'''.

This property represents the text appearing on an''' object'''.
|-
|
Cursor on the '''Scilab Multiple Values Request '''window,

delete '''UnName3.'''

Click on '''OK.'''
|
Delete '''UnName3''', and we'll keep it empty.

We have now changed enough properties of the '''Text''' box.

Explore the remaining properties later on your own, for better understanding.

Click on '''Ok'''.
|-
|
| Now let us change the location of the '''Text '''box'''.'''
|-
| Cursor on''' GUIBuilder Palette '''window.
| We will return to the '''GUIBuilder Palette '''window and click on '''txt_output '''once.
|-
| Cursor on''' GUIBuilder Palette '''window.
|
We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''.

I will click once on the '''Left''' button.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice that the '''Text '''box has moved slightly to the left.

It can be shifted to any side by using the respective direction buttons.
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover cursor on '''Move '''button'''.'''
|
Another way to move the '''Text '''box is by using the '''Move '''button'''.'''

It is''' '''located below the direction buttons'''. '''
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''txt_output.'''

click on '''Move.'''
|
Make sure that the '''txt_output '''is still selected'''.'''

Then click on '''Move'''.
|-
|
Cursor on '''Graphic Window number 1''',

move''' '''the cursor across the window'''.'''
|
Now move the cursor across the '''Graphic window'''.

A box with a black border and the same size as the '''Text''' box appears.

Notice that it appears wherever the cursor is moved.
|-
|
Cursor on '''Graphic Window number 1''',

click in the bottom left side of the window'''.'''
|
Let us place the '''Text''' box in the bottom left side by clicking on the window.

This is how we can move the '''Text''' box with the help of the '''Move''' button.
|-
|
Cursor on''' Graphic Window number 1''',

hover cursor on '''Text''' box.
|
Next, let us change the height and width of the '''Text '''box'''.'''

Make sure the''' Text''' box still has a red border indicating it’s selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''W+, W- '''buttons'''.'''
|
I will now click on '''W+ (W plus) '''button'''.'''

Notice that this action increases the width of the '''Text''' box.

Similarly, clicking '''W- (W minus) '''will decrease its width.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''H+, H- '''buttons'''.'''
|
Let us now increase the height of the '''Text''' box by clicking the '''H+ (H plus) '''button.

Likewise, we can use the '''H- (H minus) '''button to decrease its height.
|-
| Cursor on''' GUIBuilder Palette '''window,
|
Below this, we have a '''Delete '''button.

This is used to delete the selected object from the '''Graphic Window.'''
|-
|
Cursor on''' GUIBuilder Palette '''window,

hover over the '''Alignments''' button present in the right panel.
| Next, let us learn how to use the '''Alignments''' button.
|-
|
Cursor on''' GUIBuilder Palette '''window,

press and Hold '''Ctrl''', and click on the '''Tag''' value of each object in the right panel.
|
Press and hold the '''Ctrl '''key on your keyboard.

Click on the '''Tag''' value of each''' object''' in the right panel.
|-
| Cursor on '''Graphic Window number 1'''.
| All selected '''objects''' now have a red border indicating they are selected.
|-
|
Cursor on''' GUIBuilder Palette '''window,

click on '''Alignments.'''
|
On the bottom right of the '''GUIBuilder Palette '''window, click the '''Alignments '''button.
|-
|
Cursor on '''GUI Alignment''' window,

hover cursor over the three '''Alignment '''sections.
|
A '''GUI Alignment''' window pops up.

This has
|-
|
Cursor on '''GUI Alignments''' window,

click on the '''Same Width '''and''' Same Height '''button.
| Click once on the '''Same Width '''and''' Same Height '''buttons.
|-
| Cursor on '''Graphic Window number 1'''.
|
Notice the selected '''objects''' in the''' Graphic window'''.

They now have the same width and height.

We can see that the '''objects''' are currently placed one below the other.
|-
|
Cursor on '''GUI Alignments''' window.
| So, we will use the buttons under '''Vertical''' '''Alignment '''heading'''.'''
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Equally Spaced. '''
| Click once on the '''Equally Spaced '''button'''. '''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged such that they are equally spaced.

Now, let us arrange all the objects to the center of the window.
|-
| Cursor on GUI Alignments window.
| To do so, we will use the buttons under '''Horizontal Alignment''' heading.
|-
|
Cursor on '''GUI Alignments''' window,

click on '''Center. '''
| Click once on the '''Center '''button'''.'''
|-
| Cursor on '''Graphic Window number 1'''.
|
The '''objects''' are now arranged in the center.
|-
|
| Learners may pause this video and explore all these options further for better understanding.
|-
| Cursor on '''GUI Alignments''' window.
| Close the '''GUI Alignments''' window.
|-
|
| Let us test our '''GUI''' now.
|-
|
Cursor on '''GUI Builder Palette '''window,

click on '''Generate, '''and click on''' Generate GUI code.'''
|
Go to the '''GUI Builder Palette '''window.

Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''printuserinput.sce'''

Click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.”
|
The '''uiputfile '''window will pop up.

I will select the file '''printuserinput.sce''' that was previously saved.

Click on the '''Save '''button.
|-
|
Cursor on '''File already exists '''window,

click on '''Yes.'''
| On the '''File already exists '''window, click on '''Yes.'''
|-
|
Cursor on '''GUI Created '''Window,

click on '''OK.'''
|
It shows a '''dialog '''box''' '''that displays the message “'''GUI created successfully!”'''

Click on '''OK.'''
|-
| Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.”
| If the '''Replace File? '''window pops up, then click on '''Reload. '''
|-
| Close '''Graphic Window number 1.'''
| Close the '''Graphic Window number 1.'''
|-
| Cursor on '''GUIBuilder Palette '''window.
| Minimize the '''GUIBuilder Palette '''window.
|-
| Cursor on '''SciNotes''' window.
| The corresponding updated '''sce file '''is displayed. <<PAUSE>>
|-
| Cursor on '''SciNotes''' window.
|
There is another way to change the '''object''' properties using the '''sce '''file.

We know that each '''object''' has its unique '''handle''' and''' uicontrol function'''.

So, the properties can be changed by modifying the '''object's uicontrol function'''.
|-
|
Cursor on '''SciNotes''' window,

within '''h1 uicontrol''' function,

Highlight,

'''‘Fontsize’ ,[12].'''

Change '''FontSize '''12 to 20.
|
By using this method, let us change the '''Fontsize''' of a '''pushbutton'''.

I'll make changes in '''uicontrol''' parentheses of '''h1''' which is a '''pushbutton's handle'''.

Change the '''FontSize '''12 to 20.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute, '''and then click on''' File with echo'''
|
Now let us execute the code.

Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''.
|-
|
Cursor on '''Graphic Window number 1,'''

replace the '''String '''on '''Edit''' box with '''Hello.'''
|
A window named '''Graphic window number 1''' opens.

Let us test the '''GUI'''.

Replace the '''String '''on the '''Edit''' box with “'''Hello”. '''
|-
|
Cursor on '''Graphic Window number 1,'''

click on the '''Print''' '''Pushbutton'''.
|
Click once on the '''Print''' '''Pushbutton'''.

The message “'''Hello'''” appears in the '''Text '''box.
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Text '''box'''.'''
| Notice that the '''String '''value in the''' Text''' box is now
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on the '''Print Pushbutton.'''
| The string “'''Print'''” on the '''pushbutton''' now has a larger font size.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this '''tutorial'''.

Let us summarize.

In this '''tutorial''', we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following modifications to the current '''GUI'''.
|-
|
Show Slide:

'''Assignment'''
|
Rearrange the '''objects''' as follows:

Now, place the objects with equal spacing.
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English

2021-08-06T06:04:55Z

Amandeeps: Created page with "'''Title of the script: ''' Creating a '''GUI''' to Print the User Input '''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' '''Keywords: Edit '''box, '''Text '''box, '''..."

'''Title of the script: ''' Creating a '''GUI''' to Print the User Input

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: Edit '''box, '''Text '''box, '''.string '''command, Creating a '''GUI, '''Print the User Input

'''Outline:'''

# About an''' Edit '''box,
# About a''' Text '''box,
# How to open an existing''' GUI, '''
# Adding '''Tag''' and '''String''',
# Adding an '''Edit '''box''' '''to''' GUI,'''
# Adding a '''Text '''box''' '''to''' GUI,'''
# About''' string '''command''','''
# Auto-generate '''Scilab''' code using this '''toolbox'''
# Write a code to '''print''' the user input on '''GUI''',
# Importance of adding''' .string '''after the''' handle.'''

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Creating a '''GUI''' to Print User Input in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
|
In this tutorial, we will learn to:

We’ll also learn about the '''string command'''.
|-
|
Show Slide:

'''System requirement'''

'''Only narration'''
|
To record this tutorial, I am using:

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

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Pre-requisites'''

https://www.spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

'''Code Files '''
|
|-
|
Show Slide:

What is an '''Edit''' box?
|
What is an '''Edit''' box?

An '''Edit''' box is an editable '''string''' which takes input from a user.
|-
|
Show Slide:

What is a '''Text''' box?
|
What is a '''Text''' box?

A '''Text '''box is a non-editable '''string''' used to display text or numbers.
|-
| Cursor on '''Scilab Console Window.'''
|
Let us switch to the '''Scilab console''' window.

Notice that I already have the '''GUI Builder Toolbox''' loaded in '''Scilab'''.
|-
|
Cursor on '''Scilab Console Window,'''

type '''guibuilder, '''press '''Enter.'''
|
Now type '''guibuilder '''and''' '''press '''Enter.'''

This '''command''' opens two windows.
|-
|
Cursor on '''GUIBuilder Palette''',

click on '''Open.'''
| On the '''GUIBuilder Palette, '''click on '''Open '''in the top '''menubar'''.
|-
|
Cursor on '''Open an existing GUI '''window,

click on '''Yes.'''
|
A '''prompt''' named '''Open an existing GUI '''appears.

Click on''' Yes''' to proceed.
|-
|
Cursor on '''uigetfile '''window,

locate '''printpushbutton.sce.'''

Click on '''Open.'''
|
This opens another window named '''uigetfile'''.

Locate the file '''printpushbutton.sce '''and click on it.

Click on '''Open. '''
|-
|
Cursor on''' Graphic window number 1'''.

Hover cursor over '''Print pushbutton.'''
|
'''Graphic window number 1''' opens.

It shows the '''GUI''' with a '''pushbutton''' named '''Print'''.
|-
|
| Let us add an '''Edit '''box and a '''Text '''box''' '''in this '''GUI'''.
|-
|
Cursor on '''GUIBuilder Palette''',''' '''

click on '''Edit.'''
| Go to '''GUI Builder Palette''' and click on '''Edit. '''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''ed_input, '''

type '''Enter the input message.'''

Click '''OK.'''
|
A dialog box named '''Scilab Multiple Values Request''' opens.

Type ‘'''ed_input’ '''as '''Tag '''and ‘'''Enter the input message’ '''as '''String. '''

Then click on the '''OK '''button'''. '''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Edit''' box in the top left side.

Hover cursor over an '''Edit '''Box'''.'''
|
Switch to '''Graphic Window number 1.'''

Place the '''Edit''' box above the '''Print''' '''pushbutton.'''

An '''Edit '''box with the '''string “Enter the input message”''' appears.
|-
|
Cursor on '''GUIBuilder Palette''' ,

click on '''Text.'''
|
Now, let us take a '''Text '''box.

On '''GUI Builder Palette''', click on '''Text'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

type '''txt_output.'''

Click on '''OK.'''
|
Type '''txt_output '''for '''Tag '''field'''.'''

Do not type anything in the '''String '''field.

We will not display any messages until we receive an input from the user.

Click on the '''OK '''button'''.'''
|-
|
Cursor on '''Graphic Window number 1,'''

place the '''Text''' box in the bottom center.
|
We’ll place this just below the '''Print''' '''pushbutton''' in the '''Graphic window'''.

Click and place the '''Text''' box below the '''Print''' '''pushbutton.'''

A '''Text '''box with the '''string “UnName3”''' appears.
|-
| Cursor on '''Text '''Box'''.'''
|
A default '''string''' value “'''UnName3”''' is assigned to the '''Text '''box.

This is because the '''String''' field was kept empty.
|-
| Cursor on the interface.
|
Now the '''GUI''' part is completed.

Let us proceed to generate an equivalent '''Scilab''' code.
|-
|
Cursor on '''GUI Builder Palette '''window.

Click on''' Generate, '''and then click on '''Generate GUI code.'''
|
Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' on the top '''menubar''' and then on the '''Generate GUI code. '''
|-
|
Cursor on '''uiputfile '''window,

click on '''Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
|
We will save this file as''' printuserinput.'''

Click on the '''Save '''button'''. '''
|-
|
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,
| The corresponding '''sce file '''is generated.
|-
|
highlight line with '''handles.ed_input.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
Notice the '''handle '''for the '''Edit '''box''' '''is''' handles.ed_input'''.

The properties of the '''Edit '''box are defined in its respective''' uicontrol function'''.
|-
|
Highlight '''handles.txt_output.'''

Highlight the part inside the '''uicontrol''' parentheses'''.'''
|
The '''handle '''for the '''Text '''box''' '''is''' handles.txt_output'''.

Its properties are defined within its respective '''uicontrol function'''.
|-
|
Scroll down to the end.

Place the cursor within the '''h1_callback function.'''
|
Now, scroll down to the end of the code file.

Let us make the''' pushbutton '''interactive.

For that, we will write the '''code''' within the '''h1_callback function.'''
|-
|
Cursor on '''SciNotes''' window,

within '''h1_callback''',

type,

'''ip = handles.ed_input.string'''

Press''' Enter.'''

'''handles.txt_output.string = string(ip)'''
| Type the code as seen here with the same '''syntax'''.
|-
|
Highlight,''' '''

'''ip = handles.ed_input.string'''
|
The first line will '''assign''' the user input from an '''Edit box''' to the '''variable ip.'''
|-
|
Highlight''','''

'''handles.txt_output.string = string(ip) '''
| The next line will '''pass''' the value of '''variable ip''' to a '''Text box'''.
|-
|
Highlight '''.string '''after''' Edit '''and '''Text''' box''' handle'''.
|
'''GUI''' supports '''string''' format while taking and '''passing''' the values.

Hence, I have added it after the''' Edit '''and '''Text''' box''' handle'''.
|-
| Highlight '''string(ip)'''.
|
Notice the '''variable ‘ip’''' while passing the value back to the '''Text''' box handle.

It is put within the parentheses of the '''string command.'''
|-
| Press '''CTRL + S.'''
| Let us save the file by pressing '''Control''' and '''S''' key together.
|-
|
Cursor on '''Scinotes '''window,

Click on '''Execute, '''and then click on''' File with echo.'''
| To execute, click on '''Execute''' on the top '''menubar''' and then on '''file with echo'''.
|-
| Cursor on '''Graphic Window number 2.'''
|
A window named '''Graphic window number 2''' opens.

This shows the '''GUI '''which we just created with the '''pushbutton'''.

Let us now test the '''GUI'''.
|-
|
Delete '''Enter the input message.'''

Type '''Welcome to Scilab!'''
|
Delete the '''string “Enter the input message” '''from the '''Edit '''box'''.'''

Then type “'''Welcome to Scilab!” '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print pushbutton. '''

Hover cursor over “'''Welcome to Scilab!'''”
|
Click once on the '''Print''' '''pushbutton'''.

The '''Text''' box''' '''displays the '''string “Welcome to Scilab!”'''
|-
|
Cursor on '''Graphic Window number 2.'''

Delete '''Welcome to Scilab!'''

Type 258'''.'''
|
Let us test this using numbers now.

Delete the '''string “Welcome to Scilab!” '''from the''' Edit '''box and type '''258. '''
|-
|
Cursor on '''Graphic Window number 2.'''

Click on '''Print Pushbutton.'''

Hover cursor over number 258'''.'''
|
Click on the '''Print''' '''pushbutton'''.

The '''Text''' box shows the number '''258''' which we typed just now.

Likewise, you can try some more inputs for your own understanding.
|-
|
Show Slide:

'''Summary'''
|
This brings us to the end of this tutorial.

Let us summarize.

In this tutorial, we have:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.
|-
|
Show Slide:

'''Assignment'''
|
|-
|
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'''
| For any general or technical questions on '''Scilab''', visit the '''FOSSEE forum''' and post your question.
|-
|
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.
|}

GUI-in-Scilab/C2/Installation-of-GUI-Builder-Toolbox/English

2021-08-06T06:01:45Z

Amandeeps: Created page with "'''Title of the script: '''Installation of '''GUI Builder Toolbox''' '''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' '''Keywords: GUI Builder Toolbox, Main categories..."

'''Title of the script: '''Installation of '''GUI Builder Toolbox'''

'''Author: Rashmi Patankar, Amandeepsingh Siddhu '''

'''Keywords: GUI Builder Toolbox, Main categories - ATOMS, Tag, String, callback function, Pushbutton, static response.'''

Outline:

# Learn about '''GUI Builder Toolbox,'''
# Install '''GUI Builder Toolbox,'''
# About '''GUIBuilder Palette,'''
# Adding a '''pushbutton,'''
# What is '''Tag,'''
# What is '''String,'''
# Adding a '''Pushbutton '''to a''' GUI '''using''' GUIBuilder Palette,'''
# How to auto-generate a '''Scilab''' code using this '''toolbox,'''
# Write a '''callback function '''for the '''Pushbutton''',
# Generate a '''static response''' on the '''Scilab console'''.

{|
| '''Visual Cue'''
| '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
| Welcome to the '''Spoken Tutorial''' on Installation of '''GUI Builder Toolbox''' in '''Scilab'''.
|-
|
Show Slide:

'''Learning objectives'''
| In this tutorial, we will learn to:
|-
|
Show Slide:

'''System requirement'''

Only Narration
|
To record this tutorial, I am using

The process demonstrated in this tutorial is identical in '''Linux''' '''OS '''also.

Annotations are added to the tutorial if there are any differences.
|-
|
Show Slide:

'''Installation Requirements'''
| For the installation of '''GUI Builder Toolbox''', a working '''Internet''' connection is required.
|-
|
Show Slide:

'''Pre-requisites'''

https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide:

What is a '''GUI Builder Toolbox?'''
|
What is a '''GUI Builder Toolbox?'''

'''GUI Builder''' '''Toolbox''' in '''Scilab:'''
|-
|
Show Slide:

Advantages of using '''GUI Builder Toolbox'''
|
Now let us look at the advantages of the Toolbox.
|-
|
|
Let’s first learn to '''install''' the '''GUI Builder toolbox. '''

This can be done in a number of ways. We will look at one of them.
|-
|
Cursor on '''Scilab console.'''

Type '''atomsGui'''

and press '''Enter.'''
|
Open '''Scilab.'''

In the '''Scilab console '''window, type '''atomsGui.'''

The '''commands''' are case sensitive. Hence, please retain the '''syntax''' as shown here.

Press '''Enter.'''
|-
| Cursor on '''Main categories - ATOMS '''window.
|
The '''Main categories - ATOMS '''window opens.

This window has two panels.

The left panel displays a list of '''toolbox categories'''.
|-
| Cursor on the blank right panel.
|
Notice that the right panel is blank since I have not '''installed''' the '''toolbox'''.

It will display the details of the '''toolbox '''after''' installation'''.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on the '''GUI.'''
|
Click once on the '''GUI '''seen on the left panel'''.'''

This will show the list of''' toolboxes '''available in the '''GUI '''category.
|-
|
Cursor on '''Main categories - ATOMS '''window.

Click once on '''GUI Builder''' .
|
Click once on the '''GUI Builder.'''

This will show the details of this '''toolbox''' on the right side of the window.
|-
|
Cursor on '''Main categories -'''

'''ATOMS '''window.

Highlight the''' version.'''
|
Scroll up and notice the '''Version''' of the '''toolbox'''.

At the time of recording this video, the current version of the '''toolbox''' is '''4.2.1.'''

It could be different when you are watching this tutorial at a later date.
|-
|
Cursor on '''Main categories - ATOMS '''window, Click '''Install.'''

Hover cursor over “'''Installation Done” '''message.
|
Click on the '''Install''' button at the bottom of the window.

If successful, the '''Installation Done''' message appears at the bottom.
|-
| Close and reopen Scilab.
|
After this, we need to restart '''Scilab''' for the changes to take effect.

Let’s close and then reopen '''Scilab'''.
|-
| Cursor on the '''Scilab''' '''console.'''
| Notice that the '''GUI Builder Toolbox''' gets loaded upon starting '''Scilab'''.
|-
|
Cursor on '''Scilab''' '''console. '''

Type''' guibuilder '''and''' '''

Press''' Enter.'''
|
Now, type '''guibuilder''' in the '''Scilab console''', and press '''Enter'''.

This '''command''' opens two windows.
|-
| Cursor on '''GUIBuilder Palette '''window and '''Graphic Window Number 1.'''
|
The '''GUIBuilder Palette '''window is located on the left side.

The '''Graphic Window Number 1 '''is located on the right side.
|-
| Cursor on '''GUIBuilder Palette''' window, Hover cursor over the '''Pushbutton, Radiobutton, Checkbox, Edit, Text box''' .
|
Let us look at the '''GUIBuilder Palette '''window.

It has objects such as,
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''Left, Right, Up, '''and '''Down.'''
|
On the right, the direction keys '''Up, Down, Left,''' and '''Right''' are provided.

They are used to shift the selected objects in the '''GUI'''.
|-
|
Cursor on the '''GUIBuilder Palette''' window,

hover cursor over '''W-, W+.'''

Hover cursor over '''H-, H+.'''
|
Below the direction keys,''' '''notice '''W- (W minus) '''and''' W+ (W plus) '''keys.

They enable the user to adjust the width of the selected object.

'''H- (H minus) '''and''' H+ (H plus) '''are given to adjust the height of the selected object.
|-
| Cursor on '''Graphic Window number 1.'''
| Objects are placed in '''Graphic window number 1. '''
|-
|
Cursor on the '''GUI Builder Palette''' window,

click on the '''Pushbutton'''.
|
Let us create a '''GUI '''by placing objects in '''Graphic Windows number 1'''.

Go to the '''GUI Builder Palette''' and click on the '''Pushbutton'''.
|-
|
Cursor on '''Scilab Multiple Values Request '''window.

Hover cursor over '''Tag.'''
|
A window named '''Scilab Multiple Values Request''' opens.

Notice the '''Tag '''field. It is a unique '''identifier''' for each '''GUI '''object.

It allows you to give a name to the object.

A '''Tag '''can be a number or an alphabet or its combination.

Users can assign any value as a '''Tag'''.
|-
| Type''' h1 '''in the '''Tag '''field'''.'''
| I will type '''h1''' in the '''Tag '''field'''.'''
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

hover cursor over '''String.'''
| Below '''Tag''', we see the '''String '''field.
|-
|
Cursor on '''Scilab Multiple Values Request '''window,

Type''' Print '''in the''' String '''field'''.'''

Click on '''OK.'''
|
The text in the '''String''' field is the display name for the object in the '''Graphic''' '''window.'''

I will type '''Print''' in the '''String''' field and then, click on''' OK'''.
|-
|
Cursor on '''Graphic Window number 1,'''

click once in the middle left side.

Drag the''' '''cursor''' '''to draw a line box'''.'''
|
In the '''Graphic Window number 1, '''click once near the middle left side of the window.

Then drag the mouse diagonally downwards to draw a rectangle.

Notice a line box.

The size of this can be varied by moving the cursor on the window.
|-
| Click again on the window.
| Click again on the '''Graphic Window '''to place the '''pushbutton. '''
|-
|
Cursor on '''Graphic Window number 1,'''

hover cursor on''' Print pushbutton. '''
|
Notice that a '''pushbutton''' named '''Print''' appears on '''Graphic Window number 1.'''

The '''Graphical User Interface '''is now ready.
|-
|
Cursor on the '''GUI Builder Palette '''window,

click on '''Generate,'''

click on''' Generate GUI code . '''
|
To generate the '''Scilab''' '''code,''' go to the '''GUI Builder Palette''' window.

Click on the '''Generate''' menu seen on the top '''menubar'''.

Then click on '''Generate GUI code.'''
|-
|
Type''' printpushbuttongui >> '''click''' Save.'''

Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
| I will save this file as '''printpushbuttongui '''and click on '''Save'''.
|-
|
Cursor on '''GUI Created '''window.

Click on''' OK.'''
|
A confirmation message is displayed which says, “'''GUI created successfully!”'''

Click on '''OK'''.
|-
| Cursor on '''SciNotes''' window.
|
Immediately, the corresponding '''Scilab file '''opens'''.'''

Inside this''' file''', all the '''properties''' of the figure and '''object''' are provided.
|-
|
Cursor on '''SciNotes''' window,

highlight '''handles.h1,'''

highlight the part inside '''uicontrol '''parentheses.
|
'''handles.h1''' is the''' handle '''for the '''pushbutton. '''

Inside the '''uicontrol''' parentheses the properties of the '''pushbutton''' are given.
|-
|
Cursor on '''SciNotes''' window,

highlight the '''h1_callback '''function.
|
The '''callback function h1_callback '''is defined at the bottom'''.'''

Code written within this '''function''' will get executed on pressing the '''pushbutton.'''
|-
|
Cursor on '''SciNotes''' window.

Type, '''disp(“Hello World!”).'''

Hover cursor on '''disp(“Hello World!”).'''
|
Let us now write a code within '''h1_callback'''.

Type, '''disp(“Hello World!”).'''

This '''command''' will display “'''Hello World!”''' on the '''Scilab console '''when executed.

The '''program''' is now complete.
|-
|
Press '''CTRL + S.'''
| Let us save it by pressing the '''Control''' and '''S''' keys together.
|-
|
Cursor on '''Scinotes '''window,

click on''' Execute.'''
| Click on '''Execute''' in the top '''menubar'''.
|-
| Click on '''File with echo'''
| Then click on '''File with echo''' from the drop-down.
|-
|
Cursor on '''Graphic Window number 2.'''

Hover cursor on '''Print pushbutton.'''
|
A window named '''Graphic window number 2''' opens.

The '''pushbutton '''named '''Print''' appears in the graphic window.
|-
|
Cursor on '''Graphic Window number 2,'''

click on '''Print.'''
|
Next, let us test our '''GUI.'''

Click on the '''Print''' '''pushbutton'''.

The code gets executed.
|-
|
Cursor on '''Scilab Console.'''

Highlight the message''' Hello World!'''
|
Go to the '''Scilab Console '''to see the output.

The '''console''' shows the message “'''Hello World!”'''
|-
|
Cursor on '''Graphic Window number 2,'''

click on the '''Print pushbutton '''three times'''.'''
|
Let us now again click the '''Print pushbutton''' three times.

Notice that on the '''Scilab Console, '''the '''static response''' is generated three times.

So, for each click on the '''pushbutton,''' a '''static response''' is generated.
|-
|
Show Slide:

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

In this '''tutorial''', we:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following.

Add one more '''pushbutton''' to the current '''GUI''' as described below,
|-
| 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'''
| The '''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.
|}