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.