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
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:
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.
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
- The convenient power of QML Scene Graph
- QML Scene Graph in Master
- OpenGL Shading Language specification
- OpenGL ES Shading Language specification
