locked
Detecting swipe in JavaScript application | Use of crossSlideThresolds RRS feed

  • Question

  • Hi,

    I'm trying to detect swipe in a JavaScript App usint the GestureRecognizerObject. I'm able to get gesture events, but I only get the ondragging event with mouse and oncrosssliding event with touch input. I've tried to set the crossSlideThresolds but I cannot set them, they remain always 0. Is there any example on how to detect swipe in JavaScript.

    I already know the guidelines and the samples, but none of them use the crossSlideThresolds structure nor detect swipe.

    Thank you,

    Juanma

    PS: here's my code (just test code)...

    // Initialize gesture recognizer
    var recognizer = new Windows.UI.Input.GestureRecognizer();
    recognizer.gestureSettings =
        Windows.UI.Input.GestureSettings.drag |
        Windows.UI.Input.GestureSettings.crossSlide;
    
    // this one fails
    //var crossSlideThresholds = {
    //    rearrangeStart : 0,
    //    selectionStart : 5,
    //    speedBumpEnd : 10,
    //    speedBumpStart : 20
    //    }
    //recognizer.crossSlideThresholds = crossSlideThresholds;
    
    //does not exists at runtime !?
    //var crossSlideThresholds = new Windows.UI.Input.CrossSlideThresholds();
    
    
    // does nothing, values are set to 0 whatever i assing there
    recognizer.crossSlideThresholds.rearrangeStart = 5;
    recognizer.crossSlideThresholds.selectionStart = 10;
    recognizer.crossSlideThresholds.speedBumpEnd = 40;
    recognizer.crossSlideThresholds.speedBumpStart = 50;
               
    // Turn off UI feedback for gestures (we'll still see UI feedback for PointerPoints)
    recognizer.showGestureFeedback = false;
    
    recognizer.ondragging = function (e) {
        log("swipe object " , e.draggingState);
    };
    
    recognizer.oncrosssliding = function (e) {
        log("slide object ", e.crossSlidingState);
    };
    
    var ptdown= function (args) {
            // Get the current PointerPoint
        var pp = args.currentPoint;
    
        // Feed the PointerPoint to GestureRecognizer
        recognizer.processDownEvent(pp);
    }
    var ptmove = function (args) {
        // Get intermediate PointerPoints
        var pps = args.intermediatePoints;
    
        // processMoveEvents takes an array of intermediate PointerPoints
        recognizer.processMoveEvents(pps);
    };
    
    var ptup = function (args) {
        // Get the current PointerPoint
        var pp = args.currentPoint;
    
        // Feed GestureRecognizer
        recognizer.processUpEvent(pp);
    
    };
    
    document.body.addEventListener('MSPointerDown', ptdown, false);
    document.body.addEventListener('MSPointerMove', ptmove, false);
    document.body.addEventListener('MSPointerUp', ptup, false);
    document.body.addEventListener('MSPointerCancel', ptup, false);


    Juan Manuel Servera
    twitter: @jmservera
    mi blog: http://jmservera.wordpress.com
    Únete al grupo de WP7 en LinkedIn
    MCPD WP7 Developer - MCTS Sharepoint 2010 Application Development

    Monday, August 13, 2012 11:12 AM

Answers

  • Hi,

    This should work :-

    gr.crossSlideThresholds = {
                selectionStart: 50,
                speedBumpStart: 50,
                speedBumpEnd: 150,
                rearrangeStart: 150
    };

    Edit : "gr" is my GestureRecognizer class instance.
    -Sagar

    Wednesday, August 15, 2012 3:01 PM
    Moderator

All replies

  • Hi,

    This should work :-

    gr.crossSlideThresholds = {
                selectionStart: 50,
                speedBumpStart: 50,
                speedBumpEnd: 150,
                rearrangeStart: 150
    };

    Edit : "gr" is my GestureRecognizer class instance.
    -Sagar

    Wednesday, August 15, 2012 3:01 PM
    Moderator
  • Thanks!

    My mistake: I did not put the properties in order. Now I can play with that to find how to do a swipe detection. Any tip for this?

    I've found that when I put the eventlistener on an element other than body I get an exception when I do a slide out of the element, so I assume I have to do this through the body events. I'm trying to detect which element I'm dragging or sliding with elementFromPoint:

    recognizer.ondragging = function (e) {
        var element = document.elementFromPoint(e.position.x, e.position.y);
        log("drag object " + (element.id ? element.id : element.nodeName), e.draggingState);
    };
    

    But position is relative to the element, even when used the event from the body, args.currentPoint is always relative to the element under the mouse:

    var ptdown = function (args) {
        // Get the current PointerPoint
        var pp = args.currentPoint;
    
        // Feed the PointerPoint to GestureRecognizer
        recognizer.processDownEvent(pp);
    }
    

    So I don't know if I have to create a Point from x,y information on args, because this may break recognizer process... any ideas?


    Juan Manuel Servera
    twitter: @jmservera
    mi blog: http://jmservera.wordpress.com
    Únete al grupo de WP7 en LinkedIn
    MCPD WP7 Developer - MCTS Sharepoint 2010 Application Development

    Thursday, August 16, 2012 7:36 AM
  • hai can u help me for that swipe event....I want swipe event when clicking on particular division....
    Monday, November 5, 2012 12:48 PM