Automatic live web page slideshow

One day, Rob Valent (Managing Director ATS Benelux) came up with the idea to set up a display in our public lunch area that shows several websites or local announcements. The application had to meet the following requirements:

– A full-screen web browser application
– A configurable list of websites
– A configurable interval for changing the website
– The possibility to add custom pages for announcements.

I did not find anything I liked so I started to write an application based on  Nokia’s Qt toolkit (not to be confused with Apple’s QuickTime), which has a WebKit browser included. Qt is the toolkit that is used by most the KDE desktop environment in Linux. It is a cross-platform C++ toolkit/framework which has all kinds of data structures, useful utility classes and an easy way for creating GUI applications. WebKit is the browser engine used by browsers like Google Chrome and Apple’s Safari.

The complete Qt SDK for Windows, Mac OS X and Linux can be downloaded free of charge from http://qt.nokia.com . For this project I have used the LGPL version, but there is also a commercial version available. More info about Qt, manuals for Qt Creator and Qt tutorials can be found at the Qt website.

The sourcecode I created can be downloaded here.

To create the GUI, I have used the Qt Creator IDE included with the Qt SDK. Qt Creator has a GUI designer a code editor and an interface to the build tools and the debugger, which is gcc/g++ on Linux and Mac OS X, MinGW on Windows.

I’ve used the QWebView widget, which essentially is the WebKit browser, as the main widget in the application and a QMenuBar, because a menu bar is the easiest way to access the settings dialog and the shut down button of the application.

For each GUI screen created with the GUI designer, a C++ class is created. In the constructor of the MainWindow class, I read the size of the screen and set the size of the QWebView widget accordingly. This is also where the signals and slots of the different objects are connected. Signals are emitted when a specific event occurs to notify other objects that this event occurred. A slot is a special function in a class, to which a signal can be connected. If that signal occurs, the connected slots are executed. Since slots are functions, they can also be called as a regular function from other functions or classes.

In the MainWindow class, there is a QTimer, a QList of QUrl objects and a QSettings object. The function of the QTimer, QList and QUrl are considered obvious. The QSettings object is more interesting. This is a platform-independent way of storing persistent settings for an application. That’s not very special in itself because that can also be done using an INI file or something similar, but the interesting part is that it does this in the way that is native to the platform it is running on. On Windows it uses the registry, on Linux a file in the home directory and on Mac OS X it uses a property list.
The keyPressEvent function is implemented to make the hiding and unhiding of the menu bar possible. It is called by Qt when a key is pressed, so appropriate action can be taken when the escape or tilde key is pressed. The tilde (~) key is added to make management from an iPhone or Android device possible.

In the Settings dialog, nothing special happens. When the OK button is clicked, the settings are written to the QSettings object and a signal is emitted that the settings have changed. This signal is connected to the MainWindow, so that the settings are applied immediately, by reading them back from the QSettings object in the MainWindow class.

To deploy the software on a Linux or Mac OS X system, there are no prerequisites apart from installing the Qt runtime libraries QtCore, QtGui and QtWebKit using the package manager of choice, i.e. apt-get, MacPorts etc.
To deploy the software on a Windows system, the Qt runtime libraries and the compiler-specific libraries need to be included in the distribution package. The complete list of DLL files required is found in the next screenshot. To show Flash animations, it’s required to install Adobe’s Flash Player for Firefox and Safari.

A Windows distribution package is included with this post. The source is also included, so you can play around with it. Just open the Ticker.pro file using Qt Creator and you can get started.

We have the browser running on a Windows system now. The next challenges are to get it running properly on a Linux based live USB stick or even Freddy’s IGEPv2 board.

Source code can be downloaded here.

Advertisements
This entry was posted in Post Webkit and tagged , , , , , , , , , , . Bookmark the permalink.

4 Responses to Automatic live web page slideshow

  1. Martin Willcox says:

    Dear atsromkeboonstra,
    I have just read this post and am very interested in doing the same at our company.
    Can you make the links live again? The source code is not avaliable to me.
    Cheers Martin

  2. Kan Grewal says:

    Hi just come across this – sounds just like what I’ve been looking for! Where is the Windows distribution package?

    Many thanks
    Kan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s