How can I detect a shake gesture in PhoneGap 0.8?

StackOverflow https://stackoverflow.com/questions/2010956

Question

I'm using PhoneGap 0.8 and I'd like to detect a basic shake gesture. I've found two relevant snippets:

http://groups.google.com/group/phonegap/browse_thread/thread/25178468b8eb9e9f

http://phonegap.pbworks.com/Handling-Shake-Events

Neither of them are working for me. Unfortunately the documentation seems a little outdated and the API reference for PhoneGap is just a bunch of tests. I know it can be done I just don't have a known good starting point.

If anyone can provide a short snippet of shake detection code for PhoneGap that they know works for them I would be much obliged. Thanks for your time!

Was it helpful?

Solution

Your first link is using PhoneGap.Gesture, which as far as I can see doesn't exist (at least for iphone) in 0.8. It's quite a recent post though so may have been added recently? I haven't used any later revision than 0.8

I have added shake gesture support to a phonegap app by 'extending' phonegap as follows. But first a warning:

Apple have deemed PhoneGap 0.8 as acceptable for submission to app store. As this is essentially an extension (albeit very simple) to PhoneGap 0.8 there may be a risk of rejection. The app I developed this for has not yet gone through the approval process, so I can't advise any further on this.

Also be aware that this only works on OS 3.0+ due to use of the new UIEventSubtypeMotionShake API

Additionally this is iPhone specific. If you want the cross platform capabilities of PhoneGap, this answer may not be for you unless you are comfortable implementing the native side modification on the other platforms (android etc). In this case it may be better to just wait for an official phonegap release that supports this on the iphone.

Add the following code to PhoneGapViewController.m

- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    if (UIEventSubtypeMotionShake == motion)
    {
        [webView stringByEvaluatingJavaScriptFromString:@"navigator.myext.onShakeGesture();"];
    }
}

Then add this as a javascript module myext.js

/* We need PhoneGap.js to be loaded to work properly before we can initialise so wait for it here */
(function() 
{
    var timer = setInterval(function() 
    {
        if (typeof(PhoneGap == 'object'))
        {
            clearInterval(timer);
            myExtInit();
        }
    }, 1);
})();

function MyExt()
{
    // initialization
    this.callbacks = {
        onShakeGesture: []
    };
}

/* Called by ObjectiveC side when a shake gesture is detected */
MyExt.prototype.onShakeGesture = function()
{
    for (var i = 0; i < this.callbacks.onShakeGesture.length; i++) 
    {
        var f = this.callbacks.onShakeGesture[i];
        f();
    }
};

MyExt.prototype.addShakeGestureListener = function(shakeCallback)
{
    if (typeof(shakeCallback) == 'function')
    {
        this.callbacks.onShakeGesture.push(shakeCallback)
    }
};

function myExtInit()
{
    // Init phonegap extension specific objects using PhoneGap.addConstructor
    PhoneGap.addConstructor(function() {
        if (typeof navigator.myext == "undefined") navigator.myext = new MyExt();
    });
}

Now include myext.js in your HTML content <head> section just after the link to phonegap.js

<script type="text/javascript" charset="utf-8" src="myext.js"/>

and use from script (example causes an alert but do what you need to do):

function watchShake() {
  var cb = function(){
    navigator.notification.alert("Shake it!");
  };
    navigator.myext.addShakeGestureListener(cb);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top