Difference between revisions of "GUI-in-Scilab/C2/Object-properties-and-alignment-in-GUI/English"

Show Slide:

Title Slide

Show Slide:

Learning objectives

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

Show Slide:

Code Files

I have opened the GUIBuilder toolbox in my system.

Please do so in your system, also.

Cursor on GUIBuilder Palette window,

click on Open.

Cursor on Open an existing GUI window,

click on Yes.

It shows a dialog box that displays Open an existing GUI.

Click on Yes.

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,

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.

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,

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.

We see the four direction buttons in the right panel, namely Up, Down, Right, and Left.

I will click once on the Left button.

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.

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.

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

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.

Cursor on GUI Alignments window,

click on Equally Spaced.

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,

click on Center.

The objects are now arranged in the center.

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.

Cursor on GUI Created Window,

click on OK.

It shows a dialog box that displays the message “GUI created successfully!”

Click on OK.

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.

Cursor on Graphic Window number 1,

hover cursor on the Print Pushbutton.

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.

The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Show Slide:

FOSSEE 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:

Acknowledgment

Show Slide:

Thank you

This is Amandeepsingh Siddhu, a FOSSEE intern 2021, IIT Bombay signing off.

Thanks for joining.