Obtain iOS7-like blur effect with Qt

Question

I was asking myself how I could obtain an iOS 7 like blur/transparency effect. Something like this:

_{(source: ilounge.com)}

I'd like to apply this to a whole QDialog. I know how to obtain a nice transparency, but not how to get this blur.

Can someone help?

Thanks a lot!

Answer 1

Basically, you need to first get a screenshot of the desktop. Then you need to blur it. Then probably save the image to the harddrive. Then you need to set it as the background for your dialog.

And then you need to make the background for each button transparent, too.

If you use QGraphicsView or OpenGL, the last three steps may be very different.

http://qt-project.org/doc/qt-5.0/qtgui/qscreen.html#grabWindow

http://qt-project.org/doc/qt-5.0/qtwidgets/desktop-screenshot.html

Lines of code where it actually grabs the screen:

QScreen *screen = QGuiApplication::primaryScreen();
if (screen)
    originalPixmap = screen->grabWindow(0);

In Qt 4.8, it used to be done this way:

http://qt-project.org/doc/qt-5.0/qtgui/qpixmap.html#grabWindow

To blur the screenshot, use this:

http://doc-snapshot.qt-project.org/4.8/qgraphicsblureffect.html

You may need to save it to the harddrive for QStylesheets to be able to find it.

To set the background image, try something like this:

http://qt-project.org/doc/qt-5.0/qtwidgets/stylesheet-reference.html#background-image-prop

Example of how to set a stylesheet:

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

http://qt-project.org/doc/qt-4.8/stylesheet-examples.html

http://qt-project.org/forums/viewthread/1397

Hope that helps.

Answer 2

Thanks a lot for your help phyatt, I succeeded. Although my code works, the result is not as pretty as iOS':

iOS7-like blur with Qt

however, I'm going to post the whole code on my website, I'll post the link here in a while.

Stay tuned!

[EDIT] here's the link to the detailed how-to: iOS7 like blur effect with QT