The Nokia Imaging SDK just graduated from beta, the code library that helps you efficiently work with images captured and stored by Windows Phone 8 devices. In this webinar Nokia technology wizard Berthier Lemieux starts with a quick overview of Nokia Imaging SDK 1.0, just in case you haven’t worked with it yet. Then he jumps into live coding demonstrations to show you how to use the SDK in applications that make the most of the imaging capabilities of Nokia Lumia phones. Throughout the code demos, he’ll highlight new functionality in this SDK release. He’ll demonstrate the new architecture, the chroma key filter (“green screen”), and gradients. He’ll also show you how to change filters dynamically. For detailed documentation on working with the Nokia Imaging SDK, see http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk.html For more details about developing for Nokia Lumia smartphones visit http://www.developer.nokia.com/windowsphone Check out details of the other Lumia App Labs, including the future schedule, here: http://www.developer.nokia.com/Develop/Windows_Phone/Learn/

1. LUMIA APP LABS #18
INTRODUCING
THE NOKIA IMAGING
SDK 1.0
Berthier Lemieux
Technology Wizard @ Nokia

2. What is Nokia Imaging SDK
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.
•

3. Cool apps using the SDK
6tag
One Shot
Gigapixel image browser
(wiki article)
Image filters
Real-time camera
filters
Zooming in a
400MP image

4. List of Filters and Effects I

5. List of Filters and Effects II

6. List of Filters and Effects III

7. Chaining filters
Original image
+Milky
+Flip
+Crop
+Lomo

8. What’s new in the 1.0 version
•
•
•
•
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

9. ChromaKey

10. Blend modes
1st image
Blend mode:
Color Burn
Blend mode:
Color
2nd image
Blend mode:
Add

11. TOOLS TO CREATE GRADIENTS
•
•
Built-in functionality of the SDK v1.0
Low memory footprint
Radial
Gradient
Linear
Gradient

12. General Architecture Overview
•
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.
Image Source
Filter Effects
MagicPen Filter
Flip Filter
Rotation Filter
Renderer

13. Modifying filters parameters
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.

14. UI (Slider)
Imaging
SDK
ValueChanged event
Rendering a
new preview
ValueChanged event
ValueChanged event
Rendering a
new preview

15. Modifying filters parameters
Defining the queue:
Queue<System.Action> _toDo = new Queue<System.Action>();
When resource is busy, enqueue:
_toDo.Enqueue(
() => { _warpFilter.Level = newValue; }
);
The “magic” is here, the lambda
expression is queued
When resource is free, Apply all the actions in the queue :
while (_toDo.Count > 0)
{
Action action = _toDo.Dequeue();
action();
}
await _renderer.RenderAsync();
Executing the lambda expression

16. 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

17. Renderers
Image Source
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
Filter Effects
JpegRenderer
Cartoon Filter
Fog Filter
Contrast Filter
Renderer

18. Implementing Custom Effect
•
•
•
•
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

19. LUMIA APP LABS #18
THANK YOU!
QUESTIONS?
More information:
Nokia Lumia Developer's Library
http://developer.nokia.com/Resources/Library/Lumia/

20. 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 > Nokia.ly/create

21. WIKI COMPETITION
Nokia Imaging and Big UI Wiki Competition 2013Q4
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
ENTER NOW > http://nokia.ly/wikicomp2013Q4

22. ANNEXES

23. Adding Nokia Imaging SDK to the Project
•
Simplest way to add Nokia Imaging SDK to your project is through NuGet

24. Adding Nokia Imaging SDK to the Project
•
Searching NuGet for available Nokia packages and selecting SDK

25. Adding Nokia Imaging SDK to the Project
•
Using Configuration Manager for editing available platforms in solution

26. Adding Nokia Imaging SDK to the Project
•
Selecting and removing Any CPU platform

27. General Overview of Required Steps
•
•
•
•
•
•
•
•
•
•
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