Shake gesture detection in PhoneGap / Cordova

shake.js

/*
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;
})();

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();

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.

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

Credit & Thanks: @leecrossley

Have a try!

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?

Why do you pass two parameters to Math.abs?

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

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

Thoughts?

I'm having the same issue @basitj
Someone got this working on Cordova 3.4.0?

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.

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

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.

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

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

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

@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

Math.abs(previousAcceleration.x, acceleration.x)
i think this is not right, Math.abs(previousAcceleration.x - acceleration.x) is OK?
i do not know what you want do with this line.