Difference between revisions of "GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English"
(Created page with "'''Title of the script: ''' '''Object''' properties and alignment in '''GUI''' '''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' '''Keywords: '''Properties of an '''obj...") |
PoojaMoolya (Talk | contribs) |
||
| (3 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | '''Title of the script: ''' '''Object''' properties and alignment in '''GUI''' | + | '''Title of the script:''' '''Object''' properties and alignment in '''GUI''' |
'''Author: Rashmi Patankar, Amandeepsingh Siddhu ''' | '''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. | ||
| − | + | {| border=1 | |
| − | + | ! '''Visual Cue''' | |
| − | + | ! '''Narration''' | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | {| | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| | | | ||
| Line 42: | Line 20: | ||
'''Learning objectives''' | '''Learning objectives''' | ||
| − | | In this tutorial, we will learn to: | + | | |
| + | In this tutorial, we will learn to: | ||
| + | |||
| + | <ul> | ||
| + | <li><blockquote><p>Change the properties of an '''object'''.</p></blockquote></li> | ||
| + | <li><blockquote><p>Change the size of an '''object''' and</p></blockquote></li> | ||
| + | <li><blockquote><p>Change the alignment of '''objects''' in the '''GUI window'''.</p></blockquote></li></ul> | ||
|- | |- | ||
| | | | ||
| Line 48: | Line 32: | ||
'''System requirement''' | '''System requirement''' | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
'''Only narration''' | '''Only narration''' | ||
| Line 67: | Line 37: | ||
To record this tutorial, I am using: | To record this tutorial, I am using: | ||
| + | <ul> | ||
| + | <li><blockquote><p>'''Windows 10''' '''OS'''</p></blockquote></li> | ||
| + | <li><blockquote><p>'''Scilab 6.1.0'''</p></blockquote></li> | ||
| + | <li><blockquote><p>'''GUI Builder Toolbox 4.2.1'''</p></blockquote></li></ul> | ||
| − | + | The process demonstrated in this tutorial is similar in '''Linux OS''' also. | |
| − | + | ||
| − | + | ||
| − | The process demonstrated in this tutorial is similar in '''Linux OS '''also. | + | |
| − | + | ||
| − | + | ||
Annotations are added to the tutorial if there are any differences. | Annotations are added to the tutorial if there are any differences. | ||
| Line 82: | Line 51: | ||
'''Pre-requisites''' | '''Pre-requisites''' | ||
| + | https://spoken-tutorial.org | ||
| + | | | ||
| + | To follow this tutorial: | ||
| − | + | <ul> | |
| − | + | <li><blockquote><p>The learner must have basic knowledge of '''Scilab''' and '''Graphical User Interface.'''</p></blockquote></li> | |
| − | + | <li><blockquote><p>For pre-requisite '''Scilab''' tutorials please visit this website.</p></blockquote></li></ul> | |
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''Code Files ''' | '''Code Files ''' | ||
| | | | ||
| + | <ul> | ||
| + | <li><blockquote><p>The files used in this tutorial are provided in the '''Code files''' link.</p></blockquote></li> | ||
| + | <li><blockquote><p>Please download and extract the files.</p></blockquote></li> | ||
| + | <li><blockquote><p>Make a copy and then use them while practising.</p></blockquote></li></ul> | ||
|- | |- | ||
| Cursor on '''GUIBuilder Palette''' window'''.''' | | Cursor on '''GUIBuilder Palette''' window'''.''' | ||
| | | | ||
I have opened the '''GUIBuilder toolbox''' in my system. | I have opened the '''GUIBuilder toolbox''' in my system. | ||
| − | |||
| − | |||
Please do so in your system, also. | Please do so in your system, also. | ||
|- | |- | ||
| | | | ||
| − | Cursor on '''GUIBuilder Palette''' window, | + | Cursor on '''GUIBuilder Palette''' window, |
click on '''Open.''' | click on '''Open.''' | ||
| − | | On the '''GUIBuilder Palette window, '''click on '''Open '''in the top '''menubar'''. | + | | On the '''GUIBuilder Palette window,''' click on '''Open''' in the top '''menubar'''. |
|- | |- | ||
| | | | ||
| − | Cursor on '''Open an existing GUI '''window, | + | Cursor on '''Open an existing GUI''' window, |
| − | + | ||
| − | + | ||
click on '''Yes.''' | click on '''Yes.''' | ||
| | | | ||
| − | It shows a '''dialog '''box | + | It shows a '''dialog''' box that displays '''Open an existing GUI.''' |
| − | + | ||
| − | + | ||
Click on '''Yes.''' | Click on '''Yes.''' | ||
|- | |- | ||
| Open the file named '''printuserinput.sce''' | | Open the file named '''printuserinput.sce''' | ||
| − | | Locate the folder where '''printuserinput.sce '''file is saved and open it. | + | | Locate the folder where '''printuserinput.sce''' file is saved and open it. |
|- | |- | ||
| | | | ||
| − | Cursor on''' Graphic window number 1 '''window, | + | Cursor on '''Graphic window number 1''' window, |
hover cursor over the three '''objects'''. | hover cursor over the three '''objects'''. | ||
| Line 130: | Line 100: | ||
Notice the '''Graphic window number 1.''' | Notice the '''Graphic window number 1.''' | ||
| + | It opens the '''GUI''' which has, | ||
| − | + | <ul> | |
| − | + | <li><blockquote><p>An '''Edit''' box with the '''string “Enter the input message”,'''</p></blockquote></li> | |
| + | <li><blockquote><p>A '''Pushbutton''' with the '''string “Print”''', and</p></blockquote></li> | ||
| + | <li><blockquote><p>A '''Text''' box with the '''string “UnName3”'''.</p></blockquote></li></ul> | ||
|- | |- | ||
| − | | | + | | |
| − | | Now let us see how to change some of the '''object''' properties of the '''Text '''box'''.''' | + | |
| + | | Now let us see how to change some of the '''object''' properties of the '''Text''' box'''.''' | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''GUIBuilder Palette '''window, | + | Cursor on the '''GUIBuilder Palette''' window, |
hover over the right panel. | hover over the right panel. | ||
| | | | ||
For this, go to the '''GUIBuilder Palette.''' | For this, go to the '''GUIBuilder Palette.''' | ||
| − | |||
| − | |||
Notice the right side panel. | Notice the right side panel. | ||
| − | |||
| − | |||
It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''. | It shows a list of '''Tag''' names for the '''objects''' on the '''Graphic window'''. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''GUIBuilder Palette '''window, | + | Cursor on the '''GUIBuilder Palette''' window, |
| − | click on '''txt_output. ''' | + | click on '''txt_output.''' |
| − | | | + | | Click on '''txt_output'''. |
| − | Click on '''txt_output'''. | + | |
|- | |- | ||
| | | | ||
| − | Cursor on''' Graphic window number 1 '''window, | + | Cursor on '''Graphic window number 1''' window, |
hover over the '''Text''' box. | hover over the '''Text''' box. | ||
| | | | ||
Notice the '''Text''' box in the '''Graphic window'''. | Notice the '''Text''' box in the '''Graphic window'''. | ||
| − | |||
| − | |||
It has a red border indicating that it is selected. | It has a red border indicating that it is selected. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''GUIBuilder Palette '''window, | + | Cursor on the '''GUIBuilder Palette''' window, |
Click on '''ObjectProperties.''' | Click on '''ObjectProperties.''' | ||
| − | | Then click on '''ObjectProperties '''at the bottom right of the '''GUIBuilder Palette '''window'''.''' | + | | 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. | |
| − | + | ||
| − | A '''Scilab Multiple Values Request '''window opens. | + | |
| − | + | ||
| − | + | ||
We see that the '''object''' properties are displayed on the left side. | 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. | Respective property values are seen on the right side with some default values. | ||
| − | |||
| − | |||
These values are assigned to the properties that are not predefined. | These values are assigned to the properties that are not predefined. | ||
| − | |||
| − | |||
However, not all of the properties apply to all the '''objects'''. | However, not all of the properties apply to all the '''objects'''. | ||
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''help uicontrol_properties''' | '''help uicontrol_properties''' | ||
| − | |||
| − | |||
'''help uicontrol_properties''' | '''help uicontrol_properties''' | ||
| | | | ||
| − | To learn more about it, users need to type | + | 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. | + | Type '''help space uicontrol underscore properties''' to see the detailed help. |
|- | |- | ||
| − | | Cursor on the '''Scilab Multiple Values Request '''window. | + | | Cursor on the '''Scilab Multiple Values Request''' window. |
| Let us now change the properties that are applicable to the '''Text''' box. | | Let us now change the properties that are applicable to the '''Text''' box. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple Values Request '''window, | + | Cursor on the '''Scilab Multiple Values Request''' window, |
as per narration. | as per narration. | ||
| | | | ||
| − | First we’ll change the '''Background '''color of the '''Text '''box. | + | First we’ll change the '''Background''' color of the '''Text''' box. |
| − | + | ||
| − | + | ||
We see a vector with the default values [-1,-1,-1]. | We see a vector with the default values [-1,-1,-1]. | ||
| − | + | They specify '''Red, Green, Blue''' color values respectively. | |
| − | + | ||
| − | They specify''' Red, Green, Blue''' color values respectively. | + | |
| − | + | ||
| − | + | ||
Selecting the values between 0 and 1, will change the color. | Selecting the values between 0 and 1, will change the color. | ||
| − | |||
| − | |||
Let’s change it to [0.5,0.6,0.7]. | Let’s change it to [0.5,0.6,0.7]. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple Values Request '''window, | + | Cursor on the '''Scilab Multiple Values Request''' window, |
as per narration. | as per narration. | ||
| − | |||
| − | |||
Type '''italic.''' | Type '''italic.''' | ||
| Line 249: | Line 193: | ||
Next, we will change the '''Font angle.''' | Next, we will change the '''Font angle.''' | ||
| − | + | We see '''normal''' as the default value'''.''' | |
| − | + | ||
| − | We see '''normal '''as the default value'''.''' | + | |
| − | + | ||
| − | + | ||
We will change it to '''italic.''' | We will change it to '''italic.''' | ||
| − | |||
| − | |||
This property will set the slant of the '''font'''. | This property will set the slant of the '''font'''. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple ValuesRequest '''window, | + | Cursor on the '''Scilab Multiple ValuesRequest''' window, |
as per narration. | as per narration. | ||
| Line 268: | Line 206: | ||
Type '''25.''' | Type '''25.''' | ||
| | | | ||
| − | We see '''[12]''' as the default '''FontSize '''value'''.''' | + | We see '''[12]''' as the default '''FontSize''' value'''.''' |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
We will change it to '''[25].''' | We will change it to '''[25].''' | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple ValuesRequest '''window, | + | Cursor on the '''Scilab Multiple ValuesRequest''' window, |
as per narration. | as per narration. | ||
| Line 283: | Line 217: | ||
Type '''bold.''' | Type '''bold.''' | ||
| | | | ||
| − | Next, the default '''FontWeight '''value is set as '''normal.''' | + | Next, the default '''FontWeight''' value is set as '''normal.''' |
| − | + | ||
| − | + | ||
Let’s change it to '''bold.''' | Let’s change it to '''bold.''' | ||
| − | |||
| − | |||
This will make the '''string''' value '''bold.''' | This will make the '''string''' value '''bold.''' | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple ValuesRequest '''window, | + | Cursor on the '''Scilab Multiple ValuesRequest''' window, |
as per narration. | as per narration. | ||
| | | | ||
| − | Set the '''ForegroundColor '''default value | + | 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. | The color of the '''string''' value will change as a result of this. | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple Values Request '''window, as per narration. | + | Cursor on the '''Scilab Multiple Values Request''' window, as per narration. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Type '''center.''' | Type '''center.''' | ||
| | | | ||
| − | Let us now change the alignment of the '''string''' value. | + | Let us now change the alignment of the '''string''' value. |
| − | + | ||
| − | + | ||
We see '''left''' as the default '''HorizontalAlignment.''' | We see '''left''' as the default '''HorizontalAlignment.''' | ||
| − | |||
| − | |||
Let’s change this to '''center.''' | Let’s change this to '''center.''' | ||
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple Values Request '''window, | + | Cursor on the '''Scilab Multiple Values Request''' window, |
as per narration. | as per narration. | ||
| | | | ||
| − | Lastly, we will change the '''String''' property. | + | Lastly, we will change the '''String''' property. |
| + | The default value is '''UnName3'''. | ||
| − | + | This property represents the text appearing on an '''object'''. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | This property represents the text appearing on an''' object'''. | + | |
|- | |- | ||
| | | | ||
| − | Cursor on the '''Scilab Multiple Values Request '''window, | + | Cursor on the '''Scilab Multiple Values Request''' window, |
delete '''UnName3.''' | delete '''UnName3.''' | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Click on '''OK.''' | Click on '''OK.''' | ||
| Line 359: | Line 263: | ||
Delete '''UnName3''', and we'll keep it empty. | Delete '''UnName3''', and we'll keep it empty. | ||
| − | + | We have now changed enough properties of the '''Text''' box. | |
| − | + | ||
| − | We have now changed enough properties of the '''Text''' box. | + | |
| − | + | ||
| − | + | ||
Explore the remaining properties later on your own, for better understanding. | Explore the remaining properties later on your own, for better understanding. | ||
| − | |||
| − | |||
Click on '''Ok'''. | Click on '''Ok'''. | ||
|- | |- | ||
| − | | | + | | |
| − | | Now let us change the location of the '''Text '''box'''.''' | + | |
| + | | Now let us change the location of the '''Text''' box'''.''' | ||
|- | |- | ||
| − | | Cursor on''' GUIBuilder Palette '''window. | + | | Cursor on '''GUIBuilder Palette''' window. |
| − | | We will return to the '''GUIBuilder Palette '''window and click on '''txt_output '''once. | + | | We will return to the '''GUIBuilder Palette''' window and click on '''txt_output''' once. |
|- | |- | ||
| − | | Cursor on''' GUIBuilder Palette '''window. | + | | Cursor on '''GUIBuilder Palette''' window. |
| | | | ||
We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''. | We see the four direction buttons in the right panel, namely '''Up, Down, Right,''' and '''Left'''. | ||
| − | |||
| − | |||
I will click once on the '''Left''' button. | I will click once on the '''Left''' button. | ||
| Line 387: | Line 284: | ||
| Cursor on '''Graphic Window number 1'''. | | Cursor on '''Graphic Window number 1'''. | ||
| | | | ||
| − | Notice that the '''Text '''box has moved slightly to the left. | + | Notice that the '''Text''' box has moved slightly to the left. |
| − | + | ||
| − | + | ||
It can be shifted to any side by using the respective direction buttons. | It can be shifted to any side by using the respective direction buttons. | ||
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
| − | + | ||
| − | + | ||
| − | hover cursor on '''Move '''button'''.''' | + | hover cursor on '''Move''' button'''.''' |
| | | | ||
| − | Another way to move the '''Text '''box is by using the '''Move '''button'''.''' | + | Another way to move the '''Text''' box is by using the '''Move''' button'''.''' |
| − | + | It is located below the direction buttons'''.''' | |
| − | + | ||
| − | It is | + | |
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
click on '''txt_output.''' | click on '''txt_output.''' | ||
| Line 413: | Line 304: | ||
click on '''Move.''' | click on '''Move.''' | ||
| | | | ||
| − | Make sure that the '''txt_output '''is still selected'''.''' | + | Make sure that the '''txt_output''' is still selected'''.''' |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Then click on '''Move'''. | Then click on '''Move'''. | ||
|- | |- | ||
| | | | ||
| − | Cursor on '''Graphic Window number 1''', | + | Cursor on '''Graphic Window number 1''', |
| − | move | + | move the cursor across the window'''.''' |
| | | | ||
Now move the cursor across the '''Graphic window'''. | Now move the cursor across the '''Graphic window'''. | ||
| − | |||
| − | |||
A box with a black border and the same size as the '''Text''' box appears. | A box with a black border and the same size as the '''Text''' box appears. | ||
| − | |||
| − | |||
Notice that it appears wherever the cursor is moved. | Notice that it appears wherever the cursor is moved. | ||
| Line 442: | Line 325: | ||
| | | | ||
Let us place the '''Text''' box in the bottom left side by clicking on 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. | This is how we can move the '''Text''' box with the help of the '''Move''' button. | ||
|- | |- | ||
| | | | ||
| − | Cursor on''' Graphic Window number 1''', | + | Cursor on '''Graphic Window number 1''', |
| − | + | ||
| − | + | ||
hover cursor on '''Text''' box. | hover cursor on '''Text''' box. | ||
| | | | ||
| − | Next, let us change the height and width of the '''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. | + | Make sure the '''Text''' box still has a red border indicating it’s selected. |
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
| − | click on '''W+, W- '''buttons'''.''' | + | click on '''W+, W-''' buttons'''.''' |
| | | | ||
| − | I will now click on '''W+ (W plus) '''button'''.''' | + | I will now click on '''W+ (W plus)''' button'''.''' |
| − | + | ||
| − | + | ||
Notice that this action increases the width of the '''Text''' box. | Notice that this action increases the width of the '''Text''' box. | ||
| − | + | Similarly, clicking '''W- (W minus)''' will decrease its width. | |
| − | + | ||
| − | Similarly, clicking '''W- (W minus) '''will decrease its width. | + | |
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
| − | click on '''H+, H- '''buttons'''.''' | + | click on '''H+, H-''' buttons'''.''' |
| | | | ||
| − | Let us now increase the height of the '''Text''' box by clicking the '''H+ (H plus) '''button. | + | 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. | + | Likewise, we can use the '''H- (H minus)''' button to decrease its height. |
|- | |- | ||
| − | | Cursor on''' GUIBuilder Palette '''window, | + | | Cursor on '''GUIBuilder Palette''' window, |
| | | | ||
| − | Below this, we have a '''Delete '''button. | + | Below this, we have a '''Delete''' button. |
| − | + | ||
| − | + | ||
This is used to delete the selected object from the '''Graphic Window.''' | This is used to delete the selected object from the '''Graphic Window.''' | ||
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
hover over the '''Alignments''' button present in the right panel. | hover over the '''Alignments''' button present in the right panel. | ||
| Line 501: | Line 370: | ||
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | 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 '''Ctrl''', and click on the '''Tag''' value of each object in the right panel. | ||
| | | | ||
| − | Press and hold the '''Ctrl '''key on your keyboard. | + | Press and hold the '''Ctrl''' key on your keyboard. |
| − | + | Click on the '''Tag''' value of each '''object''' in the right panel. | |
| − | + | ||
| − | Click on the '''Tag''' value of each''' object''' in the right panel. | + | |
|- | |- | ||
| Cursor on '''Graphic Window number 1'''. | | Cursor on '''Graphic Window number 1'''. | ||
| Line 515: | Line 382: | ||
|- | |- | ||
| | | | ||
| − | Cursor on''' GUIBuilder Palette '''window, | + | Cursor on '''GUIBuilder Palette''' window, |
click on '''Alignments.''' | click on '''Alignments.''' | ||
| − | | | + | | On the bottom right of the '''GUIBuilder Palette''' window, click the '''Alignments''' button. |
| − | On the bottom right of the '''GUIBuilder Palette '''window, click the '''Alignments '''button. | + | |
|- | |- | ||
| | | | ||
Cursor on '''GUI Alignment''' window, | Cursor on '''GUI Alignment''' window, | ||
| − | + | hover cursor over the three '''Alignment''' sections. | |
| − | + | ||
| − | hover cursor over the three '''Alignment '''sections. | + | |
| | | | ||
| − | A '''GUI Alignment''' window pops up. | + | A '''GUI Alignment''' window pops up. |
This has | This has | ||
| + | |||
| + | <ul> | ||
| + | <li><blockquote><p>'''Vertical''' '''Alignment''' buttons on the left panel and</p></blockquote></li> | ||
| + | <li><blockquote><p>'''Horizontal Alignment''' buttons on the bottom panel.</p></blockquote></li> | ||
| + | <li><blockquote><p>The buttons for changing the size are on the right panel.</p></blockquote></li></ul> | ||
|- | |- | ||
| | | | ||
Cursor on '''GUI Alignments''' window, | Cursor on '''GUI Alignments''' window, | ||
| − | click on the '''Same Width '''and''' Same Height '''button. | + | click on the '''Same Width''' and '''Same Height''' button. |
| − | | Click once on the '''Same Width '''and''' Same Height '''buttons. | + | | Click once on the '''Same Width''' and '''Same Height''' buttons. |
|- | |- | ||
| Cursor on '''Graphic Window number 1'''. | | Cursor on '''Graphic Window number 1'''. | ||
| | | | ||
| − | Notice the selected '''objects''' in the''' Graphic window'''. | + | Notice the selected '''objects''' in the '''Graphic window'''. |
| − | + | ||
| − | + | ||
They now have the same width and height. | They now have the same width and height. | ||
| − | |||
| − | |||
We can see that the '''objects''' are currently placed one below the other. | We can see that the '''objects''' are currently placed one below the other. | ||
|- | |- | ||
| − | | | + | | Cursor on '''GUI Alignments''' window. |
| − | Cursor on '''GUI Alignments''' window. | + | | So, we will use the buttons under '''Vertical''' '''Alignment''' heading'''.''' |
| − | | So, we will use the buttons under '''Vertical''' '''Alignment '''heading'''.''' | + | |
|- | |- | ||
| | | | ||
| Line 558: | Line 422: | ||
click on '''Equally Spaced. ''' | click on '''Equally Spaced. ''' | ||
| − | | Click once on the '''Equally Spaced '''button'''. ''' | + | | Click once on the '''Equally Spaced''' button'''.''' |
|- | |- | ||
| Cursor on '''Graphic Window number 1'''. | | Cursor on '''Graphic Window number 1'''. | ||
| | | | ||
| − | |||
| − | |||
| − | |||
| − | |||
Now, let us arrange all the objects to the center of the window. | Now, let us arrange all the objects to the center of the window. | ||
|- | |- | ||
| Line 574: | Line 434: | ||
Cursor on '''GUI Alignments''' window, | Cursor on '''GUI Alignments''' window, | ||
| − | click on '''Center. ''' | + | click on '''Center.''' |
| − | | Click once on the '''Center '''button'''.''' | + | | Click once on the '''Center''' button'''.''' |
|- | |- | ||
| Cursor on '''Graphic Window number 1'''. | | Cursor on '''Graphic Window number 1'''. | ||
| − | | | + | | The '''objects''' are now arranged in the center. |
| − | The '''objects''' are now arranged in the center. | + | |
|- | |- | ||
| − | | | + | | |
| + | |||
| Learners may pause this video and explore all these options further for better understanding. | | Learners may pause this video and explore all these options further for better understanding. | ||
|- | |- | ||
| Line 587: | Line 447: | ||
| Close the '''GUI Alignments''' window. | | Close the '''GUI Alignments''' window. | ||
|- | |- | ||
| − | | | + | | |
| + | |||
| Let us test our '''GUI''' now. | | Let us test our '''GUI''' now. | ||
|- | |- | ||
| | | | ||
| − | Cursor on '''GUI Builder Palette '''window, | + | Cursor on '''GUI Builder Palette''' window, |
| − | click on '''Generate, '''and click on''' Generate GUI code.''' | + | click on '''Generate,''' and click on '''Generate GUI code.''' |
| | | | ||
| − | Go to the '''GUI Builder Palette '''window. | + | Go to the '''GUI Builder Palette''' window. |
| − | + | Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code.''' | |
| − | + | ||
| − | Click on '''Generate''' given on the top '''menubar''' and then on '''Generate GUI code. ''' | + | |
|- | |- | ||
| | | | ||
| − | Cursor on '''uiputfile '''window, | + | Cursor on '''uiputfile''' window, |
| − | + | ||
| − | + | ||
click on '''printuserinput.sce''' | click on '''printuserinput.sce''' | ||
| − | |||
| − | |||
| − | |||
| − | |||
Click on '''Save.''' | Click on '''Save.''' | ||
| − | |||
| − | |||
Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.” | Video-editor: Pls put a textbox on screen. “In Ubuntu Linux OS, click on OK button.” | ||
| | | | ||
| − | The '''uiputfile '''window will pop up. | + | The '''uiputfile''' window will pop up. |
| − | + | ||
| − | + | ||
I will select the file '''printuserinput.sce''' that was previously saved. | I will select the file '''printuserinput.sce''' that was previously saved. | ||
| − | + | Click on the '''Save''' button. | |
| − | + | ||
| − | Click on the '''Save '''button. | + | |
|- | |- | ||
| | | | ||
| − | Cursor on '''File already exists '''window, | + | Cursor on '''File already exists''' window, |
click on '''Yes.''' | click on '''Yes.''' | ||
| − | | On the '''File already exists '''window, click on '''Yes.''' | + | | On the '''File already exists''' window, click on '''Yes.''' |
|- | |- | ||
| | | | ||
| − | Cursor on '''GUI Created '''Window, | + | Cursor on '''GUI Created''' Window, |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
click on '''OK.''' | click on '''OK.''' | ||
| | | | ||
| − | It shows a '''dialog '''box | + | It shows a '''dialog''' box that displays the message “'''GUI created successfully!”''' |
| − | + | ||
| − | + | ||
Click on '''OK.''' | Click on '''OK.''' | ||
|- | |- | ||
| Video-editor: Pls put a textbox on screen. “If Replace File? Window pops up, click on Reload.” | | 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. ''' | + | | If the '''Replace File?''' window pops up, then click on '''Reload. ''' |
|- | |- | ||
| Close '''Graphic Window number 1.''' | | Close '''Graphic Window number 1.''' | ||
| Close the '''Graphic Window number 1.''' | | Close the '''Graphic Window number 1.''' | ||
|- | |- | ||
| − | | Cursor on '''GUIBuilder Palette '''window. | + | | Cursor on '''GUIBuilder Palette''' window. |
| − | | Minimize the '''GUIBuilder Palette '''window. | + | | Minimize the '''GUIBuilder Palette''' window. |
|- | |- | ||
| Cursor on '''SciNotes''' window. | | Cursor on '''SciNotes''' window. | ||
| − | | The corresponding updated '''sce file '''is displayed. <<PAUSE>> | + | | The corresponding updated '''sce file''' is displayed. <<PAUSE>> |
|- | |- | ||
| Cursor on '''SciNotes''' window. | | Cursor on '''SciNotes''' window. | ||
| | | | ||
| − | There is another way to change the '''object''' properties using the '''sce '''file. | + | 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'''. | So, the properties can be changed by modifying the '''object's uicontrol function'''. | ||
| Line 677: | Line 514: | ||
within '''h1 uicontrol''' function, | within '''h1 uicontrol''' function, | ||
| − | |||
| − | |||
Highlight, | Highlight, | ||
| Line 684: | Line 519: | ||
'''‘Fontsize’ ,[12].''' | '''‘Fontsize’ ,[12].''' | ||
| − | + | Change '''FontSize''' 12 to 20. | |
| − | + | ||
| − | Change '''FontSize '''12 to 20. | + | |
| | | | ||
By using this method, let us change the '''Fontsize''' of a '''pushbutton'''. | 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'''. | I'll make changes in '''uicontrol''' parentheses of '''h1''' which is a '''pushbutton's handle'''. | ||
| − | + | Change the '''FontSize''' 12 to 20. | |
| − | + | ||
| − | Change the '''FontSize '''12 to 20. | + | |
|- | |- | ||
| | | | ||
| − | Cursor on '''Scinotes '''window, | + | Cursor on '''Scinotes''' window, |
| − | + | ||
| − | + | ||
| − | click on''' Execute, '''and then click on''' File with echo''' | + | click on '''Execute,''' and then click on '''File with echo''' |
| | | | ||
Now let us execute the code. | Now let us execute the code. | ||
| − | |||
| − | |||
Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''. | Click on '''Execute''' on the top '''menubar''' and then on '''File with echo'''. | ||
| Line 714: | Line 539: | ||
Cursor on '''Graphic Window number 1,''' | Cursor on '''Graphic Window number 1,''' | ||
| − | + | replace the '''String''' on '''Edit''' box with '''Hello.''' | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | replace the '''String '''on '''Edit''' box with '''Hello.''' | + | |
| | | | ||
A window named '''Graphic window number 1''' opens. | A window named '''Graphic window number 1''' opens. | ||
| − | |||
| − | |||
Let us test the '''GUI'''. | Let us test the '''GUI'''. | ||
| − | + | Replace the '''String''' on the '''Edit''' box with “'''Hello”.''' | |
| − | + | ||
| − | Replace the '''String '''on the '''Edit''' box with “'''Hello”. ''' | + | |
|- | |- | ||
| | | | ||
| Line 739: | Line 554: | ||
Click once on the '''Print''' '''Pushbutton'''. | Click once on the '''Print''' '''Pushbutton'''. | ||
| − | + | The message “'''Hello'''” appears in the '''Text''' box. | |
| − | + | ||
| − | The message “'''Hello'''” appears in the '''Text '''box. | + | |
|- | |- | ||
| | | | ||
Cursor on '''Graphic Window number 1,''' | Cursor on '''Graphic Window number 1,''' | ||
| − | hover cursor on the '''Text '''box'''.''' | + | hover cursor on the '''Text''' box'''.''' |
| − | | Notice that the '''String '''value in the''' Text''' box is now | + | | |
| + | Notice that the '''String''' value in the '''Text''' box is now | ||
| + | |||
| + | <ul> | ||
| + | <li><blockquote><p>Aligned to the center,</p></blockquote></li> | ||
| + | <li><blockquote><p>The '''font''' is bigger, '''italic''' and '''bold''', and</p></blockquote></li> | ||
| + | <li><blockquote><p>The '''Background''' color and the '''Foreground''' color have changed.</p></blockquote></li></ul> | ||
|- | |- | ||
| | | | ||
| Line 760: | Line 579: | ||
'''Summary''' | '''Summary''' | ||
| | | | ||
| − | This brings us to the end of this '''tutorial'''. | + | This brings us to the end of this '''tutorial'''. |
| − | + | ||
| − | + | ||
Let us summarize. | Let us summarize. | ||
| + | In this '''tutorial''', we have: | ||
| − | + | <ul> | |
| − | + | <li><blockquote><p>Changed the properties of an '''object'''.</p></blockquote></li> | |
| + | <li><blockquote><p>Changed the size of an '''object''' and</p></blockquote></li> | ||
| + | <li><blockquote><p>Changed the alignment of '''objects''' in the '''GUI window'''.</p></blockquote></li></ul> | ||
|- | |- | ||
| | | | ||
| Line 776: | Line 596: | ||
| | | | ||
As an assignment, please do the following modifications to the current '''GUI'''. | As an assignment, please do the following modifications to the current '''GUI'''. | ||
| + | |||
| + | <ul> | ||
| + | <li><blockquote><p>Change the '''Background color''' of the '''Edit''' box to [1,0,0]. Observe the color.</p></blockquote></li> | ||
| + | <li><blockquote><p>Change the '''FontSize''' to 18 units for the '''Edit''' box'''.'''</p></blockquote></li></ul> | ||
|- | |- | ||
| | | | ||
| Line 782: | Line 606: | ||
'''Assignment''' | '''Assignment''' | ||
| | | | ||
| − | Rearrange the '''objects''' as follows: | + | Rearrange the '''objects''' as follows: |
| − | + | ||
| + | <ul> | ||
| + | <li><blockquote><p>'''Edit''' box to the left of '''Print Pushbutton'''.</p></blockquote></li> | ||
| + | <li><blockquote><p>'''Text''' box to the right of '''Print Pushbutton'''.</p></blockquote></li></ul> | ||
Now, place the objects with equal spacing. | Now, place the objects with equal spacing. | ||
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''About Spoken Tutorial Project''' | '''About Spoken Tutorial Project''' | ||
| | | | ||
The video at the following link summarises the '''Spoken Tutorial project'''. | The video at the following link summarises the '''Spoken Tutorial project'''. | ||
| − | |||
| − | |||
Please download and watch it. | Please download and watch it. | ||
| Line 801: | Line 625: | ||
| Show Slide: '''Spoken Tutorial Workshops''' | | Show Slide: '''Spoken Tutorial Workshops''' | ||
| | | | ||
| − | + | The '''Spoken Tutorial Project''' team conducts workshops and gives certificates. | |
| − | + | ||
| − | + | ||
For more details, please write to us. | For more details, please write to us. | ||
| Line 811: | Line 633: | ||
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''FOSSEE Forum''' | '''FOSSEE Forum''' | ||
| Line 821: | Line 643: | ||
'''Textbook Companion Project''' | '''Textbook Companion Project''' | ||
| | | | ||
| − | The '''FOSSEE''' team coordinates the '''TBC''' project. | + | The '''FOSSEE''' team coordinates the '''TBC''' project. |
| − | + | ||
| − | + | ||
For more details, please visit this site. | For more details, please visit this site. | ||
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''Lab Migration''' | '''Lab Migration''' | ||
| | | | ||
| − | The '''FOSSEE '''team coordinates the '''Lab Migration project.''' | + | The '''FOSSEE''' team coordinates the '''Lab Migration project.''' |
| − | + | ||
| − | + | ||
For more details, please visit this site. | For more details, please visit this site. | ||
|- | |- | ||
| | | | ||
| − | Show Slide: | + | Show Slide: |
'''Acknowledgment''' | '''Acknowledgment''' | ||
| Line 850: | Line 668: | ||
| | | | ||
This is '''Amandeepsingh Siddhu''', a FOSSEE intern 2021, IIT Bombay signing off. | This is '''Amandeepsingh Siddhu''', a FOSSEE intern 2021, IIT Bombay signing off. | ||
| − | |||
| − | |||
Thanks for joining. | Thanks for joining. | ||
|} | |} | ||
Latest revision as of 13:14, 18 August 2021
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 |
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. |
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
|
|
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. |
