Conflicting JavaScript for gyroscope move and touchmove on iOS, how do I pause one part when the second is in use?

Question

I'm punching above my weight a bit with some JavaScript code on an iOS web app.

What I'm doing is moving a layer above another layer using:

1. Gyro and accelerometer data and
2. Touch input.

This means I've got two bits of javascript both trying to move the same thing. This doesn't work so well, as you can see from the current version when viewed on an iOS device (hint: the transparency is turned on with the button on the right, and no, it can't be moved with a mouse right now and wont move unless you are using an iOS device with a Gyro).

So I've done the hard bits but I'm stuck on what I expect is a gotcha based on my newb(ish) level of proficiency with JavaScript.

How can I stop the gyro-move code when the touch-move code is active? Also I guess I'll need to update the x+y values so the transparency does not jump position once the touch-move ends.

I've tried adding an if, else statement to the top of the code but this seems to break the whole lot.

BTW thanks to everyone on StackOverflow, previous Q and As have been tons of help in getting me this far.

Help will be most appreciated.

Stefan

Here's my code so far, it's living in the body element...

var x = 0, y = 0,
    vx = 0, vy = 0,
    ax = 0, ay = 0;

var transp = document.getElementById("transp");

if (window.DeviceMotionEvent != undefined) {
    window.ondevicemotion = function(e) {
        ax = event.accelerationIncludingGravity.x * 5;
        ay = event.accelerationIncludingGravity.y * 5 + 19;
        document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
        document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
        document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

        if ( e.rotationRate ) {
            document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
            document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
            document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
        }       
    }

    setInterval( function() {
        var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
        if ( landscapeOrientation) {
            vx = vx + ay;
            vy = vy + ax;
        } else {
            vy = vy - ay;
            vx = vx + ax;
        }
        vx = vx * 0.98;
        vy = vy * 0.98;
        y = parseInt(y + vy / 70);
        x = parseInt(x + vx / 70);

        boundingBoxCheck();

        transp.style.top = y + "px";
        transp.style.left = x + "px";

    }, 25);
} 


function boundingBoxCheck(){
    if (x<-310) { x = -310; vx = -vx; }
    if (y<-300) { y = -300; vy = -vy; }
    if (x>document.documentElement.clientWidth) { x = document.documentElement.clientWidth; vx = -vx; }
    if (y>document.documentElement.clientHeight+400) { y = document.documentElement.clientHeight+400; vy = -vy; }

}

    $.fn.moveable = function() {  
      var offset = null;  
      var start = function(e) {  
        var orig = e.originalEvent;  
        var pos = $(this).position();  
        offset = {  
          x: orig.changedTouches[0].pageX - pos.left,  
          y: orig.changedTouches[0].pageY - pos.top  
        };  
      };  
      var moveMe = function(e) {  
        e.preventDefault();  
        var orig = e.originalEvent;  
        $(this).css({  
          top: orig.changedTouches[0].pageY - offset.y,  
          left: orig.changedTouches[0].pageX - offset.x  
        });  
      };  
      this.bind("touchstart", start);  
      this.bind("touchmove", moveMe);  
    };  

    $(".moveable").moveable();  

Answer 1

My first thought would be is to have an isTouching variable that gets set to true on touchstart and set back to false on touchEnd. Then using a conditional the gyro code will only run if the isTouching variable is false. Hope that helps.