extend blurredScreenImageView or add a new ios control centre like blur to the utilities

[eamitg]

Hi Dave,

Posting the request as git hub issue as discussed.
In the project I am working on I need to produce a full screen ios blur effect of the CardIOCameraView.
I looked into the Card IO utility blurredScreenImageView and trying to follow gaussian blur effect to produce similar. But I see that its based out shaders. I have less knowledge on shaders so would be glad if you could kindly guide me create an optimized ios blur effect.

Thanks in advance

[dgoldman-pdx]

@eamitg as you probably already know, a Gaussian blur filter can be applied along the X-axis, the Y-axis, or both. The most typical use is to apply the filter once for each axis.

The reason we implemented Gaussian blur in card.io was to prevent any credit card details from being captured in the screenshot that iOS automatically takes when an app is sent to the background. We found that applying a Gaussian blur once for each axis left too many details still partially readable. So we next tried applying the Gaussian blur twice for each axis. But this blurred everything so much that the entire screen was a uniform gray.

Our current implementation applies the Gaussian blur filter three times, all of them along the X-axis. This leaves the overall structure of a screen intact -- e.g., it leaves the horizontal lines that separate one table view cell from the next -- but completely blurs all content.

The relevant code is in the file CardIOGPUGaussianBlurFilter.m:

- (UIImage *)processUIImage:(UIImage *)srcUIImage toSize:(const CGSize)size {
  __block UIImage *image1 = nil;

  [_gpuRenderer withContextDo:^{
    UIImage *image2 = nil;
    GLint horizontalPass = [_gpuRenderer uniformIndex:@"horizontalPass"];

    glUniform1i(horizontalPass, 1);
    image1 = [super processUIImage:srcUIImage toSize:size];
    image2 = [super processUIImage:image1 toSize:size];
    image1 = [super processUIImage:image2 toSize:size];
  }];

  return image1;
}

At the bottom you can see the three applications of the filter. The variable horizontalPass is a flag indicating whether to apply the filter along the X-axis (horizontalPass == 1) or the Y-axis (horizontalPass == 0).

So to instead apply the filter once along each axis, you could use code similar to this:

- (UIImage *)gaussianBlurUIImage:(UIImage *)srcUIImage toSize:(const CGSize)size {
  __block UIImage *image1 = nil;

  [_gpuRenderer withContextDo:^{
    UIImage *image2 = nil;
    GLint horizontalPass = [_gpuRenderer uniformIndex:@"horizontalPass"];

    glUniform1i(horizontalPass, 1);
    image1 = [super processUIImage:srcUIImage toSize:size];

    glUniform1i(horizontalPass, 0);
    image2 = [super processUIImage:image1 toSize:size];
  }];

  return image2;
}

Does that all make sense?

[eamitg]

Thanks a lot for your inputs @dgoldman-ebay . It does really make sense. I tried to just see the results of a single horizontal pass blur of the CardIOVideoStream layer. But it black it out completely, should it behave like that? I added these basic changes I ran( the last commit) at https://github.com/eamitg/card.io-iOS-source. I also tried the passes you suggested, but its again going all complete black, am I going wrong somewhere ?

Regards.

[dgoldman-pdx]

@eamitg your 1-pass code looks fine.

However, is that the only change you've made? Note that when the camera view is showing and you background the app, we always turn off the camera, resulting in a black screen.

The Gaussian blur code directly affects the manual-entry screen, when backgrounding.

What is your specific goal here?

[eamitg]

@dgoldman-ebay , you are right that camera session is stopped when pushing the app to background. Hence to avoid stopping of camera session and for my quick illustration purpose I added a simple button "Blur" on the main view which when tapped, creates this blur view using the filter(1 pass) and adds to the view.

Need to actually customize the interface(manual or scan ) such that the live camera preview could be obfuscated (like ios control centre blur) on the back [out of focus] when the manual entry is in focus.

[dgoldman-pdx]

Ah, sorry. I see now that you made a number of changes.

I'll take a closer look.

In the meantime, could you explain a bit more? Are you planning on creating your own manual-entry view which will appear in front of the camera view, but will leave some of the camera view still showing?

[eamitg]

@dgoldman-ebay yes, have created own manual entry view and yes need to show lilke you mentioned

[dgoldman-pdx]

@eamitg the problem is that this line is producing a black image to start with:

    [self.videoStream.previewLayer renderInContext:UIGraphicsGetCurrentContext()];

I suspect the problem might be related to this aspect of the renderInContext: method:

The OS X v10.5 implementation of this method does not support the entire Core Animation composition model. QCCompositionLayer, CAOpenGLLayer, and QTMovieLayer layers are not rendered. Additionally, layers that use 3D transforms are not rendered, nor are layers that specify backgroundFilters, filters, compositingFilter, or a mask values. Future versions of OS X may add support for rendering these layers and properties.

(That's for OS X v10.5. But I wonder about iOS.)

So you'll need to find another way to render the camera preview layer into a UIImage.

[eamitg]

I see. Well, thank you for your inputs. I'll try take it ahead. Regards.