Image Picker Kind for PhoneGap and Enyo 1.0

edited February 2012 in Enyo 1.0
I was asked to share this, so here it is. An ImagePicker kind for Enyo 1.0 that works with PhoneGap. This opens a modal box where the user selects to take a photo, or select from their gallery:
enyo.kind({
	name: "PhoneGap.ImagePicker",
	kind: enyo.ModalDialog,
	caption: $L("Select Image"),
	autoClose: false,
	dismissWithClick: false,
	lazy:true,
	events: {
		onImageSelected: ""
	},
	components:[
		{kind: enyo.GroupBox, components: [
			{kind: enyo.Button, caption: $L("Take Picture"), onclick:"takePicture",    flex: 1, className: "enyo-button-light" },
			{kind: enyo.Button, caption: $L("From Gallery"), onclick:"galleryPicture", flex: 1, className: "enyo-button-light" }
		]},
		{name: "error", showing: false, style: "font-size:14px; padding:4px; color:#FF0000; font-weight:700;"},
		{kind: enyo.Spacer, height: "20px"},
		{kind: enyo.Button, caption: $L("Cancel"), onclick:"close", flex: 1}
	],
	takePicture: function(){
		navigator.camera.getPicture(enyo.bind(this, (function(imageURI){
			console.log("Take Photo Selected: " + imageURI);
			//--> Do what you want here with imageURI
			
			
			//--> Pass back that a photo was selected
			this.doImageSelected(imageURI);
			//--> Close this window
			this.close();
			return true;
		})), enyo.bind(this, (function(message){
			this.$.error.setContent($L("There was an error taking a picture. " + message));
			this.$.error.show();			
		})), {quality: 50, destinationType: Camera.DestinationType.FILE_URI});
	},

	galleryPicture: function(){
		navigator.camera.getPicture(enyo.bind(this, (function(imageURI){
			console.log("Gallery Photo Selected: " + imageURI);
			//--> Do what you want here with imageURI
			
			
			//--> Pass back that a photo was selected
			this.doImageSelected(imageURI);
			//--> Close this window
			this.close();
			return true;
		})), enyo.bind(this, (function(message){
			this.$.error.setContent($L("There was an error selecting a picture from the gallery. " + message));
			this.$.error.show();
		})), {quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY});
	}
});
Set it up with this:
{name: "PhoneGapImagePicker", kind: "PhoneGap.ImagePicker", onImageSelected: "functionWhenImageIsSelected"}
Call it with this:
this.$.PhoneGapImagePicker.openAtCenter();
And of course your selected image callback:
functionWhenImageIsSelected: function(imageURI){
	//--> Do something with the imageURI
}

Comments

Sign In or Register to comment.