View source for 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:
|-
|
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'''



https://spoken-tutorial.org
| To follow this tutorial:
|-
|
Show Slide: 

'''Code Files '''
|
|-
| 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,
|-
| 
| 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
|-
|
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'''.
|
The '''objects''' are now arranged such that they are equally spaced. 



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. &lt;&lt;PAUSE&gt;&gt;
|-
| 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
|-
|
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:
|-
|
Show Slide:

'''Assignment'''
|
As an assignment, please do the following modifications to the current '''GUI'''.
|-
|
Show Slide:

'''Assignment'''
|
Rearrange the '''objects''' as follows: 



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