Fake Window 'translucency/Vibrancy'?

Hi there,

I’m still an early starter and just working on my first app on Mac OS X, a simple music player.
Got some of that already working with the AV foundation class, but starting on playlists now and trying to create something visibly appealing:)

I’ve had a look around the forum regarding ‘window translucency/vibrancy’, essentially trying to create the blurred background look that the Finder has on the left pane and Safari through its interface.

There seems to be no easy way to do this out of the box in Xojo, and though I’ve found some hacks (incl an example in Xdev magazine 12.5), they all seem to break something in terms of hierarchy or App Store eligibility (the latter is not a major concern for me yet, but still :P), as well as issues with future compatibility.

So I wonder if there’s another way; essentially capturing what’s behind my apps window, blurring it, and using it as the background on the portions of my app that I want to be translucent, and periodically updating it?

Are there some OpenGL/Metal commands I could use to achieve this? Has anyone done this before?

Cheers,

Joe

Vibrancy is a complicated effect. If you really want it, Sam has done it with his App Kit. Unfortunately it’s not currently available separately from that bundle.

Thank you for your reply - had a look at the App Kit, but yes, a few hundred bucks is a bit out of my league for testing a cool effect:P

Cheers,

Joe

I know vibrancy isn’t very hard, but can it be done without cutting a hole in the window itself? If I’m not mistaken, the it’s basically just a blurred view to the content behind it. Without making a hole in the window, it’ll just blur the default window background, which is pointless. Right?

It’s a complex blend of colors, not a simple blur.

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/translucency/

Right, but that’s not my point.

Hey guys,

Thanks for your replies.

Having dug a bit deeper. it’s an interesting and not overly complicated effect - I suspect the implementation of it it will be trickier than the graphical effect itself.

Having done a quick mockup test with PS, the ‘vibrancy’ effect appears to be a simple box blur (gaussian would be much more computationally heavy, though not if handled by GPU I guess) with a radius of around 300 px followed by a plain light grey overlay using the ‘Screen’ blend mode, with perhaps a bit of colour correction afterwards.
I compared a Safari window screenshot with a grab I did of the background and then applying these effects, and they’re virtually identical.

That, used as a background in a window would do the trick.

I suspect these could be done with Quartz calls/declares though MBS Coregraphics seems to have that all covered already - the biggest challenge would imho be a continuous update, as of course graphics behind the app might update/animate and the Vibrancy effect would need to be periodically updated in your own app, perhaps through a timer/thread.

Anyone got any ideas of where and how I’d update the ‘grab the background behind your app window and apply vibrancy effects’ routine?

Cheers,
Joe