×
Namespaces

Variants
Actions
Revision as of 04:18, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Transparent QML Apps

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
11 Mar
2012

This code example shows how to create translucent Qt Quick apps for both mobile and desktop operating systems.

Article Metadata
Code ExampleTested withCompatibility
Platform(s): Desktop, Nokia Belle
Symbian
Article
Keywords: QML, Transparent window
Created: gnuton (20 Jun 2011)
Updated: hamishwillee (06 Mar 2012)
Last edited: hamishwillee (11 Oct 2012)

Contents

Overview

QML elements are usually rendered by Qt by QDeclarativeView. You can ensure that an app's background is painted with non-opaque colors using the inherited QWidget method QWidget::setAttribute(Qt::WA_TranslucentBackground).

There is some platform-specific implementation:

  • X11: This feature relies on the use of an X server that supports ARGB visuals and a compositing window manager.
  • Windows: The view needs to have the Qt::FramelessWindowHint window flag set for the translucency to work. Ie you need to call setWindowFlags(Qt::FramelessWindowHint).

Implementation

Source (.cpp)

The following code shows the minimum implementation for a translucent QDeclarativeView that works on Linux/X11 systems, Windows and Symbian.

int main(int argc, char *argv[]){
QApplication a(argc, argv);
 
QDeclarativeView view;
view.setSource(QUrl::fromLocalFile(“myqmlfile.qml));
view.setAttribute(Qt::WA_TranslucentBackground);
view.viewport()->setAutoFillBackground(false);
#ifdef Q_WS_WIN
view.setWindowFlags(Qt::FramelessWindowHint);
#endif
 
view.show();
return a.exec();
}

When working on a "standard" Qt Quick Application created using the project wizard in the Qt SDK v1.2 the QDeclarativeView is wrapped in the convenience class QmlApplicationViewer. The code can be copy-pasted into the template with only trivial object name changes, as shown below:

Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));
 
QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/TransparentQtQuickApps/main.qml"));
 
//Copy code below to make app translucent
#ifdef Q_WS_WIN
viewer.setWindowFlags(Qt::FramelessWindowHint);
#endif
viewer.setAttribute(Qt::WA_TranslucentBackground);
viewer.viewport()->setAutoFillBackground(false);
// Copy code above
 
viewer.showExpanded();
return app->exec();
}

QML

Tip.pngTip: Remember that QML visual elements are drawn opaque by default; there is no point making your app view transparent if your whole QML app is opaque!

The code for the QML must have at least some areas with an opacity less than 1. In the example below you can see that the rectangle onto which the text is drawn has an opacity of 0.5.

Rectangle {
width: 360
height: 360
opacity:0.5 //note opacity<1
color: "lightgrey"
Text {
text: qsTr("Hello\nWorld")
font.pointSize : 30
 
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}

Screenshot

Translucent QML app on Windows

Conclusion

QML is quite powerful and it's a great thing it support translucent windows even if it's not supported at same way by all Qt supported platforms.

This page was last modified on 11 October 2012, at 04:18.
188 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×