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

Title Slide

Learning objectives

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

Pre-requisites

https://www.spoken-tutorial.org

• The learner must have basic knowledge of Scilab.

• For pre-requisite Scilab tutorials please visit this website.

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.

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.

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.

What is a pushbutton?

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.

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

Cursor on Scinotes Window,

highlight the word Position and numbers inside square brackets.

Cursor on Scinotes Window,

highlight number 250.

Cursor on Scinotes Window,

highlight number 200.

Cursor on Scinotes Window,

highlight number 100.

Cursor on Scinotes Window,

highlight number 50.

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

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.

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.

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

Show Slide:

Textbook Companion project

The FOSSEE team coordinates the TBC project.

For more details, please visit this site.

The FOSSEE team coordinates the Lab Migration project.

For more details, please visit this site.

Show Slide:

Acknowledgements

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.