Ensemble Graphics Toolkit: Widget Positioning

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

Introduction

In the previous training, "Ensemble Graphics Toolkit: First Application using Eclipse IDE," you used the Eclipse IDE for C/C++ Developers to build a *.cpp program to display the button widget on the target’s WVGA display. A widget is a User Interface (UI) component with a basic set of properties. In this training, you will build a *.cpp program to set the property of positioning the button widget anywhere in the window of the WVGA display you desire.

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.

Steps

Create a New Source File

In this section, you will be creating a new *.cpp source file that you will build in later sections demonstrating the positioning of the button widget.

​In this training, you will use EgtProject and the settings you entered from 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

Back to Top


If you have the basic.cpp file from the "Ensemble Graphics Toolkit: First Application Using Eclipse IDE" page, proceed with the following:

Right-click in the basic.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 basic.cpp file will be excluded from the build.

Back to Top


Right-click on EgtProject and select Clean Project.

Back to Top


Right-click on EgtProject and select New > Source File.

The New Source File window will open:

Eclipse new source file

Back to Top


Enter widgets.cpp into the Source file text box. Click on the Finish push button.

A new source file tab, widgets.cpp, is created within EgtProject.

Back to Top


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

This is the very same source code you entered into the basic.cpp window in the "Ensemble Graphics Toolkit: First Application Using Eclipse IDE" training. You will be modifying it in the next section.

#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);
  window.show();
 return app.run();
}

Back to Top


Save your program by selecting File > Save.

You have completed adding a new source file to EgtProject.

Back to Top

Change Widget Alignment

In this section, you will modify the widgets.cpp source code to demonstrate the button.align function.

Modify the widgets.cpp source code by:

Commenting out center(button), and
Adding the button.align( ) function as shown below:
#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);

  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


To build the project, click on the Build icon.

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

Back to Top


To set run properties, hover over EgtProject, right-click, and select Run As > Run Configurations… from the menu.

Back to Top


In the left-hand pane, select EgtProject Debug (under C/C++ Remote Application).

Run configurations widget

Back to Top


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

/root/widgets

You may see the previous program /root/basic here. Replace with /root/widgets.

This is the location the widgets.cpp executable will be loaded and run on the target.

 

Back to Top


Click on the Apply button.

Back to Top


Click on the Run button.

Back to Top


Observe the WVGA Display on the target:

The widgets.cpp executable is running remotely on the target.

Observe the Press me button is aligned in the center (top to bottom) and to the left of the display window.

Widgets Display 1

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.

Widget::align(const AlignFlags & a)

This will align the widget with respect to the box of the parent frame, TopWindow in this case. Here are some AlignFlags supported: 

noneNo alignment
center_horizontalCenter alignment is a weak alignment both horizontal and vertical. To break one of those dimensions to another alignment, specify it in addition to center. If both are broken, center has no effect.
center_verticalCenter vertical alignment
centerCenter horizontal and vertical alignment
leftHorizontal alignment
rightHorizontal alignment
topVertical alignment
bottomVertical alignment
expand_horizontalExpand only horizontally
expand_verticalExpand only vertically
expandExpand vertically and horizontally

Back to Top

Move Widget to a Point (x,y)

In this section, you will modify the widgets.cpp source code to demonstrate the widget member function move( ) to change the position of the widget.

Modify the widgets.cpp source code by:

Comment out the button.align( ) function, and
Type the following button.move( ) function as shown:
#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;

  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


To build the project, click on the Build icon.

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

Back to Top


Click on the Run button

Back to Top


Observe the WVGA Display on the target:

The widgets.cpp executable is running remotely on the target.

Observe the Press me button is aligned in the center (left to right) and a little below center (top to bottom).

Widgets Display 2

Back to Top


Observe the widget (button) X and Y coordinates are printed on the terminal console:

/root/widgets; exit

X:300 Y:300

Back to Top


To stop the program, press the Stop button (upper left hand, just below the menu bar).

Widget::move(const Point & point)

This will change the X and Y coordinate of the widget relative to the parent and move it to the specified position.

Class PointType

From ~/egt/docs/html/annotated.html, click on the PointType class. All the functions and the constructor associated with the PointType class is documented here. It specifies simple x and y coordinate.

Point is the helper type for a default point. In this example, we pass the Point(x,y) as Widget::move function parameters to move widget to that point.

Widget::x() and Widget::y()

From ~/egt/docs/html/annotated.html, click on the Widget class. X and Y widget member functions allow users to get the X and Y coordinate of the widget origin.

Widget::x(DefaultDim x) and Widget::y(DefaultDim y)

From ~/egt/docs/html/annotated.html, click on the Widget class. These widget member functions allow users to set the X and Y coordinate of the widget relative to its parent using DefaultDim=int; It is the default dimension type used for geometry.

Back to Top

Summary

In this training, you explored two methods to position the button widget in 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