Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
New Developer
Posts: 9
Registered: ‎04-23-2013
My Device: Don't have BB :(
My Carrier: Orange PL
Accepted Solution

How to use multitouch in Webworks app?

Hi!

 

After my first problems in developing app for BB in Webworks i continue made my app. I must use multitouch now, but i don't have any idea how. I didn't find any samples with multitouch. I found only this: http://developer.blackberry.com/html5/apis/touchevent.html#targetTouches but i don't know how use this function. Can you help me?

 

Ps. Sorry for my bad English Smiley Wink

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

[ Edited ]

If you want to use standard gestures try http://eightmedia.github.io/hammer.js/

 

Full use of the touch API gives you fine-grained control but as you may have guessed it's not that simple to use

 

Let me know if hammer.js doesn't do what you need and why and I'll put together some sample code to illustrate using the base API




Click the like button if you find my posts useful!
New Developer
Posts: 9
Registered: ‎04-23-2013
My Device: Don't have BB :(
My Carrier: Orange PL

Re: How to use multitouch in Webworks app?

I don't want use gestures. I try make multitouch test in my app so hammer.js is not good option for me Smiley Happy
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

Can you tell me why hammer fails for you?

 

Believe me - if you can use a simple third party extension its a good thing

 

The code for straight touch is both hard to follow and difficult to understand

 

I'm perfectly prepared to show you how to do it but I need a interface to make it revelant

 

e.g. I could tell you how to transfer to mouse events (a silly but oft used end to means)

 

If you simply wany touch its slightly easier

 

For example - I can create a musical instrument based on touch and use multiple fingers to control it

 

I realise that your project may be NDA so PM me if you want this private




Click the like button if you find my posts useful!
New Developer
Posts: 9
Registered: ‎04-23-2013
My Device: Don't have BB :(
My Carrier: Orange PL

Re: How to use multitouch in Webworks app?

[ Edited ]

Check your Inbox Smiley Wink

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

Done that

 

Gimme a few hours to write the explanation properly

 

It'll do as you req in the PM




Click the like button if you find my posts useful!
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

Hang on a little longer - I'm writing the howto now




Click the like button if you find my posts useful!
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

And here we go

 

The following is a fill implemetation of touch

 

I decided to leave the bind to mouse in as well as this is likely useful to other people

 

This is a live example of an ePub reader with swipe and touch gettures

 

The code is somewhat complex so I will not be answering any Qs other than Gregs

 

Basically what this does is target an iFrame and control it

 

Anywhere you see a reference to my target frame - ignore it and replace with what you wanna do

 

The most difficult stuff to understand for the novice here is angle and timing (both are included)

 

Without over-explaining this the defines @ top tell the handler what to do

 

A call to bindtouch(target) does as it says but is native so you need to pass it the name of the div

 

Binding a target fires all the important events

 

Angles and timing are still in development

 

Timing is vitally important so you need that one without question

 

Angle is optional and relies on how the finger is moved but requires a very expensive JS call to Math.atan2(point1, point2)

 

Basically Angle tells you where you moved your finger after the initial touch so you probably can kill that stuff

 

The touch count gets the correct touch and does what's needed with it based on the defines

 

Look - I told you this was very complicated

 

Oh - the bind to mouse lets you transfer the call to a mouse event - I thought this may prove useful for other readers

 

The target an iFrmae is also handy as is the scroll

 

I'll leave you to adapt this to your own needs

 

 

function bindtouch(target) {
    var TOUCH_TAP_DIST = 30;
    var TOUCH_TAP_TIME = 150;
    var TOUCH_DRAG_DIST = 50;
    var TOUCH_DRAG_TIME = 500;
    var TOUCH_DRAG_VELOCITY = 50;
    var TOUCH_SWIPE_DIST = 50;
    var TOUCH_SWIPE_TIME = 500;
    var TOUCH_SWIPE_VELOCITY = 75;

    var SWIPE_NONE = 0;
    var SWIPE_RIGHT = 1;
    var SWIPE_UP = 2;
    var SWIPE_LEFT = 4;
    var SWIPE_DOWN = 8;

    var _TOUCH_DRAG_VELOCITY = TOUCH_DRAG_VELOCITY * TOUCH_DRAG_VELOCITY;
    
    var touch = [];

    var el = target;

    
    function squangle(p1, p2) {
        return Math.atan2((p2.y - p1.y), (p2.x - p1.x));
        }

    el.addEventListener('touchstart', function(e) {
        e.preventDefault();
        var ct = e.changedTouches;
        for(var i = 0; i<ct.length; i++) {
            var cti = ct[i].identifier;
            var cto = ct[i];
            if(cto.clientX) {
                touch[cti] = {  sx : cto.clientX,
                                sy : cto.clientY,
                                tx : cto.clientX,
                                ty : cto.clientY,
                                bx : cto.clientX,
                                by : cto.clientY,
                                pv : 0,
                                tm : e.timeStamp};
                var id = '#tch' + ct;
                
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("mousedown", true, true, window,
                    0, cto.screenX, cto.screenY,
                    cto.clientX, cto.clientY, false, false, false, false, 0, null);
                e.srcElement.dispatchEvent(evt);
                }
            }
        });

    el.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var ct = e.changedTouches;
        for(var i = 0; i<ct.length; i++) {
            var cto = ct[i];
            var tco = touch[cto.identifier];
            var ms = e.timeStamp - tco.tm;
            if(cto.clientX) {
                tco.tx = cto.clientX;
                tco.ty = cto.clientY;
                tco.pv = Math.sqrt(((tco.sx - tco.tx) * (tco.sx - tco.tx))
                                        + ((tco.sy - tco.ty) * (tco.sy - tco.ty)));
                if(e.touches.length == 2) {
                    var tasd = e.touches.length;
                    }
                if(e.touches.length == 1) {
                    var dx = Math.abs(tco.bx - tco.sx);
                    var dy = Math.abs(tco.by - tco.sy);

                    if(tco.pv < _TOUCH_DRAG_VELOCITY) {
//                        if((smode == SCALE_ZOOM) && (fsize > 1.00)) {
                            $(frames['appframe'].document).scrollLeft($(frames['appframe'].document).scrollLeft() + (tco.sx - tco.tx));
//                            }
                        var eb = $(frames['appframe'].document);
                        var st = eb.scrollTop();
                        $(frames['appframe'].document).scrollTop(st + (tco.sy - tco.ty));
                        touch[i].sx = e.touches[i].clientX;
                        touch[i].sy = e.touches[i].clientY;
                        }
                    }
                
                tco.sx = cto.clientX;
                tco.sy = cto.clientY;
                }
            }
        });
            
    el.addEventListener('touchend', function(e) {
        e.preventDefault();
        var ct = e.changedTouches;
        for(var i = 0; i<ct.length; i++) {
            var cto = ct[i];
            var tco = touch[cto.identifier];
            var ms = e.timeStamp - tco.tm;
            var dx = Math.abs(tco.bx - tco.sx);
            var dy = Math.abs(tco.by - tco.sy);
            var evt = document.createEvent("MouseEvents");

            if((dx < TOUCH_TAP_DIST) && (dy < TOUCH_TAP_DIST) && (ms <= TOUCH_TAP_TIME)) {
                evt.initMouseEvent("click", true, true, window,
                    0, tco.sx, tco.sy, tco.sx, tco.sy, false, false, false, false, 0, null);
                e.srcElement.dispatchEvent(evt);
                }
            else if(((dx > TOUCH_SWIPE_DIST) || (dy > TOUCH_SWIPE_DIST)) && (ms <= TOUCH_SWIPE_TIME)) {
                if(dx > TOUCH_SWIPE_DIST) {
                    if(tco.bx > tco.sx) {
                        swipex = SWIPE_RIGHT;
                        }
                    else {
                        swipex = SWIPE_LEFT;
                        }
                    }
                else {
                    swipex = SWIPE_NONE;
                    }
                    
                if(dy > TOUCH_SWIPE_DIST) {
                    if(tco.by > tco.sy) {
                        swipey = SWIPE_UP;
                        }
                    else {
                        swipey = SWIPE_DOWN;
                        }
                    }
                else {
                    swipey = SWIPE_NONE;
                    }
                    
                if((swipey == SWIPE_NONE) && (swipex == SWIPE_RIGHT))
                    {
                    switchPage(1);
                    }
                if((swipey == SWIPE_NONE) && (swipex == SWIPE_LEFT))
                    {
                    switchPage(-1);
                    }

                evt.initMouseEvent("mouseup", true, true, window,
                    0, tco.sx, tco.sy, tco.sx, tco.sy, false, false, false, false, 0, null);
                    e.srcElement.dispatchEvent(evt);
                }
            else {
                evt.initMouseEvent("mouseup", true, true, window,
                    0, tco.sx, tco.sy, tco.sx, tco.sy, false, false, false, false, 0, null);
                }

            }
        });
    }




Click the like button if you find my posts useful!
New Developer
Posts: 9
Registered: ‎04-23-2013
My Device: Don't have BB :(
My Carrier: Orange PL

Re: How to use multitouch in Webworks app?

Thank You very much Smiley Wink
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: How to use multitouch in Webworks app?

Greg

 

I don't expect you to understand the code

 

Its a very advanced topic and requires experimentation to get right

 

I've given you the core bindings and extensive personal reseach into this (frankly) pain in the **bleep** API

 

On the other hand - I wish you can follow my stuff as nthen I hope you'll answer the hard Qs I do

 

Have fun with my code + PM me if you get stuck




Click the like button if you find my posts useful!