How to obtain only linear acceleration from accelerometer using gyroscope

Actually, the accelerometer measures linear acceleration; but since force is equal to mass times acceleration, people can consider it as measuring force as well as long as it has a constant mass. Linear acceleration is the rate of change of linear velocity. A gyro on the other hand provides the angular rotational velocity measurement as oppose to the linear acceleration of movement. Both sensors measures the rate of change; they just measure the rate of change for different things.

Technically, it is possible for a linear accelerometer to measure rotational velocity. This is due to the centrifugal force the device generates when it is rotating. The centrifugal force is directly related to its rotational speed. As a matter of fact, many MEMS gyro sensors actually uses linear accelerometers to determine the rotational speed by carefully placing them in certain orientations and measuring the centrifugal forces to compute the actual rotational gyro speed.

There are currently three distinct events which may or may not be triggered when the client devices moves. Two of them are focused around orientation and the last on motion:

• ondeviceorientation is known to work on the desktop version of Chrome, and most Apple laptops seems to have the hardware required for this to work. It also works on Mobile Safari on the iPhone 4 with iOS 4.2. In the event handler function, you can access alpha, beta, gamma values on the event data supplied as the only argument to the function.

• onmozorientation is supported on Firefox 3.6 and newer. Again, this is known to work on most Apple laptops, but might work on Windows or Linux machines with accelerometer as well. In the event handler function, look for x, y, z fields on the event data supplied as first argument.

• ondevicemotion is known to work on iPhone 3GS + 4 and iPad (both with iOS 4.2), and provides data related to the current acceleration of the client device. The event data passed to the handler function has acceleration and accelerationIncludingGravity, which both have three fields for each axis: x, y, z

The "earthquake detecting" sample website uses a series of if statements to figure out which event to attach to (in a somewhat prioritized order) and passes the data received to a common tilt function:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

The constant factors 2 and 50 are used to "align" the readings from the two latter events with those from the first, but these are by no means precise representations. For this simple "toy" project it works just fine, but if you need to use the data for something slightly more serious, you will have to get familiar with the units of the values provided in the different events and treat them with respect :)