Difference between revisions of "GUI-in-Scilab/C2/Building-a-GUI-for-basic-plotting/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script''': Building a '''GUI''' for basic plotting. '''Author: Rashmi Patankar and Iswariya Sasikumar''' {| class= "wikitable" ! '''Visual Cue''' ! '''Narration'...")
 
 
Line 20: Line 20:
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
 +
 +
 +
 +
 
|
 
|
 
In this tutorial, we will learn:
 
In this tutorial, we will learn:
Line 31: Line 35:
  
 
'''System Requirements'''
 
'''System Requirements'''
 +
 +
 +
 +
 +
  
 
'''Only Narration'''
 
'''Only Narration'''
 +
 +
 
|
 
|
 
To record this tutorial, I am using
 
To record this tutorial, I am using
Line 49: Line 60:
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
 +
 +
  
 
https://spoken-tutorial.org
 
https://spoken-tutorial.org
Line 64: Line 77:
  
 
'''Code Files'''
 
'''Code Files'''
 +
 +
 +
 +
 
|
 
|
 
<ul>
 
<ul>
Line 80: Line 97:
 
|-
 
|-
 
|
 
|
 +
Cursor on '''GUIBuilder Palette''' and '''Graphic window number 1'''
 +
  
 
|
 
|
Line 102: Line 121:
 
|
 
|
 
Type '''chk_sine''' as the '''Tag''' and '''sin(t)''' as the '''String'''.
 
Type '''chk_sine''' as the '''Tag''' and '''sin(t)''' as the '''String'''.
 +
 +
 +
 +
  
 
Then click on '''OK'''.
 
Then click on '''OK'''.
Line 113: Line 136:
 
|
 
|
 
Place the '''Checkbox''' in the window's top left side by considering a suitable size.
 
Place the '''Checkbox''' in the window's top left side by considering a suitable size.
 +
 +
  
 
A '''sin(t) Checkbox''' appears. 
 
A '''sin(t) Checkbox''' appears. 
Line 118: Line 143:
 
|
 
|
 
On '''GUIBuilder Palette''',
 
On '''GUIBuilder Palette''',
 +
 +
  
 
hover over '''cos(t) Checkbox.'''
 
hover over '''cos(t) Checkbox.'''
  
−
Video-editor: Please put a textbox on screen. “Tag: chk_cosine, String: cos(t)”
+
 
 
|
 
|
 
In the similar way, I have taken another '''Checkbox''' for the '''cosine function'''.
 
In the similar way, I have taken another '''Checkbox''' for the '''cosine function'''.
Line 129: Line 156:
 
By considering the suitable size, I have placed it below the '''sin(t) Checkbox'''.
 
By considering the suitable size, I have placed it below the '''sin(t) Checkbox'''.
  
−
Pause the tutorial and do likewise in your '''GUI interface'''.
+
Pause the tutorial and do likewise in your '''GUI''' interface.
 
|-
 
|-
 
| On '''GUIBuilder Palette''',
 
| On '''GUIBuilder Palette''',
Line 136: Line 163:
 
|
 
|
 
On '''Graphic window number 1,'''
 
On '''Graphic window number 1,'''
 +
 +
  
 
hover over '''Axes'''.
 
hover over '''Axes'''.
  
−
Video-editor: Please put a textbox on screen. “Tag: ax_response, String: System Response”
+
 
 
|
 
|
 
Hence I have taken an '''Axes''' with '''ax_response''' as '''Tag''' and '''System Response''' as '''String'''.
 
Hence I have taken an '''Axes''' with '''ax_response''' as '''Tag''' and '''System Response''' as '''String'''.
Line 145: Line 174:
 
Notice that I have placed it on the right side of the window.
 
Notice that I have placed it on the right side of the window.
  
−
It appears like a '''box''' with a black border'''.'''
+
It appears like a box with a black border.
  
−
Again, pause the tutorial and do likewise in your '''GUI interface'''.
+
Again, pause the tutorial and do likewise in your '''GUI''' interface.
 
|-
 
|-
 
|
 
|
Line 155: Line 184:
 
|
 
|
 
On '''GUIBuilder Palette''' window,
 
On '''GUIBuilder Palette''' window,
 +
 +
  
 
'''Generate&gt;&gt;Generate GUI code.'''
 
'''Generate&gt;&gt;Generate GUI code.'''
Line 168: Line 199:
  
 
Click on '''Save.'''
 
Click on '''Save.'''
−
 
−
Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”
 
 
|
 
|
 
I will save this file as '''finding_wave.'''
 
I will save this file as '''finding_wave.'''
Line 203: Line 232:
 
|-
 
|-
 
| Hover cursor over '''chk_sine_callback''' function.
 
| Hover cursor over '''chk_sine_callback''' function.
−
| Now let us write a '''function definition''' within the '''chk_sine_callback function'''.
+
| Now let us write a function definition within the '''chk_sine_callback function'''.
 
|-
 
|-
 
|
 
|
Line 224: Line 253:
 
'''end'''
 
'''end'''
 
|
 
|
−
Enter the code as seen here with the same '''syntax'''.
+
Enter the code as seen here with the same syntax.
  
 
The same code can be found under the '''Code files''' section.
 
The same code can be found under the '''Code files''' section.
  
 
You can use it as explained earlier in this tutorial.
 
You can use it as explained earlier in this tutorial.
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 256: Line 297:
  
 
If it is unchecked, then an invisible response will be plotted with white color.
 
If it is unchecked, then an invisible response will be plotted with white color.
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 278: Line 323:
 
Next I will write a function definition for '''chk_cosine_callback function.'''
 
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.
+
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.
 
The same code can also be found under the '''Code files''' section.
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
|-
 
|-
 
|
 
|
Line 311: Line 368:
  
 
If it is unchecked, then an invisible response will be plotted with white color.
 
If it is unchecked, then an invisible response will be plotted with white color.
 +
 +
 +
 +
 
|-
 
|-
 
| Press '''Ctrl+S.'''
 
| Press '''Ctrl+S.'''
Line 320: Line 381:
 
'''Execute'''&gt;&gt;'''file''' '''with echo.'''
 
'''Execute'''&gt;&gt;'''file''' '''with echo.'''
 
| To execute, click on '''Execute''' on the '''menu bar''' and then on '''file with echo'''.
 
| To execute, click on '''Execute''' on the '''menu bar''' and then on '''file with echo'''.
 +
 +
 
|-
 
|-
 
|
 
|
Line 329: Line 392:
 
|
 
|
 
Now check the '''sin(t) checkbox.'''
 
Now check the '''sin(t) checkbox.'''
 +
 +
  
 
You will see the time response of the '''sine function''' on the '''Axes'''.
 
You will see the time response of the '''sine function''' on the '''Axes'''.
Line 340: Line 405:
 
|
 
|
 
Let us now check the '''cos(t)''' '''checkbox'''.
 
Let us now check the '''cos(t)''' '''checkbox'''.
 +
 +
  
 
'''Axes''' shows the time response of the '''cosine function''' along with the '''sine''' '''function'''.
 
'''Axes''' shows the time response of the '''cosine function''' along with the '''sine''' '''function'''.
Line 349: Line 416:
  
 
check the '''sin(t) checkbox.'''
 
check the '''sin(t) checkbox.'''
 +
 +
 
|
 
|
 
Now uncheck the '''sin(t)''' '''checkbox.'''
 
Now uncheck the '''sin(t)''' '''checkbox.'''
Line 369: Line 438:
  
 
'''Summary'''
 
'''Summary'''
 +
 +
 
|
 
|
 
In this tutorial, we have learnt:
 
In this tutorial, we have learnt:
Line 380: Line 451:
  
 
'''Assignment'''
 
'''Assignment'''
 +
 +
 +
 +
 +
 +
 +
 +
 
|
 
|
 
As an assignment, please do the following.
 
As an assignment, please do the following.

Latest revision as of 14:21, 17 September 2021

Title of script: Building a GUI for basic plotting.

Author: Rashmi Patankar and Iswariya Sasikumar

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:

  • About Checkbox.

  • Generate graphs of the sine and cosine functions using GUI.

Show Slide:

System Requirements




Only Narration


To record this tutorial, I am using

  • Windows 10 OS

  • Scilab 6.1.0 and

  • GUI Builder Toolbox 4.2.1

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:

  • 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 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>>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>>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:

  • About Checkbox.

  • Generated graphs of the sine and cosine functions using GUI.

Show Slide:

Assignment





As an assignment, please do the following.

  • Add two Checkboxes to the current GUI to find:

    • inverse of sin(t) and

    • inverse of cos(t)

  • Display the response of a system using an Axes.

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.

Contributors and Content Editors

Iswariyas

Retrieved from "https://script.spoken-tutorial.org/index.php?title=GUI-in-Scilab/C2/Building-a-GUI-for-basic-plotting/English&oldid=55552"