Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Transparent background and opaque rectangles

Transparent background and opaque rectangles

Scheduled Pinned Locked Moved QML and Qt Quick
transparencyopacityqmlopengl
11 Posts 2 Posters 17.8k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J 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

    p3c0P Offline
    p3c0P Offline
    p3c0
    Moderators
    wrote on last edited by p3c0
    #2

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

    157

    J 1 Reply Last reply
    0
    • p3c0P 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.

      J Offline
      J Offline
      Juaruipav
      wrote on last edited by
      #3

      @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

      p3c0P 2 Replies Last reply
      0
      • J 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

        p3c0P Offline
        p3c0P Offline
        p3c0
        Moderators
        wrote on last edited by
        #4

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

        157

        1 Reply Last reply
        0
        • J 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

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #5

          @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

          157

          J 1 Reply Last reply
          0
          • p3c0P 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.

            Image

            J Offline
            J Offline
            Juaruipav
            wrote on last edited by Juaruipav
            #6

            @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

            p3c0P 1 Reply Last reply
            0
            • J 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

              p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by p3c0
              #7

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

              Imgur

              157

              J 1 Reply Last reply
              0
              • p3c0P p3c0

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

                Imgur

                J Offline
                J Offline
                Juaruipav
                wrote on last edited by
                #8

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

                Thanks for your help

                Juan

                p3c0P 1 Reply Last reply
                0
                • J Juaruipav

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

                  Thanks for your help

                  Juan

                  p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #9

                  @Juaruipav Can you try updating OpenGL drivers ?

                  157

                  J 1 Reply Last reply
                  0
                  • p3c0P p3c0

                    @Juaruipav Can you try updating OpenGL drivers ?

                    J Offline
                    J Offline
                    Juaruipav
                    wrote on last edited by
                    #10

                    @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

                    p3c0P 1 Reply Last reply
                    0
                    • J 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

                      p3c0P Offline
                      p3c0P Offline
                      p3c0
                      Moderators
                      wrote on last edited by
                      #11

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

                      157

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved