So wird’s gemacht: Anzeigen von Gerätesymbolen (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema erfahren Sie, wie Sie ein Gerätesymbol anzeigen können.

Wissenswertes

Technologien

Windows Runtime

Voraussetzungen

Sie sollten mit HTML und JavaScript vertraut sein.

Anweisungen

Schritt 1: Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

Schritt 2: Erstellen eines neuen Projekts

Klicken Sie im Dialogfeld Neues Projekt unter JavaScript > Windows Store-Apps auf die Option Leere Anwendung.

Schritt 3: Einfügen des HTML-Codes

Öffnen Sie "Default.html", und ersetzen Sie den Inhalt der Datei mit dem folgenden 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>

Schritt 4: Einfügen einer Funktion zum Anzeigen eines Symbols

Öffnen Sie "Default.js", und ersetzen Sie den Inhalt der Datei mit dem folgenden 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;
    }
                
}

Hinweis Alternativ können Sie statt der Methode getThumbnailAsync die Methode getGlyphThumbnailAsync aufrufen, um für das Gerät eine Glyphe abzurufen.

Schritt 5: Hinzufügen von Code zum Auflisten des Geräts

Fügen Sie Ihrer Default.js-Datei Code hinzu, in dem das Gerät, für das ein Symbol angezeigt werden soll, aufgelistet wird.
Übergeben Sie das DeviceInformation-Objekt für das Gerät an die Funktion "getImage()", die Sie definiert haben.

Ob ein Symbol für ein Gerät angezeigt werden kann, ist vom System abhängig. Dieser Code sucht nach der ersten Kamera, sofern verfügbar, und zeigt ein entsprechendes Symbol für die Kamera an.


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

Anmerkungen

Die Größe des zurückgegebenen Symbols liegt bei 256 x 256 Pixeln.

Verwenden Sie die Methode getThumbnailAsync, um ein fotorealistisches Symbol für das Gerät abzurufen. Verwenden Sie die Methode getGlyphThumbnailAsync, um eine Glyphe für das Gerät abzurufen.

Freigeben über