Introduction

This is the chapter web page to support the content in Chapter 11 of the book: Exploring BeagleBone – Tools and Techniques for Building with Embedded Linux. The summary introduction to the chapter is as follows:

In this chapter you are introduced to rich user interface (UI) architectures and application development on the BeagleBone. Rich UIs allow for a depth of interaction with an application that is not possible with command‐line interfaces (CLIs)—in particular, the addition of graphical display elements can result in easier‐to‐use applications. Also introduced are different BBB architectures that can support rich UIs, such as general‐purpose computing, touch screen display modules, and virtual network computing (VNC). Different software application frameworks are examined for rich UI development, such as GTK+ and Qt. The Qt framework is the focus of the discussion, largely due to its comprehensive libraries of code. An example rich UI application is developed for the BBB that uses the TMP36 temperature sensor. Finally, a feature‐rich remote fat‐client application framework is developed, and two example applications are described—one that uses the TMP36 sensor and a second that uses the ADXL345 accelerometer.

Learning Outcomes

After completing this chapter, you should be able to:

  • Configure the BBB as a general‐purpose computing device and use Bluetooth peripherals to control it.
  • Acquire hardware for LCD touch screen display applications.
  • Use virtual network computing (VNC) to remotely execute graphical user interface (GUI) applications on the BBB.
  • Build rich user interface (UI) applications that execute directly on the BBB using the GTK+ and Qt frameworks.
  • Build Qt applications with advanced interfaces that interface to hardware sensors on the BBB.
  • Build fat‐client remote Qt applications that communicate using TCP sockets to a server that is executing on the BBB.
  • Enhance TCP server code to be multi‐threaded, in order to allow multiple simultaneous connections from TCP client applications.
  • Build remote Qt GUI server applications that communicate, using TCP sockets and XML, to a client application on the BBB.
  • Install a Qt Creator cross‐development platform under desktop Linux for cross‐building Qt applications and remotely deploying them to the BBB.

Installing Qt Creator on a Desktop Computer

Chapter 11 describes how you can use Qt in your BBB projects and Qt Creator is a tool that can greatly improve your programming experiences. For example, Figure 11-9 in the book illustrates Qt Creator in action for the creation of the Temperature Sensor application user interface. The videos that are linked below can help you get started with “embedded Qt” but this short text describes how you can get started with Qt Creator itself — with a particular emphasis on using the latest version of Qt Creator with the historical version of Qt (4.8.x) that is required for cross-compilation for the version that is currently (Jan’15) on the BeagleBone.

Step 1. Install Qt Creator

You can download and install the latest version of Qt Creator directly from the address: http://download.qt.io/snapshots/qtcreator/

In my case, I am installing Qt Creator 3.3.x for Linux (on my 64-bit Debian image) as this allows for cross-compilation support. Currently I am downloading a binary with the name: qt-creator-opensource-linux-x86_64-master.run, which is approximately 84MB in size. Once downloaded, this binary can be installed on the desktop computer:

This installs Qt Creator 3.3.x — in my case I installed it in the user directory ~/qtcreator-3.3.81/. This step installs the Qt Creator integrated development environment (IDE) — it does not install Qt itself.

Step 2. Installing Qt (4.8.x)

The next step is to install Qt. Qt is the libraries and tools (e.g. qmake) that you need to build with Qt. You can install multiple versions of Qt at the same time and together with C++ compilers each version is called a kit. The easiest way to install the version of Qt that is currently required for working with the BeagleBone is to use apt-get:

It is also possible to build Qt from source. You can do this by going to  http://download.qt.io/archive/qt/ and downloading the exact version that you require.

Step 3. Configuring a Qt Creator Kit

You can then start Qt Creator as follows:

  • The Qt Creator start-up screen should present you with the option to create a new project using a button or by using File → New File or Project → Choose Application and “Qt Widgets Application”. Press “Choose”.
  • Give the project a name and location (e.g., QtTest in /home/molloyd/)
  • The next option is Kits (Kit Selection). It should state that “No valid kits found”. Press on options and you should see a dialog as in Figure 1 below.
  • Click on the “Qt Versions” tab and click on “Add…” and browse to /usr/bin/ where you should see the qmake and qmake-qt4 entries. Click on qmake and then click Open. You should then see that a manual Qt version has appeared as in Figure 2 below.
  • The compiler should have been auto-detected. If not add it by browsing to the location of gcc/mingw (e.g., /usr/bin/g++).
  • Click on the “Kits” tab again and click on “Add…” Give the kit a name (e.g., Qt for Desktop) and the entries should appear as in Figure 3 below. Press OK and then a kit should appear in the dialog. Press Next. Press Next again. Press Finish.
  • All going well, you can now click on the green play button on the bottom left of the IDE and the output will appear as in Figure 4.

At any stage you can return to these options using Tools → Options.

Figure 1. Qt Kits
Figure 2. Qt Version
Figure 3. Qt Kit options
Figure 4. Qt Project

Building Qt from Source for the BeagleBone

Here are the steps for building Qt4.8.2 from source for the BeagleBone so that you can cross-compile Qt applications for the BeagleBone. This requires that you have installed a full toolchain from Chapter 7. Please note that I cannot support any questions that deviate from these instructions (e.g., building Qt5) — please use the Qt forums for support. There are many, many things that can go wrong with the following steps. These steps are valid and work perfectly as of May 2015 for the BeagleBone Debian image (Linux beaglebone 3.8.13-bone70).

Step 1: Download the source from: http://download.qt.io/archive/qt/4.8/4.8.2/. This is the version of Qt that is installed on the 3.8.13-bone50 and bone70 images. Download the image for Linux with the tar.gz extension, e.g., qt-everywhere-opensource-src-4.8.2.tar.gz (228MB). Download the .tar.gz file – do not download the .zip file to a Linux platform.

molloyd@debianJessie:~/Downloads$ ls -l qt*
-rw-r----- 1 molloyd molloyd 239108331 May 18 01:14 qt-everywhere-opensource-src-4.8.2.tar.gz

Step 2: Extract the source code:

molloyd@debianJessie:~/Downloads$ tar zxvf qt*.tar.gz
molloyd@debianJessie:~/Downloads$ mkdir ~/qt_src
molloyd@debianJessie:~/Downloads$ mv qt-everywhere-opensource-src-4.8.2 ~/qt_src/
molloyd@debianJessie:~/Downloads$ cd ~/qt_src/
molloyd@debianJessie:~/qt_src$ ls
qt-everywhere-opensource-src-4.8.2
molloyd@debianJessie:~/qt_src$ cd qt-everywhere-opensource-src-4.8.2/
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ ls
bin configure examples LGPL_EXCEPTION.txt LICENSE.LGPL README translations
changes-4.8.2 configure.exe imports lib mkspecs src util
config.profiles demos include LICENSE.FDL projects.pro templates
config.tests doc INSTALL LICENSE.GPL3 qmake tools

Step 3: Prepare for build by creating a mkspecs file for armhf by modifying the linux-arm-gnueabi-g++ mkspecs file.

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ cd mkspecs/
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs$ cp -r linux-arm-gnueabi-g++/ linux-arm-gnueabihf-g++/
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs$ cd linux-arm-gnueabihf-g++/
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs/linux-arm-gnueabihf-g++$ ls -l qmake.conf
-rw-r--r-- 1 molloyd molloyd 835 May 17 23:04 qmake.conf

Edit the qmake.conf file to have “gnueabihf” entries rather than “gnueabi” entries.

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs/linux-arm-gnueabihf-g++$ nano qmake.conf
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs/linux-arm-gnueabihf-g++$ more qmake.conf

Step 4: Run Configure. You need to have the toolchain configured as in

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2/mkspecs/linux-arm-gnueabihf-g++$ cd ../..

Make sure you have xlib installed:

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ sudo apt-get install libx11-dev libavahi-gobject-dev libSM-dev libfontconfig-dev libXext-dev libfontconfig1-dev libfreetype6-dev libx11-dev libxcursor-dev libxfixes-dev libxft-dev libxi-dev libxrandr-dev libxrender-dev

Then call ./configure

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ ./configure -v -opensource -confirm-license -xplatform linux-arm-gnueabihf-g++ -embedded arm -little-endian -host-little-endian -prefix /usr/local/qt4.8.2-armhf -nomake demos -nomake examples -no-qt3support -qt-gfx-linuxfb -qt-gfx-qvfb -qt-gfx-vnc -no-accessibility

Qt is now configured for building. Just run 'make'.
Once everything is built, you must run 'make install'.
Qt will be installed into /usr/local/qt4.8.2-armhf
To reconfigure, run 'make confclean' and 'configure'.

All going well you can then build Qt:

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ make

ts -qm qvfb_zh_CN.qm
Updating 'qvfb_zh_CN.qm'...
Generated 61 translation(s) (61 finished and 0 unfinished)
/home/molloyd/qt_src/qt-everywhere-opensource-src-4.8.2/bin/lrelease qvfb_zh_TW.ts -qm qvfb_zh_TW.qm
Updating 'qvfb_zh_TW.qm'...
Generated 61 translation(s) (61 finished and 0 unfinished)
make[1]: Leaving directory '/home/molloyd/qt_src/qt-everywhere-opensource-src-4.8.2/translations'

If you successfully build Qt then you can install it on your desktop computer using (please note the use of sudo):

molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ sudo make install
molloyd@debianJessie:~/qt_src/qt-everywhere-opensource-src-4.8.2$ cd /usr/local/qt4.8.2-armhf/
molloyd@debianJessie:/usr/local/qt4.8.2-armhf$ ls
bin imports include lib mkspecs plugins tests translations
molloyd@debianJessie:/usr/local/qt4.8.2-armhf$ cd bin
molloyd@debianJessie:/usr/local/qt4.8.2-armhf/bin$ ls
lrelease moc qmake rcc uic
molloyd@debianJessie:/usr/local/qt4.8.2-armhf/bin$ ./qmake -version
QMake version 2.01a
Using Qt version 4.8.2 in /usr/local/qt4.8.2-armhf/lib

Step 5: Test that it works by creating a main.cpp file with the contents:
molloyd@debianJessie:~/testqt$ more main.cpp

molloyd@debianJessie:~/testqt$ /usr/local/qt4.8.2-armhf/bin/qmake -project
molloyd@debianJessie:~/testqt$ /usr/local/qt4.8.2-armhf/bin/qmake
molloyd@debianJessie:~/testqt$ make
arm-linux-gnueabihf-g++ -c -pipe -O2 -Wall -W -D_REENTRANT -DQT_NO_DEBUG -DQT_GUI_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/local/qt4.8.2-armhf/mkspecs/linux-arm-gnueabihf-g++ -I. -I/usr/local/qt4.8.2-armhf/include/QtCore -I/usr/local/qt4.8.2-armhf/include/QtGui -I/usr/local/qt4.8.2-armhf/include -I. -I. -o main.o main.cpp arm-linux-gnueabihf-g++ -Wl,-O1 -Wl,-rpath,/usr/local/qt4.8.2-armhf/lib -o testqt main.o -L/usr/local/qt4.8.2-armhf/lib -lQtGui -L/usr/local/qt4.8.2-armhf/lib -lQtNetwork -lQtCore -lpthread
molloyd@debianJessie:~/testqt$ ls -l total 32 -rw-r–r– 1 molloyd molloyd 232 May 18 00:24 main.cpp -rw-r–r– 1 molloyd molloyd 2460 May 18 02:21 main.o -rw-r–r– 1 molloyd molloyd 8330 May 18 02:21 Makefile -rwxr-xr-x 1 molloyd molloyd 7980 May 18 02:21 testqt -rw-r–r– 1 molloyd molloyd 298 May 18 02:20 testqt.pro

 

Step 6: Test on the BeagleBone itself. Sftp the BBConsoleApp program to the BeagleBone and SSH to the BeagleBone. On the BeagleBone:
molloyd@beaglebone:~$ sudo apt-get install libqt4-core libqt4-Gui molloyd@beaglebone:~$ ./testqt
Hello BeagleBone from a console application ^C
molloyd@beaglebone:~$

Step 7: Test GUI build by creating a program in the a directory testqtgui with the name main.cpp as follows:

molloyd@debianJessie:~/testqtgui$ more main.cpp

molloyd@debianJessie:~/testqtgui$ /usr/local/qt4.8.2-armhf/bin/qmake -project
molloyd@debianJessie:~/testqtgui$ /usr/local/qt4.8.2-armhf/bin/qmake
molloyd@debianJessie:~/testqtgui$ make
arm-linux-gnueabihf-g++ -c -pipe -O2 -Wall -W -D_REENTRANT -DQT_NO_DEBUG -DQT_GUI_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/local/qt4.8.2-armhf/mkspecs/linux-arm-gnueabihf-g++ -I. -I/usr/local/qt4.8.2-armhf/include/QtCore -I/usr/local/qt4.8.2-armhf/include/QtGui -I/usr/local/qt4.8.2-armhf/include -I. -I. -o main.o main.cpp
arm-linux-gnueabihf-g++ -Wl,-O1 -Wl,-rpath,/usr/local/qt4.8.2-armhf/lib -o testqtgui main.o -L/usr/local/qt4.8.2-armhf/lib -lQtGui -L/usr/local/qt4.8.2-armhf/lib -lQtNetwork -lQtCore -lpthread
molloyd@debianJessie:~/testqtgui$ ls -l
total 32
-rw-r--r-- 1 molloyd molloyd 218 May 18 00:43 main.cpp
-rw-r--r-- 1 molloyd molloyd 2812 May 18 02:23 main.o
-rw-r--r-- 1 molloyd molloyd 8390 May 18 02:23 Makefile
-rwxr-xr-x 1 molloyd molloyd 8024 May 18 02:23 testqtgui
-rw-r--r-- 1 molloyd molloyd 298 May 18 02:23 testqtgui.pro

Sftp the testqtgui application to the BeagleBone. The use VNC to connect to the BeagleBone:

molloyd@debianJessie:~/testqtgui$ ssh -XC molloyd@192.168.7.2

molloyd@beaglebone:~$ ls
BBBConsoleApp BBBTest backup exploringbb testqt testqtgui
molloyd@beaglebone:~$ ./testqtgui

testqtgui

Digital Media Resources

Here the digital resources referred to in the chapter web page are provided. There are high-resolution versions of some of the important figures and links to videos, resources and websites that are described in the chapter.
This is the first video in a set of three on Qt application development on the Beaglebone or any other embedded Linux device. This video introduces the LCD module that I used, reviews it and then discusses how you can install it and develop very basic onboard GTK GUI applications. This leads to the second video where I set up a full toolchain for Qt application development under embedded Linux (Qt for embedded devices) and then in the final video I demonstrate an example application that uses an accelerometer and LED to act as output/input devices and I provide the full source code.
This is the second video in a set of three on Qt application development on the BeagleBone or any other embedded Linux device. The first video introduces the LCD module that I used and this video is where I set up a full toolchain for C++ Qt application development under embedded Linux (Qt for embedded devices). This toolchain allows us to cross compile Qt applications for the Beaglebone, deploy the applications directly to the beaglebone with a single click and even use remote debugging using gdbserver to diagnose any problems with our applications. The main use of this platform is for GUI application development when a LCD module, or external display is present.
This is the third video in a set of three on Qt application development on the Beaglebone or any other embedded Linux device. The first video introduces the LCD module that I used and the second video is where I set up a full toolchain for C++ Qt application development under embedded Linux (Qt for embedded devices). This toolchain allows us to cross compile Qt applications for the Beaglebone, deploy the applications directly to the beaglebone with a single click and even use remote debugging using gdbserver to diagnose any problems with our applications. The main use of this platform is for GUI application development when a LCD module, or external display is present.

External Resources

Important Documents

External Web Sites

The AM335x Technical Reference Manual (TRM)

The BeagleBone Black System Reference Manual (SRM)

Errata

None for the moment.