Post on 10-May-2015
transcript
Nguyen Pham
Nokia Developer Champion
Pham.nguyen@Hotmail.com
http://phamnguyen.info
Imaging on
Windows Phone
Windows Phone 8 – Imaging on Windows Phone
Microsoft confidential
• Lenses
• Nokia Imaging SDK
• Windows Phone Photo Extensibility
11/5/2013Microsoft confidential3
Lenses
Creating a Lens
• A Lens is a custom camera application which can be
accessed from within the camera application
• An application is flagged as a Lens application by
setting a flag in the manifest and providing icons
that can be used to browse for the Lens when the
camera is in use
• I’ve created a Imagine Cam lens application which I
have registered in this way
Creating a Lens application
• This text must be added to the WMAppManifest.xml file for the application, just after the
<Tokens> section
• There is no GUI for this alteration, you have to edit the XML directly
<Extensions><Extension ExtensionName="Camera_Capture_App"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"TaskID="_default" />
</Extensions>
Adding the Lens Icons
• Three Icons are required, one for each Windows Phone screen size
• WVGA 173 × 173 Assets\Lens.Screen-WVGA.png
• 720p 259 × 259 Assets\Lens.Screen-720p.png
• WXGA 277 × 277 Assets\Lens.Screen-WXGA.png
• They are all placed in the Assets folder of the application
• Use a transparent background to match the Windows Phone color scheme
• You can also create an application that has an auto-upload behaviour for pictures that the
user may take
• The upload behaviour is a “resource intensive” background task
• The application must set the extension shown above and display a settings page where the
user can set authentication and upload options
• This is a background process and therefore might not get to run
Creating an Auto-Uploader for photos
<Extensions><Extension ExtensionName="Photos_Auto_Upload"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"TaskID="_default" />
</Extensions>
Create Rich Media Editing
11/5/2013Microsoft confidential8
<Extensions><Extension ExtensionName="Photos_Rich_Media_Edit"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"TaskID="_default" />
</Extensions>
The navigation URI looks just as you would expect:
/MainPage.xaml?Action=RichMediaEdit&token={2fad1162-7f85-4d6c-bbd6-
aee6f10e501d}
Other Extensions
11/5/2013Microsoft confidential9
<Extensions><Extension ExtensionName="Photos_Extra_Hub"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"
TaskID="_default" /><Extension ExtensionName="Photos_Extra_Share"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"
TaskID="_default" /><Extension ExtensionName="Photos_Extra_Image_Editor"ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"
TaskID="_default" /></Extensions>
Override UriMapper
11/5/2013Microsoft confidential10
class UriMapper : UriMapperBase{
public override Uri MapUri(Uri uri){
Uri mappedUri = uri;
string url = uri.ToString();if (url.Contains("ViewfinderLaunch")){
mappedUri = new Uri("/Pages/CamPage.xaml", UriKind.Relative);}else if (url.Contains("RichMediaEdit") || url.Contains("ShareContent") || url.Contains("EditPhotoContent")){
string photoUrl = url.Replace("CamPage", "PhotoPage").Replace("FileId", "token");mappedUri = new Uri(photoUrl, UriKind.Relative);
}
return mappedUri;}
}
Code in contructor of app class:RootFrame.UriMapper = new Helpers.UriMapper();
11/5/2013Microsoft confidential11
11/5/2013Microsoft confidential12
Nokia Imaging
SDK
Nokia Imaging SDK
• Early Beta version, makes some of the technologies that Nokia uses in its own imaging
applications available to developers
• Provides more than 50 pre-made filters and effects that have been specifically developed
for mobile imaging, with speed and memory performance as key drivers
• The SDK is super-fast, meticulous memory and code optimization
• Allows access to any image data without decoding the whole image
• Apply effects to high resolution images, without worrying about memory budget
Easy to use
• Add a filter to your existing project with just a few lines of C#.
• Support to be called from C++ code.
• The filters can be chained to create more effects
List Of Filter and Effect I
List Of Filter and Effect II
List Of Filter and Effect III
Core concepts
• Provided as a Windows Phone Runtime library
• One of the key benefits of this is that developers can call the
methods of the library from C#, Visual Basic, or C++.
Step 1: Include Nokia Imaging SDK Libraries into your Project
Step 2 : Create EditingSession
Step 3 : Create and add filters to EditingSession
Step 4 : Use asynchronous methods RenderToImageAsync or
RenderToJpegAsync to produce the final processed image
The libraries
• Before starting to use the functionality provided by the Nokia Imaging SDK, the SDK
libraries must be added to the project.
• Two ways to add the libraries are proposed:
• Using the Visual Studio NuGet package manager
• Adding references to the project. For detailed instructions
The libraries (Cont.)
Create EditingSession
• Create an Imaging SDK EditingSession using a compressed or uncompressed image:
• From a Stream (from PhotoChooserTask):
EditingSession session = await CreateEditingSessionAsync(stream);
• From a JPEG in a IBuffer:
EditingSession session = new EditingSession(jpegData);
• From a WriteableBitmap:
EditingSession session = new EditingSession(sourceBitmap);
Create and add filters and effects
• Use FilterFactory to create filters and effects
• Use EditingSession methods to add filters and effects:
session.AddFilter(FilterFactory.CreateCartoonFilter(true));
session.AddFilter(FilterFactory.CreateFogFilter());
• You can also use FilterGroup to add several filters and effects in one call
Produce final processed image
• You can render the processed image to:
• A XAML Image control:
await session.RenderToImageAsync(FilteredImage);
• A WriteableBitmap :
await session.RenderToWriteableBitmapAsync(FilteredBitmap);
• An IBuffer :
IBuffer jpegOut = await session.RenderToJpegAsync();
11/5/201323
Editing-session code
using Nokia.Graphics.Imaging;
using (EditingSession editsession = new EditingSession(inputBuffer))
{
// First add an antique effect
editsession.AddFilter( FilterFactory.CreateAntiqueFilter());
// Then rotate the image
editsession.AddFilter( FilterFactory.CreateFreeRotationFilter(35.0f, RotationScaleMode.FitInside));
// Add more filters here if you want... // Finally, execute the filtering and render to a bitmap await
editsession.RenderToBitmapAsync(outputBuffer);
}
License
Contains functionality provided by the Nokia Imaging SDK.
Copyright © 2013 Nokia Corporation
All rights reserved.
11/5/201325
11/5/2013Microsoft confidential26
Demo
Nokia Project sample
Filter Effects Real-time Filter Filter Explorer
11/5/2013Microsoft confidential28
Imagine Cam
Imagine Cam
Imagine Cam
11/5/201329
Resource
• You found an error in the SDK, have suggestions, need help?
• Nokia Imaging discussion board: http://nokia.ly/DiBoImg
• You have developped an app with the SDK?
• We’d love to hear about it. Tell us by sending a mail at
developerrelations.marketing@nokia.com
• Documentation and code samples
• Imaging in the Lumia Developer’s Library: http://nokia.ly/WP_lib_img
• Nokia Imaging SDK: http://www.developer.nokia.com/imaging
• Windows Phone 7.5 Training Kit : http://www.microsoft.com/en-
us/download/details.aspx?id=28564
• Windows Phone 8 Training kit: http://www.microsoft.com/en-
us/download/details.aspx?id=35777
The information herein is for informational
purposes only an represents the current view of
Microsoft Corporation as of the date of this
presentation. Because Microsoft must respond
to changing market conditions, it should not be
interpreted to be a commitment on the part of
Microsoft, and Microsoft cannot guarantee the
accuracy of any information provided after the
date of this presentation.
© 2012 Microsoft Corporation.
All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION
IN THIS PRESENTATION.
Pham.nguyen@Hotmail.com
http://phamnguyen.info