Ensemble Graphics Toolkit: BoxSizer

Last modified by Microchip on 2024/01/08 15:36

Introduction

Contents

In this training, you will construct a BoxSizer class to position child widgets with a horizontal orientation on the window of the WVGA Display.

Back to top

Prerequisites

You have prepared the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained on the "Ensemble Graphics Toolkit – Preparing the Host PC and Target" page.

You have installed and prepared the Eclipse IDE for C/C++ Developers as explained on the "Ensemble Graphics Toolkit -- First Application using Eclipse IDE" page. 

Back to top

Steps

Create a New Source File

In this section, you will be creating a new sizer.cpp source file that you will build in later sections demonstrating the BoxSizer class.

​You will use EgtProject and its settings you entered as shown on the "Ensemble Graphics Toolkit -- First Application Using Eclipse IDE" page.

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.

Eclipse Previous Workspace

You will be adding a new source file with the name sizer.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.

Eclipse exclude from build

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:

Sizer new source file

Enter "sizer.cpp" into the Source file text box. Click on the Finish button.

A new source file tab sizer.cpp is created within EgtProject.

Enter the following source code to the sizer.cpp window pane:

#include <egt/ui>
using namespace egt;

int main(int argc, const char** argv)
{
    Application app;
    TopWindow window;

    BoxSizer sizer(Orientation::horizontal);
    ImageLabel imagelabel1(sizer, Image("icon:home.png;128"));
    ImageLabel imagelabel2(sizer, Image("icon:camera.png;128"));
    ImageLabel imagelabel3(sizer, Image("icon:calendar.png;128"));
    ImageLabel imagelabel4(sizer, Image("icon:settings.png;128"));
    window.add(expand_horizontal(bottom(sizer)));
    window.show();

   return app.run();
}

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

You have completed adding a new source file to EgtProject.

 
Back to top

Construct a BoxSizer

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

Sizer debug configuration

In the Run Configurations window, enter the following in the Remote Absolute File Path for C/C++ Application text box:

/root/sizer

 You may see the previous program /root/???? here. Replace with /root/sizer.

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 sizer.cpp executable is running remotely on the target.

Observe the child widgets with a horizontal orientation.

Child widgets

BoxSizer class

From ~/egt/docs/html/annotated.html, click on the BoxSizer class. All the functions, attributes, and the constructor associated with the class are documented here.

​HorizontalBoxSizer and VerticalBoxSizer class

The HorizontalBoxSizer and VerticalBoxSizer classes are helper variations for the BoxSizer class.

From ~/egt/docs/html/annotated.html, click on the HorizontalBoxSizer and VerticalBoxSizer class. All the functions, attributes, and the constructor associated with these classes are documented here.

​Icons

The EGT library comes with a set of icons and images installed by default. Their location is /usr/share/libegt/icons.

To access these icons and images, the scheme uses "icon" like so:
auto play_button = egt::Image(“icon:play.png”);

These icons are available in different sizes; 16px, 32px, 64px and 128px. Unless specified, the default icon size is 32px.

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 training, you explored the construction of the BoxSizer class to position child widgets with a horizontal orientation on the window of the WVGA Display.

Back to top

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:

Back to top