lumia app labs #18: introducing nokia imaging sdk 1.0
TRANSCRIPT
• 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
• 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
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
• 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
• 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