Qt Quick QML Digital Signage Demo Part 1

I’ve recently started to play around with Qt and since I’d like to do a digital signage player running on Raspberry Pi, I’ve decided to try to make a simple digital signage demo application to evaluate the development platform.

Raspberry Pi Digital Signage
Screenshot of Digital Signage Demo Written with Qt Creator/QML

In Part 1, my goal was to make a 3 zones layout with a video zone, a picture zone and a scrolling text zone. I would just play one hard-coded media in each zone and the video and scrolling text would have to continuously loop.

I used Qt Creator to create  a “Pigital Signage” application (or should it be Πgital Signage ?).

To create the 3 zones I used the Gridview Element with 3 rectangles:

  • Video zone: 600×432
  • Picture zone: 200×432
  • Text zone: 800×48

Displaying the image is very easy with the Image Element:

The video playback was also supposed to be easy with the Video Element but it can not work on Desktop, so I had to revert to used the Nokia N900 emulator to be able to play a short video (hence the 800×480 resolution of the demo).  It works fine but there is a transparency issue with the emulator (in my PC), so if I want to clearly see the video I have to open a black picture and move the emulator on top. Here’s the video playback code:

The scrolling text should also have been easy since we can use  Webview  Element and html marquee, but I could not solve a problem with left and top margins that always left white border to the text zone.  Finally, I wrote the scrolling text code based on sample code provided by Kunal. I added a new file called ScrollingText.qml to the project:

The code is modified to start scrolling the text from the right until it fully disappears on the left and continuously repeat it.

Here’s the full main.qml with the code for the 3 zones:

In order for QtMultimediaKit to work properly, you also need to modify PigitalSignage.Pro since it is part of QtMobility:

Developing with Qt Creator and QML language seems relatively straightforward as this short demo could be written in one afternoon.

I’m not sure Qt 5 Video Element will be supported for the Raspberry Pi so QML Binding Element may have to be used to call an external video player that support R-Pi GPU.

In Part 2, I plan to list video and pictures file in a directory and play them continuously. For the scrolling text, the plan is to use a (twitter) RSS feed, scroll it and reload it each time the scroll is finished. I may also try to play online video (e.g. YouTube) and parse a config file to configure things like picture display duration, text color and scrolling speed etc…

Share this:
FacebookTwitterHacker NewsSlashdotRedditLinkedInPinterestFlipboardMeWeLineEmailShare

Support CNX Software! Donate via cryptocurrencies, become a Patron on Patreon, or purchase goods on Amazon or Aliexpress

ROCK Pi 4C Plus

Leave a Reply

Your email address will not be published. Required fields are marked *

Khadas VIM4 SBC
Khadas VIM4 SBC