jsdoでdeviceorientation


概要

jsdoでdeviceorientationやってみた。

グラフ表示してみた。


環境

nexus 7


サンプルコード

var lastOrientation;

function onDeviceOrientationChange(event) {
lastOrientation.gamma = event.gamma;
lastOrientation.beta = event.beta;
lastOrientation.alpha = event.alpha;
}
function deviceOrientationTest(event) {
window.removeEventListener('deviceorientation', deviceOrientationTest);
if (event.beta != null && event.gamma != null)
{
window.addEventListener('deviceorientation', onDeviceOrientationChange, false);
}
}
google.load('visualization', '1.0', {
'packages' : ['corechart']
});
google.setOnLoadCallback(drawChart);
var i = 0;
function drawChart() {
lastOrientation = {};
window.addEventListener('deviceorientation', deviceOrientationTest, false);
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'alpha');
data.addColumn('number', 'beta');
data.addColumn('number', 'gamma');
var options = {
title: 'deviceorientation',
curveType: 'function',
seriesType: 'line',
pointSize: 0,
width: 800,
height: 450,
series: {
1: {
pointSize: 5
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
setInterval(function() {
var alpha = lastOrientation.alpha;
var beta = lastOrientation.beta;
var gamma = lastOrientation.gamma;
data.addRow([i, beta, beta, gamma]);
chart.draw(data, options);
i++;
if (i > 80) data.removeRow(0);
}, 128);
}


成果物

http://jsdo.it/ohisama1/ME45

以上。