GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English

Title of the script: Object properties and alignment in GUI

Author: Rashmi Patankar, Amandeepsingh Siddhu

Keywords: Properties of an object, size of an object, alignment of objects, delete an object, objects of same size, objects equally spaced.

Visual Cue	Narration
Show Slide: Title Slide	Welcome to the Spoken Tutorial on Object properties and alignment in GUI in Scilab.
Show Slide: Learning objectives	In this tutorial, we will learn to: Change the properties of an object. Change the size of an object and Change the alignment of objects in the GUI window.
Show Slide: System requirement Only narration	To record this tutorial, I am using: Windows 10 OS Scilab 6.1.0 GUI Builder Toolbox 4.2.1 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 https://spoken-tutorial.org	To follow this tutorial: The learner must have basic knowledge of Scilab and Graphical User Interface. 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.
Cursor on GUIBuilder Palette window.	I have opened the GUIBuilder toolbox in my system. Please do so in your system, also.
Cursor on GUIBuilder Palette window, click on Open.	On the GUIBuilder Palette window, click on Open in the top menubar.
Cursor on Open an existing GUI window, click on Yes.	It shows a dialog box that displays Open an existing GUI. Click on Yes.
Open the file named printuserinput.sce	Locate the folder where printuserinput.sce file is saved and open it.
Cursor on Graphic window number 1 window, hover cursor over the three objects.	Notice the Graphic window number 1. It opens the GUI which has, An Edit box with the string “Enter the input message”, A Pushbutton with the string “Print”, and A Text box with the string “UnName3”.
	Now let us see how to change some of the object properties of the Text box.
Cursor on the GUIBuilder Palette window, hover over the right panel.	For this, go to the GUIBuilder Palette. Notice the right side panel. It shows a list of Tag names for the objects on the Graphic window.
Cursor on the GUIBuilder Palette window, click on txt_output.	Click on txt_output.
Cursor on Graphic window number 1 window, hover over the Text box.	Notice the Text box in the Graphic window. It has a red border indicating that it is selected.
Cursor on the GUIBuilder Palette window, Click on ObjectProperties.	Then click on ObjectProperties at the bottom right of the GUIBuilder Palette window.
Cursor on the Scilab Multiple Values Request window.	A Scilab Multiple Values Request window opens. We see that the object properties are displayed on the left side. Respective property values are seen on the right side with some default values. These values are assigned to the properties that are not predefined. However, not all of the properties apply to all the objects.
Show Slide: help uicontrol_properties help uicontrol_properties	To learn more about it, users need to type a command in the Scilab Console. Type help space uicontrol underscore properties to see the detailed help.
Cursor on the Scilab Multiple Values Request window.	Let us now change the properties that are applicable to the Text box.
Cursor on the Scilab Multiple Values Request window, as per narration.	First we’ll change the Background color of the Text box. We see a vector with the default values [-1,-1,-1]. They specify Red, Green, Blue color values respectively. Selecting the values between 0 and 1, will change the color. Let’s change it to [0.5,0.6,0.7].
Cursor on the Scilab Multiple Values Request window, as per narration. Type italic.	Next, we will change the Font angle. We see normal as the default value. We will change it to italic. This property will set the slant of the font.
Cursor on the Scilab Multiple ValuesRequest window, as per narration. Type 25.	We see [12] as the default FontSize value. We will change it to [25].
Cursor on the Scilab Multiple ValuesRequest window, as per narration. Type bold.	Next, the default FontWeight value is set as normal. Let’s change it to bold. This will make the string value bold.
Cursor on the Scilab Multiple ValuesRequest window, as per narration.	Set the ForegroundColor default value [-1,-1,-1] to [0.7,0.8,0.9]. The color of the string value will change as a result of this.
Cursor on the Scilab Multiple Values Request window, as per narration. Type center.	Let us now change the alignment of the string value. We see left as the default HorizontalAlignment. Let’s change this to center.
Cursor on the Scilab Multiple Values Request window, as per narration.	Lastly, we will change the String property. The default value is UnName3. This property represents the text appearing on an object.
Cursor on the Scilab Multiple Values Request window, delete UnName3. Click on OK.	Delete UnName3, and we'll keep it empty. We have now changed enough properties of the Text box. Explore the remaining properties later on your own, for better understanding. Click on Ok.
	Now let us change the location of the Text box.
Cursor on GUIBuilder Palette window.	We will return to the GUIBuilder Palette window and click on txt_output once.
Cursor on GUIBuilder Palette window.	We see the four direction buttons in the right panel, namely Up, Down, Right, and Left. I will click once on the Left button.
Cursor on Graphic Window number 1.	Notice that the Text box has moved slightly to the left. It can be shifted to any side by using the respective direction buttons.
Cursor on GUIBuilder Palette window, hover cursor on Move button.	Another way to move the Text box is by using the Move button. It is located below the direction buttons.
Cursor on GUIBuilder Palette window, click on txt_output. click on Move.	Make sure that the txt_output is still selected. Then click on Move.
Cursor on Graphic Window number 1, move the cursor across the window.	Now move the cursor across the Graphic window. A box with a black border and the same size as the Text box appears. Notice that it appears wherever the cursor is moved.
Cursor on Graphic Window number 1, click in the bottom left side of the window.	Let us place the Text box in the bottom left side by clicking on the window. This is how we can move the Text box with the help of the Move button.
Cursor on Graphic Window number 1, hover cursor on Text box.	Next, let us change the height and width of the Text box. Make sure the Text box still has a red border indicating it’s selected.
Cursor on GUIBuilder Palette window, click on W+, W- buttons.	I will now click on W+ (W plus) button. Notice that this action increases the width of the Text box. Similarly, clicking W- (W minus) will decrease its width.
Cursor on GUIBuilder Palette window, click on H+, H- buttons.	Let us now increase the height of the Text box by clicking the H+ (H plus) button. Likewise, we can use the H- (H minus) button to decrease its height.
Cursor on GUIBuilder Palette window,	Below this, we have a Delete button. This is used to delete the selected object from the Graphic Window.
Cursor on GUIBuilder Palette window, hover over the Alignments button present in the right panel.	Next, let us learn how to use the Alignments button.
Cursor on GUIBuilder Palette window, press and Hold Ctrl, and click on the Tag value of each object in the right panel.	Press and hold the Ctrl key on your keyboard. Click on the Tag value of each object in the right panel.
Cursor on Graphic Window number 1.	All selected objects now have a red border indicating they are selected.
Cursor on GUIBuilder Palette window, click on Alignments.	On the bottom right of the GUIBuilder Palette window, click the Alignments button.
Cursor on GUI Alignment window, hover cursor over the three Alignment sections.	A GUI Alignment window pops up. This has Vertical Alignment buttons on the left panel and Horizontal Alignment buttons on the bottom panel. The buttons for changing the size are on the right panel.
Cursor on GUI Alignments window, click on the Same Width and Same Height button.	Click once on the Same Width and Same Height buttons.
Cursor on Graphic Window number 1.	Notice the selected objects in the Graphic window. They now have the same width and height. We can see that the objects are currently placed one below the other.
Cursor on GUI Alignments window.	So, we will use the buttons under Vertical Alignment heading.
Cursor on GUI Alignments window, click on Equally Spaced.	Click once on the Equally Spaced button.
Cursor on Graphic Window number 1.	Now, let us arrange all the objects to the center of the window.
Cursor on GUI Alignments window.	To do so, we will use the buttons under Horizontal Alignment heading.
Cursor on GUI Alignments window, click on Center.	Click once on the Center button.
Cursor on Graphic Window number 1.	The objects are now arranged in the center.
	Learners may pause this video and explore all these options further for better understanding.
Cursor on GUI Alignments window.	Close the GUI Alignments window.
	Let us test our GUI now.
Cursor on GUI Builder Palette window, click on Generate, and click on Generate GUI code.	Go to the GUI Builder Palette window. Click on Generate given on the top menubar and then on Generate GUI code.
Cursor on uiputfile window, click on printuserinput.sce Click on Save. Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.”	The uiputfile window will pop up. I will select the file printuserinput.sce that was previously saved. Click on the Save button.
Cursor on File already exists window, click on Yes.	On the File already exists window, click on Yes.
Cursor on GUI Created Window, click on OK.	It shows a dialog box that displays the message “GUI created successfully!” Click on OK.
Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.”	If the Replace File? window pops up, then click on Reload.
Close Graphic Window number 1.	Close the Graphic Window number 1.
Cursor on GUIBuilder Palette window.	Minimize the GUIBuilder Palette window.
Cursor on SciNotes window.	The corresponding updated sce file is displayed. <<PAUSE>>
Cursor on SciNotes window.	There is another way to change the object properties using the sce file. We know that each object has its unique handle and uicontrol function. So, the properties can be changed by modifying the object's uicontrol function.
Cursor on SciNotes window, within h1 uicontrol function, Highlight, ‘Fontsize’ ,[12]. Change FontSize 12 to 20.	By using this method, let us change the Fontsize of a pushbutton. I'll make changes in uicontrol parentheses of h1 which is a pushbutton's handle. Change the FontSize 12 to 20.
Cursor on Scinotes window, click on Execute, and then click on File with echo	Now let us execute the code. Click on Execute on the top menubar and then on File with echo.
Cursor on Graphic Window number 1, replace the String on Edit box with Hello.	A window named Graphic window number 1 opens. Let us test the GUI. Replace the String on the Edit box with “Hello”.
Cursor on Graphic Window number 1, click on the Print Pushbutton.	Click once on the Print Pushbutton. The message “Hello” appears in the Text box.
Cursor on Graphic Window number 1, hover cursor on the Text box.	Notice that the String value in the Text box is now Aligned to the center, The font is bigger, italic and bold, and The Background color and the Foreground color have changed.
Cursor on Graphic Window number 1, hover cursor on the Print Pushbutton.	The string “Print” on the pushbutton now has a larger font size.
Show Slide: Summary	This brings us to the end of this tutorial. Let us summarize. In this tutorial, we have: Changed the properties of an object. Changed the size of an object and Changed the alignment of objects in the GUI window.
Show Slide: Assignment	As an assignment, please do the following modifications to the current GUI. Change the Background color of the Edit box to [1,0,0]. Observe the color. Change the FontSize to 18 units for the Edit box.
Show Slide: Assignment	Rearrange the objects as follows: Edit box to the left of Print Pushbutton. Text box to the right of Print Pushbutton. Now, place the objects with equal spacing.
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.

Contributors and Content Editors

Amandeeps, PoojaMoolya