The Ti.BlurView project allows you to create a blur view using either the contents of a view or a provided image.
Download the module from the dist folder
If you are building from source you will need to do the following:
Import the project into Xcode:
var mod = require('bencoding.blur');
The Ti.BlurView supports a majority of the standard Ti.UI.View properties. The below listed properties are specific to the Ti.BlurView.
Parameters
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.
viewToBlur : TiUIView
The viewToBlur property contains a reference to the view who's contents you wish to display in the Ti.BlurView.
IMPORTANT: The viewToBlur should not be called until the referencing view has been rendered. It is recommended this value is set on a window "open" event or other method that ensures the view to be used will be attahed and rendered to the screen first. If you wish to change the blurCroppedToRect, blurTintColor, or blurFilter you must do so before setting this property.
imageToBlur : Url to image
The imageToBlur property is the url to an image that will be used as to be blurred for display in the Ti.BlurView. Unlike the viewToBlur property the imageToBlur property can be set before the window has fully rendered.
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
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
});
bgView.add(blurView);
win.addEventListener('open',function(d){
blurView.viewToBlur = bgView;
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
});
bgView.add(blurView);
win.addEventListener('open',function(d){
blurView.viewToBlur = bgView;
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);
win.addEventListener('open',function(d){
blurView.viewToBlur = bgView;
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);
win.addEventListener('open',function(d){
blurView.viewToBlur = bgView;
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();
If you need a greater level of control you can use the applyBlurTo method to perform the image operations yourself.
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.
viewToBlur : TiUIView
The viewToBlur parameter contains a reference to the view who's contents you wish to have an image generated from.
imageToBlur : Url to image
The imageToBlur parameter is the url to an image that will be used in the blur process.
blobToBlur : TiBlob
The blobToBlur parameter is the blob image you wish to have used in the blur process. This is commonly created by calling the toImage() method on the view you wish to blur.
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({
blobToBlur: 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({
blobToBlur: bgView.toImage(),
blurLevel:5, blurTintColor:"#9EDEB8",
cropToRect:{
x:bgView.rect.x,
y:bgView.rect.y,
width:bgView.rect.width,
height:bgView.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();
If you like the Titanium module,please consider following the @benCoding Twitter for updates.
For module updates, Titanium tutorials and more please check out my blog at benCoding.Com.
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.