Qt Widget with Transparent Background

Question

(I'm using PySide, but I think the answer would be the same/similar for any language bindings).

I'm trying to take the shaped clock example, located here, and cause the face of the clock (circle) to be transparent so that all I see are the clock hands and minute ticks. As is, when the example runs, it looks like this. I'm using Windows 7.

So far, I've tried the following (in the constructor):

self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
- Clock appears (has presence in task bar), but I can't see it anywhere
self.setAttribute(QtCore.Qt.WA_NoSystemBackground)
- Clock appears, but has solid black background.
self.setWindowOpacity(0.5)
- Clock appears, but entire clock is transparent. I want the background (face) to be transparent, but I want the clock hands to be visible.

For the record, I think the widget does have a transparent background, but it's obviously sitting on something else that doesn't. Is that a correct statement? — gdw2, Oct 05 '11 at 20:52

score 12 · Accepted Answer · answered Oct 06 '11 at 16:26

12

Got it!

This is from the original example code (constructor):

    ...
    self.setWindowFlags(self.windowFlags() | QtCore.Qt.FramelessWindowHint)
    ...

Here is the modified (and working per my question) version:

    ...
    self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
    self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
    ...

Removing the self.windowFlags() was the part I was missing. (I'm not exactly sure why I needed to remove this or why it was there to begin with... still much to learn).

answered Oct 06 '11 at 16:26

gdw2

7,558
4
46
49

Hm. I hadn't heard of WA_TranslucentBackground before. I tried adding it to the clock sample and ran it under KDE, and all I got was a solid black background to the widget. What else did you change in the code and what result did you get? – HostileFork says dont trust SE Oct 07 '11 at 23:48
Did you notice the change above in the `self.setWindowFlags` line? – gdw2 Oct 10 '11 at 17:02
So one should find out which flags are set by default by `self.windowFlags()`. – NoDataDumpNoContribution Apr 24 '14 at 12:07

score 7 · Answer 2 · answered Oct 19 '11 at 18:40

7

If I remember correctly, you should have set its stylesheet also:

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
self.setStyleSheet("background:transparent;")

Hope that helps.

answered Oct 19 '11 at 18:40

BLeAm

71
2

It depends. The widget itself has a transparent background because of the attribute `QtCore.Qt.WA_TranslucentBackground` and doesn't need the style sheet itself but child widgets contained in the widget however that have `autoFillBackground()==True` by default should have it unset or should have set `QtCore.Qt.WA_TranslucentBackground` or indeed like you say should have a transparent background color set by a style sheet which is then inherited. – NoDataDumpNoContribution Apr 30 '14 at 11:29
Ya, in my case I need the 3rd line to set the stylesheet too. Since, I am using kvantum and the style of active theme seemingly overrides any non-transparent background. But again this is my assumption. – fsevenm Dec 27 '21 at 12:58

score 1 · Answer 3 · answered Oct 06 '11 at 13:26

in the clock example ther is :

void ShapedClock::resizeEvent(QResizeEvent * /* event */)
 {
     int side = qMin(width(), height());
     QRegion maskedRegion(width() / 2 - side / 2, height() / 2 - side / 2, side,
                          side, QRegion::Ellipse);
     setMask(maskedRegion);
 }

the "setMask" do the round shape
but there's the same in PySide :

def resizeEvent(self, event):
        side = min(self.width(), self.height())
        maskedRegion = QtGui.QRegion(self.width()/2 - side/2, self.height()/2 - side/2, side, side, QtGui.QRegion.Ellipse)
        self.setMask(maskedRegion)

so it should work too ?

I clarified my question a little bit. The code you site above does cause everything outside of the face of the clock to be transparent, but I'm trying to make the clock face itself transparent (everything but the clock hands and minute tick marks). — gdw2, Oct 06 '11 at 15:28

Qt Widget with Transparent Background

3 Answers3

Linked