Put image into image

[Opaquer]

Hey everyone

I'm currently pulling my hair out over images and how they work. Hopefully once I finish this part of the code, I'll never have to use them again!

Here's my issue: I'm making an app for iOS (and maybe Android) where the user can pick an image from their library or take a photo, and then add some text to it, and either send it in an email or choose another picture or two first before sending. I've got two image fields (one for a small version of the image so users can see a thumbnail size photo, and one hidden one that's full sized that actually gets sent). Now, while I was making the app on the computer, I was using something like this:

Code: Select all

answer file "Please choose a file:" with filter "JPG file, *.jpg", "JPEG file, *.jpeg", "PNG file, *.png"
      put it into PhotoLocation
      set the filename of image "JobImage1" to PhotoLocation
      set the filename of image "JobImage1FullSize" to PhotoLocation

And it works perfectly (yay!) The issue comes when I try to move this over to mobile. Unfortunately, set the filename of image doesn't work anymore, so I was looking into other options, and I found set the imageData, which I'm using to set the image of the full sized image so that the resolution is the same as the original photo. However, I can't for the life of me figure out how to get the thumbnail working. I've read that I *should* be able to just go "put image "MobilePhoto" into image "JobImage1"", but it doesn't work! And imageData doesn't work when the sizes of the images are different. Is there any easier way to do this other than to just set the size of the thumbnail to the full size, then use imageData then resize it down to thumbnail size again?

Many thanks

Michael

[quailcreek]

Hi Michael,
Ya, images and pics can take some getting use to in mobile. Here's a stack I cobbled together for you to play with. You should be able to pick it apart to get what you need.

[Klaus]

Hi Michael,

I've read that I *should* be able to just go "put image "MobilePhoto" into image "JobImage1"", but it doesn't work!

so this does not work on mobile?
It really should, please consider to report this bug here: http://quality.livecode.com

Thanks!


Best

Klaus

[quailcreek]

Actually you can't put an image into an image. You can set the text of an image and you can set the filename of an image but not the image of an image.

Michael, your code should work, you just need to get the filename using mobile commands instead of answer file.

[Klaus]

Hi Tom,

of course you can, if the image is imported!
Please try it yourself!


Best

Klaus

[quailcreek]

Sorry Klaus. You're correct. It just looked funny when I read it.

[Klaus]

I'm always for a good laugh!

[jacque]

The issue comes when I try to move this over to mobile. Unfortunately, set the filename of image doesn't work anymore, so I was looking into other options, and I found set the imageData, which I'm using to set the image of the full sized image so that the resolution is the same as the original photo. However, I can't for the life of me figure out how to get the thumbnail working.

The "answer file" command doesn't work on mobile, you'll need to use mobilePickPhoto if you want the user to take a photo or select an image already on the device. Setting an image's filename does work on mobile, but not the same way as desktop. The file structure is different on mobile and there are permission restrictions and sandboxing. That's a different topic.

You can't put one image into another if the source image is referenced by a filename (as your sample script does.) It has to be an actual, imported image. When a user takes a photo or selects one from the library, the image is imported onto the current card, which is what you need. After that you should be able to put that image into the thumbnail image. Don't use imagedata, since as you found out, it will not scale correctly. Either set the text of the thumbnail image, or just "put" the original into it. The two methods are effectively the same thing.

Finally, note that mobile commands will error on the desktop. You'll need to surround those with:

Code: Select all

if the environment is "mobile" then
  -- take photo, select photo, etc.
else
  -- do desktop file selection
end if

Also, you can find code to do a lot of things if you search the LC lessons. Search for "mobilePickPhoto" over there. Here's one of the hits that addresses most of your questions:

http://lessons.livecode.com/m/4069/l/11 ... to-library

[Opaquer]

Thanks everyone for the help!

Also, sorry, I should have been a bit clearer - my code I pasted is for computer, but I've got a mobilePickPhoto section that's for mobile. So, Jacque, if I understand you correctly, I can use put image into image if the image was imported, and not just "set the filename of image to xxxxxx"? Because I've done the latter on my code so far, which would explain why whenever I use put image into image it doesn't work! Although, as I understand if, if the user picks a photo from their library, the image is created and imported and whatnot, so I should be able to use put image into image? That just seems confusing !

Thanks again for all your help everyone!

[jacque]

So, Jacque, if I understand you correctly, I can use put image into image if the image was imported, and not just "set the filename of image to xxxxxx"? Because I've done the latter on my code so far, which would explain why whenever I use put image into image it doesn't work! Although, as I understand if, if the user picks a photo from their library, the image is created and imported and whatnot, so I should be able to use put image into image?

Yes, that's right. Imported images bring all their binary content into the stack, so you have more ways to work with them. They are complete images that can be manipulated in many ways. Referenced images (those with filenames) only have imagedata (their screen pixels) and the complete binary image is not available. LC reads the file from disk and only creates the pixels it needs to display the image at the size you require; the real image isn't really there. Only the pixels needed for screen display are there.

Using mobilePickPhoto creates a new image in the stack. It isn't a referenced (pixel-only) image, it is the whole image with all its binary data, which means it is an imported image. You can put it into another image, because LC has all the binary data to work with.

That's an overly broad explanation but maybe it helps.