HTML5调用传感器的资料汇总
2015-12-08 10:36
651 查看
都可以调用:
devicetemperature(温度)、devicepressure(压力)、devicehumidity(湿度)、devicelight(光)、devicenoise(声音)、deviceproximity(距离)
今天,我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。
开发者获益
利用设备方向 API,开发者可以探索游戏的新输入机制、应用程序的新笔势(例如“摇晃以清屏”或“倾斜以缩放”)或者甚至放大实际体验。原型的安装包括一个示例游戏,帮助您开始了解 API。
如何工作
设备方向 API 公开了两种不同类型的传感器数据:方向和运动。
当设备的物理方向变化时(例如用户倾斜或旋转设备),将会在窗口触发
当设备移动或旋转(更精确地说是加速)时,将在窗口触发
试验原型
您可以在 HTML5Labs 下载该原型。此原型需要设备上运行 Internet Explorer 10,并且该设备附带有 Windows 8 所支持的加速度传感器。该原型作为台式机上 Internet Explorer 的扩展,开发者可以在台式机上获取这些 API 的第一印象。要利用该原型开始构建自己的页面,您所需做的就是安装该原型,并包括一个对 DeviceOrientation.js 脚本文件的引用(安装原型后复制到台式机上):
一、加速器的调用
通过widow对象中DeviceMotionEvent 来判断 浏览器(手机)是否支持访问硬件资源,window.addEventListener('devicemotion', deviceMotionHandler, false);通过上一句代码来对该事件进行监听,第一个参数是事件类型,第二个参数是一个Handler 进行对事件的处理,通过var acceleration = eventData.accelerationIncludingGravity; 获得加速器对象,x = acceleration.x; y = acceleration.y; z = acceleration.z; 分别获取传感器三个分量的参数,这样就完成了对摇一摇参数的获取。
二、 手机震动的实现
振动事件 同样是封装在widow.navigation对象中,通过 var vibrateSupport = 'vibrate' in navigation 来检测浏览器是否支持调用手机振动事件。如果支持 为了兼容不通的浏览器 需要进行对vibrate 进行做不同的选择。navigator.vibrate = navigator || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; 然后在需要的地方 调用navigator.vibrate(3000), 就可以实现手机震动的了(该处震动三秒),同时期支持数组 如 navigator.vibrate.([300,200,300,200,300]),300是表示震动的毫秒数,200表示两次震动的时间间隔。
同样对其他操作,通过对API的调用,实现也都十分简单,这样以来,我们完全可以通过H5来实现不通的功能,来实现跨平台了,关键代码如下
[javascript] view plaincopy
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
}
var vibrateSupport = "vibrate" in navigator
if (vibrateSupport) { //兼容不同的浏览器
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
}
[javascript] view plaincopy
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var currTime = new Date().getTime();
var diffTime = currTime - last_update;
console.info(diffTime);
if (diffTime > 100) {
last_update = currTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;
console.info(speed);
if (speed > SHAKE_THRESHOLD) {
//要一摇之后进行业务逻辑处理
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
通过加速度传感器可以知道当前设备相对于地面的位置。
以下实例代码需要在真实设备上运行,在模拟器上是无法工作的。
2、在ViewController.xib中添加三个标签,并创建一个ibOutlets分别为:xlable、ylabel和zlabel
3、如下所示,更新ViewController.h
4、如下所示,更新ViewController.m
devicetemperature(温度)、devicepressure(压力)、devicehumidity(湿度)、devicelight(光)、devicenoise(声音)、deviceproximity(距离)
今天,我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。
开发者获益
利用设备方向 API,开发者可以探索游戏的新输入机制、应用程序的新笔势(例如“摇晃以清屏”或“倾斜以缩放”)或者甚至放大实际体验。原型的安装包括一个示例游戏,帮助您开始了解 API。
如何工作
设备方向 API 公开了两种不同类型的传感器数据:方向和运动。
当设备的物理方向变化时(例如用户倾斜或旋转设备),将会在窗口触发
deviceorientation事件,并提供旋转的 alpha、beta 和 gamma 角度(以度表示):
<div id="directions"></div>
<script>
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "North!";
} else if (evt.alpha < 180) {
directions.innerHTML = "Turn Left";
} else {
directions.innerHTML = "Turn Right";
}
}
</script>
当设备移动或旋转(更精确地说是加速)时,将在窗口触发
devicemotion事件,并提供在 x、y 和 z 轴方向加速(包括体现以及不体现设备的重力加速度,以米/秒表示2),以及在 alpha、 beta 和 gamma 旋转角度(以度/秒表示):
<div id="status"></div>
<script>
window.addEventListener("devicemotion", detectShake);
function detectShake(evt) {
var status = document.getElementById("status");
var accl = evt.acceleration;
if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {
status.innerHTML = "EARTHQUAKE!!!";
} else {
status.innerHTML = "All systems go!";
}
}
</script>
试验原型
您可以在 HTML5Labs 下载该原型。此原型需要设备上运行 Internet Explorer 10,并且该设备附带有 Windows 8 所支持的加速度传感器。该原型作为台式机上 Internet Explorer 的扩展,开发者可以在台式机上获取这些 API 的第一印象。要利用该原型开始构建自己的页面,您所需做的就是安装该原型,并包括一个对 DeviceOrientation.js 脚本文件的引用(安装原型后复制到台式机上):
<script type="text/javascript" src="DeviceOrientation.js"></script>
h5学习之调用手机底层硬件----加速度传感器和震动
最近在开发微信公众平台时,有一个需求是通过摇一摇进行互动活动,刚开始以为要用微信内的摇一摇功能,但是微信根本没有提供接口(摇一摇是调用手机硬件,根本不能调用),所以只能换一种思路,微信可以跟我们的服务器端对接,所以只能通过一些前端的脚本语言去解决。幸运的是:H5 + 提供了对手机硬件资源访问的封装API,这样的话,实现摇一摇和震动就有了途径,不止这些,通过这些API的调用对系统其他功能也可以访问 ,今天就介绍两个功能。一、加速器的调用
通过widow对象中DeviceMotionEvent 来判断 浏览器(手机)是否支持访问硬件资源,window.addEventListener('devicemotion', deviceMotionHandler, false);通过上一句代码来对该事件进行监听,第一个参数是事件类型,第二个参数是一个Handler 进行对事件的处理,通过var acceleration = eventData.accelerationIncludingGravity; 获得加速器对象,x = acceleration.x; y = acceleration.y; z = acceleration.z; 分别获取传感器三个分量的参数,这样就完成了对摇一摇参数的获取。
二、 手机震动的实现
振动事件 同样是封装在widow.navigation对象中,通过 var vibrateSupport = 'vibrate' in navigation 来检测浏览器是否支持调用手机振动事件。如果支持 为了兼容不通的浏览器 需要进行对vibrate 进行做不同的选择。navigator.vibrate = navigator || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; 然后在需要的地方 调用navigator.vibrate(3000), 就可以实现手机震动的了(该处震动三秒),同时期支持数组 如 navigator.vibrate.([300,200,300,200,300]),300是表示震动的毫秒数,200表示两次震动的时间间隔。
同样对其他操作,通过对API的调用,实现也都十分简单,这样以来,我们完全可以通过H5来实现不通的功能,来实现跨平台了,关键代码如下
[javascript] view plaincopy
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
}
var vibrateSupport = "vibrate" in navigator
if (vibrateSupport) { //兼容不同的浏览器
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
}
[javascript] view plaincopy
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var currTime = new Date().getTime();
var diffTime = currTime - last_update;
console.info(diffTime);
if (diffTime > 100) {
last_update = currTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;
console.info(speed);
if (speed > SHAKE_THRESHOLD) {
//要一摇之后进行业务逻辑处理
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
iOS加速度传感器(accelerometer)
简介
加速度传感器是根据x、y和z三个方向来检测在设备位置的改变。通过加速度传感器可以知道当前设备相对于地面的位置。
以下实例代码需要在真实设备上运行,在模拟器上是无法工作的。
实例步骤
1、创建一个简单的视图应用程序2、在ViewController.xib中添加三个标签,并创建一个ibOutlets分别为:xlable、ylabel和zlabel
3、如下所示,更新ViewController.h
输出
当我们在iPhone设备中运行该应用程序,得到的输出结果如下所示。相关文章推荐
- HTML5能为我们带来什么? 面试必备!
- html5 - 超链接基础和锚点
- HTML5定稿一周年,你必须要重新认识HTML5了
- HTML5定稿一周年,你必须要重新认识HTML5了
- h5学习笔记(1)
- HTML5浏览器嵌入窗口程序解决方案
- 离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程
- html5实现图片预览和查看原图
- H5网页判断手机横屏或是竖屏
- 今天大雪 看雪花飘落HTML5特效
- 8个3D视觉效果的HTML5动画欣赏
- HTML5地理地位加获取设备信息
- HTML5做手机站页面字体显示很小的解决方法
- HTML5规范的本地存储
- Maqetta Preview 2 发布,开源HTML5可视化设计工具
- HTML5桌面通知:notification api
- HTML5 Canvas入门
- html5 - 基础格式认识和标签用法(文本元素常用方法)
- HTML5基础--开发工具
- HTML5基础--新特性