Transparent background and opaque rectangles

Juaruipav

Hi there,

I have the following code in QML:

------------------------------------------------
import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: Screen.width
    height: Screen.height
    flags:     Qt.FramelessWindowHint
    opacity: 1
    color: "transparent"

    Rectangle {
        color: "blue"
        width: 300
        height: 300
}}

I would like to design a QML application with a transparent background and opaque objects on it. However, the result of this code is shown in this picture:

Alt text

How can I change the code to produce opaque rectangles? (images or even canvas are also shown with that transparency effect). I tried to change the color attribute using Qt.hsla with no success.

Thank you
Juan

p3c0

@Juaruipav Add Qt.WA_TranslucentBackground and set a transparent color. Eg:

Window {
    width: 400
    height: 400
    visible: true
    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground

    Rectangle {
        width: 100
        height: 100
        color: "red"
    }
}

P.S: Please use ``` (3 backticks) for posting code blocks. I have added it for you.

Juaruipav

@p3c0 said:

@Juaruipav Add Qt.WA_TranslucentBackground and set a transparent color. Eg:
Window {
    width: 400
    height: 400
    visible: true
    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground

    Rectangle {
        width: 100
        height: 100
        color: "red"
    }
}
P.S: Please use ``` (3 backticks) for posting code blocks. I have added it for you.

Thank you for your fast reply and the posting tip (it was my really first post). According to your answer, I already tried adding different flags like WA_TranslucentBackground but the result is the same. Qt docs says:

The flag WA_TranslucentBackground indicates that the widget should have a translucent background, i.e., any non-opaque regions of the widgets will be translucent because the widget will have an alpha channel. Setting this flag causes WA_NoSystemBackground to be set. On Windows the widget also needs the Qt::FramelessWindowHint window flag to be set. This flag is set or cleared by the widget's author.

The rectangle is supossed to be opaque, but in my case it is not. My configuration is Windows 8.1 with Qt 5.4.1 MSVC 2013 OpenGL and my graphics card is an Nvidia Gtx870m.

Any other ideas? Is this working for you?

Thanks again
Juan

p3c0

@Juaruipav Yes it does. Did you set the transparent color: #00000000?
Let me find a way to post a screen shot.

p3c0

@Juaruipav I have removed to Qt.FramelessWindowHint flag so that you can see the transparent effect. You can see the code behind the see thru window. I'm using Qt 5.4.1 on Ubuntu 14.04.

Juaruipav

@p3c0 Very similar example in Windows :

Alt text

As mentioned in Qt Docs, in Windows it is necessary to add the FramelessWindowHint flag in order to update correctly the window.

What could be the problem? Maybe some Aero or openGL issue?

Juan

p3c0

@Juaruipav Could be a Windows 8.1 specific issue. It works on Windows 7 .

Imgur

Juaruipav

@p3c0 mmm interesting .. I'll do some research in graphic changes between the two Windows versions

Thanks for your help

Juan

p3c0

@Juaruipav Can you try updating OpenGL drivers ?

Juaruipav

@p3c0 Updated both Intel HD and NVidia graphics card but same result ...

As a curiosity, if no color attribute is defined, the rectangle is opaque and white, but cannot changed the color.

I think this problem may be related to Aero compatibility.. do you have Aero feature activated in Win 7?

If anyone could test the example in Win 8,1, it would be very helpful

Juan

p3c0

@Juaruipav Yes it is activated. Did you try by deactivating it ?
May be it is a bug on Windows 8.1. Better you should report it on Qt Bug Tracker.