Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/branding-fe/sensor
Mobile Sensors
https://github.com/branding-fe/sensor
Last synced: 7 days ago
JSON representation
Mobile Sensors
- Host: GitHub
- URL: https://github.com/branding-fe/sensor
- Owner: branding-fe
- Created: 2014-08-26T06:24:16.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-01T04:21:21.000Z (over 8 years ago)
- Last Synced: 2024-08-02T18:41:20.228Z (3 months ago)
- Language: JavaScript
- Size: 2.81 MB
- Stars: 21
- Watchers: 5
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sensor.js
在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。
概述
--------
HTML5提供了很多对硬件的使用功能。sensor.js是使用这些功能的抽象的库。可以让开发者通过简单的javascript api快速使用这些功能，而不用花大量时间在功能实现和屏蔽各种设备差异的细节上。
实例
------
这里: http://sensor.jishub.com 可以看到功能实例DEMO。
#### 倾斜 Orientation
你可以通过控制移动设备的倾斜控制页面上的球的滚动。
#### 摇一摇 Shake
通过摇晃移动设备改变页面的颜色。
#### 定位 Geolocation
获取你当前的经纬度，打开百度地图显示当前的位置。需要手动确认开启位置检测。
#### 擦一擦 ErasableMask
把某个元素使用可擦除的遮罩遮住，手指擦除遮罩面积达到或超过百分之40就清除全部遮罩。
#### camera
#### touch(Hammer?)
文档
-------------
### 倾斜 Orientation
Orientation会持续的取得移动设备的alpha, beta, gamma的值。
配置项 | 描述 | 默认值
------------- | -----------------------------------------|-----------
callback | (Function) 角度/弧度改变的回调函数 | -
alphaThreshold| (number) alpha改变触发回调的临界值 | 0
betaThreshold | (number) beta 改变触发回调的临界值 | 0
gammaThreshold| (number) gamma改变触发回调的临界值 | 0
timeInterval | (number) 判断倾斜值变化的时间间隔(毫秒) | 300
radians | (boolean) 是否使用弧度值 | false
返回倾斜值 | 描述
------------- | -----------------------------------------
alpha | (number) 移动设备水平旋转的角度/弧度值
beta | (number) 移动设备前后倾斜的角度/弧度值
gamma | (number) 移动设备左右倾斜的角度/弧度值
用法:
```javascript
//使用amd js加载工具
require(['orientation'], function(Orientation) {
// options为函数时就作为配置项的callback配置项
new Orientation(function(data){
//处理data...
}).start();
})
```
### 摇一摇 Shake
Shake会监听移动设备的摇晃动作，会返回触发事件时各个方向的加速度值(考虑重力加速度)。
配置项 | 描述 | 默认值
------------- | ----------------------------------------------|-----------
callback | (Function) 摇晃设备的回调函数 | -
threshold | (number) 各个方向加速度值改变触发回调的临界值 | 10
timeInterval | (number) 判断加速度值变化的时间间隔(毫秒) | 500
返回值 | 描述
------------- | -----------------------------------------
x | (number) x轴加速度(考虑重力加速度)
y | (number) y轴加速度(考虑重力加速度)
z | (number) z轴加速度(考虑重力加速度)
用法:
```javascript
//使用amd js加载工具
require(['shake'], function(Shake) {
new Shake(function(data){
//处理data...
}).start();
})
```
### 定位 GPS
获取用户设备GPS定位经纬度。
配置项 | 描述 | 默认值
--------------- | -----------------------------------------------------|-----------
callback | (Function) 获取到经纬度或转换过的经纬度后的回调函数 | -
返回值 | 描述
--------------- | -----------------------------------------
errorMessage | (string) 如果定位没有成功，提示错误信息
latitude | (number) 纬度值
longitude | (number) 经度值
accuracy | (number) 定位精度
altitude | (number) 相对于海平面的海拔高度
altitudeAccuracy| (number) 海拔精度
heading | (number) 方向，从正北开始以度计
speed | (number) 速度，以米/每秒计
timestamp | (number) 响应的日期/时间
用法:
```javascript
//使用amd js加载工具
require(['geolocation'], function(Geolocation) {
new Geolocation(function(data){
//处理data...
if (!data.errorMessage) {
var lat = data.latitude;
var lon = data.longitude;
}
}).start();
})
```
### 可擦除遮罩 ErasableMask
给元素添加可擦除的遮罩。
配置项 | 描述 | 默认值
--------------- | -------------------------------------------------------------------------------|-----------
el | (Element,string) 需要遮罩的DOM节点 或 节点的id | -
callback | (Function) 擦除一部分后的回调函数，函数会接收到擦除的百分比 | -
image | (string) 用于遮罩的图片 默认不用图片 | -
width | (number) 遮罩宽度 | 被遮罩的元素宽度(不包括border)
height | (number) 遮罩高度 | 被遮罩的元素高度(不包括border)
left | (number) 遮罩style的left值 遮罩为绝对定位 | 0
top | (number) 遮罩style的top值 遮罩为绝对定位 | 0
color | (string) 遮罩层颜色 默认使用背景颜色为#666的遮罩 | #666
alpha | (number) 遮罩的透明度 默认不透明 | 100
checkDistance | (number) 用于计算擦除部分的比例的计算点之间的间距，越小越精确，而执行效率越低 | 20
showPoint | (boolean) 显示计算点，一般在测试的时候才用 | false
radius | (number) 擦除半径大小 | 20
alphaRadius | (number) 擦除外边缘半透明渐变距离(注: 在计算擦除面积时只算完全擦除的部分) | 10
eraseWidth | (number) 擦除宽度(注: 配置该属性即设置擦除的形状为矩形，值为矩形宽度) | -
eraseHeight | (number) 擦除高度 | -
smooth | (boolean) 擦除的形状为矩形时有效，是否用椭圆替换矩形，使擦除时边缘更平滑 | true
返回值 | 描述
--------------------------- | -----------------------------------------
percent(返回值本身) | (number) 擦除的面积占整个遮罩的百分比
用法:
```javascript
//使用amd js加载工具
require(['erasableMask'], function(Mask) {
var bodyStyle = document.body.style;
// 禁止浏览器默认选中内容
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var perStr;
var mask = new Mask('imgWrap', {
width: 500,
height: 400,
maskImage: '../images/pet2.jpg',
showPoint: false,
callback: function(percent) {
perStr = '擦除百分比为：' + Math.floor(percent) + '%';
console.log(perStr);
if (percent >= 40) {
mask.clearMask();
mask.stop();
}
}
});
mask.start();
})();
```
参考
------
* https://developer.mozilla.org/en-US/docs/tag/Sensors
* http://blog.csdn.net/hursing/article/details/9046837
* http://blog.csdn.net/hursing/article/details/9061991
* http://www.w3schools.com/html/html5_geolocation.asp
* http://www.w3schools.com/tags/ref_canvas.asp
* https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect