Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo mostrar un icono de dispositivo (aplicaciones de la Tienda Windows con JavaScript and HTML)

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 Visual Studio 11 Express

Abre una instancia de Microsoft Visual Studio Express 2012 for Windows 8.

Paso 2: crear un 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.

 

 

Mostrar:
© 2018 Microsoft