View source for GUI-in-Scilab/C2/Creating-a-basic-GUI-using-Scilab/English

'''Title of the script:''' Creating a basic '''GUI''' using Scilab

'''Author: Rashmi Patankar, Shwethaa R'''

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

'''Title Slide'''
| Welcome to the Spoken Tutorial on “Creating a basic '''GUI''' using Scilab”.
|-
|Show Slide:

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

<ul>
<li><blockquote><p>About '''Graphical User Interface(GUI)''' and its benefits.</p></blockquote></li></ul>

<ul>
<li><blockquote><p>Create a '''pushbutton.'''</p></blockquote></li>
<li><blockquote><p>Add a '''callback function''' and</p></blockquote></li></ul>

<ul>
<li><blockquote><p>Create a basic '''GUI''' using '''Scilab.'''</p></blockquote></li></ul>
|-
|
Show Slide:

'''System requirement'''
|
To record this tutorial, I am using

<ul>
<li><blockquote><p>'''Windows 10''' '''OS''' and</p></blockquote></li></ul>

<ul>
<li><blockquote><p>'''Scilab''' '''6.1.0'''</p></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://www.spoken-tutorial.org
|
<ul>
<li><blockquote><p>The learner must have basic knowledge of '''Scilab'''.</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 a '''Graphical User Interface'''?
|
The '''Graphical User Interface(GUI)''' is:

<ul>
<li><blockquote><p>A graphical display that allows the user to do interactive tasks using objects.</p></blockquote></li>
<li><blockquote><p>Users can create and arrange objects in a graphical window.</p></blockquote></li></ul>
|-
|Show Slide:

What is a '''Graphical User Interface'''?
|
<ul>
<li><blockquote><p>The object style includes '''edit, slider,''' '''pushbutton,''' etc.</p></blockquote></li>
<li><blockquote><p>We use their '''callbacks''' to make them interactive.</p></blockquote></li>
<li><blockquote><p>'''GUI'''s can also create and display data in a tabular form or as a plot.</p></blockquote></li></ul>
|-
|Show Slide:

'''What is a pushbutton?'''
| A '''pushbutton''' is a rectangular button used to run a '''callback.'''
|-
|Show Slide:

'''What is a callback?'''
|
A '''callback''' is a '''function''' that executes a set of '''commands.'''

This happens in response to a predefined user action.

For example,

<ul>
<li><blockquote><p>When the '''pushbutton''' is pressed, the code written in the '''callback''' is executed.</p></blockquote></li>
<li><blockquote><p>As a result, the '''pushbutton''' becomes interactive.</p></blockquote></li></ul>
|-
|
On the '''Scilab console''',

type '''editor''' and press '''Enter.'''
|
Open the '''Scilab console'''.

Type '''editor''' and press '''Enter.'''
|-
|
On '''Scinotes Window,'''

highlight '''Scinotes''' on title bar.

Click on '''File'''&gt;&gt;'''Open.'''
|
It opens the '''Scinotes''' window.

Click on '''File''' on the '''menubar''' and then on '''Open.'''
|-
|
On '''Open Window,'''

go to '''Downloads''' folder &gt;&gt; Click on '''basicgui.sce''' file &gt;&gt; Click '''Open.'''


|
Go to the '''Downloads''' folder.

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

Click on the '''Open''' button at the bottom.
|-
|
On '''Scinotes''' Window,

hover cursor over '''basicgui.sce''' in the title bar.
|
It opens the file '''basicgui.sce''' in '''Scinotes''' window.

Now we’ll look at the code.
|-
|
Cursor on '''SciNotes Window, '''

highlight '''figure().'''
|
Let's start by creating a '''graphic window.'''

The '''graphic window''' is a window on which we place the objects to create a '''GUI'''.

For creating that''',''' the '''figure function''' is used.
|-
| Cursor on '''SciNotes Window,''' highlight the word '''f.'''
|
'''‘f’''' is the handle of the '''graphic window.'''

It is used to change the properties of the '''graphic window''' after it is created.
|-
|
Cursor on '''Scinotes Window,'''

highlight the line with '''f.visible.'''
|
We then use handle '''‘f'''' to set the '''visible''' property of a '''graphic window''' to '''“ON”.'''

Hence, the '''pushbutton''' becomes visible on a '''graphic window''' after it is created.
|-
|
Cursor on '''Scinotes Window,'''

highlight the word '''uicontrol.'''
|
The '''uicontrol function''' is used to create a '''pushbutton''' in a '''graphic window'''.

It sets the property of a '''pushbutton'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight the word '''h1.'''
|
'''‘h1’''' is the handle of the '''pushbutton.'''

The handle is used to change the properties of a '''pushbutton''' after it is created.

It is also used while writing a '''callback function'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight '''f''' inside '''uicontrol''' parentheses.
|
Notice that ‘'''f’''' is passed as a first '''argument''' within the '''uicontrol function'''.

So the '''pushbutton''' we make will appear in the '''graphic window''' whose handle is ''''f''''.
|-
|
Cursor on '''Scinotes Window,'''

highlight '''style''' and '''pushbutton.'''
| The object '''style''' is set to '''pushbutton'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight the word '''Position''' and numbers inside '''square brackets'''.
| '''Position''' and size of a '''pushbutton''' is defined within '''square brackets'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight number '''250.'''
| '''250 units''' is the margin from the left side of the window.
|-
|
Cursor on '''Scinotes Window, '''

highlight number '''200.'''
| '''200 units''' is the margin from the bottom side of the window.
|-
|
Cursor on '''Scinotes Window,'''

highlight number '''100.'''
| '''100 units''' is the width of the '''pushbutton.'''
|-
|
Cursor on '''Scinotes Window,'''

highlight number '''50.'''
| '''50 units''' is the height of the '''pushbutton'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight '''string''' and '''Print.'''
|
The '''string''' denotes the text that appears on top of a '''pushbutton.'''

As we can see, it is set to '''Print'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight '''callback''' and '''callback_print(h1).'''
| Let us set the '''callback''' property to call the '''function callback_print(h1).'''
|-
|
Cursor on '''Scinotes Window, '''

hover over '''style, position, string''' and '''callback.'''
|
Notice the '''arguments style, position, string''' and '''callback'''.

They are basically the '''property''' names.
|-
|
Cursor on '''Scinotes Window,'''

hover cursor over '''pushbutton, square bracket, Print''' and '''callback_print(h1)'''.
|
Notice the '''arguments - pushbutton, square bracket, Print''' and '''callback_print(h1).'''

They represent the respective '''property''' values.
|-
|
Cursor on '''Scinotes Window,'''

highlight the three dots.

Highlight the lines inside '''uicontrol''' parentheses.
|
There are three dots after ''''f'''' and '''property''' values.

They are used to split the multiple '''arguments''' onto separate lines.

The '''arguments''' within the '''parenthesis'''

can also be written on a single line.
|-
|
Cursor on '''Scinotes Window,'''

highlight '''callback_print(h1)''' function definition.

highlight '''h1''' within parentheses
|
Let us look at the definition of '''callback_print(h1) function.'''

Notice that we have passed '''h1''' as an '''argument''' to this '''function'''.
|-
|
Cursor on '''Scinotes Window,'''

highlight the line disp'''(“Hello World”).'''
|
You can see that this '''function''' contains only one '''command.'''

This will display the message “'''Hello World”''' in the '''Scilab''' '''console.'''

The message will be displayed only after we press the '''pushbutton'''.
|-
| Press '''Ctrl+S''' simultaneously.
| Save the file by pressing '''Control''' and ‘'''S'''’ keys simultaneously.
|-
|
In '''Scinotes Window,'''

click on '''Execute''' menu, '''File with echo.'''
|
To '''run''' the file, click on the '''Execute menu''' first.

Then click on '''File with echo''' from the drop-down menu.
|-
|
In '''Graphic Window number 0,'''

highlight the '''Graphic Window number 0''' on the title bar.

Hover cursor over '''Print''' '''pushbutton.'''

click on '''Print.'''
|
A window named '''Graphic Window number 0''' opens.

A '''pushbutton''' named '''Print''' appears'''.'''

Click on '''Print.'''
|-
|
Switch to '''Scilab Console.'''

highlight the message “'''Hello World'''” on '''Scilab console.'''
|
Switch to the '''Scilab console''' to view the output.

The '''console''' shows the message “'''Hello World”'''.

You can see that we got the desired result when we pressed the '''pushbutton'''.
|-
|

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

Let us summarize.
|-
|
Show Slide:

'''Summary'''
|
In this tutorial, we have learnt:

<ul>
<li><blockquote><p>About a '''Graphical User Interface(GUI)''' and its benefits.</p></blockquote></li>
<li><blockquote><p>Created a '''pushbutton.'''</p></blockquote></li>
<li><blockquote><p>Added a '''callback function.'''</p></blockquote></li>
<li><blockquote><p>Created a basic '''GUI''' using '''Scilab.'''</p></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><p>Size, Height: '''200 units''' Width: '''100 units'''.</p></blockquote></li>
<li><blockquote><p>Position: Align it below the '''Print''' '''pushbutton''' with a gap of '''20 units.'''</p></blockquote></li></ol>
|-
|
Show Slide:

Assignment
|
<ol style="list-style-type: decimal;">
<li><blockquote><p>Add a '''String''' named ''''Press here'''' for the '''pushbutton'''.</p></blockquote></li>
<li><blockquote><p>Add a '''callback function''' to display the message ''''Good day!'''' on the '''Scilab console'''.</p></blockquote></li></ol>

<blockquote>Hint: The name of the '''function''' must be different.
</blockquote>
|-
|
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'''
|
The script has been created by '''FOSSEE Team and FOSSEE intern Shwethaa'''.

The video for this tutorial was created by me '''Anandajith''', I am a '''FOSSEE''' intern signing off.

Thanks for watching.
|}