Creating QT Application with Yocto and Raspberrypi

I developed a GUI Application using QT on my local ubuntu machine and now I want to deploy it to an embedded device. If this is what you want to do then this short story will give a step by step guide to do this.

I am using Raspberrypi 3b+ but the steps should also valid for other hardware Platform as well.

So Let’s begin !

The first step is creating the Qt Application, just open Qt creator and create your application I will be refering to it asmyapp. make sure that it is compiling and running on your PC, if that’ the case we are done with the first step.

In the second step we will focus on setting up yocto for building a complete image including the Qt Application. I assume that you already have cloned a yocto project and build a minimal image with it, if not take a look at this short story.

Along with the other layers (meta-raspberrypi, meta-openembedded…) clone meta-qt6 from this Link : git://code.qt.io/yocto/meta-qt6.git.

So in the end you have following layers in your yocto project:

build
meta-apps
meta-qt6
meta-raspberrypi
meta-openembedded
poky

Third step is the creation of the Application layer.

source poky/oe-init-build-env
bitbake-layers add-layer meta-apps

bitbake will create a new layer and add it to your layer configuration conf/bblayers.conf.

Now in the new created layer meta-apps, create the folder for your recipe myapp, Add the source files from your tested Qt Application and last but not least add the recipe file myapp_1.0.bb. so in the end your layer looks as follow:

Fourth step is to fill in the recipe file, the recipe file tells bitbake among others how to build the Application from the sources and install it.

SUMMARY = "My Qt Application"
LICENSE = "CLOSED"

SRC_URI = "file://main.cpp \
           file://Main.qml \
           file:CMakeLists.txt \
           "

S = "${WORKDIR}/sources"
UNPACKDIR = "${S}"

inherit qt6-cmake

RDEPENDS:${PN} += "qtbase qtdeclarative qtdeclarative-qmlplugins "
DEPENDS += "qtbase qtdeclarative qttools qtdeclarative-native "

EXTRA_OECMAKE += "-DCMAKE_BUILD_TYPE=Release"

SRC_URI contains the list of files of your projects, make sure to include all *.cpp, *.h ,*.qml, and CMakeLists.txt from your Application

Get Boussettaachraf’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

inherit qt6-cmake : qt6-cmake comes from meta-qt6/classes/qt6-cmake.bbclass this class will inject variables and tasks do_configure, do_compile, do_installin your recipe so that you shouldn’t write them manually.

DEPENDS and RDEPENDS are respectively the compile and runtime dependencies of the package ;qtbaseis the qt core module, qtdeclarative is needed for QML and qttools is for QML Build tools, depending on your Application code, you might need more Dependencies.

Last step is to write the image recipe, where we include the qt Application, I added the image recipe in this path meta-raspberrypi/recipes-core/images/rpi-qt-image.bb, the image recipe looks as follow:

DESCRIPTION = "Qt Fullscreen Appliance Image"
LICENSE = "CLOSED"

inherit core-image

IMAGE_INSTALL += " \
qtbase \
qtdeclarative \
myapp \
ttf-dejavu-sans \
fontconfig \
"

# Remove desktop environments — pure embedded
IMAGE_FEATURES:remove = "x11"

Here you need to add myappto the IMAGE_INSTALL variable. I also added ttf-dejavu and fontconfig these are the font recipes. If you don’t include them then your target won’t be able to draw the characters.

That's all , Lets build the image and run it in the target. The command used for building the image is bitbake rpi-qt-image. The application should be included in the filesystem :)

Before testing I want to tell few words about Qt Backends. Qt Application uses QPA, Qt Platform Abstraction, to display the GUI to the screen independently on the Platform. Different QPA could be used depending on the Application needs; Wayland, EGLFS, …

A common QPA is EGLFS which stands for Embedded GL Full screen, and used for rendering Full screen GUI.

Qt Application to driver call

To select the backend we must set the environment variable QT_QPA_PLATFORM before running the appplication.

Allright now you know how to start your GUI on Full screen; Just flash your Image and start your board when the prompt comes up.
QT_QPA_PLATFORM=eglfs myApp

All right we are done!

I hope that was a quick and straight forward !

Enjoy developing your GUI !

If you have any questions leave me omments