How do I get an image from my mobile photo library
In this lesson we are going to take a look at how we can get a image file into your stack from your mobile device photo library.
You can download the sample stack from this url: https://tinyurl.com/yatplpfq
Using the mobile 'image chooser'
Lets take a look at the basic script that we can apply to our button:
on mouseUp
mobilePickPhoto "library"
if the result is empty then
# If the result is empty you know the user has chosen an image and you can start working with it.
end if
end mouseUpThe command "mobilePickPhoto" takes up to 3 parameters. The first, source, defines what type of image choose it will be:
library: It will let the user select a photo from their library
album: lets the user pick a photo from their recent camera roll
camera: lets the user take a photo using the iPhone camera
rear camera: lets the user take a photo using the rear camera (iOS only)
front camera: lets the user take a photo using the front camera (iOS only)
The second and third parameters, maxwidth and maxheight are only available on iOS and they specify the maximum allowed width and height of the image.
The selected image will appear on your stack which you can then manipulate. First of all lets just see what happens when we
1) Click our button
2) Select a photo
Creating the stack
1) Create a new stack
2) Set its width to 320 and its height to 460
3) Drag on a new button and call it "Get Photo" or something similar
4) Move it to the bottom of the stack so that there is room for our photo
What we get on iOS
1) Our app in the simulator
2) Click the button to get the Photo library up
3) Select an image
4) The image on your stack
Note: The simulator is really helpful here because it has a library of stock photos which will be really helpful as we test our app.
What we get on Android
1) Our app in the emulator
2) Click the button to get the photo gallery
3) The image on your stack
Note: The Android emulator doesn't come pre-loaded with images so you will need to add some.
Lets resize and locate the image now that we have it one our stack.
When the image is selected LiveCode creates an image on your stack based on the 'templateimage'. The templateimage is simply a way of setting up properties of the an image that is created before that happens. So in our case we will want to set the images width, height and location.
Update the script on your button to the following:
on mouseUp
set the lockloc of the templateimage to true
set the width of the templateimage to "300"
set the height of the templateimage to "400"
set the left of the templateimage to "10"
set the top of the templateimage to "10"
mobilePickPhoto "library"
end mouseUpThe Result
Paul Johnson
Is the selected photo then put into a variable or result?
I would like the user to be able to select the photo and then email it to an email address as an attachment?
Ben Beaumont
Hi Paul,
You can access the image that is placed using:
'the last image'
For example:
set the name of the last image to "myImage"
set the ... of image "myImage" to ...
I hope that helps,
Warm regards,
Ben
Thomas Suenkel
Hello,
- How can I find out if the foto is landscape or portrait?
=> then I can resize it correctly.
=> So how can I scale Fotos properly?
- What exact sourcecode do we need to then mail the photo?
- How to pick more than 1 picture and mail them?
I hate to ask these questions.
Is there a 'perfect' book on LiveCode?
Regards from Germany
Thomas
Hanson Schmidt-Cornelius
Hello Thomas,
when you use "mobilePickPhoto", you can specify the source and the maximum width and height the photo is to be displayed at on the stack.
You can also extract the width and height of the photo, once it is displayed on your card. This limited by the maximum values set when calling "mobilePickPhoto".
LiveCode automatically creates a new image control under which the new photo is displayed.
Use "the number of controls of me" to find out how many controls you have, and use "the name of control XX" where XX is a control number, to get information about the controls on your card.
You can then use "the width of control XX" and "the height of control XX" to get the actual dimensions of the photo. This information should tell you if the photo is displayed either landscape or portrait.
You can allow a user to pick a number of photos from whatever source you provide and build buttons that allow the user to specify when they are finished selecting photos.
The following link describes how to create an e-mail in iOS with attachments:
http://lessons.runrev.com/s/lessons/m/4069/l/29095-How-do-I-Send-HTML-E-Mails-with-Attachments-in-iOS-
Our lessons portal is regularly updated and provides you with a wide range of information on how to use LiveCode.
Kind Regards,
Hanson
Thomas
Hi Hanson,
thank you. I tried things out. Most work.
I still have no solution for attaching the selected photo to an Email.
Is that possible at all?
Best regards
Thomas
Hanson Schmidt-Cornelius
Hi Thomas,
check out the lesson I pointed you at in my last response. This should give you the framework for creating an e-mail.
In order to attach an image, have a look at the following code example:
// Specify the type you want to attach.
put "image/png" into tAttachment["type"]
// Specify the name of the image as it is to appear in the e-mail.
put "someImage.png" into tAttachment["name"]
// Assign the data to the attachment.
// "MyImage" is the name of an image in the stack.
// The text of the image is the binary data that is to be attached.
put the text of image "MyImage" into tAttachment["data"]
You can attach several images by creating an array of image attachments.
Kind Regards,
Hanson
boby
Hi, guys!!! :P
I tried this on my iOS Device. It was great but now i would like to do the same with my mobile video library.
Is there someone who could help me?
Sorry, I'm noob (stupid).
Hanson Schmidt-Cornelius
Hi Boby,
if you are looking for information from other LiveCode developers, then check out the User Forums and Mailing lists here: http://lists.runrev.com/developers/community/
You may also want to have a look at the following lesson on how to play video on an iOS device: http://lessons.runrev.com/s/lessons/m/4069/l/29287
Kind Regards,
Hanson
Sergio Schvarstein
Does the picture remains inside the stack after closing or must I save it in some other way to see after reopening ?
Hanson Schmidt-Cornelius
Hi Sergio,
if you want to access the photo again, once the application starts up again, then you will have to save it in the application bundle. I recommend having a look at the following dictionary entries on this matter:
specialFolderPath - Allows you to specify where you would like to read/write to
open file - Allows you to open a file for reading or writing
write to file - Allows you to write to a file
close file - Closes a file
Have a look at these entries for manipulating file data from your application.
Kind Regards,
Hanson