장치 아이콘을 표시하는 방법(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: 장치를 열거하는 코드 추가
- 아이콘을 표시할 장치를 열거하는 Default.js 파일에 코드를 추가합니다.
- 정의한 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를 사용하면 장치의 문자 모양을 가져올 수 있습니다.