LUMIA APP LABS #18

INTRODUCING
THE NOKIA IMAGING
SDK 1.0
Berthier Lemieux
Technology Wizard @ Nokia
What is Nokia Imaging SDK
Native Windows Phone 8 Library, Accessible from C#, VB and
C++ Windows Phone 8 Projects
• Includ...
Cool apps using the SDK
6tag

One Shot

Gigapixel image browser
(wiki article)

Image filters

Real-time camera
filters

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

Major change of library architecture
Parameters of the filters can be changed witho...
ChromaKey
Blend modes
1st image

Blend mode:
Color Burn

Blend mode:
Color

2nd image

Blend mode:
Add
TOOLS TO CREATE GRADIENTS
•
•

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

Radial
Gradient

Linear
Gradie...
General Architecture Overview
•

Library contains three architectural building blocks:
•

•

•

•
•

Image sources (such a...
Modifying filters parameters
Parameters can be changed without rebuilding the whole effect
pipeline. New to the 1.0 versio...
UI (Slider)

Imaging
SDK

ValueChanged event
Rendering a
new preview

ValueChanged event

ValueChanged event

Rendering a
...
Modifying filters parameters
Defining the queue:
Queue<System.Action> _toDo = new Queue<System.Action>();

When resource i...
Image Source Implementations
Source type

Class of source

ImageSource Name

Stream

System.IO.Stream

StreamImageSource

...
Renderers
Image Source
Destination
type

Class of destination

ImageSource Name

Imaging SDK Bitmap

Nokia.Graphics.Imagin...
Implementing Custom Effect
•
•

•

•

Example implements new class, based
on CustomEffectBase
Developer should override On...
A global app development competition
for Nokia Lumia and Windows Phone 8.
It’s your chance to win prizes that will get you...
WIKI COMPETITION
Nokia Imaging and Big UI Wiki Competition 2013Q4

Write great original articles about using Nokia
Imaging...
ANNEXES
Adding Nokia Imaging SDK to the Project
•

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

Step 1: Include Nokia Imaging SDK Libraries into your project
Step...
LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0
Upcoming SlideShare
Loading in...5
×

LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0

6,669

Published on

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/

Transcript of "LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0"

  1. 1. LUMIA APP LABS #18 INTRODUCING THE NOKIA IMAGING SDK 1.0 Berthier Lemieux Technology Wizard @ Nokia
  2. 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. 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. 4. List of Filters and Effects I
  5. 5. List of Filters and Effects II
  6. 6. List of Filters and Effects III
  7. 7. Chaining filters Original image +Milky +Flip +Crop +Lomo
  8. 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. 9. ChromaKey
  10. 10. Blend modes 1st image Blend mode: Color Burn Blend mode: Color 2nd image Blend mode: Add
  11. 11. TOOLS TO CREATE GRADIENTS • • Built-in functionality of the SDK v1.0 Low memory footprint Radial Gradient Linear Gradient
  12. 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. 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. 14. UI (Slider) Imaging SDK ValueChanged event Rendering a new preview ValueChanged event ValueChanged event Rendering a new preview
  15. 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. 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. 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. 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. 19. LUMIA APP LABS #18 THANK YOU! QUESTIONS? More information: Nokia Lumia Developer's Library http://developer.nokia.com/Resources/Library/Lumia/
  20. 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. 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. 22. ANNEXES
  23. 23. Adding Nokia Imaging SDK to the Project • Simplest way to add Nokia Imaging SDK to your project is through NuGet
  24. 24. Adding Nokia Imaging SDK to the Project • Searching NuGet for available Nokia packages and selecting SDK
  25. 25. Adding Nokia Imaging SDK to the Project • Using Configuration Manager for editing available platforms in solution
  26. 26. Adding Nokia Imaging SDK to the Project • Selecting and removing Any CPU platform
  27. 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

×