LUMIA APP LABS #18: INTRODUCING NOKIA IMAGING SDK 1.0

7,103 views

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/

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

×