摘要:用來判斷手機瀏覽器是否支持訪問硬件資源,通過上一句代碼來對該事件進(jìn)行監(jiān)聽,第一個參數(shù)是事件類型,第二個參數(shù)是一個對事件的處理,在總通過獲得加速器對象,分別獲取傳感器三個分量的參數(shù),這樣就完成了參數(shù)的獲取。
用window.DeviceMotionEvent來判斷手機瀏覽器是否支持訪問硬件資源,window.addEventListener("devicemotion",deviceMotionHandler,false);通過上一句代碼來對該事件進(jìn)行監(jiān)聽,第一個參數(shù)是事件類型,第二個參數(shù)是一個function對事件的處理,在function總通過varacceleration = eventData.accelerationIncludingGravity; 獲得加速器對象,x =acceleration.x;y = acceleration.y;z =acceleration.z; 分別獲取傳感器三個分量的參數(shù),這樣就完成了參數(shù)的獲取。?
接下來,我們開始將數(shù)據(jù)弄到圖表上:
首先,我們定義幾個變量:
var oriValuesX = []; //存放x軸數(shù)據(jù) var oriValuesY = []; //存放y軸數(shù)據(jù) var oriValuesZ = []; //存放z軸數(shù)據(jù) var oriValuesSqrt = []; //存放xyz平方相加再開根的數(shù)據(jù) var timeX = []; //存放圖表x軸的時間,單位:毫秒 var x = y = z = 0; //用以獲取xyz軸當(dāng)前的數(shù)據(jù) var startTime = new Date().getTime(); //最初的開始時間,單位:毫秒 var string = ""; //定義一個字符串用來顯示數(shù)據(jù)
隨后,開始調(diào)用加速度傳感器:
if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", functiondeviceMotionHandler(eventData){ var currTime = new Date().getTime(); //當(dāng)前時間 var diffTime = currTime - startTime;//當(dāng)前時間減最初時間,得到當(dāng)前時間差 timeX.push(diffTime); //將當(dāng)前時間差存放 var acceleration =eventData.accelerationIncludingGravity; //獲得加速器對象 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){ //控制個數(shù) line();//調(diào)用line函數(shù),生成圖表用的 for(var i= 0 ; i < oriValuesSqrt.length ; i++){ string = string +(timeX[i]+":"+oriValuesSqrt[i]+" "); //"當(dāng)前時間:數(shù)據(jù)" 的形式顯示在前臺,方便查看數(shù)據(jù) } $(".data").html(string); } }, false); }
再然后就是調(diào)用chart.js?,不會用的可以參考上一篇博文://blog.sina.com.cn/s/blog_ad7cad400102xn38.html
混合4個折線,不同顏色:
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前面加上:
大功告成,但這個必須在手機上運行才有數(shù)據(jù),因為現(xiàn)今的電腦瀏覽器不能模擬加速度
附上效果圖:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/83884.html
摘要:背景最近無線傳感器網(wǎng)絡(luò)又火了起來,第二屆全國高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了,用的是。不用局限于編程,我們可以通過適當(dāng)?shù)乃惴ń?shù)學(xué)模型對當(dāng)前的傳感網(wǎng)絡(luò)健康狀況加以判斷。 背景 最近無線傳感器網(wǎng)絡(luò)(Wireless Sensor Networks, WSN)又火了起來,第二屆全國高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了,用的是TinyOS。官方給的板子我去淘寶搜了一下,要800RMB一個,我怎么絲毫感...
摘要:背景最近無線傳感器網(wǎng)絡(luò)又火了起來,第二屆全國高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了,用的是。不用局限于編程,我們可以通過適當(dāng)?shù)乃惴ń?shù)學(xué)模型對當(dāng)前的傳感網(wǎng)絡(luò)健康狀況加以判斷。 背景 最近無線傳感器網(wǎng)絡(luò)(Wireless Sensor Networks, WSN)又火了起來,第二屆全國高校物聯(lián)網(wǎng)創(chuàng)新應(yīng)用大賽開始了,用的是TinyOS。官方給的板子我去淘寶搜了一下,要800RMB一個,我怎么絲毫感...
閱讀 848·2021-11-25 09:43
閱讀 3681·2021-11-19 09:40
閱讀 882·2021-09-29 09:34
閱讀 1784·2021-09-26 10:21
閱讀 870·2021-09-22 15:24
閱讀 4188·2021-09-22 15:08
閱讀 3266·2021-09-07 09:58
閱讀 2658·2019-08-30 15:55