.webp)
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.
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
- 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.
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:
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.
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.
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:
After that, the container can be built, pushed, and run using the following commands on your development machine:
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.
