Custom Camera Overlay

cameraOverlay.js

var win = Titanium.UI.currentWindow;

var messageView = Titanium.UI.createView({
	height:30,
	width:250,
	visible:false
});

var indView = Titanium.UI.createView({
	height:30,
	width:250,
	backgroundColor:'#000',
	borderRadius:10,
	opacity:0.7
});
messageView.add(indView);

// message
var message = Titanium.UI.createLabel({
	text:'Picture Taken',
	color:'#fff',
	font:{fontSize:20,fontWeight:'bold',fontFamily:'Helvetica Neue'},
	width:'auto',
	height:'auto'
});
messageView.add(message);

//Opacity View
var opacityView = Ti.UI.createView({
	backgroundColor:'black',
	bottom: 44
});

var toolbarView = Titanium.UI.createView({
	backgroundColor:'#98AFC7',
	bottom:0,
	width:320,
	height:44
});

var toolbarImageView = Ti.UI.createImageView({
	image: 'KS_nav_ui.png',
	left: 5,
	top: 2,
	height: 40,
	width: 40
});

toolbarView.add(toolbarImageView);

var toolbarPictureButton = Ti.UI.createButton({
	top:2,
	height:40,
	width: 160,
	borderRadius: 20,
	backgroundColor: '#98AFC7',
	backgroundImage:'KS_nav_views.png'
});

toolbarView.add(toolbarPictureButton);

var toolbarGhostButton = Ti.UI.createButton({
	title:'Ghost',
	top: 2,
	height: 40,
	width: 60,
	right: 10,
	backgroundColor: '#5C5858'
});

toolbarView.add(toolbarGhostButton);

var sliderView = Titanium.UI.createView({
	height:40,
	width:250,
	right: 10,
	bottom: 60,
	visible:false
});

var opacitySlider = Titanium.UI.createSlider({
	min:0,
	max:1.0,
	value:0.5,
	width:200,
	left:25,
	height:20,
	color:'#990000',
	top:10
});

sliderView.add(opacitySlider);

var overlay = Titanium.UI.createView();
overlay.add(opacityView);
overlay.add(sliderView);
overlay.add(toolbarView);
overlay.add(messageView);

toolbarGhostButton.addEventListener('click', function(){
	sliderView.visible = true;
});

opacitySlider.addEventListener('change',function(e)
{
	opacityView.opacity = opacitySlider.value;
});

toolbarPictureButton.addEventListener('click', function(e) {
	Ti.Media.takePicture();
	messageView.animate({visible:true});
	setTimeout(function()
	{
		messageView.animate({visible:false});
	},1000);
});


Titanium.Media.showCamera({

	success:function(event)
	{
		Ti.API.debug("picture was taken");
		
		// place our picture into our window
		var imageView = Ti.UI.createImageView({
			image:event.media,
			width:win.width,
			height:win.height
		});
		win.add(imageView);
		
		// programatically hide the camera
		Ti.Media.hideCamera();
	},
	cancel:function()
	{
	},
	error:function(error)
	{
		var a = Titanium.UI.createAlertDialog({title:'Camera'});
		if (error.code == Titanium.Media.NO_CAMERA)
		{
			a.setMessage('Please run this test on device');
		}
		else
		{
			a.setMessage('Unexpected error: ' + error.code);
		}
		a.show();
	},
	overlay:overlay,
	showControls:false,	// don't show system controls
	mediaTypes:Ti.Media.MEDIA_TYPE_PHOTO,
	autohide:false // tell the system not to auto-hide and we'll do it ourself
});