Drag, Pinch, Zoom issues

[MadManSoft]

I'm working on imitating the contact photo picker that Apple's contact list has. You pinch/zoom and drag to get what you want in the center of the screen.

Drag is easy, although with some caveats...

on mouseDown
grab me
end mouse down

Zoom isn't bad either, using the code from the LC lesson
how-do-i-implement-a-multi-touch-pinch-motion

Putting the 2 together has been a nightmare and I still can't see why it's not working properly.

To get them in the same handler, I've modified the lesson code as follows:

Code: Select all

put (pX & comma & pY) into sTouchArray[pId]["currentloc"]
   
   # 1 touch found, move the image.. this is my addition
   if the number of lines of the keys of sTouchArray is 1 then
      put the number of lines of the keys of sTouchArray into fld "info"
      grab image "original"
   end if
   
   # 2 touches found, do zoom pinch
   if the number of lines of the keys of sTouchArray is 2 then

This works well for dragging the image.

HOWEVER, now pinch and zoom goes completely wonky when you run in the simulator and hit the alt key to have your two "finger" points on the image. It bounces all over the place, while generally moving to the left on the screen.

Comment out the "grab image "original" and pinch and zoom works fine, even if you have your two "finger" points on the image.

I've attached a sample project to demonstrate. Comment out the line with grab in it to see the difference. Also place the finger points outside of the image and try it.

I realize some folks have used a browser control, but that not what I'm shooting for. I do have a workaround, but would like to understand this issue.

I don't know if this is a bug or a fault of my code, I'd appreciate any help.

Thanks!

Steve

[endernafi]

It's not a bug nor a faulty code.
It's deficient code.

You have to put much more effort to achieve this.
Zooming and moving around at the same time isn't easy, unfortunately.
But the most difficult part is zooming into a specific region of the picture, into the corners at worst case.
I've struggled with it some time ago but since it wasn't urgent and just for hobby for the time being, I didn't continue.

If I can find time and return to that old relics of code, I'll happily share it.

I hope someone has already did this and share her/his script with us


Best,

~ Ender Nafi

[endernafi]

Steve,

I've said it's difficult but the difficult part is not moving the image.
It's the zooming after changing the original location of the image.

So, here is the solution to movement:
Put this into the touchStart:

Code: Select all

put ((the mouseH - item 1 of the loc of image "original") & comma & (the mouseV - item 2 of the loc of image "original")) into sDrag

And replace your grab line inside the touchMove with this:

Code: Select all

set the loc of image "original" to ((pX - item 1 of sDrag) & comma & (pY - item 2 of sDrag))

These two changes will handle the movement and that wonkiness.
But zooming will still be imperfect because of that *zooming into a specific region* issue which I've mentioned in my previous post.


Best,

~ Ender Nafi


Edit: Don't forget to add sDrag as a script local

[MadManSoft]

Hi Ender,

Thanks, I will give this a go!

I'm not trying to do it in one shot, and I do have code that keeps the picture in the bounds that I need it too on both the drag and the zoom, it's just not in that sample stack.

My understanding of that code is that the array has one line if it's one finger (touch) or 2 lines if it's 2 fingers (touches). One finger would be a drag, 2 would be a pinch/zoom.

My workaround is to put the pinch/zoom code on an overlay/mask that has a hole in the middle and the drag is done in that hole with a mouse down. Works well, but not what most users would expect, although it's easy enough to get used too... I guess.

Again, thanks for any help.

Best,
Steve

[endernafi]

Steve,

You don't need a separate mouseDown command.
My proposed solution will handle the move without a problem, I've tested it before writing the message.

But, as I've said, once the image is away from the center of the screen, zooming will be strange.
Because, that code from the lesson zooms in and out relative to the center of the image.
That's not what the user expects, the image should be zoomed relative to the exact center of the touch points.

Although, thinking of your needs, that issue may remain unnoticed by the user.
The image will be small, there will be an overlay, etc.

Try it; if it works, then there is no need to fix.
Most of the time, close enough is good enough



Best,

~ Ender Nafi

[MadManSoft]

Hi Ender,

Thanks so much for your help!

I think close enough in this case is indeed good enough

And, thanks to you, I'm attaching a finished sample stack to give anyone who was/will have this issue something to look at and play with.

If someone wants to add what Ender talked about above, PLEASE do and post it back here

Again, I really appreciate the help!!

Best,

Steve

[endernafi]

Folks,

I've managed to solve that keeping the zoom point at focus issue.
Here is the stack:

pinchToZoom.zip

(134.9 KiB) Downloaded 333 times

Steve,
I didn't adapt the method to fit to your stack;
because I wanted to keep it as much suitable for general purposes as possible.


Hope it helps someone out there, at least to some degree...

Best,

~ Ender Nafi

P.S.: Now, it's time to code for some pinch to rotate stuff

[MadManSoft]

Hi Ender,

No problem!!! I've download your stack and will adapt to mine

Thanks!

Best,

Steve