Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Shake gesture detection in PhoneGap / Cordova
/*
THIS GIST IS OUT OF DATE AND NOT MONITORED
PLEASE SEE https://github.com/leecrossley/cordova-plugin-shake-detection
*/
var shake = (function () {
var shake = {},
watchId = null,
options = { frequency: 300 },
previousAcceleration = { x: null, y: null, z: null },
shakeCallBack = null;
// Start watching the accelerometer for a shake gesture
shake.startWatch = function (onShake) {
if (onShake) {
shakeCallBack = onShake;
}
watchId = navigator.accelerometer.watchAcceleration(getAccelerationSnapshot, handleError, options);
};
// Stop watching the accelerometer for a shake gesture
shake.stopWatch = function () {
if (watchId !== null) {
navigator.accelerometer.clearWatch(watchId);
watchId = null;
}
};
// Gets the current acceleration snapshot from the last accelerometer watch
function getAccelerationSnapshot() {
navigator.accelerometer.getCurrentAcceleration(assessCurrentAcceleration, handleError);
}
// Assess the current acceleration parameters to determine a shake
function assessCurrentAcceleration(acceleration) {
var accelerationChange = {};
if (previousAcceleration.x !== null) {
accelerationChange.x = Math.abs(previousAcceleration.x, acceleration.x);
accelerationChange.y = Math.abs(previousAcceleration.y, acceleration.y);
accelerationChange.z = Math.abs(previousAcceleration.z, acceleration.z);
}
if (accelerationChange.x + accelerationChange.y + accelerationChange.z > 30) {
// Shake detected
if (typeof (shakeCallBack) === "function") {
shakeCallBack();
}
shake.stopWatch();
setTimeout(shake.startWatch, 1000);
previousAcceleration = {
x: null,
y: null,
z: null
}
} else {
previousAcceleration = {
x: acceleration.x,
y: acceleration.y,
z: acceleration.z
}
}
}
// Handle errors here
function handleError() {
}
return shake;
})();
@ffranke

I can't get your code working on my App with PhoneGap build. The Event just won't fire up. Any ideas?

@halnesbitt

Great script - thanks for sharing. I got it working with PhoneGap 2.5 easily; the trick is that the "shake gesture" in the iOS simulator doesn't work (that is, it is not firing the accelerometer for PhoneGap to pick up; took me a while to figure that out) - you need to load it on a real device. To use just call (after the device is ready):

shake.startWatch(myCallBack);

where 'myCallBack' is the name of the function that will get called when a shake is detected. To stop listening, just call:

shake.stopWatch();

@vijnv

There's a problem where the script stops triggering your callBack function after the first shake. I adjusted the following line to make this work again:

old line 44: setTimeout(shake.startWatch, 1000);

new line 44: setTimeout(shake.startWatch, 1000, shakeCallBack);

Tested in WebKit only though.

@halnesbitt: If you use the Ripple extension for Google Chrome for testing your PhoneGap project, you can press the 'shake' button in Ripple and this script will detect it.

@amirudin

Hey guys. Just finished sample app for PhoneGap Build.
https://github.com/amirudin/pgb-accelerometer_shake

Credit & Thanks: @leecrossley

Have a try!

@fedmich

Hello @leecrossley I couldn't get it to work on my test, I also tried using amirudin's and it isn't working. What other permissions do I need to put on the manifest.xml?

@leocavalcante

Why do you pass two parameters to Math.abs?

@anurag619

I modified the script of @amirudin (html) to create the sample app. Here is the gist: https://gist.github.com/anurag619/9640840

@basitj

I updated from phonegap2.2 to cordova 3.4.1-0.1.0 and shake.js stopped working. Can't figure out why.

Thoughts?

@jaiversin

I'm having the same issue @basitj

Someone got this working on Cordova 3.4.0?

@FranciscoG

this worked great for me on cordova 3.5.0-0.2.7 on my Android (Samsung S3, CM11). I added in a 2nd callback to handle when shaking stopped but shake.startWatch was still watching.

@HazCod

Same issue where shaking stops after first detection. Tried the fix @vijnv suggested, no result.

@ucavus

The maths in this is just plain wrong. To find whether a movement is big enough, you have to know the magnitude of its vector. That's why I forked it.

@leecrossley
Owner

This gist is out of date and not monitored. Please see the full repo: https://github.com/leecrossley/cordova-plugin-shake-detection

@dandv

Note also that the repo addresses all the problems highlighted in the comments above.

@MrRhodes

Any idea how/if this is usable with Ionic? and if so... how? I can't see "shake" when using it.

@leecrossley
Owner

@MrRhodes make sure the deviceready event has been fired first. Also this gist is out of date and not monitored. Please see the full repo: https://github.com/leecrossley/cordova-plugin-shake-detection

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.