A detailed discussion of environmental sensors on mobile phones and related APIs in W3C

Environmental sensors on mobile phones generally include air pressure sensors, temperature sensors, humidity sensors, light sensors, sound sensors, and distance sensors. The air pressure sensor can determine the altitude of the current location of the mobile phone by measuring air pressure, which can improve the accuracy of GPS positioning. It is equipped on the Samsung Galaxy Nexus. The temperature sensor is used to measure the temperature and determine whether the current environment is comfortable. On the other hand, it can also monitor whether the internal temperature of the mobile phone is abnormal. The more common ones are light sensors and distance sensors, which are almost standard for smartphones and are generally designed to be located near the earpiece on the top of the front of the mobile phone.

Proximity sensor and ambient light sensor

The distance sensor consists of an infrared LED light and an infrared radiation light detector. The main reason why the distance sensor is located near the handset of the mobile phone is that when the mobile phone is close to the ear, the system knows through the distance sensor that the user is on the phone, and then turns off the display to prevent the user from affecting the call due to misoperation. The distance sensor uses the principle of "time of flight method" to detect the distance between the object and the object. It emits a very short light pulse and calculates the time it takes to be reflected by the object.

The light sensor of the mobile phone, also known as the ambient light sensor, can sense the light conditions around the device. The mobile phone operating system uses the data from the light sensor to automatically adjust the brightness of the display screen - when the ambient brightness is high, the display brightness will be increased accordingly; when the ambient brightness is low, the display brightness will be reduced accordingly. Automatic brightness ensures the screen reading experience of the mobile phone in different environments, and reduces power consumption, maximizing the working time of the device.

Proximity API

Proximity API is an independent API for distance sensors in the W3C specification, which provides Web developers with distance information between devices and objects. Based on the distance information of the device, we can do more than just turn off the screen during a call. When playing music on a mobile web page, I can pause the music without touching the screen. I can also control the character's advance and retreat in a mobile web game like a magic trick...

The API defines two device events: deviceproximity and userproximity. The former provides information about the distance between the device and the object, while the latter determines whether an object is approaching. Let's first check whether the current browser supports it:

 if ( 'ondeviceproximity' in window) {
 // Support returning distance information  
 } 
  
 if ( 'onuserproximity' in window) {
 //Supports returning whether there is an object approaching  
 }

The deviceproximity event provides three properties: value, min, and max. Value represents the distance between the device and the object in front of the device, and min and max represent the distance range that the sensor can detect, in centimeters.

 if ( 'ondeviceproximity' in window) {
 window.addEventListener( 'deviceproximity' , function(event) {
 proximityValue.innerHTML = event.value;
 proximityMax.innerHTML = event.max;
 proximityMin.innerHTML = event.min;
 });
 }

The userproximity event has an attribute: near. It is a Boolean value that indicates whether there is an object approaching the device. The default value is false. The range it detects is also the detection distance range of deviceproximity.

 if ( 'onuserproximity' in window) {
 window.addEventListener( 'userproximity' , function(event) {
 inProximity.innerHTML = event.near;
 });
 }

Through the above two events, we can perceive the distance information between the device and the object. By binding the control events of web page elements, we can realize gesture interaction on the web page without touching the screen.

Ambient Light API

Ambient Light API, an independent API for ambient light sensors in the W3C specification, provides Web developers with the numerical value of the ambient light intensity sensed by the device. The API initially provided two events to monitor the ambient light conditions of the device: devicelight and lightlevel. The former returns the numerical value of the ambient light intensity in lux units; the latter describes the current ambient light intensity level - dim, normal, and bright. In the latest W3C specification, the lightlevel event has been removed. In fact, we can completely define the light intensity level through devicelight ourselves.

 if ( 'ondevicelight' in window) {
 // Browser support detection  
 window.addEventListener( 'devicelight' , function(event) {
 // Get the light intensity value  
 lightValue.innerHTML = Math.round(event.value);
 });
 }

The devicelight event has only one value attribute, and different test devices may return different values, ranging from 0 to infinity. Based on this ambient light intensity, we can automatically switch to a night theme on the web page to try to reduce user eye fatigue caused by web page reading. By observing the changes in this value in different environments, we set two dividing points for theme changes: 50lux and 10000lux, so we have:

 if (event.value < 50 ) {
 document.body.className = 'dark-theme' ;
 } else   if (event.value < 10000 ) {
 document.body.className = 'classic-theme' ;
 } else {
 document.body.className = 'light-theme' ;
 }

Not only that, in web games, we can match different theme scenes as the game background according to the current ambient light intensity to enhance the environmental atmosphere and strengthen the sense of reality of the game.

compatibility

Unfortunately, among desktop and mobile browsers, only Firefox currently supports the Proximity API and Ambient Light API, and the desktop version's support for the Ambient Light API is limited to Mac OS X systems.

[Figure 1.2 Proximity API support]

[Figure 1.3 Ambient Light API support]