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
- 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.
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.
Add the following lines of code to the widgets.cpp source code:
#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();
}
Build the project by clicking on the Build icon.
The Console window (bottom pane) will display the build progress.
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.
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 <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();
}
Build the project by clicking on the Build icon:
The Console window (bottom pane) will display the build progress.
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.
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 <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();
}
Build the project by clicking on the Build icon.
The Console window (bottom pane) will display the build progress.
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.
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: