Rescaling a selected image from album on Android

[Tukcedo]

LiveCoders,

I've been struggling with the various code snippets that I found here and elsewhere on internet, but don't think I understand where exactly my problem lies. I've tried to follow this lesson: http://lessons.runrev.com/m/4069/l/1148 ... to-library and a few others. What I'd like to do is for the user to select an image, either by camera or from an album, and then display it on the card, later save that image in thumbnail size.

I ran into a number of problems: after (succesfully) selecting an image using mobilePickPhoto:
* I found that I can't use templateImage because I don't know beforehand whether the user will select a portrait or landscape image
* Having said that, at least my Sony Experia Z1 Compact seems to get portrait and landscape mixed up: a picture taken with the camera "in portrait" will actually show up as landscape. Why? The phone's chooser just shows them all in as an extract in the same landscape format, so that's no help
* I was hoping I could position the selected image in an imageArea but that doesn't seem to work. Is there a control which accepts an image in an IDE defined size and lets the shift it around a bit?
* I'm having trouble deleting an image on moving to another card: when I come back the old image is still there and a new one is simply superimposed, but after a few tries the phone more or less freezes. I believe the basic problem is scoping and referring to the wrong image somehow (the original and not the copy?)
* Once I have an image, I can resize it using the aspect ratio (Width/Height) but when I apply that to the new height (the "leading" dimension), it still doesn't look quite right.
* How do I make the new size "stick"? When I reset the width and height I suspect that the data in memory is still the original size. Haven't tried saving it to file yet, but that might be a way to verify this.

Pointers anyone? Thx!!!

[Simon]

Hi Tukcedo,
Lots of questions here, not sure I'll get them all but I'll give you a start;

* I found that I can't use templateImage because I don't know beforehand whether the user will select a portrait or landscape image

Code: Select all

set the height of the last image to the formattedHeight of last image
set the width of last image to the formattedWidth of last image

Ok, so when you import a new image it becomes the last image which is made from the template image, setting formattedHeight/Width just says make it it's 'natural' size (will be big). Now portrait/landscape is done.
This is Rossi's design;

1) Import your image, set its resizeQuality to "good", lock it, group it,
and set the margins of the group to 0.

2) Create a button somewhere in the stack (or substack) to serve as a
behavior, name it "Image Box Lib" or similar, and give it this script:
on resizeControl

put long id of img 1 of me into myImage

put formattedHeight of myImage/formattedWidth of myImage into thePercent

set resizeQuality of myImage to "good" -- OPTIONAL

set rect of myImage to left of me,top of me,right of me,top of me +
round(width of me * thePercent)

end resizeControl


3) Set the behavior of the group to the long id of the button.

Now select the image group and drag the right, left, or bottom right/left
corners, and the image should proportionally resize. It should maintain
decent quality, it will maintain its size because it's locked, and even
though it's locked, you can drag-relocate it on the card because it's
contained by an unlocked group. If you need better quality, change the
"good" option to "best", though resizing will occur a bit slower.

Have fun.

Regards,

Scott Rossi

Watch out for line breaks. Klaus has a great one as well but I can't get my hands on it right now.

* I was hoping I could position the selected image in an imageArea but that doesn't seem to work. Is there a control which accepts an image in an IDE defined size and lets the shift it around a bit?

Nah, you have to position the imageArea not the image in an imageArea.

I can resize it using the aspect ratio (Width/Height)

Yeah, see above

* How do I make the new size "stick"?

Code: Select all

set the imagedata of image "myImage" to the imagedata of image myImage"

After you have resized it that will make it stick.

If all doesn't help just ask again.
Oh here: http://forums.livecode.com/viewtopic.ph ... 68#p103136
I think I used Klaus's method in that stack.

Simon

[Tukcedo]

Thanks a lot Simon. That gave me lots of ideas to play with tonight Unfortunately I'm afraid my knowledge of LC is probably not yet up this sort of level ..
The strange thing is that the results seem a bit erratic. With the code below I get a full screen of part of the image but no resize and no other controls are visible. Sometimes I did get a resize in the correct position but then the second entry into this routine would show the large image. I thought of putting "put empty into image "cProfileImage"" but that messes things up. The comments are some of the things I tried.

From my X Window programming days, it seems a bit odd to position a "bare" image rather than stick it in a proper container, hence my idea of putting it into an ImageArea. But I'll just drop that concept then I suppose. What I was after is that the user can shift the image inside that window, so that I can then extract that rectangle from a larger image. Does that make sense?

Code: Select all

on selectImage medium
   put "160" into MaxHeight
   # the X, Y dimensions for an image are not supported on Android and are ignored
   if the environment is "mobile" then
      mobilePickPhoto medium
      if the result is not empty then
         # no image was selected, show reason too
         answer "Please select an image:" && return & "(" & the result & ")" wih Cancel, OK
      else
         # an image was selected
         #
         # NOTE: W and H are reversed in this code snippet to play with the fact that Android appears to 
         # mix up landscape and portrait on some phones
         #
         put the formattedHeight of the last image into W
         put the formattedWidth of the last image into H
         set the name of the last image to "cProfileImage"
         #set the lockloc of image "cProfileImage" to "true"
         #set resizeQuality of cProfileImage to "good"
         
         put W / H into AspectRatio
         put round(MaxHeight * AspectRatio) into NewWidth
         answer "W x H = " & W && "x" && H && "(" & AspectRatio & ")" & return &  "New:" && NewWidth && "x" && MaxHeight with OK 
         
         #group image "cProfileImage"
         #set the name of last group to "imageGroup"
         #set the margins of group "imageGroup" to 0
         #set the rectangle of image cProfileImage to 40, 300, MaxHeight, NewWidth
         
         lock screen
         # position the scaled image
         # set the rectangle of image cProfileImage to 40, 300, MaxHeight, NewWidth
         set the left of image cProfileImage to "40"
         set the top of the image cProfileImage to "300"
         set the height of image "cProfileImage" to MaxHeight
         set the width of image "cProfileImage" to NewWidth
         unlock screen
      end if
   else
      # if we're not on a mobile platform
      answer "You are not on a mobile platform" with OK
   end if
end selectImage

[jacque]

With the code below I get a full screen of part of the image but no resize and no other controls are visible. Sometimes I did get a resize in the correct position but then the second entry into this routine would show the large image.

Uncomment the line that sets the lockloc of the image. If it isn't locked, it will revert to its native size the next time the screen refreshes. Also, objects resize from the center outward so that the object location doesn't change. That means you should set the dimensions before you position the top and and left, so swap the order of those two things.

From my X Window programming days, it seems a bit odd to position a "bare" image rather than stick it in a proper container, hence my idea of putting it into an ImageArea.

LiveCode's image object ("image area") is the container, it sets that up for you whenever you create or import an image and then fills it with the bitmap. There is no way to draw directly to the screen.

[Klaus]

Hi Tukcedo,

although LC treats everything as a string internally, you can save some typing
and write numbers without quotes!
...
set the left of image cProfileImage to 40
...

Best

Klaus

[Simon]

Hi Klaus,
That was odd, I figured you would have swapped the quotes
...
set the left of image "cProfileImage" to 40
...
Was it the "c"?

Simon

[Klaus]

Mon dieu, quel malheur!

Of course I meant:
...
set the left of image "cProfileImage" to 40
...

[Tukcedo]

that brought a smile to my face, that I'm not the only one getting confused on the old double quotes every now and then!

However, even the lockLoc doesn't always result in the correct behaviour, hence my confusion. I know I'm doing something wrong somewhere but (obviously) haven't figured out what yet.

More tests tonight ... Thanks for the support so far!

[Tukcedo]

Followed Jacque's comments about lockloc (tried lockLoc too, the naming convention suggests that's how it should be written, right?) and the order of changing size and position. I'm now consistently getting the selected image taking up the entire screen, hence can't get to any of my buttons. Am I getting any closer?

About lockloc/lockLoc and so on, is there a place where you can look up all the (inherited) properties of an object type, like image, button etc.?

Code: Select all

on selectImage medium
   put 160 into MaxHeight
   # the X, Y dimensions for an image are not supported on Android and are ignored
   if the environment is "mobile" then
      mobilePickPhoto medium
      if the result is not empty then
         # no image was selected, show reason too
         answer "Please select an image:" && return & "(" & the result & ")" wih Cancel, OK
      else
         # an image was selected
         put the formattedHeight of the last image into H
         put the formattedWidth of the last image into W
         set the name of the last image to "cProfileImage"
         set the lockloc of image "cProfileImage" to "true"
         set resizeQuality of cProfileImage to "good"
         
         put W / H into AspectRatio
         put round(MaxHeight * AspectRatio) into NewWidth
         answer "W x H = " & W && "x" && H && "(" & AspectRatio & ")" & return &  "New:" && NewWidth && "x" && MaxHeight with OK 
         
         lock screen
         # first set the new dimensions
         set the height of image "cProfileImage" to MaxHeight
         set the width of image "cProfileImage" to NewWidth
         # then position the scaled image
         set the left of image cProfileImage to 40
         set the top of the image cProfileImage to 300
         unlock screen
      end if
   else
      # if we're not on a mobile platform
      answer "You are not on a mobile platform" with OK
   end if
end selectImage

[jacque]

You're almost there. It's all correct except for one line, which is causing the handler to abort so that the resizing never occurs. This line is the problem:

Code: Select all

set resizeQuality of cProfileImage to "good"

The name of the image is "cProfileImage" but you have not indicated what type of object the engine should be looking for. You need to tell it:

Code: Select all

set the resizeQuality of img "cProfileImage" to "good"

There are ways to use the long name or long ID of an object so that you don't need to specify the type, but you aren't doing that here.

LiveCode is case insensitive. You can use either lockLoc or lockloc, and they're the same thing. We usually add the internal capital to make it easier to read, but LiveCode doesn't care. Also, "true" is a constant, so you don't need to quotations around it: set the lockLoc of last img to true. It works with the quotes regardless, but it's a little faster without them. (The "good" in resizeQuality is not a built-in constant, so you should use quotes there.)

[Simon]

Hi Tukcedo,
Jacque beat me to it but also:

Code: Select all

on mouseUp
   put 160 into MaxHeight
   # the X, Y dimensions for an image are not supported on Android and are ignored
   --   if the environment is "mobile" then
   --      mobilePickPhoto medium
   --      if the result is not empty then
   --         # no image was selected, show reason too
   --         answer "Please select an image:" && return & "(" & the result & ")" wih Cancel, OK
   --      else
   create image
   answer file "pick a file"
   
   set the filename of the last image to it
   # an image was selected
   put the formattedHeight of the last image into W
   put the formattedWidth of the last image into H
   set the name of the last image to "cProfileImage"
   set the lockloc of image "cProfileImage" to "true"
   set resizeQuality of image "cProfileImage" to "good"
   
   put W / H into AspectRatio
   put round(MaxHeight * AspectRatio) into NewWidth
   answer "W x H = " & W && "x" && H && "(" & AspectRatio & ")" & return &  "New:" && NewWidth && "x" && MaxHeight with OK 
   
   lock screen
   # first set the new dimensions
   set the height of image "cProfileImage" to MaxHeight
   set the width of image "cProfileImage" to NewWidth
   # then position the scaled image
   set the left of image "cProfileImage" to 40
   set the top of the image "cProfileImage" to 300
   unlock screen
   --end if
   --else
   --   # if we're not on a mobile platform
   --   answer "You are not on a mobile platform" with OK
   --end if
end mouseUp

It makes life much easier if you get things working on desktop first (and errors like missing "image" become very apparent).
Just throw that into a button.

Simon
EDIT; There is still something wrong with the resize but I'll let you play with it.
EDIT 2; and there are still missing quotes

[Tukcedo]

Eureka! We're really ALMOST there now ... Thanks Simon for leaving the double quotes exercise to the reader Most instructive!

ALMOST, because I still have the strange effect that when the phone is held "portrait" it produces a "landscape" image and vice versa. This results in a landscape image being squeezed in its X direction. You can recognise it, but it isn't pretty. Do all Android and iPhones do this? If this is the case I guess I could simply rotate 90deg and Bob would be my proverbial uncle, right?

Secondly, whenever the user presses the button that activates the mobilePickPhoto again, it shows the newly selected image, but it doesn't resize anymore. I've tried to delete the image in various locations, but can't say it helps (e.g. in a button that exists the card, near the top of the routine etc.)

Code: Select all

 if exists(image "cPofileImage") then
      delete image "cProfileImage"
 end if

[Simon]

Spelling

Simon

[Tukcedo]

Hmmm another hint please Simon? I'm following the pattern in the language directory for the delete command where it says"

delete button "New Button"

And similarly for exists:

exists(button "OK" of card "Preferences")

I could add the card name of course, but since I'm on the card where the image sits already, shouldn't have to do that surely?

[Simon]

Ahrrrr... tis a ship that be stranded, the gold be ahrrrrrres

Code: Select all

if exists(image "cPofileImage") then
   delete image "cProfileImage"

Simon
EDIT; Wait a better one.
Railroad crossing look out for the cars, can you spell it without any R's?