GUI-in-Scilab/C2/Creating-a-GUI-to-print-the-user-input/English
Title of the script: Creating a GUI to Print the User Input
Author: Rashmi Patankar, Amandeepsingh Siddhu
Keywords: Edit box, Text box, .string command, Creating a GUI, Print the User Input, GUI Builder Toolbox, Tag, String, callback function, Pushbutton
| Visual Cue | Narration |
|---|---|
|
Show Slide: Title Slide |
Welcome to the Spoken Tutorial on Creating a GUI to Print User Input in Scilab. |
|
Show Slide: Learning objectives |
In this tutorial, we will learn to:
We’ll also learn about the string command. |
|
Show Slide: System requirement Only narration |
To record this tutorial, I am using:
The process demonstrated in this tutorial is similar in Linux OS also. Annotations are added to the tutorial if there are any differences. |
|
Show Slide: Pre-requisites |
To follow this tutorial:
|
|
Show Slide: Code Files |
|
|
Show Slide: What is an Edit box? |
What is an Edit box? An Edit box is an editable string which takes input from a user. |
|
Show Slide: What is a Text box? |
What is a Text box? A Text box is a non-editable string used to display text or numbers. |
| Cursor on Scilab Console Window. |
Let us switch to the Scilab console window. Notice that I already have the GUI Builder Toolbox loaded in Scilab. |
|
Cursor on Scilab Console Window, type guibuilder, press Enter. |
Now type guibuilder and press Enter. This command opens two windows. |
|
Cursor on GUIBuilder Palette, click on Open. |
On the GUIBuilder Palette, click on Open in the top menubar. |
|
Cursor on Open an existing GUI window, click on Yes. |
A prompt named Open an existing GUI appears. Click on Yes to proceed. |
|
Cursor on uigetfile window, locate printpushbutton.sce. Click on Open. |
This opens another window named uigetfile. Locate the file printpushbutton.sce and click on it. Click on Open. |
|
Cursor on Graphic window number 1. Hover cursor over Print pushbutton. |
Graphic window number 1 opens. It shows the GUI with a pushbutton named Print. |
| Let us add an Edit box and a Text box in this GUI. | |
|
Cursor on GUIBuilder Palette, click on Edit. |
Go to GUI Builder Palette and click on Edit. |
|
Cursor on Scilab Multiple Values Request window, type ed_input, type Enter the input message. Click OK. |
A dialog box named Scilab Multiple Values Request opens. Type ‘ed_input’ as Tag and ‘Enter the input message’ as String. Then click on the OK button. |
|
Cursor on Graphic Window number 1, place the Edit box in the top left side. Hover cursor over an Edit Box. |
Switch to Graphic Window number 1. Place the Edit box above the Print pushbutton. An Edit box with the string “Enter the input message” appears. |
|
Cursor on GUIBuilder Palette , click on Text. |
Now, let us take a Text box. On GUI Builder Palette, click on Text. |
|
Cursor on Scilab Multiple Values Request window, type txt_output. Click on OK. |
Type txt_output for Tag field. Do not type anything in the String field. We will not display any messages until we receive an input from the user. Click on the OK button. |
|
Cursor on Graphic Window number 1, place the Text box in the bottom center. |
We’ll place this just below the Print pushbutton in the Graphic window. Click and place the Text box below the Print pushbutton. A Text box with the string “UnName3” appears. |
| Cursor on Text Box. |
A default string value “UnName3” is assigned to the Text box. This is because the String field was kept empty. |
| Cursor on the interface. |
Now the GUI part is completed. Let us proceed to generate an equivalent Scilab code. |
|
Cursor on GUI Builder Palette window. Click on Generate, and then click on Generate GUI code. |
Go to the GUIBuilder Palette. Click on Generate on the top menubar and then on the Generate GUI code. |
|
Cursor on uiputfile window, click on Save. Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on Ok button.” |
We will save this file as printuserinput. Click on the Save button. |
|
Cursor on GUI Created window, click on OK. |
It shows a dialog box that displays GUI created successfully! Click on OK. |
| Cursor on SciNotes window, | The corresponding sce file is generated. |
|
highlight line with handles.ed_input. Highlight the part inside the uicontrol parentheses. |
Notice the handle for the Edit box is handles.ed_input. The properties of the Edit box are defined in its respective uicontrol function. |
|
Highlight handles.txt_output. Highlight the part inside the uicontrol parentheses. |
The handle for the Text box is handles.txt_output. Its properties are defined within its respective uicontrol function. |
|
Scroll down to the end. Place the cursor within the h1_callback function. |
Now, scroll down to the end of the code file. Let us make the pushbutton interactive. For that, we will write the code within the h1_callback function. |
|
Cursor on SciNotes window, within h1_callback, type, ip = handles.ed_input.string Press Enter. handles.txt_output.string = string(ip) |
Type the code as seen here with the same syntax. |
|
Highlight, ip = handles.ed_input.string |
The first line will assign the user input from an Edit box to the variable ip. |
|
Highlight, handles.txt_output.string = string(ip) |
The next line will pass the value of variable ip to a Text box. |
| Highlight .string after Edit and Text box handle. |
GUI supports string format while taking and passing the values. Hence, I have added it after the Edit and Text box handle. |
| Highlight string(ip). |
Notice the variable ‘ip’ while passing the value back to the Text box handle. It is put within the parentheses of the string command. |
| Press CTRL + S. | Let us save the file by pressing Control and S key together. |
|
Cursor on Scinotes window, Click on Execute, and then click on File with echo. |
To execute, click on Execute on the top menubar and then on file with echo. |
| Cursor on Graphic Window number 2. |
A window named Graphic window number 2 opens. This shows the GUI which we just created with the pushbutton. Let us now test the GUI. |
|
Delete Enter the input message. Type Welcome to Scilab! |
Delete the string “Enter the input message” from the Edit box. Then type “Welcome to Scilab!” |
|
Cursor on Graphic Window number 2. Click on Print pushbutton. Hover cursor over “Welcome to Scilab!” |
Click once on the Print pushbutton. The Text box displays the string “Welcome to Scilab!” |
|
Cursor on Graphic Window number 2. Delete Welcome to Scilab! Type 258. |
Let us test this using numbers now. Delete the string “Welcome to Scilab!” from the Edit box and type 258. |
|
Cursor on Graphic Window number 2. Click on Print Pushbutton. Hover cursor over number 258. |
Click on the Print pushbutton. The Text box shows the number 258 which we typed just now. Likewise, you can try some more inputs for your own understanding. |
|
Show Slide: Summary |
This brings us to the end of this tutorial. Let us summarize. In this tutorial, we have:
|
|
Show Slide: Assignment |
As an assignment, please do the following.
|
|
Show Slide: Assignment |
|
|
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 |
The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
| Show Slide: Answers for THIS Spoken Tutorial | Please post your timed queries in this forum. |
|
Show Slide: FOSSEE Forum |
For any general or technical questions on Scilab, visit the FOSSEE forum and post your question. |
|
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: Acknowledgment |
Spoken Tutorial project is funded by the Ministry of Education, Government of India. |
|
Show Slide: Thank you |
This is Amandeepsingh Siddhu, a FOSSEE intern 2021, IIT Bombay signing off. Thanks for joining. |
