[Development] How to set QQuickView TranslucentBackground

[hailong geng]

Hi

   What I have to say is that Qt5 is really cool, I love it ^_^

   But I get a problem, I want to show some lovely tools in desktop, in order to move them freely, I want to set the window Translucent and show the app in FullScreen mode(or in available screen geometry).  In Qt4 I can set Qt::WA_TranslucentBackground and it works well. Now I want use Qt5 to do that, but I can't find the way, I tried the following code and got only a grey background. I used the mine example to test and the code I have changed is marked in yellow.

#include <QtGui/QGuiApplication>

#include <QtQuick/qquickview.h>

#include <QtDeclarative/QDeclarativeContext>

#include <QtDeclarative/QDeclarativeEngine>

#include "minehunt.h"

int main(int argc, char *argv[])

{

    QGuiApplication app(argc, argv);

    QQuickView canvas;

    canvas.setWindowFlags(Qt::FramelessWindowHint);

    qmlRegisterType<TileData>();

    MinehuntGame* game = new MinehuntGame();

    canvas.setResizeMode(QQuickView::SizeRootObjectToView);

    canvas.engine()->rootContext()->setContextObject(game);

    canvas.setSource(QString("qrc:///minehunt.qml"));

    QObject::connect(canvas.engine(), SIGNAL(quit()), &app, SLOT(quit()));

    canvas.showFullScreen();

    return app.exec();

}

import QtQuick 2.0
import "MinehuntCore" 2.0
Item{

    id: root

    width: 1920

    height: 1080
Item {
    id: field
    property int clickx: 0
    property int clicky: 0

    width: 450; height: 450

    Image { source: "MinehuntCore/pics/background.png"; anchors.fill: parent; fillMode: Image.Tile }

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        columns: 9; spacing: 1

        Repeater {
            id: repeater
            model: tiles
            delegate: Tile {}
        }
    }

    Row {
        id: gamedata
        x: 20; spacing: 20
        anchors.bottom: field.bottom; anchors.bottomMargin: 15

        Image {
            source: "MinehuntCore/pics/quit.png"
            scale: quitMouse.pressed ? 0.8 : 1.0
            smooth: quitMouse.pressed
            y: 10
            MouseArea {
                id: quitMouse
                anchors.fill: parent
                anchors.margins: -20
                onClicked: Qt.quit()
            }
        }
        Column {
            spacing: 2
            Image { source: "MinehuntCore/pics/bomb-color.png" }
            Text { anchors.horizontalCenter: parent.horizontalCenter; color: "white"; text: numMines }
        }

        Column {
            spacing: 2
            Image { source: "MinehuntCore/pics/flag-color.png" }
            Text { anchors.horizontalCenter: parent.horizontalCenter; color: "white"; text: numFlags }
        }
    }

    Image {
        anchors.bottom: field.bottom; anchors.bottomMargin: 15
        anchors.right: field.right; anchors.rightMargin: 20
        source: isPlaying ? 'MinehuntCore/pics/face-smile.png' :
        hasWon ? 'MinehuntCore/pics/face-smile-big.png': 'MinehuntCore/pics/face-sad.png'

        MouseArea { anchors.fill: parent; onPressed: reset() }
    }
    Text {
        anchors.centerIn: parent; width: parent.width - 20
        horizontalAlignment: Text.AlignHCenter
        wrapMode: Text.WordWrap
        text: "Minehunt demo has to be compiled to run.\n\nPlease see README."
        color: "white"; font.bold: true; font.pixelSize: 14
        visible: tiles == undefined
    }

}
}

[Samuel Rødal]

On 03/08/2012 02:37 AM, ext hailong geng wrote:
> Hi
> What I have to say is that Qt5 is really cool, I love it ^_^
> But I get a problem, I want to show some lovely tools in desktop, in
> order to move them freely, I want to set the window Translucent and show

> the app in FullScreen mode(or in available screen geometry).In Qt4 I can

> set Qt::WA_TranslucentBackground and it works well. Now I want use Qt5
> to do that, but I can't find the way, I tried the following code and got
> only a grey background. I used the mine example to test and the code I
> have changed is marked in yellow.

This sounds like it needs to be solved at the QQuickCanvas-level
somehow. Translucency in Qt 5 should work simply by setting a non-zero
alpha in the QSurfaceFormat of the QWindow, and making sure to first
clear the background with transparent.

--
Samuel
_______________________________________________
Development mailing list
Devel...@qt-project.org
http://lists.qt-project.org/mailman/listinfo/development

[hailong geng]

Hi

Thank you for your reply. What do you mean by "setting a non-zero 

alpha in the QSurfaceFormat of the QWindow"? I tried to use the following code but still get black background.

    QQuickView canvas;

    QSurfaceFormat surfaceFormat;

    surfaceFormat.setAlphaBufferSize(1000);

    canvas.setFormat(surfaceFormat);

    canvas.setClearBeforeRendering(true);

    canvas.setClearColor(QColor(Qt::transparent));

    canvas.setWindowFlags(Qt::FramelessWindowHint);

       Would you please tell me something about how does Qt Quick2 render the scene? I think it doesn't render opengl into video memory 

directly because if so, when I drag one other window above the qml scene, it should flash :) So does it use QGLPixelBuffer class for that? 

I am new to opengl and scene graph, I am not clear with the work flow. But I really want to make the QML View Translucent, this will be very cool ^_^

[Samuel Rødal]

On 03/08/2012 02:24 PM, ext hailong geng wrote:
> Hi

> Thank you for your reply. What do you mean by "setting a non-zero

> alpha in the QSurfaceFormat of the QWindow"? I tried touse the following

> code but still get black background.
> QQuickViewcanvas;
>
> QSurfaceFormat surfaceFormat;
>
> surfaceFormat.setAlphaBufferSize(1000);

Should probably be surfaceFormat.setAlphaBufferSize(8); as I'm not sure
if it bails out when it can't find a configuration with at minimum the
requested buffer size at the moment.

> canvas.setFormat(surfaceFormat);
>
> canvas.setClearBeforeRendering(true);
>
> canvas.setClearColor(QColor(Qt::transparent));
>
> canvas.setWindowFlags(Qt::FramelessWindowHint);

Looks good, I'd expect this to give the expected outcome. Try the alpha
buffer fix, and if it still doesn't work please file a bug. It might be
that noone has tested this properly with Qt 5 yet.

> Would you please tell me something about how does Qt Quick2 render the
> scene? I think it doesn't render opengl into video memory
> directly because if so, when I drag one other window above the qml
> scene, it should flash :) So does it use QGLPixelBuffer class for that?
> I am new to opengl and scene graph, I am not clear with the work flow.
> But I really want to make the QML View Translucent, this will be very
> cool ^_^

It does render directly to the window (although potentially in a
separate thread), not sure what kind of flashing you expect, that's
mostly solved by compositing window managers.