Fixing iOS module permissions

Starting with Titanium 3.3.0.GA Appcelerator has updated their module templates to have a new default folder structure.  Along with these directory changes you will notice that you get a permission error when running the ./ script, usually something like the error shown below.


To fix this you simply need to run the chmod 755 command in terminal as shown below.


This updates to have the correct permissions so that you can continue your building by running as you’ve always done.


Android Text to Speech and Speech to Text

The latest version of Ti.Utterance adds Android support for both Text to Speech and Speech to Text.  The Ti.Utterance native module surfaces the native platform APIs for Text to Speech, and on Android now Speech to Text.

Text to Speech

The Speech proxy provides your Titanium apps Text to Speech capabilities on both iOS and Android.  Ti.Utterance uses AVSpeechUtterance on iOS and android.speech.tts.TextToSpeech on Android.  This enables you to provide the Ti.Utterance module with a string, such as “hello world” for the module to speak.

To learn more about Text to Speech please read the documentation:


Full example available here.

var utterance = require('bencoding.utterance'),
	textToSpeech = utterance.createSpeech();

	text:"Hello World"

Speech to Text

The SpeechToText proxy is available on Android and provides Speech to Text capabilities using your device’s native platform speech recognizer.  When the startSpeechToText method is called, a microphone dialog will appear and listen for input from the user.  When the user stops speaking, Android’s speech recognizer will convert what was said into one or more text phrases.  If Android is not fully able to match was is said, the speech recognizer will provide a list of options in the order it feels is the best match.

To learn more about Speech to Text  please read the documentation:


Full example available here.

var utterance = require('bencoding.utterance'),
	speechToText = utterance.createSpeechToText();

	promptText:"Say something interesting",
	maxResults: 10


	if(e.success && (e.wordCount > 0)){
		alert("Speech Recognized "
				+ e.wordCount
				+ " matches found: "
				+ JSON.stringify(e.words));
		alert("Unable to recognize your speech");


The Demo

Using an Android Blur View

One of the most popular effects in mobile today is the “blur”.  Although the blur effect is most commonly associated with iOS, several notable apps such as Etsy’s Android app use this technique.

The Ti.Blur module now provides Android support so that you can use this popular effect in both your Android and iOS Titanium apps.

The initial release of Ti.Blur for Android provides two APIs make applying a Box Blur easy.  The first APIs is an extended Ti.UI.View object called, BasicBlurView.  This view works similar to a Ti.UI.ImageView and applies the blur effect to the image or screenshot provide.  The second API is a called applyBlurTo and allows you to directly apply the Box Blur effect to an image.

The following shows them module’s example app in action.



BasicBlurView on Android

The basicBlurView is a new view object within the Ti.Blur module.  This view object applies a Box Blur to any image provided to it’s image property. The blurRadius property is used to determine the level of blur that is applied.

This view would typically be used to blur an image, such as background image that you already have available in your app, or by taking a capture of the device’s current screen and providing it to the basicBlurView.

The basicBlurView is also cross-platform providing support for both Android and iOS.

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

var win = Ti.UI.createWindow({
    backgroundColor:'white', title:"Image Blur Demo"
var vwTest = mod.createBasicBlurView({
    width:Ti.UI.FILL, height:Ti.UI.FILL, blurRadius:10,
    image: 'your-image-here.png'


Blurring an image without a View object

The Ti.Blur module allows you to blur an image or blob directly without the use of a View object.  This is helpful if you want to cache the image for later, or use one of Titanium’s other built in UI objects.

The following code snippet is from the example app demonstrating how to apply a blur to an existing image packaged in your app.

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

var win = Ti.UI.createWindow({
    backgroundColor:'white', title:"Image Blur Demo"

var imgblurredImage = mod.applyBlurTo({

var vwTest = Ti.UI.createImageView({
    width:Ti.UI.FILL, height:Ti.UI.FILL,


Getting Started

Get started using Ti.Blur on either iOS or Android using the below links:





Titanium Live Blur, well kind of…

Since the release of iOS7, the Live Blur effect has been extremely popular.  Since Apple doesn’t yet provide this effect natively the community has come up with a few different approaches to achieve this effect.

Toolbar Layer

One common approach to achieving a live blur is to use a layer from the UIToolbar.  This allows you to use the same live blur effect that a IUToolbar has, but with the same functionality of a UIView.  This approach is reliable with good performance.  The downside, is you have no control over the Blur and in iOS 7.1 the blur was made softer making it difficult to see when used in come color schemes. Adrian  Opaladini has created an excellent Titanium module called Live BlurView which implements this approach. If you are looking at implementing a light live blur I highly recommend checking out this module.

Timer Driven

The next approach to implementing a live blur effect is to use a timer and a blur algorithm or library such as GPUImage.  Typically this is implemented using a timer which at a specific duration takes a snapshot of the source view and applies a blur effect.  As you can imagine the downside to this approach is you need to implement the refresh code yourself.   This usually requires managing the processes of a timer, view snapshot, and image processing.  Not a ton of code, but you don’t get anything out of the box. The upside, is complete control over the process.  This allows you to use the blur effect that looks best in your app, at a frequency that makes sense. There is an example of how to do this using the Ti.BlurView module here.

Another Option…

I really wasn’t happy with either the Toolbar or Timer approaches.  I wanted more control then I had with the Toolbar approach, but the idea of firing a timer when it wasn’t needed wasn’t appealing, especially considering the performance impact.  This got me thinking, that for many Titanium apps, the UI fires all types of events when the application state has changed.  Why not hook into these events. Out of this came the Scroll Blur example for the Ti.BlurView module.

See it in action


The Code

var mod = require('bencoding.blur');
exports.createWindow = function(){	

	var win = Ti.UI.createWindow({
		barColor:"#999", title:"Blur on Scroll"

	function createRows() {
	    function buildRow(el) {
	        var row = Ti.UI.createTableViewRow({
	            width:150, height:120
	        var headerImage = Ti.UI.createImageView({
	            image: el.image, 
	            width:Ti.UI.FILL, height:Ti.UI.FILL
	        var titleLabel = Ti.UI.createLabel({
	            text: el.title,
	            width: Ti.UI.FILL, height: '30dp', 
	            horizontalWrap: false, bottom: '5dp', 
	            left: '5dp', right: '5dp',
	            font: {
	                fontSize: '20dp', fontWeight:'bold'
	        return row;
	    var rows=[];
	    for (var iLoop=0;iLoop<100;iLoop++){
	        rows.push(buildRow({ title: 'Test Row '+iLoop, 
	        					image: 'cat.jpg'}));
	    return rows;

	var list = Ti.UI.createTableView({
	    width:Ti.UI.FILL,  height:Ti.UI.FILL, data:createRows()

	var imgView = mod.createGPUBlurImageView({
		height:250, width:Ti.UI.FILL, zIndex:500,top:0,
			type:mod.IOS_BLUR, radiusInPixels:1

	var w = Ti.Platform.displayCaps.platformWidth;
	var blur = {
		timerId: null,
		apply : function(){
			Ti.API.debug("Taking screenshot");
			var screenshot = list.toImage();
			Ti.API.debug("applyBlur : Cropping screenshot");
			screenshot.imageAsCropped({x:0,y:0, height:250,
			Ti.API.debug("set screenshot as image to ImageView");
			imgView.image = screenshot;
			Ti.API.debug("set blur so we will update");
				type:mod.BOX_BLUR, radiusInPixels:5
			Ti.API.debug(" Done with Blur");				
		Ti.API.debug("action fired : scroll");
			Ti.API.debug("Timer already set, returning");
		blur.timerId = setTimeout(function(){
			blur.timerId = null;	

		Ti.API.debug("action fired : scrollend");
			Ti.API.debug("Clearing Interval");
			blur.timerId = null;

	return win;

Blur Effects with GPUBlurImageView

Looking for a high performance way to apply Blur effects?  The latest release of the Ti.Blur module provides the new high performance GPUBlurImageView component.  GPUBlurImageView is an extended version of the Ti.UI.ImageView with one extra  property, blur.  Through this single property you can apply iOS, Box, or Gaussian blur effects.

Initial tests show a 50% performance improvement over the prior Ti.BlurView blur functionality.  If you have a retina display on your mac you will find the GPUBlurImageView renders faster on device then in the simulator due to the number of pixels being rendered.

iOS Blur Code Example:

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

var imageView = mod.createGPUBlurImageView({
    height:Ti.UI.FILL, width:Ti.UI.FILL,
        type:mod.IOS_BLUR, radiusInPixels:1

See the BlurView in action:


iOS 7 Screen Brightness

Looking to implement a day and night mode to your app?  Ti.Brightness provides a series of APIs that allows you to read the iOS 7 screen brightness and be notified if it changes.

Getting the screen brightness

Reading the iOS 7 screen brightness level is easy.  Just call the getScreenBrightness method as shown below.  This method provides Titanium access to the underlying iOS [UIScreen mainScreen].brightness platform API.

var brightness = require('ti.brightness');
var level= brightness.getScreenBrightness();"Brightness Level:" + level);

* If you are running this in the simulator, 0.5 will always be returned.

Brightness Changed Event

You can use the changed event as shown in the following snippet to trigger an event after the user has adjusted their screen brightness. This event provides Titanium access to the name UIScreenBrightnessDidChangeNotification notification.

function onBrightChange(e){;
    alert("Your Screen brightness is level: " + e.brightness);


* This event will not trigger in the simulator

In Action

The following movie shows the module in action and how Ti.Brightness can be used to add a dark and light theme to your app.

Digital Assistant Built with Titanium Mobile

Ever want to build your own version of Siri that understands keywords specific to your app or business domain?  This can be done easily using Titanium and a few modules.  The below video is a proof of concept I put together to demonstrate some of what can be done.  Over the next couple of posts I’ll walk through the components used to create this example.

Ti Digital Assistant Video

Modules used: