Qt Graphical Effects in Qt Labs

Introduction

The Qt Graphical Effects project is on its way to offer a set of design neutral visual effects for Qt Quick 2.0.

Over twenty ready-made QML graphical effect elements are currently available. The effects include code for blending, masking, blurring, coloring, and much more. There are still areas to improve and extend — all ideas, feedback, proposals and even concrete contributions are welcome!

The Effects

The Effects

Using the effects

Using the graphical effect elements should be straightforward for developers and technically oriented designers as you only need to know basic Qt Quick/QML to get started.

Any QML item can be used as a source item for an effect. You can add a drop shadow to an image, for instance, as follows:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item { width: 300 height: 300

Rectangle { id: background anchors.fill: parent }

Image { id: butterfly source: "images/butterfly.png" sourceSize: Qt.size(parent.width, parent.height) smooth: true visible: false }

DropShadow { anchors.fill: butterfly horizontalOffset: 3 verticalOffset: 3 radius: 8.0 samples: 16 color: "#80000000" source: butterfly } }

Getting started

Get and build Qt5: http://developer.qt.nokia.com/wiki/Building_Qt_5_from_Git

Make sure that qtbase/bin is in your path and QTDIR points to /qtbase

Get and build Qt Graphical Effects module: https://qt.gitorious.org/qt-labs/qtgraphicaleffects

git clone git@gitorious.org:qt-labs/qtgraphicaleffects.git
cd qtgraphicaleffects
qmake
make install

To see the effects in action, run the code examples from the graphical effects doc/src/snippets folder:

qmlscene doc/src/snippets/DropShadow-example.qml

or launch the Testbed application:

qmlscene tests/manual/testbed/testBed.qml

The Testbed application is a convenient way to browse the effects and their properties as well as to visualise the results. Select an effect from the left, adjust its properties on the right, and see the result in the center in realtime:

http://www.youtube.com/watch?v=MsfioYYyrUg

API and documentation

The API for each effect is a set of QML properties. The effect properties can be animated just like any other QML properties. The documention contains property descriptions and basic usage examples. To generate the documentation, execute the following commands in the qtgraphicaleffects projects folder:

qmake
make docs

Open the generated doc/html/qml-graphicaleffects-index.html in a browser to view the documentation.

documentation

Implementation details

QML ShaderEffect is a built-in element in Qt Quick 2.0. This powerful QML element allows combining OpenGL Shading Language (GLSL) and QML, and makes it easy to implement visually impressive custom effects. Under the hood, all the effects in this project are based on ShaderEffect elements. Only QML and GLSL have been used, and there are no additional C++ APIs. If you are familiar with GLSL, you can easily study how the existing effects have been implemented. You can then create custom effects by modifying and combining the basic effects.

Links to related blog posts and specifications

 

 


Blog Topics:

Comments