Comment afficher une icône de périphérique (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette section vous montre comment afficher une icône de périphérique.

Ce que vous devez savoir

Technologies

Windows Runtime

Prérequis

Vous devez être familiarisé avec HTML et JavaScript.

Instructions

Étape 1: Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

Étape 2: Créer un projet

Dans la boîte de dialogue Nouveau projet, à partir de JavaScript > types de projets applications du Windows Store , cliquez sur Application vide.

Étape 3: insérer le code HTML

Ouvrez Default.html et remplacez le contenu du fichier par ce 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>

Étape 4: insérer une fonction pour afficher une icône

Ouvrez Default.js et remplacez le contenu avec le code suivant.


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

Remarque Vous pouvez également remplacer l’appel à getThumbnailAsync par un appel à getGlyphThumbnailAsync, pour obtenir un glyphe pour le périphérique.

Étape 5: ajouter du code pour énumérer un périphérique

Ajoutez du code à votre fichier Default.js qui énumère le périphérique pour lequel vous voulez afficher l’icône.
Passez l’objet DeviceInformation pour le périphérique à la fonction getImage() que vous avez définie.

Les périphériques disponibles dotés d’icônes à afficher dépendront de votre système. Ce code identifie la première caméra, si une caméra est disponible, et affiche son image.


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

Remarques

La taille de l’icône retournée est 256 x 256 pixels.

Utilisez getThumbnailAsync pour obtenir une icône photoréaliste pour le périphérique. Utilisez getGlyphThumbnailAsync pour obtenir un glyphe pour le périphérique.

Partager via