Guida introduttiva: Registrare un'app per un dispositivo AutoPlay (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Puoi registrare le app come opzioni per eventi dispositivo AutoPlay. Gli eventi dispositivo AutoPlay vengono generati quando un dispositivo viene collegato a un PC.
In questo articolo illustriamo come identificare l'app come opzione di AutoPlay quando una fotocamera viene collegata a un PC. L'app si registra come gestore per l'evento WPD\ImageSource di AutoPlay. Si tratta di un evento comune generato dal sistema WPD (Windows Portable Device) quando una fotocamera o un altro dispositivo di acquisizione immagini si notifica come ImageSource mediante MTP. Per altre informazioni, vedi Dispositivi portatili Windows.
Se sei un produttore di dispositivi e vuoi associare un'app di Windows Store per dispositivo come gestore AutoPlay per il tuo dispositivo, puoi identificare l'app nei metadati del dispositivo. Se associ l'app come app a installazione automatica per l'ID esperienza del dispositivo, il sistema operativo individuerà l'associazione quando il dispositivo viene collegato a un PC. Se l'app non è installata nel PC, il sistema operativo la scaricherà e installerà automaticamente. AutoPlay presenterà l'app all'utente come la prima scelta tra i gestori disponibili per il dispositivo. Per altre informazioni, vedi AutoPlay per le app di Windows Store per dispositivo.
Obiettivo: Crea un'app per gestire un evento dispositivo di AutoPlay.
Prerequisiti
Microsoft Visual Studio
Istruzioni
1. Crea un nuovo progetto e aggiungi dichiarazioni di AutoPlay
Apri Visual Studio e scegli Nuovo progetto dal menu File. Nella sezione Javascript seleziona Windows Store. Assegna all'app il nome AutoPlayDevice_Camera e fai clic su OK.
Apri il file Package.appxmanifest e fai clic sulla scheda Funzionalità. Seleziona la funzionalità Archivi rimovibili. In questo modo l'app potrà accedere ai dati memorizzati nella fotocamera come un dispositivo del volume di archiviazione rimovibile.
Nel file manifesto seleziona la scheda Dichiarazioni. Seleziona Dispositivo AutoPlay nell'elenco a discesa Dichiarazioni disponibili, quindi fai clic su Aggiungi. Seleziona la nuova voce Dispositivo AutoPlay aggiunta all'elenco Dichiarazioni supportate.
Una dichiarazione Dispositivo AutoPlay identifica l'app come opzione quando AutoPlay genera un evento dispositivo per eventi noti.
Nella sezione Azioni di avvio immetti i seguenti valori per la prima azione di avvio.
Impostazione Valore Verbo show Nome visualizzato azione Mostra immagini Evento contenuto WPD\ImageSource L'impostazione Nome visualizzato azione identifica la stringa visualizzata da AutoPlay per la tua app. L'impostazione Verbo identifica un valore che viene passato all'app per l'opzione selezionata. Puoi specificare più azioni di avvio per un evento AutoPlay e usare l'impostazione Verbo per determinare quale opzione ha selezionato un utente per la tua app. Puoi verificare l'azione che l'utente ha selezionato controllando la proprietà verb degli argomenti dell'evento di avvio passati alla tua app. Puoi usare qualsiasi valore per l'impostazione Verbo eccetto open, che è riservata. Per un esempio di uso di più verbi in una singola app, vedi Guida introduttiva: Registrare un'app per contenuto AutoPlay.
Seleziona Associazione tipi file nell'elenco a discesa Dichiarazioni disponibili e fai clic su Aggiungi. Nelle Proprietà della nuova dichiarazione Associazioni tipi file imposta il campo Nome visualizzato su Show Images from Camera e il campo Nome su camera_association1. Nella sezione Tipi di file supportati fai clic su Aggiungi nuovo. Imposta il campo Tipo di file su .jpg. Nella sezione Tipi di file supportati fai di nuovo clic su Aggiungi nuovo. Imposta il campo Tipo di file della nuova associazione di file su .png. Per quanto riguarda gli eventi contenuto, AutoPlay filtra ed esclude tutti i tipi di file non esplicitamente associati alla tua app.
Salva e chiudi il file manifesto.
2. Aggiungi l'interfaccia utente HTML
Apri il file Default.html e aggiungi il codice HTML seguente alla sezione <body>.
<table> <tr> <td colspan="2">Device Information</td> </tr> <tr> <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td> <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td> </tr> </table>
3. Aggiungere il codice di attivazione
Il codice di questo passaggio fa riferimento alla fotocamera come a un oggetto StorageDevice passando l'ID informazioni dispositivo della fotocamera al metodo fromId. L'ID informazioni dispositivo della fotocamera si ottiene dalla proprietà detail.deviceInformationId degli argomenti passati al gestore dell'evento onactivated.
Apri la cartella js. Apri il file Default.js e sostituisci la funzione predefinita onactivated con il codice seguente.
app.onactivated = function (args) { if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) { args.setPromise(WinJS.UI.processAll()); showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId)); } };
4. Aggiungere il codice per la visualizzazione delle informazioni sul dispositivo
Puoi ottenere le informazioni sulla fotocamera dalle proprietà della classe StorageDevice. Il codice di questo passaggio visualizza all'utente il nome del dispositivo e altre informazioni mentre l'app è in esecuzione. Il codice chiama quindi il metodo getImages, che dovrai aggiungere nel prossimo passaggio, per visualizzare anteprime delle immagini memorizzate nella fotocamera.
Nel file Default.js aggiungi il codice seguente dopo la funzione onactivated.
var imagesDiv; function showImages(folder) { var infoDiv = document.getElementById("deviceInfoDiv"); imagesDiv = document.getElementById("picturesDiv"); infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" + "Display Type = " + folder.displayType + "<br />" + "FolderRelativeId = " + folder.folderRelativeId + "<br />"; getImages(folder); }
5. Aggiungere il codice per la visualizzazione delle immagini
Il codice di questo passaggio visualizza le anteprime delle immagini memorizzate nella fotocamera. Il codice effettua chiamate asincrone alla fotocamera per recuperare l'anteprima dell'immagine. Tuttavia, la chiamata asincrona successiva non avviene finché non viene completata quella precedente. In questo modo siamo sicuri che alla fotocamera verrà inviata una sola richiesta alla volta.
Nel file Default.js aggiungi il codice seguente dopo la funzione showImages.
function getImages(folder) { // Find images in the specified folder folder.getFilesAsync().done( function (files) { files.forEach(function (file) { file.getThumbnailAsync( Windows.Storage.FileProperties.ThumbnailMode.singleItem, 100, Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done( function (thumbnail) { // Create an img element to display on the page var element = document.createElement("img"); element.src = window.URL.createObjectURL(thumbnail, { oneTimeOnly: true }); element.style.height = thumbnail.originalHeight; element.style.width = thumbnail.originalWidth; element.alt = file.name; imagesDiv.appendChild(element); } ); }) // Find images in subfolders folder.getFoldersAsync().done( function (folders) { folders.forEach(function (f) { getImages(f); }) }); }); }
6. Compilare ed eseguire l'app
- Premi F5 per compilare e distribuire l'app in modalità debug.
- Per eseguire l'app, collega una fotocamera al PC. Seleziona quindi l'app dall'elenco di opzioni AutoPlay. Nota Non tutte le fotocamere annunciano l'evento dispositivo WPD\ImageSource di AutoPlay.
Riepilogo
In questa esercitazione hai creato un'app che visualizza file di immagine da una fotocamera. Hai registrato l'app per l'evento dispositivo WPD\ImageSource di AutoPlay.