Happy holiday folks! All the best from us at Digitpaint
🚀

Day 16

Accessing sensor data with the Generic Sensor API

Devices have a lot of different sensors these days. While it is already possible to use the information from these sensors using different APIs the Generic Sensor API tries to make using them well, a bit more generic…

This stuff is hot of the presses, so there is only support for it in Chrome. As this is currently still so hot you're going to need to enable some flags. Go to chrome://flags/#enable-generic-sensor to enable motion sensors and visit chrome://flags/#enable-generic-sensor-extra-classes to enable environmental sensors. The API should work after you've enabled these flags and restarted Chrome.

The Web High Striker!

Make a fast flicking downward motion with your phone to see it go up!

Sensors!

Your device exposes a multitude of sensors to the Generic Sensor API. For instance there are motion sensors (Accelerometer and Gyroscope) which detect every movement of your device. For example, switching from portrait to landscape view is detected by these motion sensors. There are also environmental sensors(AmbientLightSensor and Magnetometer). These detect changes in the surroundings of your device. Changing map colors from light to dark when you drive into a tunnel or at night is just one example for the AmbientLightSensor in action.

Beside the motion sensors and environmental sensors, there are a few orientation sensors (LinearAccelerationSensor, AbsoluteOrientationSensor and RelativeOrientationSensor). These are different from the more "low-level" sensors described above in that they are a combination of multiple sensors. The AbsoluteOrientationSensor, for instance, combines data from the Accelerometer, the Gyroscope and the Magnetometer.

The interface

So we've got a lot of sensors, most of these are readily accessible through other means. But they are cumbersome to use at best. The Generic Sensor API interface is much more intuitive. Let's have a look!

const sensor = new AmbientLightSensor();
sensor.onreading = function() {
  // Get the sensor value
  console.log(this.luminance);
}
sensor.onerror = error => {
  console.log(error);
}
// Let's get this show on the road!
sensor.start();
// We're no longer interested
sensor.stop()

Looks pretty straightforward, doesn't it? And it is! Of course each sensor will expose different values but all sensors will work in the same way.

The sensors

As said, the Generic Sensor API exposes multiple low- and high-level sensors. Let's have a look at them.

Accelerometer

The accelerometer measures the acceleration of the device based on the X axis (Left to right), Y axis (forwards to backwards) and Z axis (down and up). This movement is measured in m/s2. The Z axis is always battling the gravity of the earth. It will still say that it's moving around 9.8m/s2 along its Z axis when it's laid down flat on a table.

The spec for the Accelerometer

LinearAccelerationSensor

The LinearAccelerationSensor barely differs from the Accelerometer. The only difference is that the LinearAccelerationSensor is not affected by the gravity of the earth. So the Z axis should be 0m/s2 if you lay your device on that same table.

The spec for the LinearAccelerationSensor

Gyroscope

The gyroscope also returns movement data in the three axes (X, Y and Z). This data is based on the Inertial Coriolis force. You can read more about it here.

The spec for the Gyroscope

OrientationSensors

Both the Relative and the Absolute Orientation Sensors make use of both the Accelerometer and the Gyroscope. The only difference is that the Absolute also uses data from the Magnetometer.

The spec for the orientation sensors

AmbientLightSensor

The AmbientLightSensor measures the available light and exposes it in the readings.

The spec for the AmbientLightSensor

Compatiblity

Browser support looks pretty bleak right now (Chrome only), but this will hopefully improve in the near future.

  • Chrome Behind flag
  • Chrome for Android Behind flag
  • Webkit In development

Learn more

Read and learn more about this feature:

Demo source code

Do you want to see what makes this demo possible? Check out the source file:

To generate the physics effect and animation we use the awesome Popmotion library.

Back to home