QML Profiler update

Posted by Christiaan Janssen on February 7, 2012 · 10 comments

Hello!

We have been improving the QML Profiler over the last months, with a special focus on the user interface. With the latest features we want to make it easier to navigate the time line, locate points of interest, and manage the statistics effectively to gain some insight into your own application. Among the new features there is ability to load and save traces to disk, so they can be shared among developers or revisited during the development of a project. There is also information about the running animations in the timeline, that is, frames per second and number of concurrent animations playing. And we also integrated the V8 profiler, with its output displayed in a separate tab. This last one, though, is only available if your application runs with Qt5, since this is the first version of Qt that uses the V8 JavaScript engine.

Here is a short video going through some of the new features. I want to apologize in advance for the poor frame rate of the video, since it was taken from my laptop and somehow the video grabber couldn’t manage a higher rate. Since I can’t find how to embed it in here with its original size, consider playing it fullscreen.

I hope the video encourages you to test the QML profiler and use it for your own applications. Feel free to give us any feedback about the current profiler, for example suggesting new features that would be helpful for you.

In the coming days we are going to blog about some other QML tools we have been working on recently, stay tuned.

For feedback/questions, please contact us on IRC at the freenode server, channel #qt-creator.

10 comments

Qt Graphical Effects in Qt Labs

Posted by Sami Lehtonen on February 2, 2012 · 38 comments

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 {
    
    

    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: 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

38 comments

Qt SDK 1.2 Released

Posted by Hannu Honkala on February 1, 2012 · 39 comments

We are happy to announce that a new important update for Qt SDK is published.
This Qt SDK 1.2 update sets a new baseline for the developers for a longer perspective. Some of the features have already been available as online updates, but Qt SDK 1.2 now integrates the very latest tools, most recent mobile build targets for Symbian and Nokia N9, and the still fresh Qt 4.8 for desktops. We have also introduced some improvements to the SDK and its maintenance tool.

As a summary, this is what is new in the Qt SDK:

•     Fixes for Qt Creator 2.4 in a new 2.4.1 patch update
•     Qt 4.8 for desktops delivering Qt Quick 1.1, Qt platform abstraction, Qt WebKit 2.2, and threaded OpenGL. See Sinan’s blog post for more details.
•     More Qt Mobility examples for Nokia N9 and Symbian devices
•     Ability to specify network proxy setting in the SDK Maintenance Tool
•     Update to the Symbian Complementary Package introducing Analyze Tool plugin and new CODA 1.0.6 installation package
•     An update to Notifications API improving the end user experience and fixing issues in the Nokia N9 implementation of the API.

If you already have Qt SDK installed, you can update to the latest version by running Update Qt SDK from the Qt SDK application folder on your computer. If you first time are getting started with Qt SDK, you can download 1.2 from our download page.

If you encounter problems, please file a bug report at bugreports.qt-project.org.