Ensemble Graphics Toolkit: Label and Font Classes

Last modified by Microchip on 2024/01/08 16:11

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

  • Construct a Label Class
  • Change Font Face, Size, Weight, and Slant
  • Change Color

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.

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

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.

Back to Top


Add the following lines of code to the widgets.cpp source code:

#include <egt/ui>
#include
<iostream>

using namespace std;
using namespace egt;

int main(int argc, const char ** argv)
{
  Application app;
  TopWindow window;
  Button button(window, "Press Me");

//  center(button);
//  button.align(AlignFlag::center | AlignFlag::left);

  button.move(Point(300,300));
  cout << "X:" << button.x() << " Y:" << button.y() << endl;

 //change widget width and height
 button.width(button.width()*2);
  button.height(70);
  cout << "width:" << button.width() << " height:" << button.height() << endl;

  Label title(window, "EGT Lab Demos");
  title.align(AlignFlag::expand_horizontal);

  window.show();
 return app.run();
}

Back to Top


Save your program by selecting File > Save. You may also save by pressing CTRL + S.

Back to Top


Build the project by clicking on the Build icon.

The Console window (bottom pane) will display the build progress.

Back to Top


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

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.

Back to Top


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.

Back to Top

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.

Add the following lines of code to the widgets.cpp source code:

#include <egt/ui>
#include
<iostream>

using namespace std;
using namespace egt;

int main(int argc, const char ** argv)
{
  Application app;
  TopWindow window;
  Button button(window, "Press Me");

//  center(button);
//  button.align(AlignFlag::center | AlignFlag::left);

  button.move(Point(300,300));
  cout << "X:" << button.x() << " Y:" << button.y() << endl;

 //change widget width and height
 button.width(button.width()*2);
  button.height(70);
  cout << "width:" << button.width() << " height:" << button.height() << endl;

  Label title(window, "EGT Lab Demos");
  title.align(AlignFlag::expand_horizontal);

  Font new_font("Serif",45, Font::Weight::bold, Font::Slant::italic);
  title.font(new_font);

  window.show();
 return app.run();
}

Back to Top


Save your program by selecting File > Save. You may also save by pressing CTRL + S.

Back to Top


Build the project by clicking on the Build icon:

The Console window (bottom pane) will display the build progress.

Back to Top


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

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.

Back to Top


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

Add the following lines of code to the widgets.cpp source code:

#include <egt/ui>
#include
<iostream>

using namespace std;
using namespace egt;

int main(int argc, const char ** argv)
{
  Application app;
  TopWindow window;
  Button button(window, "Press Me");

//  center(button);
//  button.align(AlignFlag::center | AlignFlag::left);

  button.move(Point(300,300));
  cout << "X:" << button.x() << " Y:" << button.y() << endl;

 //change widget width and height
 button.width(button.width()*2);
  button.height(70);
  cout << "width:" << button.width() << " height:" << button.height() << endl;

  Label title(window, "EGT Lab Demos");
  title.align(AlignFlag::expand_horizontal);

  Font new_font("Serif",45, Font::Weight::bold, Font::Slant::italic);
  title.font(new_font);

  title.color(Palette::ColorId::label_text, Palette::white);
  title.color(Palette::ColorId::label_bg, Palette::red);
  title.fill_flags(Theme::FillFlag::solid);

  window.show();
 return app.run();
}

Back to Top


Save your program by selecting File > Save. You may also save by pressing CTRL + S.

Back to Top


Build the project by clicking on the Build icon.

The Console window (bottom pane) will display the build progress.

Back to Top


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

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

bgGeneral (Window, Frame) background color.
textControl text color.
text_highlightTextBox highlight color.
cursorTextBox cursor color.
borderBorder color.
button_bgButton background color.
button_fgButton foreground color.
button_textButton text color.
label_bgLabel background color.
label_textLabel text color.

GroupId

Normal
Active
Disabled
checked

Back to Top


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.

Back to Top

Summary

In this tutorial, you explored the construction of the Label Class, Font Class, and Color Class. You changed the 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 resources to help you gain more knowledge and skills:

Back to Top