Building custom widgets with the Zinzala SDK
Abstract
In this article we will explore the creation, of a custom widget for an automotive application. Introduced in April 2003, the Zinzala SDK is a BeOS flavored Software Development Kit for QNX. The SDK has improved since then, taking on small features inspired by the Symbian OS. Because Zinzala brings in the benefits of object-oriented programming, it can leverage the quality of your QNX RTOS based embedded products.
Intended audience
This article is intended for C++ developers who are familiar with Graphical User Interface development. No specific knowledge of QNX is required. However, some knowledge of the Zinzala SDK will be useful, so check out the updated version of Introducing Zinzala.
Contents
- 1. Overview
- 2. Implementing skinability
- 3. The cDConsoleView class
- 4. Using cMyConsoleView
- 5. Adding scriptability
- 6. Conclusion
1. Overview
Over the past few years, QNX has been making a strong in-road into the automotive market. Cars manufactured by Audi, DaimlerChrysler or Saab are currently being shipped with infotainment systems built on top of the RTOS made by QNX Software Systems (QSS). The recent purchase of QSS by Harman International Industries can be seen as proof of the pioneering position taken by QNX over the recent years. This endorsement by Harman is a sign of the quality of this embedded Operating System.
Like many other embedded systems, an in-car device relies on a custom Graphical User Interface (GUI); most often built on top of an existing GUI framework. For example, in the smartphone world, the Symbian OS provides Uikon, which is a basic framework that each licensee can use to build their own set of widgets or customize the existing ones. In this very competitive market, differentiating your products from the concurrent ones is an absolute priority. Through different UI style and attractive application offerings, each Symbian licensee will try to enforce its own branding. This also applies to the automotive industry as well. However, the look of the infotainment may not be at the top of the buyer's list of considerations during a car purchase.
In this article, we are going to explore the creation of a custom widget for QNX using the basic components provided by the Zinzala SDK. Here's a screenshot of it:
This widget is only one element of a multimedia console, much like the one we would expect to find in any kind of multimedia player. However, its implementation will offer us an interesting ground to explore in this article.
The big picture
Let's suppose that we are building the application framework for a QNX based in-car device, similar to the ones made by G-Net. Our console widget is going to be one of the many custom widgets that will be available to the application developers. This widget will be used by the music and video player. Each application will use class derivations in order to program the console widget against specific actions when the user interacts with the GUI. For instance, specific actions, which would result from the user pressing the Play button.
The application framework (let's call it Carrozza) that we will be using to build our applications is, not limited to the GUI side of the embedded system. It could also provide libraries for audio playback, data persistence or networking. This framework is simply an extra layer, intended to unify the development of every application by offering architects and developers all the components they will need. Of course, this doesn't forbid the use of some of the classes available from the lower layers. Providing a set of components designed to fit the common needs of all applications, help reduce the risk of duplication of code.
Here's a representation of the layering:
Although Photon is part of the QNX platform, I have placed it on its own layer to show Zinzala's dependencies. We will expect application developers to only go as low as the Zinzala layer, which is composed of Cincinella and Farfalla. Low-level components, such as a CD player control class, will probably require access to the QNX API. However, they will be made available to the application developers from the top layer.
Zooming in ...
Now that we have pitched the overall view, let's go back to the console widget. We will walk through the construction of the widget, and then show how to integrate it to a simple test application. Here's what we are going to look at:
- How to create a shared object from the raw skin graphics
- How the widget will use the skin
- How to render the console and each button's states
- How to render an animation effect for the active button
- How to handle user inputs
- How to support the change of skin on the fly
Graphics
For this article all the graphics files that will be used, have been created in house. However, it will usually be the graphic team, which in compliance with the UI style decided for the whole platform, will provide them to the development team.