Ensemble Graphics Toolkit -- First Application Using Eclipse IDE

Introduction

Using the Eclipse IDE and Buildroot with the Ensemble Graphics Toolkit (EGT) helps simplify the compilation, remote execution and debugging of EGT applications.

In this training topic you will download and install the Eclipse IDE for C/C++ Developers, configure and build a basic graphics interface for the SAM9X60-EK evaluation kit. You will run the application remotely and configure the Eclipse IDE for debugging.

A typical development flow-path looks like:

  1. Download and configure the Buildroot build system. Download the Ensemble Graphics Toolkit source code. Build an SD Memory Card image (covered in Preparing the Host PC and Target).
  2. Once the Buildroot build has finished, the output directory will contain the SD Memory Card image to boot Linux with the Ensemble Graphics Toolkit libraries. The build output also contains the cross toolchain for graphical development on the Host PC (covered in Preparing the Host PC and Target).
  3. Download and configure the Eclipse IDE for compilation, remote execution and debugging (this topic).

At the end of this topic you will be able to develop simple graphical interfaces for the SAM9X60-EK using the Ensemble Graphics Toolkit.

Steps:


Prerequisites

You have prepared the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained in the topic:


Install the Eclipse IDE for C/C++ Developers

In this section, you will download, install, and configure the Eclipse IDE for C/C++ Developers. You will also download and install OpenJDK, the open-source implementation of the Java Platform, Standard Edition, as either OpenJDK or Java SE is required to run the Eclipse IDE.

1

Download the Eclipse IDE for C/C++ Developers package from:
https://www.eclipse.org/downloads/packages/

eclipse-ide-cpp-package.png

Alternately, you may download the Eclipse IDE Installer from https://www.eclipse.org/downloads/ and select the Eclipse IDE for C/C++ Developers from the menu.

eclipse_installer_menu.png

2

Extract the archive file in the /opt directory:

$ sudo tar -zxvf eclipse-cpp-YYYY-MM-R-linux-gtk-x86_64.tar.gz -C /opt

Where YYYY-MM are the year and the month of the latest stable release.

You may follow the Eclipse IDE release schedule at: https://wiki.eclipse.org/Simultaneous_Release

3

Optional

On some Linux distributions you may need to run this command:

$ sudo chown -R root:root /opt/eclipse

With Eclipse installed in the /opt directory, it can be accessed by any user.

4

Install OpenJDK-8:

$ sudo apt-get install openjdk-8-jdk

You have completed installing the Eclipse IDE for C/C++ Developers and the OpenJDK.


Create an Application Menu Shortcut for Eclipse

In this section, you will create an applications menu shortcut to launch the Eclipse IDE.

1

Change directory to your home directory:

$ cd ~

2

With your favorite text editor, create a text file named eclipse.desktop:

3

Copy the following to the text file:

[Desktop Entry]
Name=Eclipse
Type=Application
Exec=/opt/eclipse/eclipse
Terminal=false
Icon=eclipse
Comment=Integrated Development Environment
NoDisplay=false
Categories=Development;IDE;
Name[en]=Eclipse

4

Save the text file.

5

Set the text file eclipse.desktop to be executable:

$ sudo chmod +x eclipse.desktop

6

Install eclipse.desktop:

$ sudo desktop-file-install eclipse.desktop

7

Create a symbolic link in /usr/local/bin:

$ sudo ln -s /opt/eclipse/eclipse /usr/local/bin/eclipse

8

Add the Eclipse IDE icon to be displayed with the shortcut:

$ sudo cp /opt/eclipse/icon.xpm /usr/share/pixmaps/eclipse.xpm

The Eclipse IDE shortcut will now be visible in the Applications Menu.


Start Eclipse and Create a Project

In this section, you will start the Eclipse IDE and create an Ensemble Graphics Toolkit project.

1

Start the Eclipse IDE:

Eclipse with ask you to select a directory for your workspace. Accept the default directory and click on the Launch button.

eclipse_ide_launcher.png

Eclipse will launch the workspace and display the welcome screen.

eclipse_workspace.png

Create a Project

2

Start the process of creating a project by clicking on File > New > Project.

The New Project wizard will be displayed:

new_project_select_wizard.png

3

Select C/C++ Project. Click on the Next button.

The Templates for New C/C++ Projects will be displayed:

new_cpp_project.png

4

Select C++ Managed Build. Click on the Next button.

The C++ Project window will be displayed:

egt_project_name.png

5

Enter a Project name of EgtProject. Under Project type, select Empty Project. Under Toolchains, select Cross GCC. Click on the Next button.

The Select Configurations window will be displayed:

select_configurations.png

6

By default, the Debug and Release configurations are selected. Click on the Next button.

The Cross GCC Command window will be displayed:

cross_gcc_command.png

7

Enter the following information:

Cross compiler prefix: arm-buildroot-linux-gnueabi-
Cross compiler path: /home/<user>/buildroot-at91/output/host/bin

This is the cross toolchain that you built in the topic: Ensemble Graphics Toolkit – Preparing the Host PC and Target

8

Click on the Finish button.

egt_empty_project.png

You have created project EgtProject for the Ensemble Graphics Toolkit.


Adding a Source File

In this section, you will add a C++ source file to EgtProject.

1

To add a new C++ source code file, hover over EgtProject, right-click and select New > Source File.

A New Source File window will open.

new_source_file.png

2

Enter basic.cpp in the Source file: box. Click on the Finish button.

The Eclipse IDE workspace now has the basic.cpp source file added to the project.

source_file_project_screen.png

3

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

#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();
}

4

Save your program by selecting File > Save.

You have completed adding a source file to the EgtProject.


Configure Dependencies with the pkg-configure Tool

In this section, you will use the pkg-config tool located in the buildroot-at91 build to automate finding and configuring the correct dependencies to the Eclipse IDE to build your applications to run on the target.

This tutorial assumes you are setting up your development environment to build an EGT application to run on the target.

1

On the Host PC, using your favorite text editor, add the following to your ~/.bashrc file:

export PKG_CONFIG_PATH =/home/<user>/buildroot-at91/output/host/arm-buildroot-linux-gnueabi/sysroot/usr/lib/pkgconfig/

Be sure to use the path to the location of where you have buildroot-at91 installed.

You have completed setting the dependencies required for the Ensemble Graphics Toolkit with the Eclipse IDE.


Setting Build Properties

In this section, you will set the build properties for the EgtProject in the Eclipse IDE.

1

To set build properties, hover over EgtProject, right-click and select Properties from the menu at the bottom.

A Properties for EgtProject window will open:

properties_tool_chain_editor.png

2

In the left-hand pane of the Properties window select C/C++ Build > Tool Chain Editor.

Observe that the Current toolchain: dropdown box has Cross GCC selected.

3

Next, select C/C++ Build > Settings.

a

On the Tool Settings tab, select Cross Settings, observe the following fields contain the following:

Prefix: arm-buildroot-linux-gnueabi-
Path: /home/<user>/buildroot-at91/output/host/bin

Be sure to use the path to the location of where you have buildroot-at91 installed.

properties_settings.png

b

On the Tool Settings tab, select Cross G++ Compiler > Miscellaneous. Change the Other flags text box to the following:

-c -fmessage-length=0 `pkg-config libegt –cflags`

Ensure that the PKG_CONFIG_PATH points to the pkg-config tool located in the buildroot-at91 build.

Note the use of the back quote ( ` ). This performs command substitution so that the output of the pkg-config tool will be fed into the command line of the C++ compiler.

If a project contains C source files, the Cross GCC Compiler would require configuration. As the EgtProject only contains a C++ source file, this step is skipped.

properties_cpp_compiler.png

c

On the Tool Settings tab, select Cross G++ Linker > Libraries. To the right of the Libraries pane, click on the Add… (a little green plus next to a file icon). Add the following library: pthread

properties_cpp_linker_lib.png

d

On the Tool Settings tab, select Cross G++ Linker > Miscellaneous. Enter the following into the Linker flags text box:

`pkg-config libegt —libs`

This linker flag will pass the location of the libegt dependencies to the linker so that the pkg-config tool can fill in the libraries required to use libegt.

Ensure that the PKG_CONFIG_PATH points to the pkg-config tool located in the buildroot-at91 build.

Note the use of the back quote ( ` ). This performs command substitution so that the output of the pkg-config tool will be fed into the command line of the C++ compiler.

properties_cpp_linker_misc.png

e

Click on the Apply and Close button. This will apply all the changes you have entered.

This completes setting build properties for EgtProject.


Building the Project

In this section, you will build the EgtProject.

1

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.

At the completion of a successful build, a Debug folder in the Project Explorer window in the left pane. Note the files in the folder: makefile, sources.mk, objects.mk and subdir.mk.

build_project.png

You have successful built EgtProject.


Run Application on Target Remotely

In this section, you will configure the Eclipse IDE to be able to run an application remotely on the target (SAM9X60-EK).

1

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

2

In the left-hand pane, double-click on C/C++ Remote Application.

run_configurations.png

3

To setup a SSH connection with the target, click on the Connection New button.

A Create a new connection window will appear:

create_new_connection.png

4

Select SSH from the dropdown box. Click on the OK button.

A New Connection window will appear:

new_connection.png

5

Enter the following settings:

Connection name: Remote Host
Host: 10.0.0.20
User: root

Select Password based authentication
Password: <root_password>

Be sure to set the Host IP address to the address you selected when you prepared your Host PC for development.

6

Click on the Finish button.

7

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

/root/basic

This is the location the basic.cpp executable will be loaded and run.

8

Click on the Run button.

9

Observe the WVGA Display on the target:

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

basic_display.png

10

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

This completes running an application remotely using the Eclipse IDE.

The following information boxes contain information on the Application, TopWindow/Window, and Button classes used in the basic.cpp program.

Application Class

From ~/egt/docs/html/annotated.html, click on v1 and then Application class. All the functions, attributes and constructor associated with the Application class is documented here. The application class is a helper class that does standard setup for inputs, outputs, event loop, etc. In this example, we construct an Application and run it using the run() method to run the application.

TopWindow / Window Class

From ~/egt/docs/html/annotated.html, click on v1 and then click on TopWindow or Window class. TopWindow is the main Window that provides functions like pointer (cursor) that apply only for the top level window. In this example we are using the show() method of the Window class to show the main window which all widgets are drawn.

Button Class

From ~/egt/docs/html/annotated.html, click on v1 and then click on Button class. All the functions and constructor associated with the Button class is documented here. In this example, when we construct the button widget, we provide the text to be printed on the button. We also inherit the widget member function center() to place the button in the center of the frame.


Configure for Debugging

In this section, you will configure the Eclipse IDE to debug the EgtProject.

1

To configure the Debug Configuration, hover over EgtProject, right-click and select Debug As > Debug Configurations… from the menu.

The Debug Configurations window will appear:

debug_configurations_main.png

2

In the left pane, select EgtProject Debug.

From the Main tab, observe the settings that you entered in the previous section:

Connection: Remote Host
Remote Absolute File Path for C/C++ Applications: /root/basic

3

Select the Debugger tab.

debug_configurations_debugger.png

4

Enter the path to the arm-based debugger:

GDB debugger: /home/<user>/buildroot-at91/output/host/bin/arm-linux-gdb

5

Create a GDB initialization script by creating a text file named gdbinit in your home directory: /home/<user>. Enter the following text:

handle SIGILL nostop 
set sysroot /home/<user>/buildroot-at91/output/host/arm-buildroot-linux-gnueabi/sysroot

The purpose of the GDB initialization script is to help prevent spurious signals.

6

Save the GDB initialization script.

7

On the Debug Configurations window, under the Debugger tab, enter the path to the GDB initialization script to:

GDB command file: /home/<user>/gdbinit

8

Click on the Apply button. Click on Close to close the Debug Configurations window.

Before running the debug command, check if there is any application running on the target and end it.

Debugging

You can now click on the Debug As… icon (it looks like an insect, at the top in the ribbon) and select Local C/C++ Application.

You may be shown an Authentication Message dialog box. Select Yes to accept it. Sometimes, you require a restart of the Eclipse IDE and reboot of the target.

Eclipse will change to the Debug Perspective and the application will halt at main(). Press Resume (F8) to continue execution and the application should appear on the WVGA display.

You can now use Eclipse to debug the application viewing variables, disassembling the code and enhance debug experience.


Summary

In this topic you downloaded and installed the Eclipse IDE for C/C++ Developers. You configured and built a basic graphical interface for the SAM9X60-EK. You learned how to run and debug the application remotely from the Eclipse IDE.


What’s Next?

There’s plenty more to learn. Here are some additional Ensemble Graphics Toolkit training topics to help you gain more knowledge and skills:

© 2020 Microchip Technology, Inc.
Notice: ARM and Cortex are the registered trademarks of ARM Limited in the EU and other countries.
Information contained on this site regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. MICROCHIP MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WHETHER EXPRESS OR IMPLIED, WRITTEN OR ORAL, STATUTORY OR OTHERWISE, RELATED TO THE INFORMATION, INCLUDING BUT NOT LIMITED TO ITS CONDITION, QUALITY, PERFORMANCE, MERCHANTABILITY OR FITNESS FOR PURPOSE. Microchip disclaims all liability arising from this information and its use. Use of Microchip devices in life support and/or safety applications is entirely at the buyer's risk, and the buyer agrees to defend, indemnify and hold harmless Microchip from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any Microchip intellectual property rights.