빠른 시작: 광원 변화에 반응(HTML)

아티클
12/11/2015

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

주변 광원 센서를 사용하면 JavaScript로 작성된 앱에서 광원 변화를 탐지할 수 있습니다.

Windows.Devices.Sensors 네임스페이스에는 앱이 현재 LUX 값 조도를 검색하는 데 사용할 수 있는 LightSensor 개체에 대한 지원이 포함되어 있습니다. LUX 값에 대한 자세한 내용은 MSDN에서 센서 API 설명서를 참조하세요.

목표: 이 빠른 시작을 완료하면 광원 센서를 사용하여 현재 LUX 값 조도를 검색하는 방법을 이해하게 됩니다.

사전 요구 사항

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

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

    // This function is called each time an accelerometer event
    // is fired by the driver.
    function onDataChanged(e) {
        id('eventOutputIlluminance').innerHTML = e.reading.illuminanceInLux.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) {
            if (lightSensor == null) {
                lightSensor = Windows.Devices.Sensors.LightSensor.getDefault();

                // Set the report interval
                var minimumReportInterval = lightSensor.minimumReportInterval;
                var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                lightSensor.reportInterval = reportInterval;

                // Establish the event handler
                lightSensor.addEventListener("readingchanged", onDataChanged);

            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. 앱에 대한 HTML 추가

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


<div class="item" id="scenario1Output">
    Illuminance: <a id="eventOutputIlluminance">no data</a>
</div>

5. 앱 빌드, 배포 및 실행

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

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

6. 앱 중지

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

요약 및 다음 단계

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

이 예에서 새 센서 데이터는 onDataChanged 함수에서 캡처됩니다. 센서 드라이버는 광원 센서 표기 변화를 탐지할 때마다 이 함수(또는 이벤트 처리기)를 사용하여 새 값을 앱에 전달합니다.

    function onDataChanged(e) {
        id('eventOutputIlluminance').innerHTML = e.reading.illuminanceInLux.toFixed(2);
    }

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

<div class="item" id="scenario1Output">
    Illuminance: <a id="eventOutputIlluminance">no data</a>
</div>

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

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

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

예를 들어, 배경색과 전경색 간의 대비를 늘리거나 줄여서 광원 변화에 응답하는 단순 텍스트 뷰어 앱을 만들 수 있습니다.

Share via