Ensemble Graphics Toolkit: Label and Font Classes

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

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.

label_class_1.png

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.

label_class_2.png

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.

label_class_3.png

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:

© 2020 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.