LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0

INTRODUCING THE NOKIA IMAGING SDK 1.0

LUMIA APP LABS #18

Berthier Lemieux Technology Wizard @ Nokia

• Native Windows Phone 8 Library, Accessible from C#, VB and C++ Windows Phone 8 Projects

• Includes more then 50 ready to use image processing filters and effects, with various adjustment parameters

• Library doesn’t require special knowledge of image processing algorithms or techniques

• Partial JPEG decoding - using RAJPEG technology, access image data without decoding a whole JPEG image for a fast previews, application of effects, rotation, and cropping of high resolution images.

What is Nokia Imaging SDK

Image filters

Cool apps using the SDK

6tag

Real-time camera filters

One Shot

Gigapixel image browser (wiki article)

Zooming in a 400MP image

List of Filters and Effects I

List of Filters and Effects II

List of Filters and Effects III

Chaining filters

Original image

+Milky +Flip

+Crop

+Lomo

• Major change of library architecture • Parameters of the filters can be changed without rebuilding rendering pipeline • Supports creation of the totally custom filters • New functionality : ChromaKey and Gradients

What’s new in the 1.0 version

ChromaKey

Blend modes

Blend mode: Color Burn

Blend mode: Color

Blend mode: Add

1st image 2nd image

TOOLS TO CREATE GRADIENTS

Linear Gradient

Radial Gradient

• Built-in functionality of the SDK v1.0 • Low memory footprint

• Library contains three architectural building blocks: • Image sources (such as bitmaps, streams,

files) • Effect (e.g. 50+ filters, including inbuilt and

custom) • Renderers (outputs bitmaps or files)

• Combining these building blocks, developer creates

rendering pipeline • Once pipeline is created, it is possible to change filter

parameters, or their sequence.

General Architecture Overview Image Source

Filter Effects

MagicPen Filter Flip Filter Rotation Filter

Renderer

Parameters can be changed without rebuilding the whole effect pipeline. New to the 1.0 version!

• But keep in mind that:

• Rendering is asynchronous, parameters can’t be changed while rendering.

• Be specially careful with UI controls (like sliders), they can fire at any time.

• Useful trick: use a queue of Actions.

Modifying filters parameters

UI (Slider) Imaging

SDK

ValueChanged event

ValueChanged event

Rendering a new preview

Rendering a new preview

ValueChanged event

Defining the queue: Queue<System.Action> _toDo = new Queue<System.Action>();

When resource is busy, enqueue: _toDo.Enqueue( () => { _warpFilter.Level = newValue; } );

When resource is free, Apply all the actions in the queue : while (_toDo.Count > 0)

{

Action action = _toDo.Dequeue();

action();

}

await _renderer.RenderAsync();

Modifying filters parameters

The “magic” is here, the lambda expression is queued

Executing the lambda expression

Image Source Implementations Source type Class of source ImageSource Name

Stream System.IO.Stream StreamImageSource

Imaging SDK Bitmap

Nokia.Graphics.Imaging.Bitmap BitmapImageSource

Windows Buffer Windows.Storage.Streams.IBuffer BufferImageSource

Camera Windows.Phone.Media.Capture. ICameraCaptureDevice

CameraPreviewImageSource

Flat Color Windows.Ui.Color ColorImageSource

File Windows.Storage.IStorageFile

StorageFileImageSource

Image Source

Filter Effects

Cartoon Filter Fog Filter Contrast Filter

Renderer

Renderers Image Source

Filter Effects

Cartoon Filter Fog Filter Contrast Filter

Renderer

Destination type

Class of destination ImageSource Name

Imaging SDK Bitmap Nokia.Graphics.Imaging.Bitmap BitmapRenderer

Writeable Bitmaps ( for XAML Image )

WriteableBitmap

WriteableBitmapRenderer

JPEG Windows.Storage.Streams.IBuffer JpegRenderer

• Example implements new class, based on CustomEffectBase

• Developer should override OnProcess method, which gives direct access to individual pixels

• PixelRegion is used as helper class to iterate through pixels of source and target

• In this case, CustomRGBFilter doubles each RGB component value

Implementing Custom Effect

THANK YOU! QUESTIONS?

LUMIA APP LABS #18

More information: Nokia Lumia Developer's Library http://developer.nokia.com/Resources/Library/Lumia/

ENTER NOW > Nokia.ly/create

A global app development competition for Nokia Lumia and Windows Phone 8. It’s your chance to win prizes that will get you noticed, including trips to MWC, DVLUP XPs, devices, promotions and much more. Image & Photo Master Mission & 10 other missions still open.

ENTER NOW > http://nokia.ly/wikicomp2013Q4

Write great original articles about using Nokia Imaging SDK 1.0 with both C++ and C# APIs.

Win a Lumia 1520 device for your articles or a Lumia 925 for your feedback

WIKI COMPETITION Nokia Imaging and Big UI Wiki Competition 2013Q4

ANNEXES

• Simplest way to add Nokia Imaging SDK to your project is through NuGet

Adding Nokia Imaging SDK to the Project

• Searching NuGet for available Nokia packages and selecting SDK

Adding Nokia Imaging SDK to the Project

• Using Configuration Manager for editing available platforms in solution

Adding Nokia Imaging SDK to the Project

• Selecting and removing Any CPU platform

Adding Nokia Imaging SDK to the Project

• Step 1: Include Nokia Imaging SDK Libraries into your project • Step 2: Prepare source image: uncompressed image as WriteableBitmap,

AudioVideoCaptureDevice or compressed image as IBuffer, StorageFile • Step 3: Create image source as instance of IImageSource • Step 4: Create enumeration (such as IList) of filters instances IFilter in required sequence • Step 5: Create FilterEffect with associated IImageSource instance • Step 6: Attach enumeration of IFilter the FilterEffect • Step 7: Create renderer with associated FilterEffect and target output • Step 8: Use asynchronous methods RenderAsync in order to generate output • Remember: official documentation is part of the Lumia Developer Library • http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk.html

General Overview of Required Steps