빠른 시작: 가속도계를 사용한 사용자 동작에 대한 응답(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

가속도계를 사용하면 JavaScript로 작성된 앱에서 사용자의 동작에 응답할 수 있습니다. 가속도계를 기반으로 하는 앱은 일반적으로 입력에 하나 또는 두 개의 축만 사용합니다. 하지만 다른 입력 소스로 흔들기 이벤트를 사용할 수도 있습니다.

목표: 이 빠른 시작 문서를 완료하면 가속도계를 사용하여 동작 변화를 탐지하는 방법을 이해하게 됩니다.

사전 요구 사항

HTML, JavaScript 및 이벤트에 대해 익숙해야 합니다.

사용하는 장치 또는 에뮬레이터가 가속도계를 지원해야 합니다.

완료 시간: 15 분.

지침

1. Microsoft Visual Studio 열기

Visual Studio의 인스턴스를 엽니다.

2. 새 프로젝트 만들기

JavaScript/스토어 앱 프로젝트 유형에서 빈 앱을 선택하여 새 프로젝트를 만듭니다.

3. JavaScript 코드 바꾸기

프로젝트의 default.js 파일을 열고 기존 코드를 다음 코드로 바꿉니다.

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var accelerometer;

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (accelerometer == null) {
                accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

                // Establish the report interval
                var minimumReportInterval = accelerometer.minimumReportInterval;
                var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                accelerometer.reportInterval = reportInterval;

                // Establish the event handler
                accelerometer.addEventListener("readingchanged", onDataChanged);
            }
            WinJS.UI.processAll();
        }
    };

    // This function is called each time an accelerometer event
    // is fired by the driver.
    function onDataChanged(e) {
        var reading = e.reading;
        var accelX = reading.accelerationX;
        var accelY = reading.accelerationY;
        var accelZ = reading.accelerationZ;

        id('eventOutputX').innerHTML = accelX.toFixed(2);
        id('eventOutputY').innerHTML = accelY.toFixed(2);
        id('eventOutputZ').innerHTML = accelZ.toFixed(2);
    }

    // This function is invoked within onDataChanged to
    // retrieve the given identifier from the HTML document.
    function id(elementId) {
        return document.getElementById(elementId);
    }

    app.start();
})();

4. 앱에 대한 HTML 추가

Windows 및 Windows Phone 프로젝트에 대한 default.html 파일을 열고 다음 HTML을 파일의 BODY 태그 내부에 복사합니다.


    <div class="item" id="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">no data</a>
    <br />
    </div>

5. 앱 빌드, 배포 및 실행

F5 키를 누르거나 디버그 > 디버깅 시작을 선택하여 앱을 빌드, 배포 및 실행합니다.

앱이 실행 중이면 장치를 이동하거나 에뮬레이터 도구를 사용하여 가속도계 값을 변경할 수 있습니다.

6. 앱 중지

Alt+Tab을 눌러 Visual Studio로 전환합니다.
Shift+F5를 누르거나 디버그 > 디버깅 중지를 선택하여 앱을 중지합니다.

요약 및 다음 단계

앞의 예는 앱에서 가속도계 입력을 통합하기 위해 작성해야 하는 코드의 양이 얼마나 작은지를 보여줍니다.

앱은 onactivated 함수에서 기본 가속도계와 연결합니다. 이는 다음 행에서 수행됩니다.

accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

새 가속도계 데이터는 onDataChanged 함수에서 캡처됩니다. 센서 드라이버는 센서에서 새 데이터를 받을 때마다 이 함수(또는 이벤트 처리기)를 사용하여 이 값을 앱에 전달합니다. 앱은 다음 행에서 이 이벤트 처리기를 등록합니다.

accelerometer.addEventListener("readingchanged", onDataChanged);

이 새로운 값은 아래 표시된 DOM 요소로의 업데이트를 통해 화면에 쓰입니다.

    <div class="item" id="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">no data</a>
    <br />
    </div>

앱은 onactivated 함수 내에서 보고 간격을 설정합니다. 이 코드는 장치에서 지원되는 최소 간격을 검색하여 요청된 16밀리초 간격(약 60Hz 새로 고침 빈도)과 비교합니다. 지원되는 최소 간격이 요청된 간격보다 큰 경우 코드는 값을 최소값으로 설정합니다. 그렇지 않으면 값을 요청된 간격으로 설정합니다.

var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;

단순 앱을 작성하는 경우 다음 단계에서는 일반적으로 가속도계 입력을 그래픽 출력과 통합하는 작업을 수행하게 됩니다.

예를 들어 그래픽 디스플레이를 통해 사용자의 움직임을 보여 주는 만보계를 만들 수 있습니다.