Ti.BlurView

The Ti.BlurView project allows you to create a blur view using either the contents of a view or a provided image.

Animation

Before you start

Download the compiled release

Download the module from the dist folder

Building from source?

If you are building from source you will need to do the following:

Import the project into Xcode:

~~~ TITANIUM_SDK = /Users/benjamin/Library/Application Support/Titanium/mobilesdk/osx/$(TITANIUM_SDK_VERSION) ~~~

Setup

Importing the module using require


var mod = require('bencoding.blur');

Creating a blur view

The Ti.BlurView supports a majority of the standard Ti.UI.View properties. The below listed properties are specific to the Ti.BlurView.

Properties

blurLevel (optional): float

The blurLevel property sets how blurry the view is. By default this value is 5.

blurCroppedToRect : Boolean

The blurCroppedToRect property is a boolean value that determines if the Ti.BlurView should crop the image or view contents to the overlap area of the Ti.BlurView. The blurCroppedToRect property is true by default. If you want to do a blurred background view such as the Yahoo weather app you must set the blurCroppedToRect property to false. See the below examples for details.

This property will not take effect if updated after the viewToBlur or imageToBlur has rendered.

blurTintColor : String / Color

The blurTintColor property is the color tint that should be apply as part of the blur process. By default this is set to transparent.

This property will not take effect if updated after the viewToBlur or imageToBlur has rendered.

backgroundView : TiUIView

The backgroundView property contains a reference to the view who's contents you wish to display in the Ti.BlurView.

IMPORTANT: If blurCroppedToRect is true (default setting) you will need to make sure the view referenced in backgroundView has rendered before setting this property. This can be in the open event of the window. You can also use the onPresent event of Ti.BlurView to perform this action. If you wish to change the blurCroppedToRect, blurTintColor, or blurFilter you must do so before setting this property.

image : Url to image

The image property is the url to an image that will be used as to be blurred for display in the Ti.BlurView.

IMPORTANT: Remember by default the image provided will be cropped as an overlay using the Ti.BlurView's frame. If this is not the desired effect set blurCroppedToRect to false. If you wish to change the blurCroppedToRect, blurTintColor, or blurFilter you must do so before setting this property.

blurFilter : String

The blurFilter property sets which filter is used during the bend process. By default this is set to CIGaussianBlur.

Other valid values would be CIBoxBlur: - CIDiscBlur - CIGaussianBlur - CIMotionBlur - CIZoomBlur

Methods

tryRefresh

The tryRefresh method, will resample the BlurView if references to the backgroundView or Image are still present.

~~~

blurView.tryRefresh();

~~~

clearContents

The clearContents method, removes the contents of the BlurView

~~~

blurView.clearContents();

~~~

Events

onPresent

The onPresent event is fired when the view is rendered or refreshed. This is a good place to se the backgroundView you are using the blurCroppedToRect:true and the referencing view has not yet rendered to screen.

~~~ blurView.addEventListener('onPresent',function(d){ Ti.API.info('onPresent fired'); blurView.backgroundView = bgView; }); ~~~

onSizeChanged

The onSizeChanged event is fired when the view is resized. If you need to adjust the image or backgroundView you can use this event to resample.

~~~ blurView.addEventListener('onSizeChanged',function(d){ Ti.API.info('onPresent fired'); blurView.backgroundView = bgView; }); ~~~

Examples

Please check the module's example folder or on github for examples on how to use this module.

Example - Blurred Background


var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({ backgroundColor:'blue' });

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var blurView = mod.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, blurLevel:5, blurCroppedToRect:false, backgroundView:bgView }); bgView.add(blurView);

win.addEventListener('open',function(d){

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:40, right:40
});
blurView.add(container);
var label = Ti.UI.createLabel({
    text:"Show how to blur like the yahoo weather app.", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Example - Blurred and Tinted Background


var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({ backgroundColor:'blue' });

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var blurView = mod.createView({ top:100, left:40, right:40, bottom:100, blurLevel:5, blurTintColor:"#9EDEB8", blurCroppedToRect:false, backgroundView:bgView }); bgView.add(blurView);

win.addEventListener('open',function(d){

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:40, right:40
});
blurView.add(container);
var label = Ti.UI.createLabel({
    text:"BlurView Tinted background", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Example - Blurred Overlay

var mod = require('bencoding.blur');
var win = Ti.UI.createWindow({
    backgroundColor:'blue'
});

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var blurView = mod.createView({ top:100, left:40, right:40, bottom:100, blurLevel:5, blurCroppedToRect:true }); bgView.add(blurView);

blurView.addEventListener('onPresent',function(d){ Ti.API.info('onPresent fired'); blurView.backgroundView = bgView; });

win.addEventListener('open',function(d){

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:10, right:10
});
blurView.add(container);

var label = Ti.UI.createLabel({
    text:"BlurView Cropped to view size", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Example - Blurred and Tinted Overlay


    var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({ backgroundColor:'blue' });

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var blurView = mod.createView({ top:100, left:40, right:40, bottom:100, blurLevel:5, blurTintColor:"#9EDEB8", blurCroppedToRect:true }); bgView.add(blurView);

blurView.addEventListener('onPresent',function(d){ Ti.API.info('onPresent fired'); blurView.backgroundImage = bgView; });

win.addEventListener('open',function(d){

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:10, right:10
});
blurView.add(container);
var label = Ti.UI.createLabel({
    text:"BlurView Tinted\nand Cropped", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Doing a blur without the view

If you need a greater level of control you can use the applyBlurTo method to perform the image operations yourself.

applyBlurTo

The applyBlurTo method takes a dictionary with the following fields.

Fields

blurLevel (optional): float

The blurLevel property sets how blurry the view is. By default this value is 5.

cropToRect : Dictionary

The cropToRect parameter is a dictionary containing the x,y,width, and height values the provided object should be cropped to.

This property will not take effect if updated after the viewToBlur or imageToBlur has rendered.

blurTintColor : String / Color

The blurTintColor parameter is the color tint that should be apply as part of the blur process. By default this is set to transparent.

This parameter will not take effect if updated after the viewToBlur or imageToBlur has rendered.

view : TiUIView

The view parameter contains a reference to the view who's contents you wish to have an image generated from.

image : Url to image

The image parameter is the url to an image that will be used in the blur process.

blurFilter : String

The blurFilter property sets which filter is used during the bend process. By default this is set to CIGaussianBlur.

Other valid values would be CIBoxBlur: - CIDiscBlur - CIGaussianBlur - CIMotionBlur - CIZoomBlur

Example - Blurred Background


var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({ backgroundColor:'blue' });

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var imgView = Ti.UI.createImageView({ height:Ti.UI.FILL, width:Ti.UI.FILL, }); bgView.add(imgView);

win.addEventListener('open',function(d){

var img = mod.applyBlurTo({
    image: bgView.toImage(),
    blurLevel:5, blurTintColor:"#9EDEB8"
});

imgView.image = img;

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:40, right:40
});
imgView.add(container);
var label = Ti.UI.createLabel({
    text:"Show how to blur like the yahoo weather app.", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Example - Blurred Cropped Overlay


var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({ backgroundColor:'blue' });

var bgView = Ti.UI.createView({ height:Ti.UI.FILL, width:Ti.UI.FILL, backgroundImage:"42553_m.jpg" }); win.add(bgView);

var imgView = Ti.UI.createImageView({ top:100, left:40, right:40, bottom:100 }); bgView.add(imgView);

win.addEventListener('open',function(d){

var img = mod.applyBlurTo({
    view: bgView,
    blurLevel:5, blurTintColor:"#9EDEB8",
    cropToRect:{
        x:imgView.rect.x,
        y:imgView.rect.y,
        width:imgView.rect.width,
        height:imgView.rect.height
    }
});

imgView.image = img;

var container = Ti.UI.createView({
    backgroundColor:"#fff", borderRadius:20,
    top:100, height:150, left:40, right:40
});
imgView.add(container);
var label = Ti.UI.createLabel({
    text:"Show how to blur like the yahoo weather app.", 
    color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
}); 
container.add(label);

});

win.open();

Twitter

If you like the Titanium module,please consider following the @benCoding Twitter for updates.

Blog

For module updates, Titanium tutorials and more please check out my blog at benCoding.Com.

Attribution

The Blur method was inspired by the CoreImage tutorial by Evan Davis here.

The image used in all of the examples is by thenails and is licenced under Creative Commons. This image is and associated licensing is available here.