Qt Digital Advertising in Toradex's Torizon

Monetizing your embedded devices can seem like a daunting challenge at first. With the large variety of ad networks and technologies, plus the uncertainty of support for various hardware platforms, it might not seem worth the effort. However, serving ads on embedded devices running Qt has never been easier with Qt Digital Advertising and Toradex's Torizon.

With just a few simple docker commands, you'll learn how to build and run a demo that serves ads from Qt's Digital Advertising plugin quickly and easily using TorizonCore. While digital ads are currently supported on every TQC-supported target and verified QBSP target*, the boards tested with this demo are the Colibri iMX7 and the Apalis iMX8, both by Toradex.

toradex_feature

Torizon is an embedded Linux distribution provided by Toradex that runs containers out-of-the-box, making it easy to develop and deploy your applications. We are using containers in this blog post. They make it simple to share complex dependencies environments, and allow you to run this Qt Digital Ads demo - with almost no setup time required - while using a single docker command.

Therefore, this post introduces a how-to guide on how to run a demo implementing the new Qt Digital Ads feature out of the box. The demo can be efficiently run inside a container, using TorizonCore. You can either use the image provided by the Toradex-Qt partnership, which will run the demo directly, or you can build the container image on your development machine. For more information, refer to Toradex's documentation. In case you need to modify the demo's source code to configure display size and media formats, for instance, you must use the second approach and build the docker image yourself, following this guide. By the end of this article, you will have a graphical application capable of serving and monetizing Ads automatically.

 

Running the demo with the provided Docker image

To get started, you must first install TorizonCore on a supported module according to Toradex's instructions. Then, it's a matter of connecting to the board (through SSH or serial port) and going over the next steps.

Start the Weston container for the back-end graphics server:

# In case you are using an Apalis iMX8
$ docker run -e ACCEPT_FSL_EULA=1 -d --rm --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG\ 
 -v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \
 --device-cgroup-rule='c 4:* rmw' --device-cgroup-rule='c 13:* rmw' \
 --device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
 torizon/weston-vivante:$CT_TAG_WESTON_VIVANTE --developer weston-launch \
 --tty=/dev/tty7 --user=torizon

# In case you are using a Colibri iMX7
$ docker run -d --rm --ipc=host --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG \ 
 -v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \ 
 --device-cgroup-rule='c 4:* rmw' --device-cgroup-rule='c 13:* rmw' \ 
 --device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
 torizon/weston:$CT_TAG_WESTON --developer weston-launch \
 --tty=/dev/tty7 --user=torizon -- --use-pixman

And then start the demo container:
  • Access Qt Digital Advertising: if you already have a Qt account, select "I am a Qt user and want to try digital ads tooling." If you don't have an account yet, select "I want to try Qt and the digital ads tooling" to create an account. You will receive an email with the address you provide containing an API key. Then, replace <your_api_key> with your API key.
  • Change the variables SCREEN_WIDTH and SCREEN_HEIGHT according to the resolution of your display.
# In case you are using an Apalis iMX8
$ docker run -e ACCEPT_FSL_EULA=1 -e API_KEY=<your_api_key> -e SCREEN_WIDTH=800 -e SCREEN_HEIGHT=480 --rm -it --name=qt5-ads \
-v /tmp:/tmp -v /dev/dri:/dev/dri -v /dev/galcore:/dev/galcore \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c226:* rmw' \
torizonextras/qt-ads-demo-vivante
 
# In case you are using a Colibri iMX7
$ docker run -e API_KEY=<your_api_key> -e SCREEN_WIDTH=800 -eSCREEN_HEIGHT=480 --rm -it --name=qt5-ads \
-v /tmp:/tmp \
-v /dev/dri:/dev/dri --device-cgroup-rule='c 226:* rmw' \
torizonextras/qt-ads-demo


You will see the application running on a connected display and serving the ads!

You can choose four ad types on the first screen (fullscreen, fluid, anchored, and inline). The video below shows the application running:

Running the demo with a custom-built Docker image

In case you want to build the image yourself, you will need to download the source code for the demo, and the Qt Digital Ads library. You can download the required files on GitHub:

  • Demo Source Code: located in the QAdvertisementEmbeddedDemo folder.
  • Qt Digital Ads Library
    • armv7/arm64: located in the QtDigitalAdvertising_plugin_builds folder.
    • QML plugin files: follow the README instructions to get access to these files.

Note: After cloning the project repository and downloading the  QML plugin files, copy the QML plugin files and paste them into the QtDigitalAdvertising_plugin_builds folder.

 

Customize the demo to suit your use case

Try experimenting with different ad sizes and placements by setting the mediaWidth and mediaHeight parameters appropriately, on the chosen QML files:

customize_files

The following ad dimensions are supported in this demo:

  • 248x272
  • 300x280
  • 1280x800
  • 1280x960
  • 1440x1080
  • 1920x1080
  • 1920x1440

In addition, you can specify media types through the (jpeg and mp4 ) supportedImageFormats and supportedVideoFormats parameters. For instance, to only display videos specify supportedImageFormats: "" and supportedVideoFormats: "mp4" . For this demo, the only available formats are jpeg for images and mp4 for video.

image_formats

If you've signed up for Qt Digital Advertising and have received your digital ads key, you can place that in the EmbeddedConfig object and customize your ads as well.

qdaAPIKey2

 

For more information on the digital ads API, see https://doc.qt.io/QtDigitalAdvertising/index.html.

Create the application's Dockerfile and build the image

You will need to create a Dockerfile according to the following sample:

#=================
# Builder container
#=================
 
# Choose your source image according to your architecture
FROM --platform=linux/arm64 debian:bullseye AS builder
#FROM --platform=linux/arm debian:bullseye AS builder
 
RUN apt-get -y update && apt-get install -y --no-install-recommends \ 
build-essential \
make \
qt5-qmake \
qtbase5-dev \
qtdeclarative5-dev \
qtmultimedia5-dev \
qtquickcontrols2-5-dev \
&& apt-get clean && apt-get autoremove && rm -rf /var/lib/apt/lists/*
 
# Copy application source to container
COPY QAdvertisementEmbeddedDemo /app
 
#Build the application
WORKDIR/app
RUN qmake && make
 
#=================
# Application container
#=================
 
# Choose your source image according to your architecture
FROM --platform=linux/arm64 torizon/qt5-wayland-examples-vivante:2 AS base
#FROM --platform=linux/arm torizon/qt5-wayland-examples:2 AS base
 
RUN apt-get -y update && apt-get install -y --no-install-recommends \ 
qml-module-qtquick-controls2 \
qml-module-qtmultimedia libqt5multimedia5-plugins \ 
libqt5websockets5 \
# ------ Comment the following 2 lines if building for Colibri iMX7
libgstreamer1.0-0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad \ gstreamer1.0-plugins-ugly gstreamer1.0-libav gstreamer1.0-gl gstreamer1.0-qt5 \
# ------ Comment until here
&& apt-get clean && apt-get autoremove && rm -rf /var/lib/apt/lists/*
 
# Copy library binary to container, depending on your architecture
COPY QtDigitalAdvertising /usr/lib/aarch64-linux-gnu/qt5/qml/QtDigitalAdvertising
#COPY QtDigitalAdvertising /usr/lib/arm-linux-gnueabihf/qt5/qml/QtDigitalAdvertising
 
# Copy application binary to container
COPY --from=builder /app/QAdvertisementEmbeddedDemo /usr/bin/QAdvertisementEmbeddedDemo
CMD [ "QAdvertisementEmbeddedDemo" ]
 
Note: The Dockerfile must be located in the toradex folder, alongside QAdvertisementEmbeddedDemo and QtDigitalAdvertising_plugin_builds folders.
 

After that, the container can be built, pushed, and run using the following commands on your development machine:

$ docker run --rm -it --privileged torizon/binfmt
$ docker build -t <your_dockerhub_username>/qt-ads-demo:1 .
$ docker push <your_dockerhub_username>/qt-ads-demo:1
 
Note: If you don't have a Docker account, you can create it on Docker Hub and then, on the device, start weston and the demo from your custom image:
 
# If you are on an Apalis iMX8
$ docker run -e ACCEPT_FSL_EULA=1 -d --rm --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG \ -v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \
--device-cgroup-rule='c 4:* rmw' --device-cgroup-rule='c 13:* rmw' \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
torizon/weston-vivante:$CT_TAG_WESTON_VIVANTE --developer weston-launch \
--tty=/dev/tty7 --user=torizon
 
$ docker run -e ACCEPT_FSL_EULA=1 --rm -it --name=qt5 \
-v /tmp:/tmp -v /dev/dri:/dev/dri -v /dev/galcore:/dev/galcore \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
<your_dockerhub_username>/qt-ads-demo:1
 
# If you are on a Colibri iMX7
$ docker run -d --rm --ipc=host --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG \ 
-v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \ 
--device-cgroup-rule='c 4:* rmw' --device-cgroup-rule='c 13:* rmw' \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \ 
torizon/weston:$CT_TAG_WESTON --developer weston-launch \
--tty=/dev/tty7 --user=torizon -- --use-pixman
 
$ docker run --rm -it --name=qt5-ads \
-v /tmp:/tmp \
-v /dev/dri:/dev/dri --device-cgroup-rule='c 226:* rmw' \ 
<your_dockerhub_username>/qt-ads-demo:1
 

You will see the application running on a connected display and serving the ads!

Note: Platforms must support Qt Multimedia alongside gstreamer to play video ads.

 

Blog Topics:

Comments