Transparent background and opaque rectangles



  • 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


  • Moderators

    @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.



  • @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


  • Moderators

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


  • Moderators

    @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.

    Image



  • @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


  • Moderators

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

    Imgur



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

    Thanks for your help

    Juan


  • Moderators

    @Juaruipav Can you try updating OpenGL drivers ?



  • @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


  • Moderators

    @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.