QtInfo available in Nokia Store

Another project that I have been blogging about every now and then has made it to Nokia Store!

QtInfo was a project started by Attila Csipa for creating a utility that would quickly and easily show as much information as possible of the Qt environment in which the application is run. Another goal was to create an example application that would show how to dig up the information using Qt APIs.

I have been contributing mostly UI related stuff to the project. Anyway, the application started to be quite good so we decided to make it available (for Symbian at the moment) in Nokia Store. Lucian Tomuta did the honors of packaging the application and going through the Nokia Store QA process, and now Symbian version of the app is available for download in the store: QtInfo in Nokia Store.

By no means is the application exclusive to mobile devices, the sources compile quite nicely also for desktop platforms like Windows, Linux or Mac. Of course the need for this kind of an application is the biggest on mobile, especially Symbian where Qt versioning can be a bit hairy.

If you want to see how the implementation is done, source code of the application is available on the QtInfo project page.

Cute Colors available in Nokia Store

Some time ago I blogged about a coloring book app that I did for an internal team event at work. Finally I had time to polish it to make it good enough to be published in Nokia Store.

Since the app is not tied to any platform specific features, it was very easy to create versions of it for both Nokia N9 and Symbian (Belle or later) devices.

There are not really that many changes in functionality to what you can see in the video that I made for the previous blog post, except for new and hopefully better graphics. One noteworthy thing is that the app now uses the new PinchArea element from Qt Quick 1.1, which makes pinching a lot less temperamental than in the video.

You can download Cute Colors from the Nokia Store by clicking here: Cute Colors in Nokia Store

Screenshot of the N9 version (Symbian one looks exactly the same but at lower resolution).

On-Device Debugging of QML Applications

I haven’t been able to get on-device debugging of QML application working on Symbian. Supposedly some people have been successful with it already earlier, but no matter what I have tried, I have never been able to get it to work properly.

All is different with the latest Qt SDK with Qt Creator 2.3.1 and Qt 4.7.4. To get on-device debugging to work I simply needed to follow the instructions in Qt SDK documentation. In short:

• Install Qt 4.7.4, CODA and QML viewer on the Symbian Device (the SIS files are available in QtSDK\Symbian\sis\Symbian^3\Qt\4.7.4 and QtSDK\Symbian\sis\Symbian^3\CODA)
• Start CODA on the device
• Link the project against QML debugging library (Projects->Symbian Device->Build->Build Steps)
  
• Check the “Debugger: QML” check box under Symbian Device->Run settings
  

After the steps above all it takes to debug my application on device is to select Symbian target in Qt Creator and click on the “Start debugging” button.

So, what does work? In short, everything. Breakpoints in C++ or JavaScript code, QML inspector and QML script console work as expected.

QML Inspector showing the properties of a ToolButton

The most impressive part for myself is the ability to edit QML code at runtime and have the changes automatically applied to the running QML application on device. This makes trying out different things so much faster.

I’m lovin’ it.

Split screen text input done properly

Some time ago I blogged about hacking split screen text input to QML on Symbian. Starting from Qt 4.7.4 enabling split screen editors in QML becomes much easier.

Already Qt 4.7.3 defines an ApplicationAttribute flag Qt::AA_S60DisablePartialScreenInputMode for disabling partial screen input mode. By default the flag is set to true. In Qt 4.7.3 this flag does not do anything from QML point of view. Starting from Qt 4.7.4 the flag can be used to enable split screen input for QML text editors with proper functionality like automatically moving the editor if it would be obscured by the on-screen keyboard.

Enabling the split screen keyboard can be done simply by setting the Qt::AA_S60DisablePartialScreenInputMode flag to false somewhere in the main.cpp, like this:

    QCoreApplication::setAttribute(Qt::AA_S60DisablePartialScreenInputMode, false);

Below you can see two screenshots of split screen inputs working in an application after adding the one line of code above.

  

A Qt Quick Components TextField anchored to the bottom of the screen with OSK closed and open

Qt 4.7.4 for Symbian is already available as a beta target with the latest version of Qt SDK, it is easy to test if enabling the split screen keyboard causes some issues in applications. Since Qt 4.7.4 is not available in Smart Installer yet, deploying split screen-enabled applications to Nokia Store needs to wait some more time.

However, since the flag that is needed to enable split screen input mode is available already in Qt 4.7.3, I don’t see any harm in adding the code that enables split screen input already now.

Also note that at the moment the application must have SwEvent capability in order to support predictive text input in split screen mode.

Multithreaded audio using QAudioOutput

While working on an app I noticed that if the QML UI is running animations and at the same time I’m trying to use QAudioOutput to play sound effects the animation becomes choppy quite easily, at least on (Symbian) device. I guess the cause for the problem is that audio processing is happening in the same thread that is running the event loop.

The solution to the problem is quite obvious – move the audio related stuff to a different thread. However, doing this required some tinkering, so I’m documenting the solution here in case somebody else is facing the same problem. Of course, this solution is in no way exclusive to audio output, it could just as well used to do any (QML or C++ -initiated) processing in a separate thread.

In my implementation I’m using two C++ classes, SfxPlayer and SfxThread. SfxPlayer gets exposed to QML side and it contains one slot, play(). The only purpose of the class is to contain an SfxThread object and to work as a proxy for invoking methods on the other thread.

sfxplayer.h

#ifndef SFXPLAYER_H
#define SFXPLAYER_H

#include <QObject>
#include "sfxthread.h"

class SfxPlayer : public QObject
{
    Q_OBJECT
public:
    explicit SfxPlayer(QObject *parent = 0);

signals:

public slots:
    void play();

private:
    SfxThread _sfxThread;
};

#endif // SFXPLAYER_H

sfxplayer.cpp

#include "sfxplayer.h"

SfxPlayer::SfxPlayer(QObject *parent)
    : QObject(parent)
{
}

void SfxPlayer::play()
{
    // Call playInternal of SfxThread (and invoke it in the other thread)
    QMetaObject::invokeMethod(&_sfxThread, "play", Qt::QueuedConnection);
}

The thing that caused a bit of head-scratching was how to make the player thread actually do the processing in the other thread instead of the caller. The solution is to call QObject::moveToThread(this); in the constructor of the thread.

sfxthread.h

#ifndef SFXTHREAD_H
#define SFXTHREAD_H

#include <QThread>
#include <QAudioOutput>
#include <QBuffer>
#include <QQueue>

class SfxThread : public QThread
{
    Q_OBJECT
public:
    explicit SfxThread(QObject *parent = 0);
    ~SfxThread();
    void run();

signals:

public slots:
    void play();
    void playerStateChanged(QAudio::State state);
private:
    void playNext();
    void play(QString& filename);

    QAudioOutput *_ao;
    QAudioFormat _af;
    QBuffer _buf;

    QQueue<QString> playlist;
};

#endif // SFXTHREAD_H

sfxthread.cpp

#include <QFile>
#include <QApplication>
#include "sfxthread.h"

SfxThread::SfxThread(QObject *parent) :
    QThread(parent)
{ 
    ...do precaching etc of the sounds here

    start();

    // Move event processing of SfxThread to this thread
    QObject::moveToThread(this);
}

SfxThread::~SfxThread()
{
    quit();
    wait();
}

void SfxThread::play()
{
    playlist.append(...);
    playNext();
}

// Plays the next file from queue
void SfxThread::playNext()
{
    if (playlist.length() == 0 || _ao->state() == QAudio::ActiveState) {
        return;
    }
    _ao->stop();
    _buf.close();
    play(playlist.dequeue());
}

void SfxThread::play(QString& filename)
{
    // load content here
    QByteArray *ptr = ...

    _buf.setBuffer(ptr);
    _buf.open(QIODevice::ReadOnly);

    _ao->setBufferSize(_buf.size());
    _ao->start(&_buf);
}

void SfxThread::playerStateChanged(QAudio::State state)
{
    // Play finished, play next clip
    if (state == QAudio::IdleState)
    {
        playNext();
    }
}

void SfxThread::run()
{
    ...set audio format here (_af.setCodec etc)
    
    _ao = new QAudioOutput(_af);

    connect(_ao, SIGNAL(stateChanged(QAudio::State)), this, SLOT(playerStateChanged(QAudio::State)));

    exec();
}

That’s it! You can now expose the SfxPlayer object to QML. Calling .play(); in QML will now just invoke the play method of SfxThread in the new thread that is running it’s own event loop.

Windows Phone

I created a new blog for talking about things related to Windows Phone. This blog has been (and will be) about Qt and I plan to continue blogging also about it when I feel that I have something interesting to say.

You can find the new blog from http://wpdevsource.wordpress.com/

QtInfo goes Qt Quick components (on Symbian)

Some time ago I blogged about the QtInfo project which aims to provide a simple tool for figuring out all sorts of information about the Qt installation on your device. The UI of the application didn’t really work that well on Symbian, so we decided to do something about it.

Qt Quick components provide a very convenient way to create a modern looking UI for a QML application. The components are of course mostly useful for “productivity” applications – like QtInfo – that don’t need too flashy graphics. After a little (very little, in fact) investigation into how PageStack, ToolBar, ToolButton, ListItem etc. work I ended up with the UI that you can see below. If you’re interested in how the UI has been implemented, you can find the QML sources here.

To make the change more obvious I attached a screenshot of the QWidget-based UI as a comparison. I would say that it’s quite a nice result considering that I only spent a couple of hours with it.

  

From old and tired to new and fresh (screenshots are from QtInfo running on Nokia N8)

In addition to making the UI more pleasing to the eye the Qt Quick components also provide some usability improvements like flick scrolling on the information list and buttons that are easier to hit with a finger.

The QML UI is implemented in such a way that if QtDeclarative module or Qt Quick components are not available the application will fall back to QWidget-based UI. The check is implemented by first testing if QtDeclarative module is present. If it is, the application tries to load a bit of QML that imports the com.nokia.symbian 1.0 module. The QML based UI is enabled if loading succeeds, otherwise the old UI will be used.

The old UI also struggled with orientation changes, with Qt Quick components (and QML in general) handling landscape orientation became really easy. Since the UI is not too complex and there’s no layout changes when moving from portrait to landscape, I did not need to do any changes to the QML code for landscape orientation to work nicely.

QtInfo in landscape orientation on Nokia N8

Here’s one more screenshot. In QtInfo I’m using a SelectionDialog for selecting where to share or copy data.

SelectionDialog for selecting where to share data

In my Coloring Book blog post I was raving about how easy it is to create nice looking UIs with Qt Quick. With the Qt Quick components the ease of development just became even better. The things that have impressed me the most so far are PageStack concept for doing automatic view transitions and the ToolBar for command handling. Also it’s nice to finally have a Button, I’m a bit tired of creating Button.qml’s.

Another problem when creating the high-level UI components yourself has been that making the application fit the platform and the other applications has not been too easy, especially if you don’t have a skilled graphics designer at hand. Qt Quick components helps a lot in this, for example for QtInfo I did not need to create any graphics myself, which saved a huge amount of time.

QtInfo does not have Smart Installer packaged with it. Because of this Qt Quick Components will not get automatically installed, so you must manually install the Qt Quick Components for Symbian package to enable the new UI. Unless, of course, you already have Qt Quick components installed on your phone. Note that the sis file that we have on the project page does not yet contain the new stuff, updated sis file will be available soon.Installer sis is now available under featured downloads on the project page (qtinfo_3.0_selfsigned.sis).