Guida introduttiva: Recupero di un'immagine da una fotocamera con 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 ]
In questa esercitazione viene descritto come accedere agli archivi rimovibili quando il dispositivo di archiviazione è collegato, gestendo gli eventi AutoPlay.
Obiettivo: Imparerai ad accedere agli archivi rimovibili gestendo gli eventi di attivazione AutoPlay nella tua app.
Prerequisiti
È necessaria una conoscenza di JavaScript e HTML.
Devi avere a disposizione una fotocamera o un dispositivo di memoria della fotocamera che puoi collegare al computer per attivare un evento AutoPlay. Il dispositivo deve contenere file immagine poiché questa app trova la prima immagine disponibile nel dispositivo e la visualizza.
Tempo per il completamento: 20 minuti.
Istruzioni
1. Aprire Microsoft Visual Studio
Apri un'istanza di Visual Studio.
2. Creare un nuovo progetto
Nella finestra di dialogo Nuovo progetto scegli un'applicazione vuota dai tipi di progetto JavaScript.
3. Dichiarare la funzionalità Archivi rimovibili
Fai doppio clic su package.appxmanifest in Esplora soluzioni. Fai clic sulla scheda Funzionalità. Seleziona Archivi rimovibili nell'elenco Funzionalità.
4. Dichiarare i tipi di file
- Nella scheda Dichiarazioni scegli Associazioni tipi file da Dichiarazioni disponibili e fai clic su Aggiungi.
- In Proprietà imposta la proprietà Name su image.
- Nella casella Tipi file supportati aggiungi l'estensione .gif come tipo di file supportato immettendo .gif nel campo FileType.
- Aggiungi altri due tipi di file supportati per le estensioni jpg e png facendo clic su Aggiungi nuovo e quindi compilando il campo FileType.
5. Dichiarare il contratto Contenuto AutoPlay
- Nella scheda Dichiarazioni scegli Contenuto AutoPlay da Dichiarazioni disponibili e fai clic su Aggiungi.
- In Proprietà imposta la proprietà ContentEvent su CameraMemoryOnArrival, la proprietà Verb su storageDevice e la proprietà ActionDisplayName sul nome descrittivo da visualizzare per l'app quando viene avviata all'attivazione dell'evento AutoPlay.
6. Dichiarare il contratto Dispositivo AutoPlay
- Nella scheda Dichiarazioni scegli Dispositivo AutoPlay da Dichiarazioni disponibili e fai clic su Aggiungi.
- In Proprietà imposta la proprietà DeviceEvent su WPD\ImageSource, la proprietà Verb su wpdImage e la proprietà ActionDisplayName sul nome descrittivo da visualizzare per l'app quando viene avviata all'attivazione dell'evento AutoPlay.
7. Inserire il codice HTML e JavaScript
Apri il file Default.html e copia al suo interno il codice seguente, sostituendo il contenuto originale.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using Autoplay</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initialize, false);
// Add a handler for the activated event so it can
// do something when activated via AutoPlay.
Windows.UI.WebUI.WebUIApplication.addEventListener(
"activated", activatedHandler);
function activatedHandler(eventArgs) {
if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.file) {
// clear any device id so we always use
// the latest connected device
g_autoPlayDeviceId = null;
g_autoPlayDrive = eventArgs.files[0];
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.device) {
// clear any saved drive so we always use
// the latest connected device
g_autoPlayDrive = null;
g_autoPlayDeviceId = eventArgs.deviceInformationId;
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else {
document.getElementById("status").innerHTML =
"Not activated using Autoplay";
document.getElementById("btn").disabled = true;
}
}
function initialize() {
document.getElementById("btn").addEventListener(
"click", getFirstImageOnAutoPlayStorage, false);
}
function getFirstImageOnAutoPlayStorage() {
document.getElementById("output").innerHTML = "";
if (g_autoPlayDrive) {
document.getElementById("status").innerHTML =
"Activated using Drive Autoplay";
// Drive Autoplay returns a Windows.Storage.StorageFolder
// representing the storage drive
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
g_autoPlayDrive.createFileQueryWithOptions(queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
g_autoPlayDrive.name + "': " + e.message;
});
} else if (g_autoPlayDeviceId) {
document.getElementById("output").innerHTML =
"Activated using Device Autoplay";
// Device Autoplay returns a device ID. We take an extra step to
// convert that identifier into a Windows.Storage.StorageFolder.
var autoplayStorageDevice;
try {
autoplayStorageDevice =
Windows.Devices.Portable.StorageDevice.fromId(g_autoPlayDeviceId);
} catch (e) {
document.getElementById("output").innerHTML =
e.message;
}
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
autoplayStorageDevice.createFileQueryWithOptions(queryOptions);
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
autoplayStorageDevice.name + "': " + e.message;
});
} else {
document.getElementById("output").innerHTML =
"Not activated via AutoPlay.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// 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("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage";
}
}
</script>
</head>
<body>
<div id="imageNameHolder"></div>
<img id="imageHolder" alt="image holder" src="" width="256"/><br />
<div id="output"></div>
<div id="status"></div>
<button class="action" id="btn">Get Image File</button>
</body>
</html>
8. Testare l'applicazione
- Scegli Compila soluzione dal menu Compila per compilare la soluzione.
- Scegli Distribuisci soluzione dal menu Compila per distribuire la soluzione.
- Ora l'app dovrebbe essere registrata come gestore AutoPlay. Collega una fotocamera o la memoria di una fotocamera contenente alcuni file immagine. Scegli di consentire all'applicazione di aprirsi quando il dispositivo viene rilevato. La prima immagine nel dispositivo dovrebbe essere visualizzata nell'app.
Nota Se ricevi un errore, procedi come segue:
- Verifica di avere abilitato l'accesso all'archivio rimovibile aprendo package.appxmanifest in Esplora soluzioni e controllando che l'opzione Archivio rimovibile nella scheda Funzionalità sia selezionata.
Riepilogo
Hai appena registrato un gestore AutoPlay che viene avviato quando una fotocamera dotata di archivio o il dispositivo di memoria di una fotocamera viene collegato.