Pinch and Spread?

65 views
Skip to first unread message

Alan Hendry

unread,
Nov 14, 2021, 1:26:42 PM11/14/21
to DroidScript
HI,
I see that Images SetOnTouch/Down/Up/Move have a callback of function(event)
where event is  { sourceactioncountx: [ x1x2x3 ], y: [ y1y2y3 ] }
Does anyone have code for handling two finger gestures pinch and spread?
Or tilt and twirl?
Or double tap (perhaps touch -> set timer,
if timer ends it was single, if next touch comes within timer then it's double and reset timer) 
Regards, ah

Steve Garman

unread,
Nov 15, 2021, 4:26:36 AM11/15/21
to DroidScript
I was never able to zoom an image without putting an image overlay over it because the maths in the main image changes as soon as its size changes

Steve Garman

unread,
Nov 15, 2021, 4:38:51 AM11/15/21
to DroidScript
Looking at that code I see that once img.Scale was introduced that made it much easier because Scale does not resize the img control, just the picture within it

For the more convoluted older solution search this group for Pythagoras

Alan Hendry

unread,
Nov 15, 2021, 7:59:14 AM11/15/21
to DroidScript
Thanks,

Calculating the distance between the 2 touch points seems simple enough.
I want to do a continuous pinch/spread, probably using OnTouchMove, 
not sure how many events will be triggered 
(would it be every time a finger moved by 1 pixel? Windows has a minimum movement called a Mickey).
If there's loads of events then sqrt could be slow I may need to just work with x1-x2 squared plus y1-y2 squared (and if squaring is slow then use Math.abs).
I am actually trying to add a camera zoom control - one phone has 99 zoom levels
(camera doesn't seem to have ontouch so I'm trying with duplicate image, ontouch on image).
Also my own Image Gallery (having problems getting ScanFile to add images to Android 10+ Gallery app ).
For tilt/twirl I can try and calculate the angle between the touch points x1,y1 and x2,y2
probably complicated if user rotates fingers from 10 degrees to 350 degrees).

Regards, ah

Steve Garman

unread,
Nov 15, 2021, 8:06:53 AM11/15/21
to DroidScript
Try the code I linked to

It only moves when the distance is long enough.
If you find sqr and sqrt slow (you won't) you can use Math.hypot() instead

Alan Hendry

unread,
Dec 3, 2021, 8:45:24 AM12/3/21
to DroidScript
HI,
I've written a prototype for pinch and spread. I've alpha tested, and it seems OK.
If there's interest it could modified to handle multiple objects, and/or posted on DroidStore.

// spread and pinch for zoom.
// zooms from minimum 1 to maximum 10 (initial value 5)
// scale can be adjusted to be more/less sensitive to movements
cfg.Portrait 
const min=1, max=10, scale=0.1 ;
var zoom = 5, oldsep="" ;
function OnStart() {
lay = app.CreateLayout( "linear", "VCenter,FillXY" ) ;
    txt = app.AddText(lay,zoom,1,-1) ;
img = app.AddImage( lay, "/Sys/Img/Hello.png", 1 ) ;
img.SetOnTouch(OnTouch) ;
app.AddLayout( lay ) ;
} // OnStart
function OnTouch(event) {
//  var source = event.source ;    
//  var action = event.action ;
//  var count = event.count ;
    if (event.action == "Up") {oldsep = ""; return; }
    if (event.count == 2) {
        var arrayx = event.x ;
        var arrayy = event.y ;
        x0 = arrayx[0]; x1 = arrayx[1];
        y0 = arrayy[0]; y1 = arrayy[1];
        currsep = Math.sqrt(Math.pow(x0-x1,2) + Math.pow(y0-y1,2)) ;
        if (oldsep=="") {
            oldsep = currsep ;
        } else {
            var delta = currsep - oldsep ;
            if (delta > scale)  {zoom+=1;oldsep=currsep;}
            if (delta < -scale) {zoom-=1;oldsep=currsep;}
            if (zoom < min) zoom = min ;
            if (zoom > max) zoom = max ;
            txt.SetText(zoom)
        } // if oldsep
    } // if count
} // OnTouch

Regards, ah
Reply all
Reply to author
Forward
0 new messages