Compartir a través de

Cómo mostrar un icono de dispositivo (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

En este tema verás cómo mostrar un icono de dispositivo.

Lo que debes saber

Tecnologías

  • Windows Runtime

Requisitos previos

  • Debes tener conocimientos de HTML y JavaScript.

Instrucciones

Paso 1: Abrir Microsoft Visual Studio

Abre una instancia de Visual Studio.

Paso 2: Crear un nuevo proyecto

En el cuadro de diálogo Nuevo proyecto, en los tipos de proyecto JavaScript > Aplicaciones de la Tienda Windows, haz clic en Aplicación vacía.

Paso 3: insertar el código HTML

Abre Default.html y reemplaza el contenido del archivo con este código.

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

Paso 4: insertar una función para mostrar un icono

Abre Default.js y reemplaza el contenido con el siguiente código.


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

Nota  Como alternativa, puedes sustituir la llamada a getThumbnailAsync por una llamada a getGlyphThumbnailAsync para obtener un glifo para el dispositivo.

 

Paso 5: agregar código para enumerar un dispositivo

  1. Agrega código al archivo Default.js que enumere el dispositivo del que quieres mostrar el icono.
  2. Pasa el objeto DeviceInformation del dispositivo a la función getImage() que definiste.

Los dispositivos disponibles con iconos para mostrar dependerán del sistema. Este código encuentra la primera cámara, si la hay, y muestra su imagen.


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

Observaciones

El tamaño del icono devuelto es de 256 x 256 píxeles.

Usa getThumbnailAsync para obtener un icono fotorrealista del dispositivo. Usa getGlyphThumbnailAsync para obtener un glifo del dispositivo.