Como exibir um ícone de dispositivo (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este tópico mostra como exibir um ícone de dispositivo.

O que você precisa saber

Tecnologias

Windows Runtime

Pré-requisitos

Você deve ser familiarizado com HTML e JavaScript.

Instruções

Etapa 1: Abrir o Microsoft Visual Studio

Abra uma instância do Visual Studio.

Etapa 2: Criar um novo projeto

Na caixa de diálogo Novo Projeto, nos tipos de projetos JavaScript > Aplicativos da Windows Store, clique em Aplicativo em Branco.

Etapa 3: Insira o HTML

Abra Default.html e substitua o conteúdo do arquivo com esse 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>

Etapa 4: Inserir uma função para exibir um ícone

Abra Default.js e substitua o conteúdo com esse 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;
    }
                
}

Observação Como alternativa, você pode substituir a chamada a getThumbnailAsync por uma chamada a getGlyphThumbnailAsync, para obter um glifo para o dispositivo.

Etapa 5: Adicionar código para enumerar um dispositivo

Adicione código ao arquivo Default.js que enumera o dispositivo para o qual você deseja mostrar o ícone.
Passe o objeto DeviceInformation do dispositivo para a função getImage() que você definiu.

Os dispositivos disponíveis com ícones a serem exibidos dependem do seu sistema. Esse código encontra a primeira câmera, se estiver disponível, e exibe a imagem dele.


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

Comentários

O tamanho do ícone retornado é de 256 x 256 pixels.

Use getThumbnailAsync para obter um ícone realista para o dispositivo. Use getGlyphThumbnailAsync para obter um glifo para o dispositivo.

Partilhar via