Appspresso(앱스프레소) - Accelerometer (가속도계)

모바일 기기에서 제공하는 센서를 이용하는 예제를 보겠습니다.
예제에 나와있는 센서는 가속도계, 위치정보, 방향계 세가지 이며, 이중에서 가속도계를 먼저 살펴보려 합니다.

시작페이지인 index.html부터 보겠습니다.

sensor.html을 열어보면 아래와 같이 세가지 센서에 대한 예제 링크가 있습니다.

우리의 목적은 가속도계이니 sensor-accelerometer.html를 열어봅니다.
canvas 태그로 구성되어 있군요.
이 html과 연관된 js파일을 찾아 보겠습니다.

js/sensor-accelerometer.js가 있네요.
열어보니 3개 함수가 정의되어 있고, 좀 복잡해 보입니다.
데모라는 이름이 붙은 함수부터 보니, 캔버스를 셋팅하고, 가속도계 api를 호출하면서 콜백함수들을 인수로 주는군요.
watchAcceleration은 모바일기기에서 가속도계 센서의 변화를 지속적으로 감지하는 기능을 제공합니다.

successCallback 함수인 watcher를 살펴보겠습니다.
캔버스에 원을 그리고 원내부에 눈코입 같은 것을 그리는군요.
그리고, 인수로 받아온 가속도계의 정보를 통해 원의 위치를 변경하도록 구성되어 있는것이 보입니다.

clearWatch함수를 통해 가속도계의 지속적인 센서 이벤트를 정지하는 함수를 정의했군요.

API문서에 나타나 있듯이,
가속도계의 방향은 총 3방향으로 수평 가로방향인 x축, 수평 위방향인 y축, 위아래 방향인 z축의 값으로 구성되어 있습니다. 또, 모바일 기기를 수평으로 유지하면 중력의 힘이 가산되어 z축의 값이 -9.8 m/s2 를 갖게 되며,
가속도계의 정보는 읽기 전용으로 임의로 변경이 불가능합니다.

시뮬레이터에서는 센서가 없으니
실제 아이폰에서 실행시켜 봤습니다.
기기의 수평, 수직이 변경될때 마다 스마일 마크가 움직이는 것을 볼수 있습니다.