Nguyen Pham

Nokia Developer Champion

Pham.nguyen@Hotmail.com

http://phamnguyen.info

Imaging on

Windows Phone

Windows Phone 8 – Imaging on Windows Phone

Microsoft confidential

• Lenses

• Nokia Imaging SDK

• Windows Phone Photo Extensibility

11/5/2013Microsoft confidential3

Lenses

Creating a Lens

• A Lens is a custom camera application which can be

accessed from within the camera application

• An application is flagged as a Lens application by

setting a flag in the manifest and providing icons

that can be used to browse for the Lens when the

camera is in use

• I’ve created a Imagine Cam lens application which I

have registered in this way

Creating a Lens application

• This text must be added to the WMAppManifest.xml file for the application, just after the

<Tokens> section

• There is no GUI for this alteration, you have to edit the XML directly

<Extensions><Extension ExtensionName="Camera_Capture_App"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"TaskID="_default" />

</Extensions>

Adding the Lens Icons

• Three Icons are required, one for each Windows Phone screen size

• WVGA 173 × 173 Assets\Lens.Screen-WVGA.png

• 720p 259 × 259 Assets\Lens.Screen-720p.png

• WXGA 277 × 277 Assets\Lens.Screen-WXGA.png

• They are all placed in the Assets folder of the application

• Use a transparent background to match the Windows Phone color scheme

• You can also create an application that has an auto-upload behaviour for pictures that the

user may take

• The upload behaviour is a “resource intensive” background task

• The application must set the extension shown above and display a settings page where the

user can set authentication and upload options

• This is a background process and therefore might not get to run

Creating an Auto-Uploader for photos

<Extensions><Extension ExtensionName="Photos_Auto_Upload"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"TaskID="_default" />

</Extensions>

Create Rich Media Editing

11/5/2013Microsoft confidential8

<Extensions><Extension ExtensionName="Photos_Rich_Media_Edit"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"TaskID="_default" />

</Extensions>

The navigation URI looks just as you would expect:

/MainPage.xaml?Action=RichMediaEdit&token={2fad1162-7f85-4d6c-bbd6-

aee6f10e501d}

Other Extensions

11/5/2013Microsoft confidential9

<Extensions><Extension ExtensionName="Photos_Extra_Hub"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"

TaskID="_default" /><Extension ExtensionName="Photos_Extra_Share"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"

TaskID="_default" /><Extension ExtensionName="Photos_Extra_Image_Editor"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"

TaskID="_default" /></Extensions>

Override UriMapper

11/5/2013Microsoft confidential10

class UriMapper : UriMapperBase{

public override Uri MapUri(Uri uri){

Uri mappedUri = uri;

string url = uri.ToString();if (url.Contains("ViewfinderLaunch")){

mappedUri = new Uri("/Pages/CamPage.xaml", UriKind.Relative);}else if (url.Contains("RichMediaEdit") || url.Contains("ShareContent") || url.Contains("EditPhotoContent")){

string photoUrl = url.Replace("CamPage", "PhotoPage").Replace("FileId", "token");mappedUri = new Uri(photoUrl, UriKind.Relative);

}

return mappedUri;}

}

Code in contructor of app class:RootFrame.UriMapper = new Helpers.UriMapper();

11/5/2013Microsoft confidential11

11/5/2013Microsoft confidential12

Nokia Imaging

SDK

Nokia Imaging SDK

• Early Beta version, makes some of the technologies that Nokia uses in its own imaging

applications available to developers

• Provides more than 50 pre-made filters and effects that have been specifically developed

for mobile imaging, with speed and memory performance as key drivers

• The SDK is super-fast, meticulous memory and code optimization

• Allows access to any image data without decoding the whole image

• Apply effects to high resolution images, without worrying about memory budget

Easy to use

• Add a filter to your existing project with just a few lines of C#.

• Support to be called from C++ code.

• The filters can be chained to create more effects

List Of Filter and Effect I

List Of Filter and Effect II

List Of Filter and Effect III

Core concepts

• Provided as a Windows Phone Runtime library

• One of the key benefits of this is that developers can call the

methods of the library from C#, Visual Basic, or C++.

Step 1: Include Nokia Imaging SDK Libraries into your Project

Step 2 : Create EditingSession

Step 3 : Create and add filters to EditingSession

Step 4 : Use asynchronous methods RenderToImageAsync or

RenderToJpegAsync to produce the final processed image

The libraries

• Before starting to use the functionality provided by the Nokia Imaging SDK, the SDK

libraries must be added to the project.

• Two ways to add the libraries are proposed:

• Using the Visual Studio NuGet package manager

• Adding references to the project. For detailed instructions

The libraries (Cont.)

Create EditingSession

• Create an Imaging SDK EditingSession using a compressed or uncompressed image:

• From a Stream (from PhotoChooserTask):

EditingSession session = await CreateEditingSessionAsync(stream);

• From a JPEG in a IBuffer:

EditingSession session = new EditingSession(jpegData);

• From a WriteableBitmap:

EditingSession session = new EditingSession(sourceBitmap);

Create and add filters and effects

• Use FilterFactory to create filters and effects

• Use EditingSession methods to add filters and effects:

session.AddFilter(FilterFactory.CreateCartoonFilter(true));

session.AddFilter(FilterFactory.CreateFogFilter());

• You can also use FilterGroup to add several filters and effects in one call

Produce final processed image

• You can render the processed image to:

• A XAML Image control:

await session.RenderToImageAsync(FilteredImage);

• A WriteableBitmap :

await session.RenderToWriteableBitmapAsync(FilteredBitmap);

• An IBuffer :

IBuffer jpegOut = await session.RenderToJpegAsync();

11/5/201323

Editing-session code

using Nokia.Graphics.Imaging;

using (EditingSession editsession = new EditingSession(inputBuffer))

{

// First add an antique effect

editsession.AddFilter( FilterFactory.CreateAntiqueFilter());

// Then rotate the image

editsession.AddFilter( FilterFactory.CreateFreeRotationFilter(35.0f, RotationScaleMode.FitInside));

// Add more filters here if you want... // Finally, execute the filtering and render to a bitmap await

editsession.RenderToBitmapAsync(outputBuffer);

}

License

Contains functionality provided by the Nokia Imaging SDK.

Copyright © 2013 Nokia Corporation

All rights reserved.

11/5/201325

11/5/2013Microsoft confidential26

Demo

Nokia Project sample

Filter Effects Real-time Filter Filter Explorer

11/5/2013Microsoft confidential28

Imagine Cam

Imagine Cam

Imagine Cam

11/5/201329

Resource

• You found an error in the SDK, have suggestions, need help?

• Nokia Imaging discussion board: http://nokia.ly/DiBoImg

• You have developped an app with the SDK?

• We’d love to hear about it. Tell us by sending a mail at

developerrelations.marketing@nokia.com

• Documentation and code samples

• Imaging in the Lumia Developer’s Library: http://nokia.ly/WP_lib_img

• Nokia Imaging SDK: http://www.developer.nokia.com/imaging

• Windows Phone 7.5 Training Kit : http://www.microsoft.com/en-

us/download/details.aspx?id=28564

• Windows Phone 8 Training kit: http://www.microsoft.com/en-

us/download/details.aspx?id=35777

The information herein is for informational

purposes only an represents the current view of

Microsoft Corporation as of the date of this

presentation. Because Microsoft must respond

to changing market conditions, it should not be

interpreted to be a commitment on the part of

Microsoft, and Microsoft cannot guarantee the

accuracy of any information provided after the

date of this presentation.

© 2012 Microsoft Corporation.

All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION

IN THIS PRESENTATION.

Pham.nguyen@Hotmail.com

http://phamnguyen.info