Difference between revisions of "GUI-in-Scilab/C2/Creating-a-basic-GUI-using-Scilab/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 7: Line 7:
 
! '''Narration'''
 
! '''Narration'''
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
'''Title Slide'''
 
'''Title Slide'''
 
| Welcome to the Spoken Tutorial on “Creating a basic '''GUI''' using Scilab”.
 
| Welcome to the Spoken Tutorial on “Creating a basic '''GUI''' using Scilab”.
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
'''Learning objectives'''
 
'''Learning objectives'''
|
+
|In this tutorial, we will learn:
In this tutorial, we will learn:
+
  
 
<ul>
 
<ul>
Line 47: Line 44:
 
Annotations are added to the tutorial if there are any differences.
 
Annotations are added to the tutorial if there are any differences.
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
Line 60: Line 56:
 
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
 
<li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul>
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
Code Files
 
Code Files
Line 70: Line 65:
 
<li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul>
 
<li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul>
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
What is a '''Graphical User Interface'''?
 
What is a '''Graphical User Interface'''?
Line 81: Line 75:
 
<li><blockquote><p>Users can create and arrange objects in a graphical window.</p></blockquote></li></ul>
 
<li><blockquote><p>Users can create and arrange objects in a graphical window.</p></blockquote></li></ul>
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
What is a '''Graphical User Interface'''?
 
What is a '''Graphical User Interface'''?
Line 91: Line 84:
 
<li><blockquote><p>'''GUI'''s can also create and display data in a tabular form or as a plot.</p></blockquote></li></ul>
 
<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:
Show Slide:
+
  
 
'''What is a pushbutton?'''
 
'''What is a pushbutton?'''
 
| A '''pushbutton''' is a rectangular button used to run a '''callback.'''
 
| A '''pushbutton''' is a rectangular button used to run a '''callback.'''
 
|-
 
|-
|
+
|Show Slide:
Show Slide:
+
  
 
'''What is a callback?'''
 
'''What is a callback?'''
Line 187: Line 178:
 
The '''uicontrol function''' is used to create a '''pushbutton''' in a '''graphic window'''.
 
The '''uicontrol function''' is used to create a '''pushbutton''' in a '''graphic window'''.
  
It sets the properties of a '''pushbutton'''.
+
It sets the property of a '''pushbutton'''.
 
|-
 
|-
 
|
 
|
Line 231: Line 222:
  
 
highlight number '''200.'''
 
highlight number '''200.'''
| '''200 units''' is the margin from the top side of the window.
+
| '''200 units''' is the margin from the bottom side of the window.
 
|-
 
|-
 
|
 
|
Line 355: Line 346:
 
|
 
|
  
| This brings us to the end of this tutorial'''.''' Let us summarize.
+
| This brings us to the end of this tutorial'''.
 +
 
 +
Let us summarize.
 
|-
 
|-
 
|
 
|

Latest revision as of 15:29, 13 July 2023

Title of the script: Creating a basic GUI using Scilab

Author: Rashmi Patankar, Shwethaa R

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:
  • About Graphical User Interface(GUI) and its benefits.

  • Create a pushbutton.

  • Add a callback function and

  • Create a basic GUI using Scilab.

Show Slide:

System requirement

To record this tutorial, I am using

  • Windows 10 OS and

  • Scilab 6.1.0

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

  • The learner must have basic knowledge of Scilab.

  • 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 a Graphical User Interface?

The Graphical User Interface(GUI) is:

  • A graphical display that allows the user to do interactive tasks using objects.

  • Users can create and arrange objects in a graphical window.

Show Slide:

What is a Graphical User Interface?

  • The object style includes edit, slider, pushbutton, etc.

  • We use their callbacks to make them interactive.

  • GUIs can also create and display data in a tabular form or as a plot.

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,

  • When the pushbutton is pressed, the code written in the callback is executed.

  • As a result, the pushbutton becomes interactive.

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

It opens the Scinotes window.

Click on File on the menubar and then on Open.

On Open Window,

go to Downloads folder >> Click on basicgui.sce file >> 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:

  • About a Graphical User Interface(GUI) and its benefits.

  • Created a pushbutton.

  • Added a callback function.

  • Created a basic GUI using Scilab.

Show Slide:

Assignment

As an assignment, please do the following.

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

  1. Size, Height: 200 units Width: 100 units.

  2. Position: Align it below the Print pushbutton with a gap of 20 units.

Show Slide:

Assignment

  1. Add a String named 'Press here' for the pushbutton.

  2. Add a callback function to display the message 'Good day!' on the Scilab console.

Hint: The name of the function must be different.

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.

Contributors and Content Editors

Anandajitht, Madhurig