장치 아이콘을 표시하는 방법(HTML)

  • 아티클

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

이 항목에서는 장치 아이콘을 표시하는 방법을 보여 줍니다.

알아야 할 사항

기술

  • Windows Runtime

사전 요구 사항

  • HTML과 JavaScript에 익숙해야 합니다.

지침

단계 1: Microsoft Visual Studio 열기

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

단계 2: 새 프로젝트 만들기

새 프로젝트 대화 상자의 JavaScript > Windows 스토어 앱 프로젝트 유형에서 새 응용 프로그램을 클릭합니다.

단계 3: HTML 삽입

Default.html을 열고 파일의 내용을 다음 코드로 바꿉니다.

<!DOCTYPE html>
<html>
<head>
    <title>Display the Device Icon</title>
    <script type="text/javascript" src="/js/default.js"> </script>
</head>
<body>

    <h1>Device Icon</h1>

    <div id="statusMessage"></div>
    // The size of the returned icon is 256 X 256.
    <img id="deviceImage"/>

</body>
</html>

단계 4: 아이콘을 표시하는 함수 삽입

Default.js를 열고 파일의 내용을 다음 코드로 바꿉니다.


// Takes a parameter of type DeviceInformation
// and retrieves a DeviceThumbnail to pass to displayImage().
function getImage (device) {   

    var thumbnail = null;
    if (device){
        device.getThumbnailAsync().then(
            function (thumbnail) {
            // A valid thumbnail is always returned.
                displayImage(thumbnail);
            });
    }                                                                                     
}

function displayImage(imageFile) {
   
    try {
        // Setting 2nd parameter to 'false' cleans up 
        // the URL after first use.
        // We set this because we only need to load the URL
        // into the image tag once.
        document.getElementById("deviceImage").src = 
            window.URL.createObjectURL(imageFile, false);
    } catch (e) {
        document.getElementById("statusMessage").innerHTML = 
            "Could not display image, error: " + e.message;
    }
                
}

참고  또는 getThumbnailAsync 호출을 getGlyphThumbnailAsync 호출로 대체하여 장치의 문자 모양을 가져올 수 있습니다.

 

단계 5: 장치를 열거하는 코드 추가

  1. 아이콘을 표시할 장치를 열거하는 Default.js 파일에 코드를 추가합니다.
  2. 정의한 getImage() 함수에 장치에 대한 DeviceInformation 개체를 전달합니다.

아이콘과 함께 표시할 수 있는 장치는 시스템에 따라 다릅니다. 다음 코드는 먼저 카메라를 찾고 있으면 카메라의 이미지를 표시합니다.


(function() {
    var Enum = Windows.Devices.Enumeration;
    Enum.DeviceInformation.findAllAsync(
        Enum.DeviceClass.videoCapture).then(
                    successCallback 
            );
})();

function successCallback(deviceInformationCollection) {
    var numDevices = deviceInformationCollection.length;
    if (numDevices) {
        getImage(deviceInformationCollection[0]);
    } else {
        document.getElementById("statusMessage").innerHTML =
            "No devices found.";
    }
}

설명

반환되는 아이콘의 크기는 256 x 256픽셀입니다.

getThumbnailAsync를 사용하면 장치의 실사 아이콘을 가져올 수 있고, getGlyphThumbnailAsync를 사용하면 장치의 문자 모양을 가져올 수 있습니다.