How to display a device icon (HTML)

Article
08/31/2015

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 Microsoft Visual Studio

Open an instance of Microsoft Visual Studio.

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.

<!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.


// 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.


(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.

Share via