Quickstart: Register an app for an AutoPlay device (HTML)

Article
08/31/2015

You can register apps as options for AutoPlay device events. AutoPlay device events are raised when a device is connected to a PC.

Here we show how to identify your app as an AutoPlay option when a camera is connected to a PC. The app registers as a handler for the WPD\ImageSourceAutoPlay event. This is a common event that the Windows Portable Device (WPD) system raises when cameras and other imaging devices notify it that they are an ImageSource using MTP. For more information, see Windows Portable Devices.

If you are a device manufacturer and you want to associate your Windows Store device app as an AutoPlay handler for your device, you can identify that app in the device metadata. If you associate your app as the auto-installed app for the experience ID of your device, the operating system will discover the association when your device is connected to a PC. If the PC doesn't have your app installed, the operating system will automatically download and install your app. AutoPlay will present your app as the first option for the user to choose as the handler for your device. For more info, see AutoPlay for Windows Store device apps.

Objective: Create an app to handle an AutoPlay device event.

Prerequisites

Microsoft Visual Studio

Instructions

1. Create a new project and add AutoPlay declarations

Open Visual Studio and select New Project from the File menu. In the Javascript section, select Windows Store. Name the app AutoPlayDevice_Camera and click OK.
Open the Package.appxmanifest file and select the Capabilities tab. Select the Removable Storage capability. This gives the app access to the data on the camera as a removable storage volume device.
In the manifest file, select the Declarations tab. In the Available Declarations drop-down list, select AutoPlay Device and click Add. Select the new AutoPlay Device item that was added to the Supported Declarations list.
An AutoPlay Device declaration identifies your app as an option when AutoPlay raises a device event for known events.

In the Launch Actions section, enter the following values for the first launch action.

Setting Value

Verb show

Action Display Name Show Pictures

Content Event WPD\ImageSource

The Action Display Name setting identifies the string that AutoPlay displays for your app. The Verb setting identifies a value that is passed to your app for the selected option. You can specify multiple launch actions for an AutoPlay event and use the Verb setting to determine which option a user has selected for your app. You can tell which option the user selected by checking the verb property of the startup event arguments passed to your app. You can use any value for the Verb setting except, open, which is reserved. For an example of using multiple verbs in a single app, see Quickstart: Register an app for AutoPlay content.
In the Available Declarations drop-down list, select File Type Associations and click Add. In the Properties of the new File Type Associations declaration, set the Display Name field to Show Images from Camera and the Name field to camera_association1. In the Supported File Types section, click Add New. Set the File Type field to .jpg. In the Supported File Types section, click Add New again. Set the File Type field of the new file association to .png. For content events, AutoPlay filters out any file types that are not explicitly associated with your app.
Save and close the manifest file.

Setting	Value
Verb	show
Action Display Name	Show Pictures
Content Event	WPD\ImageSource

2. Add HTML UI

Open the Default.html file and place the following HTML in the <body> section.

<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. Add activation code

The code in this step references the camera as a StorageDevice by passing the device information Id of the camera to the fromId method. The device information Id of the camera is obtained from the detail.deviceInformationId property of the arguments passed to the onactivated event handler.

Open the js folder. Open the Default.js file and replace the default onactivated function with the following code.

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. Add code to display device information

You can obtain information about the camera from the properties of the StorageDevice class. The code in this step displays the device name and other information to the user when the app runs. The code then calls the getImages method, which you will add in the next step, to display thumbnails of the images stored on the camera.

In the Default.js file, add the following code after the onactivated function.

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. Add code to display images

The code in this step displays thumbnails of the images stored on the camera. The code makes asynchronous calls to the camera to get the thumbnail image. However, the next asynchronous call doesn't occur until the previous asynchronous call completes. This ensures that only one request is made to the camera at a time.

In the Default.js file, add the following code after the showImages function.

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. Build and run the app

Press F5 to build and deploy the app (in debug mode).
To run your app, connect a camera to your PC. Then, select the app from the AutoPlay list of options. Note Not all cameras advertise for the WPD\ImageSource AutoPlay device event.

Summary

In this tutorial, you created an app that displays image files from a camera device. You registered the app for the AutoPlay WPD\ImageSource device event.

Auto-launching with AutoPlay