View source for GUI-in-Scilab/C2/Building-a-GUI-for-basic-plotting/English

'''Title of script''': Building a '''GUI''' for basic plotting.

'''Author: Rashmi Patankar and Iswariya Sasikumar'''

{| class= "wikitable"
! '''Visual Cue'''
! '''Narration'''
|-
|
Show Slide:

'''Title Slide'''
|
Hello and welcome to the Spoken Tutorial on

“'''Building a GUI for basic plotting”.'''
|-
|
Show Slide:

'''Learning Objectives'''




|
In this tutorial, we will learn:

<ul>
<li><blockquote><p>About '''Checkbox'''.</p></blockquote></li>
<li><blockquote><p>Generate graphs of the '''sine''' and '''cosine functions''' using '''GUI'''.</p></blockquote></li></ul>
|-
|
Show Slide:

'''System Requirements'''






'''Only Narration'''


|
To record this tutorial, I am using

<ul>
<li><blockquote><p>'''Windows 10 OS'''</p></blockquote></li>
<li><blockquote><p>'''Scilab 6.1.0 and'''</p></blockquote></li>
<li><blockquote><p>'''GUI Builder Toolbox 4.2.1'''</p></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:

'''Pre-requisites'''



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

<ul>
<li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.'''</p></blockquote></li></ul>

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

'''Code Files'''




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

'''What is Checkbox?'''
|
A '''Checkbox''' is a button with two states.

It is used when a user wants to make multiple independent choices.
|-
|
Cursor on '''GUIBuilder Palette''' and '''Graphic window number 1'''


|
Let us begin with creating the '''GUI'''.

I have opened the '''GUIBuilder toolbox'''.
|-
|
Cursor on '''GUIBuilder Palette''',

click '''Checkbox.'''
| Go to '''GUIBuilder''' '''Palette''' and click on '''Checkbox'''.
|-
|
On '''Scilab Multiple Values Request''' window,

type '''chk_sine''' as '''Tag''',

type '''sin(t)''' as '''String.'''

Click on '''OK.'''
|
Type '''chk_sine''' as the '''Tag''' and '''sin(t)''' as the '''String'''.





Then click on '''OK'''.
|-
|
On '''Graphic window number 1,'''

place the '''Checkbox''' in the window's top left side.

Hover cursor over '''Checkbox'''.
|
Place the '''Checkbox''' in the window's top left side by considering a suitable size.



A '''sin(t) Checkbox''' appears. 
|-
|
On '''GUIBuilder Palette''',



hover over '''cos(t) Checkbox.'''


|
In the similar way, I have taken another '''Checkbox''' for the '''cosine function'''.

I have written '''chk_cosine''' as the '''Tag''' and '''cos(t)''' as the '''String'''.

By considering the suitable size, I have placed it below the '''sin(t) Checkbox'''.

Pause the tutorial and do likewise in your '''GUI''' interface.
|-
| On '''GUIBuilder Palette''',
| To display the response of a system, we need '''Axes'''.
|-
|
On '''Graphic window number 1,'''



hover over '''Axes'''.


|
Hence I have taken an '''Axes''' with '''ax_response''' as '''Tag''' and '''System Response''' as '''String'''.

Notice that I have placed it on the right side of the window.

It appears like a box with a black border.

Again, pause the tutorial and do likewise in your '''GUI''' interface.
|-
|

| Now the '''GUI''' part is completed. 
|-
|
On '''GUIBuilder Palette''' window,



'''Generate&gt;&gt;Generate GUI code.'''
|
Let us generate the '''Scilab code''' file for this.

Go to the '''GUIBuilder Palette'''.

Click on '''Generate''' and then on the '''Generate GUI code.'''
|-
|
Save as '''finding_wave'''.

Click on '''Save.'''
|
I will save this file as '''finding_wave.'''

Click on '''Save'''.
|-
|
On '''GUI created window,'''

Click on '''OK.'''
|
A pop up opens with the message “'''GUI created successfully'''.”

Click on '''OK.'''
|-
|
On '''SciNotes''' window,

highlight '''handles''' for '''sine''', '''cosine''' and '''axes'''.
|
You can see that the corresponding '''Scilab code''' has been generated.

Notice the '''handles''' and '''properties''' of the objects we took on a '''graphic window'''.
|-
| Highlight '''handles.chk_sine'''.
| '''handles.chk_sine''' is the '''handle''' for '''sine Checkbox.'''
|-
| Highlight '''handles.chk_cosine'''.
| '''handles.chk_cosine''' is the '''handle''' for '''cosine Checkbox.'''
|-
| Highlight '''handles.ax_response'''.
| '''handles.ax_response''' is the '''handle''' for '''Axes.'''
|-
| Hover cursor over '''chk_sine_callback''' function.
| Now let us write a function definition within the '''chk_sine_callback function'''.
|-
|
Cursor on '''SciNotes''' window,

type within '''chk_sine_callback'''.

Type,

'''t = 0:0.1:2*%pi;'''

'''if handles.chk_sine.Value == 1'''

'''then plot(t,sin(t))'''

'''else'''

'''plot(t,sin(t),'w')'''

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

'''t = 0:0.1:2*%pi;'''
| The first line defines the range of '''t''' from '''0''' to '''2 pi''' with a step size of '''0.1'''.
|-
|
Highlight,

'''if handles.chk_sine.Value == 1'''

'''then plot(t,sin(t))'''

'''else'''

'''plot(t,sin(t),'w')'''

'''end'''
|
Further an '''if else''' statement is defined.

The '''checkbox''' for '''sin(t)''' is checked if the value is set to 1.

So, if it is checked then the response of the '''sine''' wave is plotted.

If it is unchecked, then an invisible response will be plotted with white color.




|-
|
Cursor on '''SciNotes''' window,

type within '''chk_cosine_callback'''.

Type,

'''t = 0:0.1:2*%pi;'''

'''if handles.chk_cosine.Value == 1'''

'''then plot(t,cos(t))'''

'''else'''

'''plot(t,cos(t),'w')'''

'''end'''
|
Next I will write a function definition for '''chk_cosine_callback function.'''

Enter the code as seen here with the same syntax as explained earlier.

The same code can also be found under the '''Code files''' section.












|-
|
Highlight,

'''t = 0:0.1:2*%pi;'''
|
The first line is the same as seen in the '''chk_sine_callback function.'''

It will define the range of '''‘t’'''.
|-
|
Highlight,

'''if handles.chk_cosine.Value == 1'''

'''then plot(t,cos(t))'''

'''else'''

'''plot(t,cos(t),'w')'''

'''end'''
|
Further an '''if else''' statement for '''cos(t) checkbox''' is defined.

This action is similar to what we have seen previously.

If the '''checkbox''' for '''cos(t)''' is checked, then it will plot the response of the '''cosine''' wave.

If it is unchecked, then an invisible response will be plotted with white color.




|-
| Press '''Ctrl+S.'''
| Now let us save the '''Scilab code''' by pressing '''Ctrl''' and '''S''' keys together.
|-
|
On '''Scinotes''' window,

'''Execute'''&gt;&gt;'''file''' '''with echo.'''
| To execute, click on '''Execute''' on the '''menu bar''' and then on '''file with echo'''.


|-
|
On '''Graphic window number 2,'''

check the '''sin(t) checkbox.'''

Hover cursor over the '''Axes'''.
|
Now check the '''sin(t) checkbox.'''



You will see the time response of the '''sine function''' on the '''Axes'''.
|-
|
On '''Graphic window number 2,'''

check the '''cos(t) checkbox.'''

Hover cursor over the '''Axes'''.
|
Let us now check the '''cos(t)''' '''checkbox'''.



'''Axes''' shows the time response of the '''cosine function''' along with the '''sine''' '''function'''.
|-
|
On '''Graphic window number 2,'''

uncheck the '''sin(t) checkbox'''

check the '''sin(t) checkbox.'''


|
Now uncheck the '''sin(t)''' '''checkbox.'''

The response of '''sine''' function is not visible now.

If we check the '''sin(t)''' '''checkbox''' then the '''sine function''' response is again visible.

This way we can perform the basic plotting using '''GUI.'''
|-
|

|
This brings us to the end of this tutorial. 

Let us summarise.
|-
|
Show Slide:

'''Summary'''


|
In this tutorial, we have learnt:

<ul>
<li><blockquote><p>About '''Checkbox'''.</p></blockquote></li>
<li><blockquote><p>Generated graphs of the '''sine''' and '''cosine functions''' using '''GUI'''.</p></blockquote></li></ul>
|-
|
Show Slide:

'''Assignment'''








|
As an assignment, please do the following.

<ul>
<li><blockquote><p>Add two '''Checkboxes''' to the current '''GUI''' to find:</p></blockquote>
<ul>
<li><blockquote><p>inverse of '''sin(t)''' and</p></blockquote></li>
<li><blockquote><p>inverse of '''cos(t)'''</p></blockquote></li></ul>
</li>
<li><blockquote><p>Display the response of a system using an '''Axes'''.</p></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'''
|
We conduct workshops using '''Spoken Tutorials''' and give certificates.

Please contact 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: '''Acknowledgements'''
| The '''Spoken Tutorial''' project is funded by the '''Ministry of Education, Government of India'''.
|-
| Show Slide: '''Thank you'''
|
This is '''Iswariya Sasikumar,''' a '''FOSSEE''' intern 2021, IIT Bombay signing off.

Thanks for joining.
|}