資訊專欄INFORMATION COLUMN
摘要：用來(lái)判斷手機(jī)瀏覽器是否支持訪問硬件資源，通過上一句代碼來(lái)對(duì)該事件進(jìn)行監(jiān)聽，第一個(gè)參數(shù)是事件類型，第二個(gè)參數(shù)是一個(gè)對(duì)事件的處理，在總通過獲得加速器對(duì)象，分別獲取傳感器三個(gè)分量的參數(shù)，這樣就完成了參數(shù)的獲取。
用window.DeviceMotionEvent來(lái)判斷手機(jī)瀏覽器是否支持訪問硬件資源，window.addEventListener("devicemotion",deviceMotionHandler,false);通過上一句代碼來(lái)對(duì)該事件進(jìn)行監(jiān)聽，第一個(gè)參數(shù)是事件類型，第二個(gè)參數(shù)是一個(gè)function對(duì)事件的處理，在function總通過varacceleration = eventData.accelerationIncludingGravity; 獲得加速器對(duì)象，x =acceleration.x;y = acceleration.y;z =acceleration.z; 分別獲取傳感器三個(gè)分量的參數(shù)，這樣就完成了參數(shù)的獲取。?
接下來(lái)，我們開始將數(shù)據(jù)弄到圖表上：
首先，我們定義幾個(gè)變量：
var oriValuesX = []; //存放x軸數(shù)據(jù) var oriValuesY = []; //存放y軸數(shù)據(jù) var oriValuesZ = []; //存放z軸數(shù)據(jù) var oriValuesSqrt = []; //存放xyz平方相加再開根的數(shù)據(jù) var timeX = []; //存放圖表x軸的時(shí)間，單位：毫秒 var x = y = z = 0; //用以獲取xyz軸當(dāng)前的數(shù)據(jù) var startTime = new Date().getTime(); //最初的開始時(shí)間，單位：毫秒 var string = ""; //定義一個(gè)字符串用來(lái)顯示數(shù)據(jù)
隨后，開始調(diào)用加速度傳感器：
if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", functiondeviceMotionHandler(eventData){
var currTime = new Date().getTime(); //當(dāng)前時(shí)間
var diffTime = currTime - startTime;//當(dāng)前時(shí)間減最初時(shí)間，得到當(dāng)前時(shí)間差
timeX.push(diffTime); //將當(dāng)前時(shí)間差存放
var acceleration =eventData.accelerationIncludingGravity; //獲得加速器對(duì)象
x = acceleration.x; //獲取x軸當(dāng)前加速度
y =acceleration.y; //獲取y軸當(dāng)前加速度
z =acceleration.z; //獲取z軸當(dāng)前加速度
oriValuesX.push(x); //將x軸當(dāng)前加速度存放
oriValuesY.push(y); //將y軸當(dāng)前加速度存放
oriValuesZ.push(z); //將z軸當(dāng)前加速度存放
oriValuesSqrt.push(Math.sqrt(x * x + y * y + z *z)); //將當(dāng)前xyz加速度平方相加再開根存放
if(timeX.length == 200){ //控制個(gè)數(shù)
line();//調(diào)用line函數(shù)，生成圖表用的
for(var i= 0 ; i < oriValuesSqrt.length ; i++){
string = string +(timeX[i]+":"+oriValuesSqrt[i]+"
"); //"當(dāng)前時(shí)間：數(shù)據(jù)" 的形式顯示在前臺(tái)，方便查看數(shù)據(jù)
}
$(".data").html(string);
}
}, false);
}
再然后就是調(diào)用chart.js?，不會(huì)用的可以參考上一篇博文：//blog.sina.com.cn/s/blog_ad7cad400102xn38.html
混合4個(gè)折線，不同顏色：
var line = function(){
var ctx =document.getElementById_x_x_x_x_x_x("myChart");
var myChart = new Chart(ctx, {
type:"line",
data:{
labels: timeX,
datasets: [
{
label:"x",
fill:false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data:oriValuesX,
spanGaps:false,
},
{
label:"y",
fill:false,
lineTension: 0.1,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(255, 99, 132, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 99, 132, 1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data:oriValuesY,
spanGaps:false,
},
{
label:"z",
fill:false,
lineTension: 0.1,
backgroundColor: "rgba(153, 102, 255, 0.2)",
borderColor: "rgba(153, 102, 255, 1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(153, 102, 255, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(153, 102, 255, 1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data:oriValuesZ,
spanGaps:false,
},
{
label:"sqrt",
fill:false,
lineTension: 0.1,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(54, 162, 235, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(54, 162, 235, 1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data:oriValuesSqrt,
spanGaps:false,
}
]
},
options:{
scales: {
yAxes: [{
ticks:{
beginAtZero: true
}
}]
}
}
});
};
最后再在此script前面加上:
大功告成，但這個(gè)必須在手機(jī)上運(yùn)行才有數(shù)據(jù)，因?yàn)楝F(xiàn)今的電腦瀏覽器不能模擬加速度
附上效果圖：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83884.html
摘要：背景最近無(wú)線傳感器網(wǎng)絡(luò)又火了起來(lái)，第二屆全國(guó)高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了，用的是。不用局限于編程，我們可以通過適當(dāng)?shù)乃惴ń?shù)學(xué)模型對(duì)當(dāng)前的傳感網(wǎng)絡(luò)健康狀況加以判斷。 背景 最近無(wú)線傳感器網(wǎng)絡(luò)(Wireless Sensor Networks, WSN)又火了起來(lái)，第二屆全國(guó)高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了，用的是TinyOS。官方給的板子我去淘寶搜了一下，要800RMB一個(gè)，我怎么絲毫感...
摘要：背景最近無(wú)線傳感器網(wǎng)絡(luò)又火了起來(lái)，第二屆全國(guó)高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了，用的是。不用局限于編程，我們可以通過適當(dāng)?shù)乃惴ń?shù)學(xué)模型對(duì)當(dāng)前的傳感網(wǎng)絡(luò)健康狀況加以判斷。 背景 最近無(wú)線傳感器網(wǎng)絡(luò)(Wireless Sensor Networks, WSN)又火了起來(lái)，第二屆全國(guó)高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了，用的是TinyOS。官方給的板子我去淘寶搜了一下，要800RMB一個(gè)，我怎么絲毫感...
閱讀 862·2021-11-25 09:43
閱讀 3692·2021-11-19 09:40
閱讀 898·2021-09-29 09:34
閱讀 1814·2021-09-26 10:21
閱讀 887·2021-09-22 15:24
閱讀 4208·2021-09-22 15:08
閱讀 3285·2021-09-07 09:58
閱讀 2709·2019-08-30 15:55
