Qt: create iOS 7 like blur and transparency effect

Hi folks.

Today, I’m going to show you how to obtain the sexy blur/transparency iOS 7 effect on a borderless panel:

shot1

We are going to create a simple panel that reproduces this kind of effect.

The steps are:

  • create a new project,
  • creating a borderless window,
  • make it moveable using mouse,
  • make it white and transparent,
  • make it blurry.

Creating a new project.

Launch QtCreator, create a new project. In “Applications”, select “Qt Widgets Window”. Let’s name it “BlurryWindow”, or anything you want. Use QDialog, QMainWindow, it’s not important.

Once done, we are going to tweak our window a bit.

Creating a borderless window.

Open your window constructor. It should look like this:

There’s a simple way to create borderless window. Just add this line to the constructor:

Test your window: the title bar should be gone!

Make it moveable:

The regular way to move a window is to grab its title bar. But here we will allow the whole panel to be grabbed.

To do so, we are going to redefine mose events in your window’s header:

The first one is triggered when a button of the mouse is pressed within the window. The second one is triggered when the mouse cursor moves within the window. Using these two we can detect when the user tries to move the panel.

The mousePressEvent simply has to retrieve the position of the mouse when pressed. To do so, declare a private QPoint in your header, and use it this way:

Then, if the mouseMoveEvent, we will have to move our window according to this point:

First we test if the left button is pressed. Then we calculate the distance moved (diff) and then apply this distance to the position of our window.

Now it’s time to test: compile, run and try moving your window.

Making it white and transparent.

This is very easy. To make it transparent, add this line to your contructor:

And to make it white, we’re going to use style sheets. It’s very powerful, handle with care!

This means: I want my window and all its childs (“*”) to have “white” as background color.

Now to the tricky part…

Make it blurry.

Achieving a nice blur effect is not that simple using Qt.
Here are the steps:
– first, we need to add a QGraphicsView widget to our window.
– keep the window moveable.
– next, take a shot of what’s under the window
– put that image in our QGraphicsView
– apply a blur effect to the image.

To add a QGraphicsView to our window, simply drag one into it using UI editor. Adjust your window’s internal borders to zero:

shot2

Compile, run, try to move your window. Yes, it doesn’t. The reason is that the QGraphicsView captures the mouse event. To transmit these events to the nearese parent, you’ll have to subclass QGraphicsView:

You can see that we redefines the mouse events almost the same way we did for our main window. But here, we just transmit the event to the parent.

Now we have to tell Qt that the widget we use in our UI designer is not a regular QGraphicsView, but an instance of our subclass. To do so, right-click on the widget and “Promote…”. Now fill the form:

shot3

Compile, run, it moves!

Now, let’s take a screenshot of what’s under the window. This must be made everytime we move the window…in a mouse move event for instance…

The code is simple:

There you go, a pixmap of what’s under your window. The +/-4 and +/-1 values are adjustments because of QGraphicsView’s borders.

Now, let’s put this pixmap in our QGraphicsView. To do so, create a QGraphicsScene:

Tell our view to use it:

and put the pixmap into it:

Compile, run, you should obtain something like this:

shot4

The over print effect is due to the fact that there’s a slight delay between the screenshot and its display. But don’t mind this, the blur will reduce its visibility.

To add blur, simply add the effect to the scene:

You can tweak it using setBlurHints and setBlurRadius. Once everything’s in order, you should obtain something like this:

shot5

There is still a lot to do. For example, what is our window behaviour when the background changes, for example when you minimize another window? But this with this basic demo you will be able to create nice transparent/blurry windows!

 

Here’s an archive containing the whole project: source.

  • Ricardo Gomes

    Hello

    Could you please take a look at my question that I wrote in stackoverflow?
    https://stackoverflow.com/questions/32503145/qt-qgraphicsscene-is-overlapping-images

    It’s about some bugs I have in this project of yours. I also made some changes and I need your help.

  • Allen Rob

    Hello, Can you show how to just get the blurred content in window without transparency? I think I know how to get it transparent without the weird delay etc. but can’t do the blurring thing. 🙂