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({<br />	name: "PhoneGap.ImagePicker",<br />	kind: enyo.ModalDialog,<br />	caption: $L("Select Image"),<br />	autoClose: false,<br />	dismissWithClick: false,<br />	lazy:true,<br />	events: {<br />		onImageSelected: ""<br />	},<br />	components:[<br />		{kind: enyo.GroupBox, components: [<br />			{kind: enyo.Button, caption: $L("Take Picture"), onclick:"takePicture",    flex: 1, className: "enyo-button-light" },<br />			{kind: enyo.Button, caption: $L("From Gallery"), onclick:"galleryPicture", flex: 1, className: "enyo-button-light" }<br />		]},<br />		{name: "error", showing: false, style: "font-size:14px; padding:4px; color:#FF0000; font-weight:700;"},<br />		{kind: enyo.Spacer, height: "20px"},<br />		{kind: enyo.Button, caption: $L("Cancel"), onclick:"close", flex: 1}<br />	],<br />	takePicture: function(){<br />		navigator.camera.getPicture(enyo.bind(this, (function(imageURI){<br />			console.log("Take Photo Selected: " + imageURI);<br />			//--> Do what you want here with imageURI<br />			<br />			<br />			//--> Pass back that a photo was selected<br />			this.doImageSelected(imageURI);<br />			//--> Close this window<br />			this.close();<br />			return true;<br />		})), enyo.bind(this, (function(message){<br />			this.$.error.setContent($L("There was an error taking a picture. " + message));<br />			this.$.error.show();			<br />		})), {quality: 50, destinationType: Camera.DestinationType.FILE_URI});<br />	},<br /><br />	galleryPicture: function(){<br />		navigator.camera.getPicture(enyo.bind(this, (function(imageURI){<br />			console.log("Gallery Photo Selected: " + imageURI);<br />			//--> Do what you want here with imageURI<br />			<br />			<br />			//--> Pass back that a photo was selected<br />			this.doImageSelected(imageURI);<br />			//--> Close this window<br />			this.close();<br />			return true;<br />		})), enyo.bind(this, (function(message){<br />			this.$.error.setContent($L("There was an error selecting a picture from the gallery. " + message));<br />			this.$.error.show();<br />		})), {quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY});<br />	}<br />});
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){<br />	//--> Do something with the imageURI<br />}

Comments

Sign In or Register to comment.