Skip to Content

Ensemble Graphics Toolkit: First Application Using Eclipse IDE™

Last modified by Microchip on 2024/06/20 12:43
Contents

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, 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 as follows:

  1. Download and configure the Buildroot build system. Download the Ensemble Graphics Toolkit source code. Build an SD Memory Card image (covered in the "Ensemble Graphics Toolkit: Preparing the Host PC and Target" page).
  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 the "Ensemble Graphics Toolkit: Preparing the Host PC and Target" page).
  3. Download and configure the Eclipse IDE for compilation, remote execution and debugging (covered in this page).

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

Back to Top

Prerequisites

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

Back to Top

Procedure

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.

Download the Eclipse IDE for C/C++ Developers package.

Eclipse IDE C++ Package

Alternatively, you may download the Eclipse IDE Installer and select the Eclipse IDE for C/C++ Developers from the menu.

Eclipse Installer Menu

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.

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.

Install OpenJDK-8:

​$ sudo apt-get install openjdk-8-jdk

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

Back to Top

Create an Application Menu Shortcut for Eclipse

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

Change the directory to your home directory:

​$ cd ~

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

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

Save the text file.

Set the text file eclipse.desktop to be executable:

​$ sudo chmod +x eclipse.desktop

Install eclipse.desktop:

​$ sudo desktop-file-install eclipse.desktop

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

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

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.

Back to Top

Start Eclipse and Create a Project

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

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

Eclipse will launch the workspace and display the welcome screen.

Eclipse Workspace

Back to Top

Create a Project

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

The New Project wizard will be displayed:

New Project Select Wizzard​​​​​​

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

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

New C++ Project

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

The C++ Project window will be displayed:

EGT Project Name

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

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

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 using the "Ensemble Graphics Toolkit: Preparing the Host PC and Target" page.

Click on the Finish button.

EGT Empty Project

 You have created project EgtProject for the Ensemble Graphics Toolkit.

Back to Top

Adding a Source File

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

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

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

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

Save your program by selecting File > Save.

You have completed adding a source file to the EgtProject.

Back to Top

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.

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.

Back to Top

Setting Build Properties

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

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 Toolchain Editor

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.

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

On the Tool Settings tab, select Cross Settings, and 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 where you have buildroot-at91 installed

Properties Settings

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 C++ Compiler

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 C++ Linker Libraries 

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 C++ Linker Misc

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

This completes setting build properties for EgtProject.

Back to Top

Building the Project

In this section, you will build the EgtProject.

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

You have successfully built EgtProject.

Back to Top

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

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

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

Run Configurations

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

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

A New Connection window will appear:

New connection

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.

Click on the Finish button.

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.

Click on the Run button.

Observe the WVGA Display on the target:

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

Basic Display

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 to the top-level window. In this example, we are using the show() method of the Window class to show the main window in 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.

Back to Top

Configure for Debugging

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

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

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

Select the Debugger tab.

Debug Configurations Debugger

Enter the path to the arm-based debugger:

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

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.

Save the GDB initialization script.

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

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

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.

Back to Top

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 a 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 enhancing debug experience.

Back to Top

Summary

In this training, 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.

Back to Top

Learn More

Back to Top