How to display a device icon (Windows Store apps using JavaScript and HTML) (Windows)

This topic has not yet been rated - Rate this topic

This topic shows you how to display a device icon.

What you need to know

Technologies

Windows Runtime

Prerequisites

You should be familiar with HTML and JavaScript.

Instructions

Step 1: Open Visual Studio 11 Express

Open an instance of Microsoft Visual Studio Express 2012 for Windows 8.

Step 2: Create a new project

In the New Project dialog box, from the JavaScript > Windows Store apps project types, click Blank Application.

Step 3: Insert the HTML

Open Default.html and replace the contents of the file with this code.

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>

Step 4: Insert a function for displaying an icon

Open Default.js, and replace the contents with the following code.

JavaScript



// 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;
    }
                
}

Note Alternatively you can substitute the call to getThumbnailAsync with a call to getGlyphThumbnailAsync, to get a glyph for the device.

Step 5: Add code to enumerate a device

Add code to your Default.js file that enumerates the device you want to display the icon for.
Pass the DeviceInformation object for the device to the getImage() function that you defined.

The available devices with icons to display will depend on your system. This code finds the first camera, if one is available, and displays the image for it.

JavaScript



(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.";
    }
}

Remarks

The size of the returned icon is 256 x 256 pixels.

Use getThumbnailAsync to get a photorealistic icon for the device. Use getGlyphThumbnailAsync to get a glyph for the device.

Build date: 10/26/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)