(Javascript) 스마트폰 자이로 센서를 이용한 지진계 app

핵심 기능

  • Device motion api : iOS, Android 공통 (단, iOS 13+ 버전에서는 Permission 획득 필요)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // devicemotion 이벤트 시작
    window.addEventListener("devicemotion", handleMotion);

    // Callback 함수 정의
    function handleMotion(event) {
      x = Math.round(event.acceleration.x);
      y = Math.round(event.acceleration.y);
      z = Math.round(event.acceleration.z);
    }

  • Ploty extend trace

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // - x, y, z : 각 축별 측정값
    // - logX, logY, logZ : 측정값 누적 저장 변수
    // - measureInterval : 측정 간격 (100 ms로 설정)

    interval = setInterval(function () {
      Plotly.extendTraces(
        "graph",
        {
          y: [[x], [y], [z]],
        },
        [0, 1, 2]
      );
      logX = [...logX, x];
      logY = [...logY, y];
      logZ = [...logZ, z];
    }, measureInterval);

  • Demo site : https://incredible-pavlova-4a5d8a.netlify.app/

  • Source code : https://github.com/chopthal/web_gyro/

References