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

Outline:

1. Learn about GUI and its benefits,

2. What are objects,

3. What is a pushbutton,

4. What is a callback function,

5. Use of a graphic window,

6. About figure function,

7. About uicontrol function,

8. About object properties,

9. Position the pushbutton in the GUI,

10. Add a callback function.

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. Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.”	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 properties 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 top 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, Size, Height: 200 units Width: 100 units. Position: Align it below the Print pushbutton with a gap of 20 units.
Show Slide: Assignment	Add a String named 'Press here' for the pushbutton. 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