빠른 시작: 경사계로 피치, 롤 및 요 판단(HTML)

아티클
12/11/2015

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

경사계를 사용하면 JavaScript로 작성된 앱에서 피치, 롤 및 편주를 판단할 수 있습니다. 일반적인 한 예로, 경사계의 세 축(X, Y 및 Z)을 항공기의 승강키, 보조 날개 및 방향타 입력에 매핑하는 비행 시뮬레이터가 있습니다.

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

사전 요구 사항

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 inclinometer;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onDataChanged(e) {
        var reading = e.reading;
        var pitch = reading.pitchDegrees;
        var roll = reading.rollDegrees;
        var yaw = reading.yawDegrees;

        id('txtXAngle').innerHTML = pitch.toFixed(2);
        id('txtYAngle').innerHTML = roll.toFixed(2);
        id('txtZAngle').innerHTML = yaw.toFixed(2);
    }

    var app = WinJS.Application;

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

            // Choose a report interval supported by the sensor
            var minimumReportInterval = inclinometer.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            inclinometer.reportInterval = reportInterval;

            // Set the event handler
            inclinometer.addEventListener("readingchanged", onDataChanged);

            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. 앱에 대한 HTML 추가

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


    <div class="item" id="scenario1Output">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </div>

5. 앱 빌드, 배포 및 실행

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

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

6. 앱 중지

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

요약 및 다음 단계

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

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

inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

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

inclinometer.addEventListener("readingchanged", onDataChanged);

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

   <div class="item" id="scenario1Output">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </div>

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

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

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

예를 들어 비행 시뮬레이터 앱을 작성할 경우 Z축 값을 사용하여 방향 조정기 입력을 변경하고, X축 값을 사용하여 엘리베이터 입력을 변경하고, Y축 값을 사용하여 보조 날개 입력을 변경합니다.

다음을 통해 공유