가속도 센서는 디바이스의 현재 방향으로부터의 변화된 움직임을 x,y,z 방향으로 추출하는 것으로 다음과 같은 함수로 호출한다.
accelerometer.getCurrentAcceleration
accelerometer.watchAcceleration
accelerometer.clearWatch
1. accelerometer.getCurrentAcceleration
현재의 가속의 x,y,z값을 추출한다. 다음과 같이 사용한다.
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
이 함수에서 accelerometerSuccess callback 함수로 가속도 함수가 리턴한다. 다음은 그 이용 예제이다.
|
<!DOCTYPE html> <html> <head> <title>Acceleration Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var button=document.getElementById("getAccelerometer"); button.addEventListener("click",getAcceler,false); } function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); } function onError() { alert('onError!'); } function getAcceler(){ navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } </script> </head> <body> <button id="getAccelerometer">Get Acce</button> </body> </html> |
실행하면 다음과 같이 버튼이 나타나며 버튼을 클릭하면 getAcceler함수가 호출되어 현재의 가속도 상태를 측정하도록 한다. 측정이 성공하면 onSuccess 함수가 호출되며 onSuccess함수에서는 Alert 창을 띄워서 해당 값을 보여준다. 다음은 실행 화면 이다.
2. accelerometer.watchAcceleration & accelerometer.clearWatch
현재의 가속계를 주기적으로 측정한다. 지정된 시간이 지나면 accelerometerSuccess callback함수가 호출되며, frequency 파라미터를 acceleratorOptions 객체에 지정하여 설정 가능하다.
var watchId=navigator.accelerometer.watchAcceleration(accelerometerSuccess,
accelerometerError, [accelerometerOptions]);
accelerometerOptions에 frequency 파라미터를 설정하여 가속계 측정 주기를 설정할 수 있다. 또한 accelerometer.clearWatch 함수로 가속계의 측정을 중지할 수 있다.
navigator.accelerometer.clearWatch(watchId);
다음은 두 함수를 이용한 예제이다.
|
<!DOCTYPE html> <html> <head> <title>Acceleration Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script> <script type="text/javascript" charset="utf-8"> var watchID = null; document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var startButton=document.getElementById("startBtn"); startButton.addEventListener("click",startWatch,false); var stopButton=document.getElementById("stopBtn"); stopButton.addEventListener("click",stopWatch,false); } function startWatch() { var options = { frequency: 1000 }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); } function stopWatch() { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null; } } function onSuccess(acceleration) { var element = document.getElementById('accelerometer'); element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' + 'Acceleration Y: ' + acceleration.y + '<br />' + 'Acceleration Z: ' + acceleration.z + '<br />' + 'Timestamp: ' + acceleration.timestamp + '<br />'; } function onError() { alert('onError!'); } </script> </head> <body> <button id="startBtn">Start Acceler</button> <button id="stopBtn">Stop Acceler</button> <div id="accelerometer">Waiting for accelerometer...</div> </body> </html> |
다음은 실행 사례이다.
