7blur

Sample project .gif (4.4MB)

Overview

IOS 7 introduces a new efficient snapshot API. The 7blur project builds on these frameworks to produce Control Center and Notification Center like blur effects enforcing the 3rd design pattern of depth for iOS 7 apps. It should be noted that iOS 7 has reached GM (11A465) status. This specific API was discussed publicly at WWDC 2013 and 7blur can be used freely and improved by the community.

7blur supports both two styles of blur, two styles of positioning and many blur color components.

• Supported blurs

• Live real time blur

• Static blur

• Supported positioning

• Drop down menu style

• Fixed position

• Blur color components

• Blur radius

• Tint color

• Saturation delta factor

• Mask image

By combining the attributes above one can produce many desired visual effects and human interfaces. 7blur only has a handful of API tasks and the view content can be visually edited in Interface Builder for productivity. The next section will go over the API followed by common use cases contained in the sample project. Let's get started!

Getting Started

7blur only requires iOS 7 and Xcode 5. Integration is simple and entails 3 tasks. (1) Loading the BLRView and possibly sliding it into place for drop down menu style, (2) blurring it with color components and lastly (3) unloading the BLRView to remove. The API is listed below for reference and the Xcode 5 project contains structured comments (Doxygen).

API

BLRView.h

//Drop down menu style
+ (BLRView *) load:(UIView *) view;

//Fixed position style
+ (BLRView *) loadWithLocation:(CGPoint) point parent:(UIView *) view;

//Remove
- (void) unload;

//Down
- (void) slideDown;

//Up
- (void) slideUp;

//Static blur
- (void) blurWithColor:(BLRColorComponents *) components;

//Live real time blur
- (void) blurWithColor:(BLRColorComponents *) components updateInterval:(float) interval;

Code : Sample Project

The sample Xcode 5 project contains (3) common iOS 7 use cases and supports in-call status bar, iPhone 4" and 3.5" retina devices.

1. Live Real Time Blur

This is an example of the drop down menu style live real time blur. Background content is blurred in real time behind the foreground.

LiveBlurVC.m

- (void) viewDidLoad {
    [super viewDidLoad];
    
    ...
    
    //Load BLRView with UITableView as background content
    self.blrView = [BLRView load:self.tableView];
    
    //Add BLRView to main view
    [self.view addSubview:self.blrView];
}

- (IBAction) toggleViewDirection:(id) sender {
    switch (self.viewDirection) {
        case KShouldMoveDown: {
            
            //Start live real time blur with .2f update interval
            [self.blrView blurWithColor:[BLRColorComponents lightEffect] updateInterval:.2f];
            
            //Slide down - drop down style
            [self.blrView slideDown];
            
            ...
        }
            
        case KShouldMoveUp: {
            
            //Slide up
            [self.blrView slideUp];
            
            ...
        }

        ...
    }
}

2. Static Blur

Similar to the example above but this version stops the UITableView from scrolling, fades in a vignette and then drops down a static blurred view. Background content is blurred using a dark color behind the foreground while touch events are disable.

StaticBlurVC.m

- (void) viewDidLoad {
    [super viewDidLoad];

    ...
    
    //Load BLRView with UITableView as background content
    self.blrView = [BLRView load:self.tableView];
    
    ...
    
    //Add BLRView to main view
    [self.view addSubview:self.blrView];
}

- (IBAction) toggleViewDirection:(id) sender {
    switch (self.viewDirection) {
        case KShouldMoveDown: {
            
            //Stop UITableView : UIScrollView from scrolling
            [self.tableView setContentOffset:self.tableView.contentOffset animated:NO];
            
            //Show vignette
            [UIView animateWithDuration:.2f animations:^{
                self.blackoutView.alpha = .2f;
            } completion:^(BOOL finished) {
                
            }];

            //Static blur with dark color components
            [self.blrView blurWithColor:[BLRColorComponents darkEffect]];
            
            //Slide down - drop down style
            [self.blrView slideDown];
            
            ...
        }
            
        case KShouldMoveUp: {
            
            //Hide vignette
            [UIView animateWithDuration:.5f animations:^{
                self.blackoutView.alpha = 0;
            } completion:^(BOOL finished) {
                
            }];
            
            //Slide up
            [self.blrView slideUp];
            
            ...
        }
        
        ...
    }
}

3. Live Positioned Blur

The final example differs from the previous two by supporting view positioning inside a subview.

PositionedBlurVC.m

- (IBAction) toggleView:(id) sender {
    switch (self.viewDisplayAction) {
        case KShouldPresent: {
            
            //Location point to place BLRView
            CGPoint point = CGPointMake(0, 200);
            
            //Load BLRView with UIView as background content
            self.blrView = [BLRView loadWithLocation:point parent:self.backgroundView];
            
            //Container foreground frame updated to match BLRView (x, y, w, h)
            self.foregroundView.frame = CGRectMake(point.x, point.y, CGRectGetWidth(self.blrView.frame), CGRectGetHeight(self.blrView.frame));
            
            //Add BLRView to foreground view
            [self.foregroundView addSubview:self.blrView];
            
            //Start live real time blur with .2f update interval
            [self.blrView  blurWithColor:[BLRColorComponents lightEffect] updateInterval:.2f];
            
            ...
        }
            
        case KShouldDismiss: {
            
            //Remove BLRView
            [self.blrView unload];
            
            ...
        }
            
        ...
    }
}

Unloading

All examples unload or remove BLRView from the view heirarchy.

- (void) viewWillDisappear:(BOOL) animated {
    
    //Remove BLRView if not done previously
    [self.blrView unload];
}

Interface Builder

7blur can be customized for many use cases and visually edited in Interface Builder for productivity. This promotes the MVC design pattern and increases productivity. One could also subclass for further reuse.

Performance and Implementation Details

7blur is efficient for static blurs and live or real time blur perform averagely. One of the intentions about opening this project up to the community is to improve this. Before making these improvements lets discuss how 7blur works.

First (1) 7blur takes a snapshot using the new iOS 7 UIView (UISnapshotting) category drawViewHierarchyInRect:afterScreenUpdates:. Apple in WWDC 2013 - Session 226 mentioned that this is the preferred method for graphical effects and is fast. API renamed in seed 2 from snapshotView:.

Pending screen updates are discarded for performance and live snapshots.

Original - 320x568

Second (2) 7blur grabs the new snapshot image from the graphics context at x1 point scale and crops the background snapshot from the BLRView frame attributes. The sample project has a BLRView with the following dimensions 320x200.

Cropped - 320x200

Third (3) the cropped snapshot is re-sized down by a scale factor of x4.

Re-sized - 80x50

Forth (4) the scaled down image is applied the blur effect using a modified version of Apple’s UIImage+ImageEffects UIImage categories. The blur operation is further improved using the smaller image size from the previous step. Methods in this category are fast and include the following vImage functions from the Accelerate.framework

• vImageScale_ARGB8888 (scale)
• vImageBoxConvolve_ARGB8888 (blur)
• vImageMatrixMultiply_ARGB8888 (saturation)

Blur applied - 80x50

Blur scaled up by UIImageView default contentMode - 320x200

Lastly (5) the blurred snapshot is assigned to the backgroundImageView property of BLRView and the default contentMode will scale it back up and retain the aspect ratio.

Final - 320x568

Threading

The snapshot must occur on the main thread while the crop, re-size and blur operations are off loaded to a background global queue. These operations are fast thanks to the Accelerate.framework. Once complete the UI changes are synchronized on the main run loop. Low level GCD dispatch timers are used in favor of NSTimer for live real time blur implementation. On iOS, NSTimer events are suppressed during certain cocoa touch events such as UIScrollView scrolling as an example. By using GCD dispatch timers live blur effects can be achieved even during such events. CADisplayLink in NSRunLoopCommonModes is another good option.

What About Apple?

Apple’s live burs in the Control Center, Notification Center, status bar, under keyboards and in other views on iOS 7 are smooth and efficient. This is because UIKit is built on top of OpenGL. Apple has private APIs that can listen for child re-drawing cycles thus eliminating the need for inefficient polling. The sample project incurs resources for live real time blurs even when the background content has not changed or been invalidated. Apple does not have to pay this tax.

Additionally, Apple's blur effects are implemented in hardware. Even using the Accelerate.framework vImage processing is still a hybrid CPU/GPU implementation. While these limitations do exist there is room for the open source community to improve projects like 7blur. Please fork and improve.

History

• Initial private (NDA) release : 8/28/2013
• Initial public release 1.0.0 : 9/10/2013

Copyright and Software Licenses

• UIImage Image Effects Category Methods : Apple, Inc.
• Eadweard Muybridge "Sallie Gardner at a Gallop" : Palo Alto, CA 1878
• Royalty Free F L A G S : Naaty Design
• http://www.content-pack.com/category/freebies/world-flags/

The MIT License (MIT)

Copyright (c) 2013 Justin M Fischer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIM