PhotoShop style blur

Solar2D Advanced Graphics
#1

I am trying to apply a greyscale and slight blur to a portion of my app interface. The portion can be captured using display.capture() and the fill effect applied to the capture object. Essentially, what I’m trying to achieve is an iOS style frosted glass effect (not the Corona frosted glass, which is much more speckled.)

Here is the screen portion I’m trying to apply a simple grey/blur to:

With a slight gaussian blur and greyscale filter applied, this is what the image would look like in PhotoShop (actually, Acorn for Mac):

The code I am using to apply these effects is this:

local function blur( obj ) local capture = display.capture( obj ) capture.fill.effect = "filter.blurGaussian" capture.fill.effect.horizontal.blurSize = 40 capture.fill.effect.horizontal.sigma = 40 capture.fill.effect.vertical.blurSize = 40 capture.fill.effect.vertical.sigma = 40 -- capture.fill.effect = "filter.grayscale" -- commented out because I can't apply two effects capture.x, capture.y = obj.x, obj.y return capture end

This results in this:

I face two problems here:

  1. How to apply two effects (blur, greyscale)
  2. How to apply them evenly, as PS does

Can anyone help me out here, please?

#2

Well, it seems that I’ve got something closer to what I’m looking for by breaking the effect (that I’d hoped could be “composite”) into two separate stages. I’m now using this code:

local function blur( obj, removeOriginal ) local capture = display.capture( obj ) capture.fill.effect = "filter.blurGaussian" capture.fill.effect.horizontal.blurSize = 20 capture.fill.effect.horizontal.sigma = 20 capture.fill.effect.vertical.blurSize = 20 capture.fill.effect.vertical.sigma = 20 capture.x, capture.y = obj.x, obj.y if (removeOriginal) then obj:removeSelf() end return capture end local function grayscale( obj, removeOriginal ) local capture = display.capture( obj ) capture.fill.effect = "filter.grayscale" capture.x, capture.y = obj.x, obj.y if (removeOriginal) then obj:removeSelf() end return capture end

I take the display object to be blurred and greyscaled and pass it through the two effects functions:

local greyblurobj = blur( snapshotlib.grayscale( displayobject ), true )

The use of the  removeOriginal parameter allows for cleaning of the intermediate capture object and produces this:

#3

Well, it seems that I’ve got something closer to what I’m looking for by breaking the effect (that I’d hoped could be “composite”) into two separate stages. I’m now using this code:

local function blur( obj, removeOriginal ) local capture = display.capture( obj ) capture.fill.effect = "filter.blurGaussian" capture.fill.effect.horizontal.blurSize = 20 capture.fill.effect.horizontal.sigma = 20 capture.fill.effect.vertical.blurSize = 20 capture.fill.effect.vertical.sigma = 20 capture.x, capture.y = obj.x, obj.y if (removeOriginal) then obj:removeSelf() end return capture end local function grayscale( obj, removeOriginal ) local capture = display.capture( obj ) capture.fill.effect = "filter.grayscale" capture.x, capture.y = obj.x, obj.y if (removeOriginal) then obj:removeSelf() end return capture end

I take the display object to be blurred and greyscaled and pass it through the two effects functions:

local greyblurobj = blur( snapshotlib.grayscale( displayobject ), true )

The use of the  removeOriginal parameter allows for cleaning of the intermediate capture object and produces this: