W3C 在 DOM 中引入“周边亮度”与“邻近”规范

  • Faraz Yashar
  • 李彬

2013 年 1 月 18 日

话题:JavaScriptHTML5语言 & 开发

传统上,Web 开发被限制在浏览器的范围内,仅能提供文档层面的操作及用户交互处理。W3C 通过引入一系列 API 来努力改变这一现状,使开发者能够与终端及周边外设进行交互。其中两类规范,“邻近事件”与“周边亮度事件”,已经进入草案最后征集意见的阶段。在接下来数月内会进入候选推荐阶段,届时一些实例也会逐渐出现。

通过 JavaScript 和 HTML5 的事件句柄(event handler),“邻近事件”与“周边亮度事件”两项规范分别提供了从邻近传感器及光线传感器获取事件的方法。

在当前版本,“邻近事件”规范定义了两个接口:DeviceProximityEvent,向开发者提供关于设备与对象之间距离的信息;UserProximityEvent,向开发者提供有关周边物体侦测的、针对特定浏览器及平台的通知信息。DeviceProximityEvent 提供三项只读属性:

  • min – 最小感应距离,以厘米为单位
  • max – 最大感应距离,以厘米为单位
  • value –物体的邻近程度,以厘米为单位

该对象被传递到一个特殊的回调函数中,即 HTML5 规范所定义的事件句柄(event handler),作为该函数的参数。

// Event Handler
deviceProximityHandler = function(event) {
  document.writeln('min = ', event.min,
                   'max = ', event.max,
                   'value = ', event.value); 
                    // e.g. => min = 0 max = 5 value = 5
  document.write('
');
}

// Assigning the Event Handler to a Listener
window.addEventListener('deviceproximity', deviceProximityHandler);

UserProximityEvent 则相对不那么“让人兴奋”,它提供了布尔型属性,用于指示周边的邻近物体:

userProximityHandler = function(event) {
  document.write('near = ', event.near); 
    // e.g. => near = true/false
  document.write('
');
}

window.addEventListener('userproximity', userProximityHandler);

在当前版本,“周边亮度事件”规范也定义了两个接口。 TheDeviceLightEvent 提供了一个值属性,以勒克斯(lux,照面单位)为单位表达周边亮度等级。LightLevelEvent 将周边亮度划分为“昏暗”(低于 50 勒克斯)、“正常”、“明亮”(高于 10000 勒克斯) 。

deviceLightHandler = function(event) {
  document.write('value = ', event.value); // e.g. => value = 10/100/1000
  document.write('
');
}

window.addEventListener('devicelight', deviceLightHandler);

目前,DeviceProximityEventUserProximityEvent,以及 DeviceLightEvent可在 Firefox 移动版的 Beta 版本(版本号 15 或更高)中使用。支持周边亮度感应的 Windows 版 Firefox Beta 版本也将很快发布。 请注意,草案规范的示例实现很可能在发展的过程中经历重大的改变。例如,Mozilla 的DeviceLightEvent实现所提供的对最大、最小亮度的访问,已从当前规范中剔除。

邻近事件”与“周边亮度事件”是当前已被细分出来的传感器 API 规范中最成熟的分支,相关规范致力于定义对温度、压强、湿度、噪声等方面的读取。这些尝试覆盖的范围很大,开发者们可以预见,未来的 DOM 将能够提供怎样的工具来与用户周边环境交互。开发者们被鼓励积极向这些 API 提供反馈,特别是在最后征集意见的阶段。开发者可以通过订阅Device APIs 工作组的公开邮件列表参与讨论。

查看英文原文Ambient Light and Proximity Enter the DOM


感谢杨赛对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

JavaScriptHTML5语言 & 开发