zoukankan      html  css  js  c++  java

  • HTML5调用传感器的资料汇总



    都可以调用：
    devicetemperature（温度）、devicepressure（压力）、devicehumidity（湿度）、devicelight（光）、devicenoise（声音）、deviceproximity（距离）

    今天，我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。

    开发者获益

    利用设备方向 API，开发者可以探索游戏的新输入机制、应用程序的新笔势（例如“摇晃以清屏”或“倾斜以缩放”）或者甚至放大实际体验。原型的安装包括一个示例游戏，帮助您开始了解 API。

    如何工作

    设备方向 API 公开了两种不同类型的传感器数据：方向和运动。

    当设备的物理方向变化时（例如用户倾斜或旋转设备），将会在窗口触发 deviceorientation 事件，并提供旋转的 alpha、beta 和 gamma 角度（以度表示）：

    显示由与 3D X、Y 和 Z 轴相关的 deviceorientation 事件返回的旋转的 alpha、beta 和 gamma 角：alpha = 绕 Z 轴旋转、beta = 绕 X 轴旋转和 gamma = 绕 Y 轴旋转。

    <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 旋转角度（以度/秒表示）：

    该图显示 devicemotion 事件在 x、y 和 z 轴方向返回的重力加速度。

    <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，这样的话，实现摇一摇和震动就有了途径，不止这些，通过这些ＡＰＩ的调用对系统其他功能也可以访问 ，今天就介绍两个功能。

    一、加速器的调用  

    通过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
     
    1. if (window.DeviceMotionEvent) {  
    2.         window.addEventListener('devicemotion', deviceMotionHandler, false);  
    3.     }  
    4.     var vibrateSupport = "vibrate" in navigator  
    5.     if (vibrateSupport) { //兼容不同的浏览器  
    6.         navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;  
    7.     }  

     

    [javascript] view plaincopy
     
      1. function deviceMotionHandler(eventData) {  
      2.     var acceleration = eventData.accelerationIncludingGravity;  
      3.     var currTime = new Date().getTime();  
      4.     var diffTime = currTime - last_update;  
      5.     console.info(diffTime);  
      6.     if (diffTime > 100) {  
      7.         last_update = currTime;  
      8.         x = acceleration.x;  
      9.         y = acceleration.y;  
      10.         z = acceleration.z;  
      11.         var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;  
      12.         console.info(speed);  
      13.         if (speed > SHAKE_THRESHOLD) {  
      14.             //要一摇之后进行业务逻辑处理  
      15.             doResult();  
      16.         }  
      17.           
      18.           
      19.         last_x = x;  
      20.         last_y = y;  
      21.         last_z = z;  
      22.   
      23.     }  

    iOS加速度传感器(accelerometer)

    简介

    加速度传感器是根据x、y和z三个方向来检测在设备位置的改变。

    通过加速度传感器可以知道当前设备相对于地面的位置。

    以下实例代码需要在真实设备上运行，在模拟器上是无法工作的。

    实例步骤

    1、创建一个简单的视图应用程序

    2、在ViewController.xib中添加三个标签，并创建一个ibOutlets分别为：xlable、ylabel和zlabel

    3、如下所示，更新ViewController.h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #import <UIKit/UIKit.h>
     
    @interface ViewController : UIViewController<UIAccelerometerDelegate>
    {
        IBOutlet UILabel *xlabel;
        IBOutlet UILabel *ylabel;
        IBOutlet UILabel *zlabel;
     
    }
    @end

    4、如下所示，更新ViewController.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    #import "ViewController.h"
     
    @interface ViewController ()
     
    @end
     
    @implementation ViewController
     
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        [[UIAccelerometer sharedAccelerometer]setDelegate:self];
        //Do any additional setup after loading the view,typically from a nib
    }
     
    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    - (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:
      (UIAcceleration *)acceleration{
        [xlabel setText:[NSString stringWithFormat:@"%f",acceleration.x]];
        [ylabel setText:[NSString stringWithFormat:@"%f",acceleration.y]];
        [zlabel setText:[NSString stringWithFormat:@"%f",acceleration.z]];
    }
     
    @end

    输出

    当我们在iPhone设备中运行该应用程序，得到的输出结果如下所示。

    accelerometer_Output
  • 相关阅读:
    GoLang中面向对象的三大特性
    Go常用功能总结一阶段
    GO语言基础之并发concurrency
    GO语言基础之error
    GO语言基础之reflect反射
    GO语言基础之interface
    GO语言基础之method
    GO语言基础之struct
    GO语言基础map与函数
    GO语言基础条件、跳转、Array和Slice
  • 原文地址：https://www.cnblogs.com/kenshinobiy/p/5028357.html
Copyright © 2011-2022 走看看