Revision as of 22:31, 9 October 2013 by kiran10182 (Talk | contribs)

Qt mobility application: QtMirror

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: olympio (03 Jun 2010)
Last edited: kiran10182 (09 Oct 2013)
22 Apr

The QtMirror based application turns your phone into a mirror using live video captured from the secondary camera of Symbian devices like: N97,N97 mini, Nokia 5800, etc. The application uses the QtMobility classes to access the camera and show the images and QWidget classes for the UI.

01072010005.jpg 01072010007.jpg 01072010006.jpg

The graphics are courtesy of Signove funlabs Funlabs


The Project

The QtMirror is a project under development. It is available under Nokia Developer Hosting Service (Nokia Developer Projects). From the project page you can obtain more information about the current state of it and how to contribute as it is an open source project. This article is based on the first release of the project that is available on tp-0.1.

To build the project you will need the QtMobility version 1.0.0 installed on you SDK for S60 5th edition.


As the application is quite simple it depends only on one capability:


Code snippets

Locking screen orientation to landscape

The code bellow shows the 'main.cpp' file that contains code to lock the screen orientation to landscape. Note that the Q_OS_SYMBIAN macro is used to define code that is only valid to Symbian platform.

#include "Mirror.h"
#include <QtGui>
#include <QApplication>
// Needed Symbian specific headers
#include <eikenv.h>
#include <eikappui.h>
#include <aknenv.h>
#include <aknappui.h>
#include <unistd.h>
int main(int argc, char *argv[])
QApplication a(argc, argv);
// Symbian specific code
CAknAppUi* appUi = dynamic_cast<CAknAppUi*> (CEikonEnv::Static()->AppUi());
if (appUi) {
// Lock application orientation into landscape
. . .

Display two timed splash screens

The code bellow follows the previous one and shows how to display two splash screens before the application start. Note that the last screen is synchronized with the beginning of the widget so that it only disappear when the widget is ready to be shown.

. . .
int main(int argc, char *argv[])
QApplication a(argc, argv);
. . .
QPixmap pixmapSignove(":/images/splash_1.png");
QSplashScreen splash(pixmapSignove);
sleep( 2 );
QPixmap pixmapMirror(":/images/splash_2.png");
sleep( 2 );
Mirror w;
splash.finish(&w); //line used to synchronize with the widget ready status
return a.exec();

It should be noticed that the image files are contained by the Qt Resource System. If you are using Carbide.c++ the resource file has an .qrc extension. Double click on this file opens an editor view where you can add files, changes prefix (in our case :/images/), and more. The picture bellow shows how to add a file to an existing prefix. For more information regarding the Qt resource System access this link.


Setup the video widget and the camera

To display the camera video onto the screen we will need to use two classes of the QtMobility project: QVideoWidget and QCamera.

The code bellow shows the constructor of the main widget of the QtMirror application as well as the the two functions need to setup the video and the camera. Note that we define the mirror area to be at the center of the screen in the rect MIRROR_SIZE.

const QRect MIRROR_SIZE = QRect(129, 37, 389, 292);
Mirror::Mirror(QWidget *parent) :
QWidget(parent), camera(0), videoWidget(0)
. . .
void Mirror::setupVideo()
videoWidget = new QVideoWidget(ui.frame);
void Mirror::setupCamera()
QByteArray cameraDevice = QCamera::availableDevices()[1];//selecting the secondary camera
camera = new QCamera(cameraDevice);
connect(camera, SIGNAL(error(QCamera::Error)), this, SLOT(error(QCamera::Error)));
videoWidget->setMediaObject(camera); //setting the media object
if (camera->state() == QCamera::ActiveState) {
camera->start();//starting the camera

Configuring the settings view

The QtMirror application has an settings view that allows the user to select different backgrounds. These backgrounds are used as frames to the mirror. The settings view is placed over the video widget to save space.


This view is implemented with a QListWidget with a grid view. When the user selects any item of this list the background changes automatically allowing a better view of the design.

The QListWidget was added using the Qt Design. The code bellow shows how to fill this list with background images contained by the Qt Resource System.

void Mirror::setupSettings()
QDir dir(":/images/background", FILTER_PNG);
QFileInfoList list = dir.entryInfoList( QDir::Files );
for (int i = 0; i < list.size(); ++i)
QIcon icon(list[i].absoluteFilePath());
QListWidgetItem* item = new QListWidgetItem(icon, list[i].baseName(), ui.listWidget );
//connect signals here to change the background under user selection.
this, SLOT(changeBackground(QListWidgetItem*)));
. . .

Changing the background through Qt Style Sheets

Changing the background image when the user selects the item on the Settings view showed above is quite simple. You will need to implement a function that handles user-press events in each QListWidgetItem. This function is shown in the code below:

void Mirror::changeBackground(QListWidgetItem* item)
//: List background picture
QString style = tr("background-image: url(:/images/background/%1.png);").arg(item->text());

We use a QString to define a style sheet to set a new background image. [Qt Style Sheets http://doc.trolltech.com/4.6/stylesheet.html], which are much similar to Cascading Style Sheets (CSS), allow for an easy redefinition of styling aspects. The style are defined with its own syntax (for more information about style sheet syntax take a look at this link). With this syntax we define that the new background image is the same the user has clicked. The call to QWidget::tr() allows translators to influence the styling, the comment above starting with //: is passed on to the translator through Qt's translation system. If this is not needed, you can safely remove this call. After setting the new style sheet of the main frame we call the base class function update() to update the widget.

101 page views in the last 30 days.