阿里、蚂蚁、晟腾、中科加禾精彩分享 AI 基础设施洞见,现购票可享受 9 折优惠 |AICon 了解详情
写点什么

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

  • 2013-01-18
  • 本文字数:1448 字

    阅读完需:约 5 分钟

传统上,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);

目前, DeviceProximityEvent UserProximityEvent ,以及 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 )关注我们,并与我们的编辑和其他读者朋友交流。

2013-01-18 05:19867
用户头像

发布了 256 篇内容, 共 68.4 次阅读, 收获喜欢 10 次。

关注

评论

发布
暂无评论
发现更多内容

Redis 最后一课

escray

redis 学习 极客时间 Redis 核心技术与实战 4月日更

CI/CD之基于Jenkins的发布平台实践

小江

DevOps jenkins CI/CD 发布流程

聊聊云厂商的指标监控组件

耳东@Erdong

Prometheus 4月日更 #Grafana

如何从Telegram下载一整套可爱的猫猫表情包?

彭宏豪95

GitHub 效率 社交 4月日更

微服务网关:Spring Cloud Gateway —— Zuul

程序员架构进阶

微服务 网关 28天写作 4月日更

redis Redis缓存穿透解决方案

Sakura

4月日更

【资深猎头分享】程序员面试如何避坑?

Java架构师迁哥

你看起来很美味?独家揭露视频推荐系统AI秘方

白洞计划

那束漂亮的手捧花

小天同学

爱情 4月日更 幸福 传递

使用FFmpeg开发的那些事

Bob

音视频 ffmpeg 开源文化

「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单设计器(五)

crudapi

Vue crud 动态表单 quasar cruapi

Dubbo 学习笔记(一) Hello,Dubbo

U2647

dubbo 4月日更

读《非暴力沟通》

箭上有毒

读书笔记 4月日更

浅论结构体与联合体

Integer

c

spring的IOC使用以及原理

邱学喆

spring ioc 对象创建 属性注入

使用Composition API在Vue3中创建防抖搜索输入框

devpoint

vite Vue3 防抖

深圳龙华携手腾讯云 加快推进区块链先行试验区建设

CECBC

和老大的相爱相杀中,让我终于搞懂了函数式接口

麦洛

Java 函数式接口 Lambda java8

线上PHP服务故障排查之路

风翱

PHP-FPM 线上事故 4月日更

用OpenCV制作庆祝武汉重启一周年短视频

老猿Python

Python OpenCV 音视频 图形图像处理 引航计划

OpenHarmony 1.1.0 LTS 版本正式发布

开放原子开源基金会

开源 开放原子开源基金会 OpenHarmony

如何引入TDD实践

顿晓

TDD 4月日更

区块链技术驱动商业银行开展供应链金融业务的创新路径

CECBC

Linux mkdir 命令

一个大红包

4月日更

NA(Nirvana)Chain“以应用而生”如何强势突围

区块链第一资讯

DEX领域第一个运用整合思维的DeFi协议 SumSwwap潜力巨大

币圈资讯

Go1.16 中模块的新变化

Rayjun

Go 语言

《几何代数计算入门(计算机视觉)》

计算机与AI

计算机视觉 计算机图形学

一篇文章告诉你什么是EGG Network(阿凡提)以及什么是EFTalk

币圈那点事

MapReduce优化

大数据技术指南

hadoop 4月日更

Boss直聘转发超120W次Java全栈面试题!已帮我拿下5个Offer!

Java架构追梦

Java 面试 架构师 阿里巴巴面经总结

W3C在DOM中引入“周边亮度”与“邻近”规范_JavaScript_Faraz Yashar_InfoQ精选文章