Good pinch-to-zoom in image object?

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Good pinch-to-zoom in image object?

dunbarx via use-livecode
There's a Lesson at the LC site on doing pinch-to-zoom with images, but
it's kinda wonky (zooms okay, but at object center rather than
touchpoint), and as I hunt around I see most people just give up an use
a browser object.

I have an app in which I'd rather not add the overhead of embedding an
entire browser process with my process just to get a good pinch-to-zoom,
so if there's a script out there that handles that well in an image
object I'd be grateful for the time saved.

TIA -

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
I started looking for some examples and found some JS code that could
probably be adapted.  I would take a crack at it, but won't have time
probably until the weekend.  Here's the link:
https://groups.google.com/forum/#!topic/PhoneGap/QpXAzVo_Fi8

Mulling it over in my head, I wonder if it may be good to use a timer
though so we don't try to redraw faster than a decent refresh rate.
Something like when we get the touch start, set a flag and send an
UpdateImage message every x ticks.  Then the touchmove handlers would just
be updating the latest finger positions.  When the touch ends, clear the
flag (so the UpdateImages won't reactivate itself).  If moving faster than
the screen refresh, it would save some of the position math (especially in
the code referenced above).

I'm probably explaining that horribly, but it is late :)

On Wed, Jan 24, 2018 at 9:32 PM Richard Gaskin via use-livecode <
[hidden email]> wrote:

> There's a Lesson at the LC site on doing pinch-to-zoom with images, but
> it's kinda wonky (zooms okay, but at object center rather than
> touchpoint), and as I hunt around I see most people just give up an use
> a browser object.
>
> I have an app in which I'd rather not add the overhead of embedding an
> entire browser process with my process just to get a good pinch-to-zoom,
> so if there's a script out there that handles that well in an image
> object I'd be grateful for the time saved.
>
> TIA -
>
> --
>   Richard Gaskin
>   Fourth World Systems
>   Software Design and Development for the Desktop, Mobile, and the Web
>   ____________________________________________________________________
>   [hidden email]                http://www.FourthWorld.com
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
Here's what I came up with.  It is a little slow though.  It's pretty much
a port of the code that I linked.  I had to adapt to the way move events
are issued in LC (particularly that a touch start does not include
coordinates).  I also added the ability to continue moving when a zoom
stops (only one touch ended).  I initially was calling the "updateImage"
handler using send in time (and checking pending messages to avoid calling
multiple times), but the code is fast enough to not benefit from that
(adding delay made it less smooth, the "updateImage" handler always seemed
to finish before another move event was queued).

I put the code in the graphic.  I called the "initGraphic" handler from the
card preOpenCard handler.


local panning, \
      zooming, \
      startX0, startY0, \
      startX1, startY1, \
      endX0, endY0, \
      endX1, endY1, \
      startDistanceBetweenFingers, \
      endDistanceBetweenFingers, \
      pinchRatio, \
      imgWidth, imgHeight, \
      currentContinuousZoom, \
      currentOffsetX, currentOffsetY, \
      currentWidth, currentHeight, \
      newContinuousZoom, \
      newHeight, newWidth, \
      newOffsetX, newOffsetY, \
      centerPointStartX, centerPointStartY, \
      centerPointEndX, centerPointEndY, \
      translateFromZoomingX, translateFromZoomingY, \
      translateFromTranslatingX, translateFromTranslatingY, \
      translateTotalX, translateTotalY, \
      percentageOfImageAtPinchPointX, \
      percentageOfImageAtPinchPointY, \
      sTouchArray, sTouch0, sTouch1

on initGraphic
   local tLoc
   put the width of graphic "square" into imgWidth
   put the height of graphic "square" into imgHeight
   put 1.0 into currentContinuousZoom
   put the left of graphic "square" into currentOffsetX
   put the top of graphic "square" into currentOffsetY
   put imgWidth into currentWidth
   put imgHeight into currentHeight
end initGraphic

on touchMove pID, pX, pY
   -- capture current position
   put pX into sTouchArray[pID]["x"]
   put pY into sTouchArray[pID]["y"]

   -- since the touch start doesn't include location, need to handle
   -- the calculations here
   if sTouchArray[pID]["started"] is empty then
      put true into sTouchArray[pID]["started"]
      if the number of lines of the keys of sTouchArray is 1 then
         put pID into sTouch0
         put pX into startX0
         put pY into startY0
      else if the number of lines of the keys of sTouchArray is 2 then
         put pID into sTouch1
         put sTouchArray[sTouch0]["x"] into startX0
         put sTouchArray[sTouch0]["y"] into startY0
         put pX into startX1
         put pY into startY1
         put ((startX0 + startX1) / 2.0) into centerPointStartX
         put ((startY0 + startY1) / 2.0) into centerPointStartY
         put (centerPointStartX - currentOffsetX) / currentWidth \
               into percentageOfImageAtPinchPointX
         put (centerPointStartY - currentOffsetY) / currentHeight \
               into percentageOfImageAtPinchPointY
         put sqrt((startX1-startX0)^2 + (startY1-startY0)^2) \
               into startDistanceBetweenFingers
      end if
      updatePanZoomState
      exit touchMove
   end if

   -- record the end touch locations for the move
   if panning then
      put pX into endX0
      put pY into endY0
   else if zooming then
      put sTouchArray[sTouch0]["x"] into endX0
      put sTouchArray[sTouch0]["y"] into endY0
      put sTouchArray[sTouch1]["x"] into endX1
      put sTouchArray[sTouch1]["y"] into endY1
   end if

   updateImage
end touchMove

on touchEnd pID
   put true into sTouchArray[pID]["ended"]
   updateImage
end touchEnd

on updateImage
   lock screen
   if panning then
      put endX0 - startX0 into translateFromTranslatingX
      put endY0 - startY0 into translateFromTranslatingY
      put currentOffsetX + translateFromTranslatingX into newOffsetX
      put currentOffsetY + translateFromTranslatingY into newOffsetY
   else if zooming then
      -- Calculate current distance between points to get new-to-old pinch
      -- ratio and calc width and height
      put sqrt((endX1-endX0)^2 + (endY1-endY0)^2) \
            into endDistanceBetweenFingers
      put endDistanceBetweenFingers/startDistanceBetweenFingers into
pinchRatio
      put pinchRatio * currentContinuousZoom into newContinuousZoom
      put imgWidth * newContinuousZoom into newWidth
      put imgHeight * newContinuousZoom into newHeight

      -- Get the point between the two touches, relative to upper-left
corner of image
      put ((endX0 + endX1) / 2.0) into centerPointEndX
      put ((endY0 + endY1) / 2.0) into centerPointEndY

      -- This is the translation due to pinch-zooming
      put (currentWidth - newWidth) * percentageOfImageAtPinchPointX into
translateFromZoomingX
      put (currentHeight - newHeight) * percentageOfImageAtPinchPointY into
translateFromZoomingY

      -- And this is the translation due to translation of the centerpoint
between the two fingers
      put centerPointEndX - centerPointStartX into translateFromTranslatingX
      put centerPointEndY - centerPointStartY into translateFromTranslatingY

      -- Total translation is from two components:
      --    (1) changing height and width from zooming and
      --    (2) from the two fingers translating in unity
      put translateFromZoomingX + translateFromTranslatingX into
translateTotalX
      put translateFromZoomingY + translateFromTranslatingY into
translateTotalY

      -- the new offset is the old/current one plus the total translation
component
      put currentOffsetX + translateTotalX into newOffsetX
      put currentOffsetY + translateTotalY into newOffsetY

      -- Set the image attributes on the card
      set the width of graphic "square" to newWidth
      set the height of graphic "square" to newHeight
   end if
   set the left of graphic "square" to newOffsetX
   set the top of graphic "square" to newOffsetY

   -- clear touch array for ended touches after updating
   repeat for each key tKey in sTouchArray
      if sTouchArray[tKey]["ended"] then
         if tKey is sTouch0 then
            put sTouch1 into sTouch0
            put endX1 into endX0
            put endY1 into endY0
         end if
         if panning or zooming then
            put newOffsetX into currentOffsetX
            put newOffsetY into currentOffsetY
         end if
         if zooming then
            put newWidth into currentWidth
            put newHeight into currentHeight
            put newContinuousZoom into currentContinuousZoom
            put endX0 into startX0
            put endY0 into startY0
         end if
         delete variable sTouchArray[tKey]
      end if
   end repeat
   updatePanZoomState
   unlock screen
end updateImage

on updatePanZoomState
   put false into panning
   put false into zooming
   if the number of lines of the keys of sTouchArray is 1 then
      put true into panning
   else if the number of lines of the keys of sTouchArray is 2 then
      put true into zooming
   end if
end updatePanZoomState
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
Brian Milby wrote:

 > Here's what I came up with.  It is a little slow though.  It's pretty
 > much a port of the code that I linked.  I had to adapt to the way move
 > events are issued in LC (particularly that a touch start does not
 > include coordinates).  I also added the ability to continue moving
 > when a zoom stops (only one touch ended).  I initially was calling the
 > "updateImage" handler using send in time (and checking pending
 > messages to avoid calling multiple times), but the code is fast enough
 > to not benefit from that (adding delay made it less smooth, the
 > "updateImage" handler always seemed to finish before another move
 > event was queued).
 >
 > I put the code in the graphic.  I called the "initGraphic" handler
 > from the card preOpenCard handler.

Very kind of you, Brian.  Thanks!  Much obliged.

I just gave it a whirl and it seems to work rather well.  MUCH better
for me than embedding an entire browser app inside my app just to get a
good pinch.

Since I was working on an image rather than a graphic, I modded the
script to use a script-local object specifier rather than the hard-wired
graphic reference, then added a mouseDown handler to trigger your init
so I could test it easily.

While I was at it I re-wrapped a few things to hopefully fit better here
for others to easily copy-n-paste.

Thanks again - it's nicely done.

@Michael Doub:  another candidate for MasterLib?

--
  Richard Gaskin
  Fourth World Systems


------


local panning, \
       zooming, \
       startX0, startY0, \
       startX1, startY1, \
       endX0, endY0, \
       endX1, endY1, \
       startDistanceBetweenFingers, \
       endDistanceBetweenFingers, \
       pinchRatio, \
       imgWidth, imgHeight, \
       currentContinuousZoom, \
       currentOffsetX, currentOffsetY, \
       currentWidth, currentHeight, \
       newContinuousZoom, \
       newHeight, newWidth, \
       newOffsetX, newOffsetY, \
       centerPointStartX, centerPointStartY, \
       centerPointEndX, centerPointEndY, \
       translateFromZoomingX, translateFromZoomingY, \
       translateFromTranslatingX, translateFromTranslatingY, \
       translateTotalX, translateTotalY, \
       percentageOfImageAtPinchPointX, \
       percentageOfImageAtPinchPointY, \
       sTouchArray, sTouch0, sTouch1

local sZoomObj

on mouseDown
    put the long id of me into sZoomObj -- Change this to specify object
    initGraphic
end mouseDown


on initGraphic
    local tLoc
    put the width of sZoomObj into imgWidth
    put the height of sZoomObj into imgHeight
    put 1.0 into currentContinuousZoom
    put the left of sZoomObj into currentOffsetX
    put the top of sZoomObj into currentOffsetY
    put imgWidth into currentWidth
    put imgHeight into currentHeight
end initGraphic

on touchMove pID, pX, pY
    -- capture current position
    put pX into sTouchArray[pID]["x"]
    put pY into sTouchArray[pID]["y"]

    -- since the touch start doesn't include location, need to handle
    -- the calculations here
    if sTouchArray[pID]["started"] is empty then
       put true into sTouchArray[pID]["started"]
       if the number of lines of the keys of sTouchArray is 1 then
          put pID into sTouch0
          put pX into startX0
          put pY into startY0
       else if the number of lines of the keys of sTouchArray is 2 then
          put pID into sTouch1
          put sTouchArray[sTouch0]["x"] into startX0
          put sTouchArray[sTouch0]["y"] into startY0
          put pX into startX1
          put pY into startY1
          put ((startX0 + startX1) / 2.0) into centerPointStartX
          put ((startY0 + startY1) / 2.0) into centerPointStartY
          put (centerPointStartX - currentOffsetX) / currentWidth \
                into percentageOfImageAtPinchPointX
          put (centerPointStartY - currentOffsetY) / currentHeight \
                into percentageOfImageAtPinchPointY
          put sqrt((startX1-startX0)^2 + (startY1-startY0)^2) \
                into startDistanceBetweenFingers
       end if
       updatePanZoomState
       exit touchMove
    end if

    -- record the end touch locations for the move
    if panning then
       put pX into endX0
       put pY into endY0
    else if zooming then
       put sTouchArray[sTouch0]["x"] into endX0
       put sTouchArray[sTouch0]["y"] into endY0
       put sTouchArray[sTouch1]["x"] into endX1
       put sTouchArray[sTouch1]["y"] into endY1
    end if

    updateImage
end touchMove

on touchEnd pID
    put true into sTouchArray[pID]["ended"]
    updateImage
end touchEnd

on updateImage
    lock screen
    if panning then
       put endX0 - startX0 into translateFromTranslatingX
       put endY0 - startY0 into translateFromTranslatingY
       put currentOffsetX + translateFromTranslatingX into newOffsetX
       put currentOffsetY + translateFromTranslatingY into newOffsetY
    else if zooming then
       -- Calculate current distance between points to get new-to-old
       -- pinch ratio and calc width and height
       put sqrt((endX1-endX0)^2 + (endY1-endY0)^2) \
             into endDistanceBetweenFingers
       put endDistanceBetweenFingers/startDistanceBetweenFingers \
          into pinchRatio
       put pinchRatio * currentContinuousZoom into newContinuousZoom
       put imgWidth * newContinuousZoom into newWidth
       put imgHeight * newContinuousZoom into newHeight

       -- Get the point between the two touches, relative to upper-left
       -- corner of image
       put ((endX0 + endX1) / 2.0) into centerPointEndX
       put ((endY0 + endY1) / 2.0) into centerPointEndY

       -- This is the translation due to pinch-zooming
       put (currentWidth - newWidth) * percentageOfImageAtPinchPointX \
          into translateFromZoomingX
       put (currentHeight - newHeight) * percentageOfImageAtPinchPointY \
          into translateFromZoomingY

       -- And this is the translation due to translation of the
       -- centerpoint between the two fingers
       put centerPointEndX - centerPointStartX into \
         translateFromTranslatingX
       put centerPointEndY - centerPointStartY into \
         translateFromTranslatingY

       -- Total translation is from two components:
       --    (1) changing height and width from zooming and
       --    (2) from the two fingers translating in unity
       put translateFromZoomingX + translateFromTranslatingX \
         into translateTotalX
       put translateFromZoomingY + translateFromTranslatingY \
         into translateTotalY

       -- the new offset is the old/current one plus the total
       -- translation component
       put currentOffsetX + translateTotalX into newOffsetX
       put currentOffsetY + translateTotalY into newOffsetY

       -- Set the image attributes on the card
       set the width of sZoomObj to newWidth
       set the height of sZoomObj to newHeight
    end if
    set the left of sZoomObj to newOffsetX
    set the top of sZoomObj to newOffsetY

    -- clear touch array for ended touches after updating
    repeat for each key tKey in sTouchArray
       if sTouchArray[tKey]["ended"] then
          if tKey is sTouch0 then
             put sTouch1 into sTouch0
             put endX1 into endX0
             put endY1 into endY0
          end if
          if panning or zooming then
             put newOffsetX into currentOffsetX
             put newOffsetY into currentOffsetY
          end if
          if zooming then
             put newWidth into currentWidth
             put newHeight into currentHeight
             put newContinuousZoom into currentContinuousZoom
             put endX0 into startX0
             put endY0 into startY0
          end if
          delete variable sTouchArray[tKey]
       end if
    end repeat
    updatePanZoomState
    unlock screen
end updateImage

on updatePanZoomState
    put false into panning
    put false into zooming
    if the number of lines of the keys of sTouchArray is 1 then
       put true into panning
    else if the number of lines of the keys of sTouchArray is 2 then
       put true into zooming
    end if
end updatePanZoomState




_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
Thanks!

I guess it is time to set up a GitHub repo for stuff I work on. I think
this would be a good thing to post as a behavior stack only script.
On Sat, Jan 27, 2018 at 1:48 PM Richard Gaskin via use-livecode <
[hidden email]> wrote:

> Brian Milby wrote:
>
>  > Here's what I came up with.  It is a little slow though.  It's pretty
>  > much a port of the code that I linked.  I had to adapt to the way move
>  > events are issued in LC (particularly that a touch start does not
>  > include coordinates).  I also added the ability to continue moving
>  > when a zoom stops (only one touch ended).  I initially was calling the
>  > "updateImage" handler using send in time (and checking pending
>  > messages to avoid calling multiple times), but the code is fast enough
>  > to not benefit from that (adding delay made it less smooth, the
>  > "updateImage" handler always seemed to finish before another move
>  > event was queued).
>  >
>  > I put the code in the graphic.  I called the "initGraphic" handler
>  > from the card preOpenCard handler.
>
> Very kind of you, Brian.  Thanks!  Much obliged.
>
> I just gave it a whirl and it seems to work rather well.  MUCH better
> for me than embedding an entire browser app inside my app just to get a
> good pinch.
>
> Since I was working on an image rather than a graphic, I modded the
> script to use a script-local object specifier rather than the hard-wired
> graphic reference, then added a mouseDown handler to trigger your init
> so I could test it easily.
>
> While I was at it I re-wrapped a few things to hopefully fit better here
> for others to easily copy-n-paste.
>
> Thanks again - it's nicely done.
>
> @Michael Doub:  another candidate for MasterLib?
>
> --
>   Richard Gaskin
>   Fourth World Systems
>
>
> ------
>
>
> local panning, \
>        zooming, \
>        startX0, startY0, \
>        startX1, startY1, \
>        endX0, endY0, \
>        endX1, endY1, \
>        startDistanceBetweenFingers, \
>        endDistanceBetweenFingers, \
>        pinchRatio, \
>        imgWidth, imgHeight, \
>        currentContinuousZoom, \
>        currentOffsetX, currentOffsetY, \
>        currentWidth, currentHeight, \
>        newContinuousZoom, \
>        newHeight, newWidth, \
>        newOffsetX, newOffsetY, \
>        centerPointStartX, centerPointStartY, \
>        centerPointEndX, centerPointEndY, \
>        translateFromZoomingX, translateFromZoomingY, \
>        translateFromTranslatingX, translateFromTranslatingY, \
>        translateTotalX, translateTotalY, \
>        percentageOfImageAtPinchPointX, \
>        percentageOfImageAtPinchPointY, \
>        sTouchArray, sTouch0, sTouch1
>
> local sZoomObj
>
> on mouseDown
>     put the long id of me into sZoomObj -- Change this to specify object
>     initGraphic
> end mouseDown
>
>
> on initGraphic
>     local tLoc
>     put the width of sZoomObj into imgWidth
>     put the height of sZoomObj into imgHeight
>     put 1.0 into currentContinuousZoom
>     put the left of sZoomObj into currentOffsetX
>     put the top of sZoomObj into currentOffsetY
>     put imgWidth into currentWidth
>     put imgHeight into currentHeight
> end initGraphic
>
> on touchMove pID, pX, pY
>     -- capture current position
>     put pX into sTouchArray[pID]["x"]
>     put pY into sTouchArray[pID]["y"]
>
>     -- since the touch start doesn't include location, need to handle
>     -- the calculations here
>     if sTouchArray[pID]["started"] is empty then
>        put true into sTouchArray[pID]["started"]
>        if the number of lines of the keys of sTouchArray is 1 then
>           put pID into sTouch0
>           put pX into startX0
>           put pY into startY0
>        else if the number of lines of the keys of sTouchArray is 2 then
>           put pID into sTouch1
>           put sTouchArray[sTouch0]["x"] into startX0
>           put sTouchArray[sTouch0]["y"] into startY0
>           put pX into startX1
>           put pY into startY1
>           put ((startX0 + startX1) / 2.0) into centerPointStartX
>           put ((startY0 + startY1) / 2.0) into centerPointStartY
>           put (centerPointStartX - currentOffsetX) / currentWidth \
>                 into percentageOfImageAtPinchPointX
>           put (centerPointStartY - currentOffsetY) / currentHeight \
>                 into percentageOfImageAtPinchPointY
>           put sqrt((startX1-startX0)^2 + (startY1-startY0)^2) \
>                 into startDistanceBetweenFingers
>        end if
>        updatePanZoomState
>        exit touchMove
>     end if
>
>     -- record the end touch locations for the move
>     if panning then
>        put pX into endX0
>        put pY into endY0
>     else if zooming then
>        put sTouchArray[sTouch0]["x"] into endX0
>        put sTouchArray[sTouch0]["y"] into endY0
>        put sTouchArray[sTouch1]["x"] into endX1
>        put sTouchArray[sTouch1]["y"] into endY1
>     end if
>
>     updateImage
> end touchMove
>
> on touchEnd pID
>     put true into sTouchArray[pID]["ended"]
>     updateImage
> end touchEnd
>
> on updateImage
>     lock screen
>     if panning then
>        put endX0 - startX0 into translateFromTranslatingX
>        put endY0 - startY0 into translateFromTranslatingY
>        put currentOffsetX + translateFromTranslatingX into newOffsetX
>        put currentOffsetY + translateFromTranslatingY into newOffsetY
>     else if zooming then
>        -- Calculate current distance between points to get new-to-old
>        -- pinch ratio and calc width and height
>        put sqrt((endX1-endX0)^2 + (endY1-endY0)^2) \
>              into endDistanceBetweenFingers
>        put endDistanceBetweenFingers/startDistanceBetweenFingers \
>           into pinchRatio
>        put pinchRatio * currentContinuousZoom into newContinuousZoom
>        put imgWidth * newContinuousZoom into newWidth
>        put imgHeight * newContinuousZoom into newHeight
>
>        -- Get the point between the two touches, relative to upper-left
>        -- corner of image
>        put ((endX0 + endX1) / 2.0) into centerPointEndX
>        put ((endY0 + endY1) / 2.0) into centerPointEndY
>
>        -- This is the translation due to pinch-zooming
>        put (currentWidth - newWidth) * percentageOfImageAtPinchPointX \
>           into translateFromZoomingX
>        put (currentHeight - newHeight) * percentageOfImageAtPinchPointY \
>           into translateFromZoomingY
>
>        -- And this is the translation due to translation of the
>        -- centerpoint between the two fingers
>        put centerPointEndX - centerPointStartX into \
>          translateFromTranslatingX
>        put centerPointEndY - centerPointStartY into \
>          translateFromTranslatingY
>
>        -- Total translation is from two components:
>        --    (1) changing height and width from zooming and
>        --    (2) from the two fingers translating in unity
>        put translateFromZoomingX + translateFromTranslatingX \
>          into translateTotalX
>        put translateFromZoomingY + translateFromTranslatingY \
>          into translateTotalY
>
>        -- the new offset is the old/current one plus the total
>        -- translation component
>        put currentOffsetX + translateTotalX into newOffsetX
>        put currentOffsetY + translateTotalY into newOffsetY
>
>        -- Set the image attributes on the card
>        set the width of sZoomObj to newWidth
>        set the height of sZoomObj to newHeight
>     end if
>     set the left of sZoomObj to newOffsetX
>     set the top of sZoomObj to newOffsetY
>
>     -- clear touch array for ended touches after updating
>     repeat for each key tKey in sTouchArray
>        if sTouchArray[tKey]["ended"] then
>           if tKey is sTouch0 then
>              put sTouch1 into sTouch0
>              put endX1 into endX0
>              put endY1 into endY0
>           end if
>           if panning or zooming then
>              put newOffsetX into currentOffsetX
>              put newOffsetY into currentOffsetY
>           end if
>           if zooming then
>              put newWidth into currentWidth
>              put newHeight into currentHeight
>              put newContinuousZoom into currentContinuousZoom
>              put endX0 into startX0
>              put endY0 into startY0
>           end if
>           delete variable sTouchArray[tKey]
>        end if
>     end repeat
>     updatePanZoomState
>     unlock screen
> end updateImage
>
> on updatePanZoomState
>     put false into panning
>     put false into zooming
>     if the number of lines of the keys of sTouchArray is 1 then
>        put true into panning
>     else if the number of lines of the keys of sTouchArray is 2 then
>        put true into zooming
>     end if
> end updatePanZoomState
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
All this has me wondering:  Have you ever seen a mobile app that
displays images but *doesn't* support pinch-to-zoom?

I'm grateful Brian stepped up to the plate here, but what if a newcomer
to the language wanted this very common feature and didn't know to ask here?

How long would it take someone new to the language to figure out how to
write that?

Or more to the point:

Would it make sense if allowing an image to support pinch-to-zoom were
as easy and fun as so much of LiveCode, perhaps driven by a property?

    set the zoomable of img 1 to true

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
On 27/01/2018 22:51, Richard Gaskin via use-livecode wrote:
> All this has me wondering:  Have you ever seen a mobile app that
> displays images but *doesn't* support pinch-to-zoom?
>
Ummm - on IOS I can think of  (I've just re-tested these to be certain):
Facebook
WhatsApp
kind of ... Instagram
     (it zooms - but then shrinks back as soon as you release, so it's
barely usable, unlike other apps which hold the zoom level and allow you
to move the zoomed image around)

and also I believe, Amazon App (I can't retest it now - I was so
annoyed/disappointed with the app that I deleted it for various reasons
- but I am sure inability to zoom properly was one of them). Now, on IOS
I only use Amazon through Safari  - and even then Amazon doesn't show
all the info available on a laptop, unless you specifically tell
Safari/IOS to pretend to be desktop version).

But - yes, I absolutely agree - 'zoomable' would be a useful property.
-- Alex.

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
That would be really cool (zoomable property)!  It could be wired to do
pan, zoom, and rotate (possibly as separate properties).

I put this on GitHub:
https://github.com/bwmilby/lc-misc/tree/master/PinchZoom

My first go was trying to use more arrays, but renaming the variable on the
fly got to be too much of a pain.  I may go back and make them more in line
with LC best practices (and really could use one large array).

I posted it as a script only stack, but I couldn't get it to work that
way.  I copied it into a button and set that as the behavior and it worked
fine.  I'm sure it is just a problem with the way I'm trying to do it.
It's mostly what Richard posted, but I changed it to a `touchStart` message
(and just wrapped the init code directly).  What was really cool though is
that I was zooming a compiled SVG drawing in an image.

On Sat, Jan 27, 2018 at 6:01 PM, Alex Tweedly via use-livecode <
[hidden email]> wrote:

> On 27/01/2018 22:51, Richard Gaskin via use-livecode wrote:
>
>> All this has me wondering:  Have you ever seen a mobile app that displays
>> images but *doesn't* support pinch-to-zoom?
>>
>> Ummm - on IOS I can think of  (I've just re-tested these to be certain):
> Facebook
> WhatsApp
> kind of ... Instagram
>     (it zooms - but then shrinks back as soon as you release, so it's
> barely usable, unlike other apps which hold the zoom level and allow you to
> move the zoomed image around)
>
> and also I believe, Amazon App (I can't retest it now - I was so
> annoyed/disappointed with the app that I deleted it for various reasons -
> but I am sure inability to zoom properly was one of them). Now, on IOS I
> only use Amazon through Safari  - and even then Amazon doesn't show all the
> info available on a laptop, unless you specifically tell Safari/IOS to
> pretend to be desktop version).
>
> But - yes, I absolutely agree - 'zoomable' would be a useful property.
> -- Alex.
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Good pinch-to-zoom in image object?

dunbarx via use-livecode
In reply to this post by dunbarx via use-livecode
Alex Tweedly wrote:

 > On 27/01/2018 22:51, Richard Gaskin via use-livecode wrote:
 >> All this has me wondering:  Have you ever seen a mobile app that
 >> displays images but *doesn't* support pinch-to-zoom?
 >>
 > Ummm - on IOS I can think of  (I've just re-tested these to be
 > certain):
 > Facebook
 > WhatsApp
 > kind of ... Instagram
 >      (it zooms - but then shrinks back as soon as you release, so it's
 > barely usable, unlike other apps which hold the zoom level and allow
 > you to move the zoomed image around)
 >
 > and also I believe, Amazon App (I can't retest it now - I was so
 > annoyed/disappointed with the app that I deleted it for various
 > reasons - but I am sure inability to zoom properly was one of them).

We're way OT on this, but FWIW FB does support zooming if you tap the
link below the image labeled something like "See Full Image".

Similarly, Amazon does but only after you tap on the image so it opens
the image viewer.

And yes, Instagram's snap-back is super-annoying.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode