Transparent window with blurred background

General JUCE discussion
1

Hello guys!

I'm trying to create transparent window which will be filled with some background with e.g. 60% opacity and blurred desktop's background.

I've already created window and filled it with opacity, it's all ok, but I felt a bit cofused that the way I've tried to apply blur for the background behind app (opened applications on desktop) didn't worked.

 

I've tried something like this:

void MyComponent::timerCallback()
{
    screenshotOfComponent = createComponentSnapshot (this->getBounds());
}

void MyComponent::paint (Graphics &g)
{
    g.fillAll (Colours::black.withAlpha (0.6f));


    // since we can create only kernel with square dimensions, I've took the max dimension of my component
    ImageConvolutionKernel imageKernel (this->getHeight());
    imageKernel.createGaussianBlur (20.f);

    // The image where we will store blurred desktop's background
    Image blurredBgImage;
    imageKernel.applyToImage (blurredBgImage, screenshotOfComponent, this->getBounds());

    // Draw blurred bg
    g.drawImageAt (blurredBgImage, 0, 0);
}

But it's doing nothing.

And also I think that updating screenshot of component by timer isn't a good idea.

Can anyone help me to solve this problem?
Thank in advance :)

 

Best regards,

gammer.

 

 

 

2

Ah.. That's a very big ask!

The OS doesn't actually provide any access to the pixels "behind" a window, which makes sense if you think about it, both from an inter-app security perspective, and because it means that the OS can optimise by not drawing occluded areas.

When you see things like the blurred title bars in OSX or Windows, it's being provided as a special-case compositing operation by the OS APIs, it's not something you can render manually in juce (or any other toolkit). Not sure what kind of API we'd have to implement to make it possible, but it's probably a difficult thing to turn into a cross-platform abstraction.

3

I guess you could hide your window, do a screen capture of the desktop, then show your window again.

You could get away with doing this at launch time, but it might be a problem to keep updating the background to account for anything changing!

For screen capture techniques in Windows, take a look at http://www.codeproject.com/Articles/5051/Various-methods-for-capturing-the-screen

1 Like
4

Thanks a lot, Jules for such an informative anwer!

Then I think I should leave the idea of doing that because it will make a pain to support feature like this on different platforms :)

5

thanks, your words make a sense. I really appreciate your help :)


but it might be a problem to keep updating the background to account for anything changing!

I also think if we have possibility like that it would create some CPU overheads... So I should get rid of this idea :)
 

6

Yeah, I think so :)

7

Yeah, it's surprisingly hard to create a cross platform screen capture, especially if you don't know the OS APIs. I only successfully implemented one for Windows that "converted" into a JUCE Image. It was quite expensive too (I tried several methods I found on the web). I take a lot of snippings and wanted to create a personal snipping tool, but it ended up being more work than it was worth. 

8

There is (still) undocumented way of getting windows to blur pixels beneath on W10. However its availability might change due to the new Microsoft’s FluentDesign system that will probably affect the windows api i believe.

https://gist.github.com/dowail/faab415cd791a4febd790465ce70f4d4#file-juce-documentwindow-blur

juce.can.blur.png1577×691 241 KB

2 Likes