Introduction
In this tutorial, you will construct a Label Class to display a title (label) on the window of the WVGA Display. Then you will construct a Font Class and change the font properties (face, size, weight, slant). Finally, you will construct a Color Class to change the color of the Label and Fonts.
Steps:
Prerequisites
Prepare the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained in the training:
Install and prepare the Eclipse IDE for C/C++ Developers as explained in the training:
Perform the exercises in the training:
Construct a Label Class
In this section, you will construct a Label Class to display a title (label) at the top of the window.
In this training, you will use EgtProject and the settings you entered in the Ensemble Graphics Toolkit -- First Application using Eclipse IDE training.
1
Start the Eclipse IDE.
Eclipse will ask you to select a directory for your workspace. Accept the default directory and click on the Launch button.
Eclipse will launch the previous workspace you configured.
You will modify the widgets.cpp file you created in the Ensemble Graphics Toolkit – Widget Positioning training.
2
Add the following lines of code to the widgets.cpp source code:
3
Save your program by selecting File > Save. You may also save by pressing CTRL + S.
4
Build the project by clicking on the Build icon.
The Console window (bottom pane) will display the build progress.
5
Run the program by clicking on the Run button.
The widgets.cpp executable is running remotely on the target.
Observe the Label at the top of the window. The displayed font and color are the default settings.
You have constructed a Label Class.
The default text alignment inside a label is center. You can call text_align(AlignFlag a) to change the alignment.
Label Class
From ~/egt/docs/html/annotated.html, click on the Label class. All the functions, attributes, and constructor associated with the Label class are documented here.
A Label displays text and has text alignments. It does not handle events.
6
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Before you start another session, be sure to stop the current session.
Change Font Face, Size, Weight, and Slant
In this section, you will construct a Font Class and change the font properties (face, size, weight, slant) of the title (label) at the top of the window.
1
Add the following lines of code to the widgets.cpp source code:
2
Save your program by selecting File > Save. You may also save by pressing CTRL + S.
3
Build the project by clicking on the Build icon:
The Console window (bottom pane) will display the build progress.
4
Run the program by clicking on the Run button.
The widgets.cpp executable is running remotely on the target.
Observe the Label at the top of the window. The displayed font has changed to the settings you entered.
You have constructed a Font Class and changed the font properties on the Label widget.
Font Class
From ~/egt/docs/html/annotated.html, click on the Font class. All the functions, attributes, and constructor associated with the Font class are documented here. This class manages a Font and its properties.
Weight and Slant
You have two weight ids, normal and bold.
You have three slant ids, normal, italic, and oblique.
5
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Before you start another session, be sure to stop the current session.
Change Color
In this section, you will change the properties of the Label using the Color Class.
1
Add the following lines of code to the widgets.cpp source code:
2
Save your program by selecting File > Save. You may also save by pressing CTRL + S.
3
Build the project by clicking on the Build icon.
The Console window (bottom pane) will display the build progress.
4
Run the program by clicking on the Run button.
The widgets.cpp executable is running remotely on the target.
Observe the text color has changed to white and the label’s background color has changed to red.
You have changed the properties of the Label using the Color Class.
Color Class
From ~/egt/docs/html/annotated.html, click on the Color class. All the functions, attributes, and constructor associated with the Color class are documented here.
The Color class manages a definition of 32-bit RGBA color.
Palette Class
From ~/egt/docs/html/annotated.html, click on the Palette class. All the functions, attributes, and constructor associated with the Palette class are documented here.
The Palette class contains a list of Predefined colors (black, white, red, blue, green, etc.). Colors in a palette are identified by a Palette::ColorId and Palette::GroupId.
ColorId
bg | General (Window, Frame) background color. |
text | Control text color. |
text_highlight | TextBox highlight color. |
cursor | TextBox cursor color. |
border | Border color. |
button_bg | Button background color. |
button_fg | Button foreground color. |
button_text | Button text color. |
label_bg | Label background color. |
label_text | Label text color. |
GroupId
Normal |
Active |
Disabled |
checked |
5
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Before you start another session, be sure to stop the current session.
Summary
In this tutorial, you explored the construction of the Label Class, Font Class, and Color Class. You changed properties of each and observed them on the WVGA Display on the target.
What’s Next?
There’s plenty more to learn. Here are some additional Ensemble Graphics Toolkit training topics to help you gain more knowledge and skills: