Ensemble Graphics Toolkit: Themes
Introduction
In this training, you will learn how to set a default theme, set a global theme, change an existing theme, and create a custom theme.
Steps:
- Create a New Source File
- Set a Default Theme
- Set a Global Theme
- Change an Existing Theme
- Create a Custom Theme
Prerequisites
You have prepared the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained in:
You have installed and prepared the Eclipse IDE for C/C++ Developers as explained in:
Create a New Source File
In this section, you will be creating a new theme.cpp source file that you will build in later sections demonstrating the BoxSizer class.
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 be adding a new source file with the name themes.cpp. If you have a *.cpp source file from a previous Ensemble Graphics Toolkit training, perform the following steps:
Right-click in the *.cpp window and select Resource Configurations > Exclude from Build…
The Exclude from build window will open:
Select Debug and Release and click on the OK button.
The selected *.cpp will be excluded from the build
Right-click on EgtProject and select Clean Project.
Right-click on EgtProject and select New > Source File.
The New Source File window will open:
Enter "themes.cpp" into the Source file: text box. Click on the Finish button.
A new themes.cpp source file tab is created within EgtProject.
Enter the following source code to the themes.cpp window pane:
using namespace egt;
using namespace std;
int main(int argc, const char ** argv) {
Application app;
TopWindow win;
VerticalBoxSizer vsizer;
win.add(expand(vsizer));
HorizontalBoxSizer hsizer1;
vsizer.add(expand(hsizer1));
Button button1(hsizer1, "Button 1");
CheckBox checkbox1(hsizer1, "Disable Button 1");
HorizontalBoxSizer hsizer2;
vsizer.add(expand(hsizer2));
Button button2(hsizer2, "Button 2");
CheckBox checkbox2(hsizer2, "Disable Button 2");
win.show();
return app.run();
}
Save your program by selecting File > Save. You may also save by typing CTRL+S.
Set a Default Theme
In this section, you will build the source code you entered in the previous section and observe the default theme that is set.
To build the project, hover over EgtProject, right-click and select Build Project from the menu. Or you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
To set run properties, hover over EgtProject, right-click and select Run As > Run Configurations… from the menu.
In the left-hand pane, select EgtProject Debug (under C/C++ Remote Application).
In the Run Configurations window, enter the following in the Remote Absolute File Path for C/C++ Application: text box:
/root/theme
This is the location where the sizer.cpp executable will be loaded and run on the target.
Click on the Apply button.
Click on the Run button.
Observe the WVGA Display on the target:
The theme.cpp executable is running remotely on the target.
This is the default theme that is set when no other theme parameters are set.
To stop the program, press the Stop button (upper left-hand, just below the menu bar).
Set a Global Theme
In this section, you will modify the theme.cpp source code to set a global theme.
Modify the theme.cpp source code by adding the following lines of code as shown in the accompanying code example:
using namespace egt;
using namespace std;
int main(int argc, const char ** argv) {
Application app;
auto new_global_theme = make_shared<MidnightTheme>();
global_theme(new_global_theme);
TopWindow win;
VerticalBoxSizer vsizer;
win.add(expand(vsizer));
HorizontalBoxSizer hsizer1;
vsizer.add(expand(hsizer1));
Button button1(hsizer1, "Button 1");
CheckBox checkbox1(hsizer1, "Disable Button 1");
HorizontalBoxSizer hsizer2;
vsizer.add(expand(hsizer2));
Button button2(hsizer2, "Button 2");
CheckBox checkbox2(hsizer2, "Disable Button 2");
win.show();
return app.run();
}
Save your program by selecting File > Save. You may also save by pressing CTRL+S.
To build the project, hover over EgtProject, right-click and select Build Project from the menu. Alternatively, you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
Click on the Run button.
Observe the WVGA Display on the target:
The theme.cpp executable is running remotely on the target.
Observe that Button 1, Button 2, and their checkboxes have changed color. Also, the background color has changed. The new global theme is inherited by all the child widgets. You can check the Disable buttons to observe the change in color for their disabled state.
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Change an Existing Theme
In this section, you will modify the theme.cpp source code from the previous section to change a global theme.
Modify the theme.cpp source code by adding the following lines of code as shown in the accompanying code example:
using namespace egt;
using namespace std;
int main(int argc, const char ** argv) {
Application app;
auto new_global_theme = make_shared<MidnightTheme>();
global_theme(new_global_theme);
TopWindow win;
VerticalBoxSizer vsizer;
win.add(expand(vsizer));
HorizontalBoxSizer hsizer1;
vsizer.add(expand(hsizer1));
Button button1(hsizer1, "Button 1");
CheckBox checkbox1(hsizer1, "Disable Button 1");
HorizontalBoxSizer hsizer2;
vsizer.add(expand(hsizer2));
Button button2(hsizer2, "Button 2");
CheckBox checkbox2(hsizer2, "Disable Button 2");
auto new_theme = win.theme();
Font new_font(35, Font::Weight::bold);
new_theme.font(new_font);
win.theme(new_theme);
win.show();
return app.run();
}
Save your program by selecting File > Save. You may also save by pressing CTRL+S.
To build the project, hover over EgtProject, right-click and select Build Project from the menu. Alternatively, you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
Click on the Run button.
Observe the WVGA Display on the target:
The theme.cpp executable is running remotely on the target.
Observe that the font in both the button widget and the checkboxes has changed. The font is larger and the weight id changed to bold. You have changed an existing property of the global midnight theme.
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Create a Custom Theme
In this section, you will modify the theme.cpp source code from the previous section to create a custom theme and apply it to the Horizontal Box Sizer 2.
Modify the theme.cpp source code by adding the following lines of code as shown in the accompanying code example:
using namespace egt;
using namespace std;
int main(int argc, const char ** argv) {
Application app;
auto new_global_theme = make_shared<MidnightTheme>();
global_theme(new_global_theme);
TopWindow win;
VerticalBoxSizer vsizer;
win.add(expand(vsizer));
HorizontalBoxSizer hsizer1;
vsizer.add(expand(hsizer1));
Button button1(hsizer1, "Button 1");
CheckBox checkbox1(hsizer1, "Disable Button 1");
HorizontalBoxSizer hsizer2;
vsizer.add(expand(hsizer2));
Button button2(hsizer2, "Button 2");
CheckBox checkbox2(hsizer2, "Disable Button 2");
auto new_theme = win.theme();
Font new_font(35, Font::Weight::bold);
new_theme.font(new_font);
win.theme(new_theme);
struct CustomTheme : public MidnightTheme
{
void apply() override
{
Theme::apply();
palette().set(Palette::ColorId::button_bg,
Palette:: GroupId::normal,
Palette::pink);
palette().set(Palette::ColorId::button_fg,
Palette::GroupId::normal,
Palette::pink);
palette().set(Palette::ColorId::button_fg,
Palette::GroupId::checked,
Palette::pink);
palette().set(Palette::ColorId::button_bg,
Palette::GroupId::disabled,
Palette::tan);
font().size(30);
}
} custom_theme;
custom_theme.apply();
hsizer2.theme(custom_theme);
win.show();
return app.run();
}
Save your program by selecting File > Save. You may also save by pressing CTRL+S.
To build the project, hover over EgtProject, right-click and select Build Project from the menu. Or you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
Click on the Run button.
Observe the WVGA Display on the target:
The theme.cpp executable is running remotely on the target.
Observe the horizontal box sizer 2 has a new look. The Button 2 foreground color for the normal state has changed.
Check Disable Button 1 and Disable Button 2 to observe the new background color when the buttons are disabled.
To stop the program, press the Stop button (upper left hand, just below the menu bar).
Summary
In this training, you learned how to set a default theme, set a global theme, change an existing theme, and create a custom theme.
Learn More
There’s plenty more to learn. Here are some additional Ensemble Graphics Toolkit training resources to help you gain more knowledge and skills: