QUIt - Providing Extraordinary User Experience

GForce - Recursive shaders

GForce application measures g-force through sensors and shows a history graph of the measurements. Application is implemented with Qt5 QML and graph rendering utilizes a recursive shader. Graph component can be customized to different needs quite easily. If you are testing on PC without accelerometer sensor, please modify 'feedWithDummyValues: true' from main.qml to get data for graph.

Download the source codes: QUIt_GForceMeter_1.0.tgz


QUItBattery is a QML component utilizing Qt5 features like shaders and particles to offer fluidity. Included example application demonstrates how this component could behave in different situations. Component offers quite rich visual appearance while still performing quite well. Here is a video presenting the QUItBattery component on PC and on Nokia N9:

Download the source codes: QUItBattery_1.0.0.tar.gz


QUItIndicators contains two dynamic Qt5 components, BusyIndicator and ProgressIndicator. These components are implemented using QML and GLSL for optimal GPU utilization. Here is a video of an example application presenting these components:

These components can be used in your own Qt5 QML UIs or as an example of implementing dynamic components.

Download the source codes: QUItIndicators_1.0.1.tar.gz

Qt5 NMapper

NMapper is a small application to experiment with normal mapping on Qt5. Normal mapping shader effect is used to get a 3D feeling while using plain 2D images.

NMapper features:

  • Contains few pre-made images and normal map textures with possibility to add your own.
  • Change the light intensity, boost diffuse reflection and move the light to see how the textures behave.
  • Switch x/y-coordinates of the normal map texture so that light reflects correctly.
  • Test textures with plain background or more dynamic 'cave mode' to see how they behave.
  • Use the NMap shader effect and tested textures in your own application.

To demonstrate how NMapper and normal mapping shader could be used in application, also NMap Carousel example application is available:

Download the source codes:

Qt5 Cinematic Experience

Welcome to 'Cinematic Experience' demo. This application demonstrates the power of Qt5 and few of the new additions available in QtQuick 2.0.

Qt5 features utilized include:

  • Rendering: Qt5 has brand new rendering backend 'QML SceneGraph' which is optimized for hardware accelerated rendering. This allows to take full gains out of OpenGL powered GPUs on desktop and embedded devices. Not just performance, new Qt5 rendering backend also allows features which have not been possible earlier.
  • Particles: Qt5 comes with a fresh particles plugin 'QtQuick.Particles 2.0' which is superior compared to Qt4 particles. In this demo application, twinkling stars, shooting star and fog/smoke have been implemented using this new particles engine. Superb.
  • Sprites: QtQuick 2.0 has built-in support for sprites using Sprite, SpriteSequence and AnimatedSprite elements. Sprites can also be used as a source for particles. In this demo application, shooting star is an AnimatedSprite with 16 frames.
  • Animations: QtQuick has always had a very strong animations support. Qt5 supports now also animations along a non-linear paths using PathAnimation and PathInterpolator QML elements. In this demo, shooting star position moves along PathAnimation using PathCurves.
  • ShaderEffects: Qt5 supports ShaderEffect and ShaderEffectSource QML elements which allow writing custom GLSL shader effects. This gives developers a lot of control to transform and enhance QML UIs by increasing dynamicity. In this demo, custom shader effect is used for lighting the movie delegates.
  • Graphical Effects: Qt5 comes with pre-defined set of effects such as drop-shadow, blur, glow, colorize etc. These are available in 'QtGraphicalEffects 1.0' plugin. In this demo, DropShadow is used to improve the appearance of movie title texts.

Download the source codes:

Qt5 LedScreen component

This is a simple LedScreen component utilizing Qt5 QML + GLSL. Here's a video showing few examples of how to utilize it:


  • Use any QML content as source for the ledscreen
  • Define led size freely
  • Define led color or use colors from the source item

Download the source codes: ledscreen_1.0.tgz

Smoke the Bugs!

You have a cookie. Bugs want it. So there is absolutely no other alternative than to...Smoke the Bugs!

Use a magnifying glass to prevent bugs getting your cookie. There are grass and sand levels, during daytime or night, with few different bugs to smoke. Check the highscores to see your total points and title. Do you have what it takes to become 'Bugs Enemy #1'?!

This game is freely available from Nokia store for:

Five In a Row

This game is the classical 5-in-a-row, also known as tic-tac-toe or gomoku. Players place their tiles in turns and winner is the first player to get an unbroken row of five tiles horizontally, vertically, or diagonally.

Game contains two-player mode which is played keeping the device still in between the players and letting UI rotate towards the player whose turn it currently is. One-player mode contains three different levels of challenge: Easy, Medium and Hard. Which ones can you beat?!


This application demonstrates distance field OpenGL shaders. Using this technique, it is possible to render smootly using low-resolution pixmaps and with excellent performance. Application requires Qt5 with Qt Quick 2.0. For more details about distance field method, have a look at the original SIGGRAPH paper from Valve from here.




This is a simple example of combining Qt Quick QML UI with OpenGL shaders. Instead of using QML Scene Graph, standard Qt 4.7 is used with the help of qml1-shadersplugin.



Qt Quick Game Programming

This tutorial is a crash course into Qt Quick development using the latest Qt 4.7 release. It introduces first briefly what Qt Quick is, and then dig into implementation details of a game called 5-in-a-row.

The tutorial demonstrates a big variety of QML components and how they are used, as well as layouting in QML, creating animations, communicating between QML and C++ with signals/slots and properties, and much more.

Download the tutorial: Qt_Quick_Game_Programming_1_0.pdf

For a feedback about this tutorial, please contact info@quitcoding.com


Snowtter is here to get You into Christmas mood:

  • Twitter™ : Presenting public Twitter messages which contain ”Christmas”, ”Xmas”, "Holidays" or "Snow"
  • Snowing: Different snowflakes dropping realistically with messages
  • Background: Background image can be changed by clicking it
  • Accelerometer: Snowflakes react on accelerometer so user can affect snowing speed/direction by rotating the device
  • Requirements: Requires at least Qt 4.5 (libqt4-gui, libqt4-network, libqt4-xml, libqt4-opengl). Qt 4.6 is recommended for better performance and rendering quality. Instructions on how to install Qt 4.6 on N900 are available here

Download the Nokia N900 package: snowtter_1.0-2_armel.deb [248KB]