Imported image is distorted

Getting into LiveCode for iOS? Ask your questions here.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Thu Dec 10, 2015 11:10 pm

Hi Bernd,
I appreciate your time and help. Have a good weekend.

Regards,
Tom
Tom
MacBook Pro OS Mojave 10.14

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Imported image is distorted

Post by jacque » Sat Dec 12, 2015 10:00 am

If I understand it right you're placing a non-square image into a locked square image object. LC will stretch the image data in whatever dimension it needs to in order to fit. So if the original image is portrait, squeezing it into a square will make it wider.

Fix it by putting the image into an unlocked image object, so that it assumes the original dimensions, then crop it to the square, and then relock it.

I hope I understood what's happening correctly.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Mon Dec 14, 2015 3:08 am

Hi Jacqueline,
Yes, that's exactly what's happening. I'm pretty sure I followed your suggestion correctly. But alas... no-joy. Same results. Is there a different way of designating the pic once it has been placed into the image object besides "the text of the last image of this card"?

Code: Select all

case "Library"
         mobilePickPhoto "library"
         if the result is "Cancel" then exit mouseUp
         
         put the formattedwidth of last image of this card into tWidthSource
         put the formattedheight of last image of this card into tHeightSource
         --         answer "tWidthSource =" && tWidthSource & cr & "tHeightSource =" && tHeightSource
         put the width of me into tWidthDest
         put the height of me into tHeightDest
         put 0 into tMarge
         
         put imageCrop (tWidthSource, tHeightSource, tWidthDest, tHeightDest, tMarge) into theDimns
         --         answer theDimns
         --         set the width of last image of this card to item 1 theDimns
         --         set the height of last image of this card to item 2 theDimns
         --         answer "W" && the width of last image of this card & cr & "H" && the height of last image of this card 
         lock screen
         set the lockLoc of me to false
         set the text of me to the text of the last image of this card
         set the width of last image of this card to item 1 theDimns
         set the height of last image of this card to item 2 theDimns
         set the width of me to 240
         set the height of me to 240
         set the lockLoc of me to true
         unlock screen
Tom
MacBook Pro OS Mojave 10.14

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Imported image is distorted

Post by jacque » Mon Dec 14, 2015 5:20 am

I wrote an example for you but it fails -- there appears to be a problem with the "crop" command that stretches the image when it shouldn't. Until it gets fixed, you might consider just doing a simple resizing. You won't get a square but it won't distort.

Call the handler and pass either "height" or "width" as the paramter depending on which dimension you want to base the resizing on. For portrait images, you probably want to resize by height.

Code: Select all

on resizeTo pDim -- param is either "height" or "width"
  if pDim = "height" then
    put the 240/formattedHeight of img 1 into tRatio
  else -- default is to resize by width
    put the 240/formattedwidth of img 1 into tRatio
  end if
  put img 1 into img 2
  set the height of img 2 to (the formattedHeight of img 2 * tRatio)
  set the width of img 2 to (the formattedwidth of img 2 * tRatio)
end resizeTo
The version with cropping:

Code: Select all

on resizeTo pDim -- pass literal "height" or "width"
  if pDim = "height" then
    put the 240/formattedHeight of img 1 into tRatio
  else -- width is default
    put the 240/formattedwidth of img 1 into tRatio
  end if
  put img 1 into img 2
  set the height of img 2 to (the formattedHeight of img 2 * tRatio)
  set the width of img 2 to (the formattedwidth of img 2 * tRatio)
  put the left of img 2 into tLeft
  put the top of img 2 into tTop
  crop img 2 to tLeft,tTop,tLeft+240,tTop+240 -- fails here
end resizeTo
This resizes and crops an image to a 240 px square, but the less square the original, the more distorted the copy gets.

You'll need to change the image references in the handlers, since the above just references two images in my test stack. Referring to "last image of this card" is fine, that wasn't the problem.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Imported image is distorted

Post by jacque » Mon Dec 14, 2015 5:32 am

Never mind, this fixes it:

Code: Select all

on resizeTo pDim -- pass literal "height" or "width"
  if pDim = "height" then
    put the 240/formattedHeight of img 1 into tRatio
  else -- width is default
    put the 240/formattedwidth of img 1 into tRatio
  end if
  put img 1 into img 2
  set the height of img 2 to (the formattedHeight of img 2 * tRatio)
  set the width of img 2 to (the formattedwidth of img 2 * tRatio)
  set the imagedata of img 2 to the imagedata of img 2
  put the left of img 2 into tLeft
  put the top of img 2 into tTop
  crop img 2 to tLeft,tTop,tLeft+240,tTop+240
end resizeTo
Until the imagedata is set, the crop command is working on the original image data rather than the resized one. Resetting the imagedata makes it do the right thing.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Mon Dec 14, 2015 7:47 pm

Hi Jacqueline,
Thanks for the help. I think I need to use a strict resize because crop is not a recognized iOS command. I used the first piece of code you suggested but.. no-joy.

Here's where I'm at so far. This is in the image object:

Code: Select all

on mouseUp
   local tDim
   
   if environment() is not "mobile" then exit mouseUp
   
   answer "Where is the photo coming from?" with "Library" or "Album" or "Camera" or "Cancel"
   put it into tMethod
   
   switch tMethod
      case "Library"
         mobilePickPhoto "library"
         if the result is "Cancel" then exit mouseUp
         
         put the formattedwidth of last img of this card into tWidthSource
         put the formattedheight of last img of this card into tHeightSource
         if tWidthSource >= tHeightSource then
            put "width" into tDim
         else
            put "height" into tDim
         end if
         
         lock screen
         set the lockLoc of me to false
         set the text of me to the text of the last img of this card
         resizeTo tDim
         set the imageData of me to the imageData of me
         set the width of me to 240
         set the height of me to 240
         set the lockLoc of me to true
         unlock screen
         
         delete the last img of this card
         set the uPhotoChanged of this cd to true
         break
Tom
MacBook Pro OS Mojave 10.14

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Imported image is distorted

Post by jacque » Mon Dec 14, 2015 8:33 pm

That should work. I hadn't noticed before that the crop command wasn't supported on mobile, that seems odd since cropping is an internal LC operation that shouldn't rely on the mobile OS. But anyway...

Technically you don't need to set the imagedata if you're not cropping, but it shouldn't hurt in this case.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Imported image is distorted

Post by Simon » Tue Dec 15, 2015 3:52 am

This is sounding more and more like you'd need to use a mask.
A graphic with really thick borders and a 240 x 240 cut out in the middle layered above the image.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

Klaus
Posts: 14182
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: Imported image is distorted

Post by Klaus » Tue Dec 15, 2015 2:39 pm

Hi Tom,

you could also GROUP your single image and set the rect of the group to 240*240 pixel!
Then you can position you image inside of the group via script or manually as needed.


Best

Klaus

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Tue Dec 15, 2015 6:18 pm

Thanks Klaus and Simon for you input.

Is it possible to add a pic to the Xcode library folder so that I can choose it in the sim? I want to pick something that is also on my device for comparison. I assume it's in the Xcode bundle somewhere.
Tom
MacBook Pro OS Mojave 10.14

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Tue Dec 15, 2015 7:09 pm

Never mind. I found the answer. Drag and drop from the finder.
Tom
MacBook Pro OS Mojave 10.14

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Tue Dec 15, 2015 8:14 pm

Just a follow-up.

I reported this as a bug and I was told I should use crop, as Jacqueline suggested. I was also told that crop should still work in mobile. So it looks like the dictionary is incorrect. QC is now checking to see if there is a problem with the crop command. I also added an image from the finder to the sim so I could compare apples to apples.

http://quality.livecode.com/show_bug.cgi?id=16601
Tom
MacBook Pro OS Mojave 10.14

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4166
Joined: Sun Jan 07, 2007 9:12 pm

Re: Imported image is distorted

Post by bn » Tue Dec 15, 2015 9:29 pm

Hi Tom,

try this in your image "ImageHolder", I tested in the simulator and it worked.
I do the resizing in the mouseUp handler.

Code: Select all

on mouseUp
   local tDim
   
   if environment() is not "mobile" then exit mouseUp
   
   answer "Where is the photo coming from?" with "Library" or "Cancel"
   put it into tMethod
  
   switch tMethod
      case "Library" ## Uses resizeTo in the cd script
         mobilePickPhoto "library"
         if the result is "Cancel" then exit mouseUp
         
          set the uPhotoChanged of this card to false -- just testing if it gets set below
         
         set the name of the last image of this card to "importImage"
         put the formattedwidth of  img  "importImage" into tWidthSource
         put the formattedheight of img  "importImage" into tHeightSource
         if tWidthSource >= tHeightSource then
            put "width" into tDim
         else
            put "height" into tDim
         end if
         
         if tDim = "height" then
            put 240/(the formattedHeight of img  "importImage") into tRatio
         else -- width is default
            put 240/(the formattedwidth of img  "importImage") into tRatio
         end if
         
         lock screen
         set the lockLoc of me to true
         set the text of me to the text of image  "importImage"
         
         if tDim = "width" then 
            set the width of me to 240
            set the height of me to  the formattedHeight of me * tRatio
         else
            set the height of me to 240
            set the width of me to the formattedWidth of me * tRatio
         end if
         set the lockLoc of me to true
         unlock screen
         
         delete image  "importImage"
         set the imageData of me to the imageData of me -- fix image to this size
         set the uPhotoChanged of this cd to true
         break
   end switch
end mouseUp
I append the stack I used (it has an additional button and a field for checking dimensions of image "imageHolder" and tests for the status of the uPhotoChanged

I did not test "crop" because you actually don't want to crop (get a part of the image) but you want to restrict the max image dimension to 240 and resize the other dimension accordingly. And then you want to "fix" the image those dimensions by setting the imageData to the imageData.
Note: I don't unlock the image for this because I override the locked status by setting the dimensions of image "ImageHolder"
You might have to adjust for the top of the image, if you want the top of image "ImageHolder" to be always the same.

Tell me if this works for you

Kind regards
Bernd
Attachments
Image Crop Test.livecode.zip
(2.68 KiB) Downloaded 240 times

quailcreek
Posts: 746
Joined: Sun Feb 04, 2007 11:01 pm

Re: Imported image is distorted

Post by quailcreek » Tue Dec 15, 2015 9:56 pm

Hi Bernd,
That works great! Thanks a bunch. I was concerned about using crop for the same reason you mentioned. This was the last hitch in this app. I've been work on for almost 8 months.

Thanks for the help everybody. As usual, I learned a lot from the forum.
Tom
MacBook Pro OS Mojave 10.14

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4166
Joined: Sun Jan 07, 2007 9:12 pm

Re: Imported image is distorted

Post by bn » Tue Dec 15, 2015 10:00 pm

Hi Tom,

I am glad this works for you. Would you mind updating your bug report? You might even want to set it to "not a bug" although we did not test if the crop command does not work. Just to reduce the number of open bugs.

Kind regards
Bernd

Post Reply