Ariya Hidayat
WebKit
Graphics Dojo
Posted by Ariya Hidayat
 in WebKit, Graphics Dojo
 on Monday, June 29, 2009 @ 23:01

If you use QWebView, do you know how make its background to be translucent? Apparently, the trick is not so well known, hence I decide to share it here.

Basically it boils down the following code snippet:

QPalette palette = view->palette();
palette.setBrush(QPalette::Base, Qt::transparent);
view->page()->setPalette(palette);
view->setAttribute(Qt::WA_OpaquePaintEvent, false);

The first three lines set a new transparent brush for the page. This is necessary so that all the painting is blended properly. The last one ensures that the web view is not opaque, i.e. it does not paint all the pixels contained in its rectangle. Opaque paint event for QWebView is the default, most of the time you want to have a web page with typical normal background color, either set by the web page or something you specify as the fallback color.

If you combine QWebView see-through background with top-level widget opacity feature (see what Samuel wrote about this some time ago), you will get something like the following screenshot (the wallpaper image is Soft Green, from Valient Gough). Neat, isn’t it? Note that of course it requires a window system which supports composition, e.g. modern X11 window manager, recent versions of Windows, and so on.


As usual, the code for this short example is available from the git repository, just check the transparentweb subdirectory. Again, I already prepared both the Qt/C++ and Python (via PyQt) versions. Enjoy!

8 Responses to “Transparent QWebView (or QWebPage)”

» Posted by Kit
 on Tuesday, June 30, 2009 @ 01:26

You spoil us ;)

» Posted by J
 on Tuesday, June 30, 2009 @ 17:15

I tried to follow this on embedded Linux, it works except when the web view is reloaded it seems the background is not being repainted correctly, it appears like the background is being painted over and over as we reload the page. For example, if we give background color rgba(0,0,0,128), eventually the background would just appear as black.

Is there anything else I could do?

» Posted by Adrian Glaubitz
 on Tuesday, June 30, 2009 @ 18:31

Hi ariya,

I have attended your talk on Qt Graphics at the LinuxTag in Berlin. I just wanted to thank you for the intesting facts and the stunning demos. It was the best talk on LinuxTag that day (wasn’t there the other days, so I cannot judge :)). You have convinced me even more to use Qt and gave alot of inspirations. Hope I can use some of your techniques in my own Qt-apps.

Again, great talk.

Thanks,

Adrian

» Posted by ariya
 on Tuesday, June 30, 2009 @ 18:56
Ariya Hidayat

@J: Yes. Please create a minimalistic test program that demonstrates the problem (do not forget to state the Qt version and compiler versions) and go to http://www.qtsoftware.com/bugreport-form to report it. Thank you!

» Posted by ariya
 on Tuesday, June 30, 2009 @ 18:59
Ariya Hidayat

@Adrian: Thanks, and I am glad that you enjoy the talk! :-)

» Posted by Dragan
 on Thursday, July 02, 2009 @ 18:49

Awesome!
Is the fix for this feature in QWS [250115] likely to be back portable to 4.5.x stream?

» Posted by Qt-user
 on Friday, July 03, 2009 @ 06:31

hi,i’m searching for the flash pluging that can work on Wince6.0,and i wonder where can i get it? thank you!

» Posted by Alan
 on Thursday, July 16, 2009 @ 15:30

I’m trying to do this using Ubuntu Linux 9 (qt 4.5) but the transparency just dont work.

Someone have any ideas?



© 2008 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners.