Quick Start for Windows Phone 8.1 HTML5/JScript

Create a new project

To create a new project, follow these steps:

  1. In the Visual Studio, select File > New > Project...
  2. In the New Project window, select Other Languages> JavaScript > Blank App (Windows Phone).
  3. Press OK.

A project has now been created for you.

Include libraries to your project

Before starting to use the functionality provided by the SDK, the Nokia Imaging SDK libraries must be added to the project. For detailed instructions, please see the chapter Adding libraries to the project . Please remember to remove the Any CPU configuration.

Define your HTML5 UI

The UI we will build for this tutorial is very simple. There will be two HTML image controls and a button. One HTML image control will display the original image, and the other will display the filtered image.

Here are the steps to accomplish this:

  1. Open the Package.appxmanifest, select the Application tab, and check the boxes for Landscape and Landscape-flipped under Supported rotations.
  2. Open the Capabilities tab and check the box for Pictures Library capability.
  3. In the Visual Studio's Solution Explorer, open the default.html.
  4. Let's now add all the controls that make our UI. In the HTML view, search for the body element.
<body class="phone">
    <p>Content goes here</p>
</body>

Replace the body and all its content with this code:

<body>
    <div id="contentGrid" >
        <div id="original">
            <img id="originalPhoto" src="" width="167" height="100" />
        </div>
        <div id="filtered">
            <img id="filteredPhoto" src="" width="100%" height="100%" />
        </div>
        <div id="buttons">
            <input id="loadButton" type="button" value="Pick an image" />
        </div>
    </div>
</body>
The only noteworthy thing in the code above is that we define the two images, filteredPhoto and originalPhoto, without specifying any source for the image to display. We will load the images later; code examples will also be given in the chapters below.

Pick an image from the camera roll

Next, open the default.css in the css folder. Replace the content with the following:
body {
}
#contentGrid {
    display: -ms-grid; 
    -ms-grid-rows: 85% 15%;
    height: 100%;
    width: 100%;    
    background-color: #1e90ff;
 }

#original {
    -ms-grid-row: 1;
    margin: 12px 0px 0px 12px;
    z-index: 99;
}

#filtered {
    -ms-grid-row: 1;
}

#buttons {
    -ms-grid-row: 2;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
}

#loadButton {
    margin-left: 10px;
}

The code block above is for setting the layout of the screen.

For picking the image, we will use the FileOpenPicker which is part of the Windows Phone 8.1 SDK. You should note that this code is different for Windows and Windows Phone, as in Windows you would use pickSingleFileAsync and in Windows Phone you need to use pickSingleFileAndContinue method. Open the default.js file inside the js folder and replace the app.onactivated with the following:

app.onactivated = function (args)
{
    if (args.detail.kind === activation.ActivationKind.launch)
    {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());

        var getPhotoButton = document.getElementById("loadButton");
        getPhotoButton.addEventListener("click", getPhotoButtonClickHandler, false);
    }
    else if (args.detail.kind == activation.ActivationKind.pickFileContinuation)
    {
        var file = args.detail.detail[0].files[0];
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("originalPhoto").src = imageBlob;
        loadImage(file);
    }
};

pickSingleFileAndContinue will launch the file picker. When the user has chosen a photo, control is returned to the application through the app.onactivated method, where we check if the activating was done through FilePicker by checking the parameter detail type against ActivationKind.pickFileContinuation. There we set the originalPhoto to show the image we just loaded, and call the loadImage method which will have the Imaging SDK specific code.

To open the FileOpenPicker we need to add the following method to the default.js file:

function getPhotoButtonClickHandler(args) 
    {
        var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
        openPicker.suggestedStartLocation =
            Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
        openPicker.viewMode =
            Windows.Storage.Pickers.PickerViewMode.thumbnail;

        openPicker.fileTypeFilter.clear();
        openPicker.fileTypeFilter.append(".bmp");
        openPicker.fileTypeFilter.append(".png");
        openPicker.fileTypeFilter.append(".jpeg");
        openPicker.fileTypeFilter.append(".jpg");

        openPicker.pickSingleFileAndContinue();
    }

Use FilterEffect to decode an image with an effect

Finally, we are ready to use the Nokia Imaging SDK!

We have now access to the file that the user selected, and we need to implement the filter and rendering to the image. In this tutorial we apply Cartoon filter and Flip filter to the image, then save it and display the resulting image in HTML img control. The complete code of the loadImage becomes:

 function loadImage(file) {
        if (file)
        {
            var cartoonFilter = new Nokia.Graphics.Imaging.CartoonFilter();
            var flipFilter = new Nokia.Graphics.Imaging.FlipFilter(Nokia.Graphics.Imaging.FlipMode.horizontal);
            var imageStream = new Nokia.Graphics.Imaging.StorageFileImageSource(file);
            var filterEffect = new Nokia.Graphics.Imaging.FilterEffect(imageStream);
            var list = new Array();

            list[0] = flipFilter;
            list[1] = cartoonFilter;
            filterEffect.filters = list;

            var renderer = new Nokia.Graphics.Imaging.JpegRenderer(filterEffect);

            // Create the filtered file and save it
            renderer.renderAsync().then(function (buffer) {
                Windows.Storage.KnownFolders.picturesLibrary.createFileAsync("cartoon.jpg", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (storagefile) {
                    storagefile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (storageStream) {
                        storageStream.writeAsync(buffer).then(function () {
                            storageStream.close();
                            var imageBlob = URL.createObjectURL(storagefile, { oneTimeOnly: true });
                            document.getElementById("filteredPhoto").src = imageBlob;
                        });
                    });
                });
            });
        }
    }

We first create the filters and set the image stream from the selected image, and create a list of filters which we pass to the JpegRenderer, after which we will save it and update the screen with the filtered image. The JpegRenderer takes the FilterEffect as a parameter to apply to the final image. After the rendering is done, we use createFileAsync method to save the image as cartoon.jpg to the picture library and finally load it to the screen.

Running the application

To run the application:

  1. Select either "Device" or "Emulator", "Debug" with the selectors in the Visual Studio's standard toolbar.
  2. Build the application.
  3. Connect a device (if you are deploying it on device) and run.
  4. Select an image using "Pick an image" button.
  5. You should see the main page containing the decoded image with a Cartoon style filter effect added.
Tip:

If you are testing an app on an emulator, you may experience an emulator bug. If your app can't see any content in the pictures library, it is likely a result of a bug in the emulator.

If you need to access the in-built images, you need to open the photos app at least once before you begin testing your application. Once you browse through the photos, the content will become available to your app.

Get the complete source

The complete code of the tutorial can be found here.


Last updated 23 April 2014

Back to top

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×