jeanelle leeland: How to Use the Nokia Imaging SDK to create a "Photo Cookbook" for Windows Phone 8 Devices

Latest revision as of 04:11, 21 July 2013

This article walks the reader through the steps required to apply multiple Nokia Imaging SDK Filters on a single image, and then store that "recipe" for later images.

Article Metadata

Tested with

SDK: Windows Phone 8.0 SDK, Nokia Imaging SDK

Devices(s): Nokia Lumia 920

Compatibility

Article

[edit] Introduction

The new Nokia Imaging SDK provides (among other features) a simple way for developers to apply filters such as "Antique," "Grayscale," and "Sketch." Even by themselves these filters can produce a noticeable change in the photo, but when you combine them, you can create a much more varied result.

With this app, we'll be expanding on the basic ideas of the Filter Explorer app to allow users to store filter "recipes" which can then be applied to future filters automatically.

By the end of this tutorial, our app will be able to:

Allow the user to either take a new picture or use a previously taken picture.
Allow the user to add any number of filters, crops, or modifications to the initial picture.
Allow the user to save the modifications made (and the order they were made) in a recipe, which can be reused later.
Allow the user to save a copy of the filtered photo.
Allow the user to launch our app as a lens from the Windows Phone's stock Camera app

[edit] Summary

This tutorial will be divided into three main parts. For the first part, we'll set up the backend code and Windows Phone project, including any abstractions or custom classes we might need. Then, for the second part, we'll implement those abstractions page-by-page, eventually creating a compelling app ready to be published in the Windows Phone Store. Finally, we'll review some of the features of the Imaging SDK we used, and how they can be used more generally in different apps.

[edit] Prerequisites

In order to follow along with this tutorial, you'll need to have a copy of Visual Studio compatible with the Windows Phone 8 SDK. You'll also need ot have the Windows Phone 8 SDK installed and working with your version of Visual Studio. If you don't have either of these, you can download a copy of Visual Studio Express 2012 for Windows Phone here. I'll be using Visual Studio 2013, but you should be able to follow along easily in Visual Studio 2012 or 2010.

[edit] Create the App

The first thing we need to do is create a new Windows Phone app - to do this, start Visual Studio and select "new project..." In the window that pops up, make sure you have expanded the "Visual C#" tree (Express users may not need to do this), and then selected "Windows Phone." Select "Windows Phone App" in the main panel, then under Name type "Photo Cookbook." Your window should look something like this before pressing "OK:"

Tip:?If prompted, make sure you're targeting Windows Phone 8

[edit] Reference the Imaging SDK

Now that we have the app created, we need to add the Nokia Imaging SDK. The Imaging SDK is somewhat trickier to install than most other SDKs and libraries for the .NET framework, but thankfully Nokia has provided a step-by-step walkthrough of how to do it. Visit Adding Libraries to the Project(Nokia Developer Library), and follow the instructions under "Installing the SDK and including the libraries to a project using NuGet"

By itself, the Imaging SDK makes it difficult (if not impossible) to obtain a list of available filters and their names, which we'll need to allow the user to pick from a list of possible filters. To overcome this, we'll need to hand-code all of the filters in FilterFactory to a list of filters, or we can use the FiltersModel Nokia has put together for us in Filter Explorer. Download Filter Explorer, then copy the Models folder (or just Filter- and FiltersModel.cs) to the Photo_Cookbook project.

Note:?Another way you could go around this problem would be using reflection, but since FilterFactory, and the Imaging SDK itself, is oriented around an interface (IFilter) it gets a little difficult. If you manage to work it out, please update this (or start a new article!).

[edit] Main Backend

Great, now that we've gotten the boring stuff out of the way, we can start working on the actual app. You should be looking at a window with a "MainPage.xaml" tab open and a few other things made for us by Visual Studio. Close any currently open tabs (there should be an X next to the tab name), and we'll start working on the backend.

[edit] Capabilities, Extensions, and more

Since we want to be able to register our app as a lens (and we want to use the Photos library), we have to have the right capabilities declared in our WMAppManifest. In the Solution Explorer, expand Properties, and double-click on WMAppManifest.xml. Flipping over to the "Capabilities" tab, ensure that "ID_CAP_MEDIALIB_PHOTO" is checked, then save and close WMAppManifest.xml before right-clicking it in the Solution Explorer and selecting "View Code." Copy the following after the end </Tokens> tag:

<Extensions>
<Extension ExtensionName="Camera_Capture_App" 
	ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"
	TaskID="_default" />
</Extensions>

Basically, we're telling the OS that we support being launched as a lens, and to use the "_default" task (which should navigate to MainPage.xaml, you can make sure under the <Tasks> element in the same file.

We need a global place to store our main ImagingSDK, and a FiltersModel (so we don't have to intialize a new one everytime we need it). Let's add them as the first lines below our App class, in App.xaml.cs:

public partial class App : Application
{
public static ImagingSDK CurrPhoto;
public static readonly ImageProcessingApp.Models.FiltersModel Filters = new ImageProcessingApp.Models.FiltersModel();

Further down, in Application_Launching, we'll check whether we have our virtual "Cookbook" stored in ApplicationSettings, and if not we'll add it.

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
if (!IsolatedStorageSettings.ApplicationSettings.Contains("Recipes"))
{
IsolatedStorageSettings.ApplicationSettings.Add("Recipes", new Dictionary<string, List<string>>());
IsolatedStorageSettings.ApplicationSettings.Save();
}
}

[edit] ImagingSDK Wrapper

Press Shift + Alt + C, then add a new class file with the name ImagingSDK.cs. Since we want to keep track of what filters have been applied to an image, we'll create helper functions in the ImagingSDK class to replace the default ones from EditingSession.

First, change class class ImagingSDK to class ImagingSDK?: IDisposable, since we should have a way to dispose of our EditingSession once we're done with it.

Within ImagingSDK, we'll need the following:

A raw EditingSession, so we can manipulate the image.
A List<string> of filter names, so we can save the recipes in ApplicationSettings.
AddFilter, AddFilters, Undo, and Reset functions to update our List<string> whenever filters are added or removed on the image.
A StringsToFilterModels function to convert our List<string> into a List<FilterModel>.
And, finally, a Dispose() method to dispose of our EditingSession

Most of the code is self-explanatory, but we'll go over the parts specific to the Imaging SDK.

using ImageProcessingApp.Models;
using Nokia.Graphics.Imaging;
using System;
using System.Collections.Generic;
using System.Linq;
?
namespace Photo_Cookbook
{
public class ImagingSDK : IDisposable
{
public EditingSession RawSession;
public List<string> Filters = new List<string>();
public ImagingSDK(Windows.Storage.Streams.IBuffer Input)
{
RawSession = new EditingSession(Input);
}
public void AddFilter(FilterModel ToAdd)
{
foreach (var Filter in ToAdd.Components)
{
RawSession.AddFilter(Filter);
}
Filters.Add(ToAdd.Name);
}
public void AddFilters(List<FilterModel> Recipe)
{
foreach (FilterModel filter in Recipe)
{
AddFilter(filter);
}
}
public void Undo()
{
if (RawSession.CanUndo())
{
RawSession.Undo();
Filters.Remove(Filters.Last());
}
}
public void Reset()
{
if (RawSession.CanUndo())
{
RawSession.UndoAll();
Filters.RemoveAll(a => true);
}
}
public static List<FilterModel> StringsToFilterModels(List<string> ToParse)
{
return App.Filters.AllFilters.Where(a => ToParse.Contains(a.Name)).ToList<FilterModel>();
}
public void Dispose()
{
if (RawSession != null)
{
RawSession.Dispose();
}
}
}
}

ImagingSDK accepts a Buffer as input, which is one of the two inputs an EditingSession accepts (the other being Bitmap) as a parameter, then initializing RawSession with that. One thing to remember when using Nokia's FilterModel is that the filter itself is stored in the FilterModel's Components, so you should loop over each of those when adding a FilterModel. This theoretically allows for multiple IFilters per FilterModel, but, as far as I know, all FilterModels currently only have one Component.

We'll have three pages, FilterPicker.xaml, Cookbook.xaml, and MainPage.xaml.

MainPage.xaml is where the user sees changes made to the photo, and then can undo filters and save recipes. It also allows the user to navigate to FilterPicker.xaml and Cookbook.xaml, which allow the user to add filters and recipes to the current image.

[edit] MainPage

Source: http://developer.nokia.com/Community/Wiki/index.php?title=How_to_Use_the_Nokia_Imaging_SDK_to_create_a_%22Photo_Cookbook%22_for_Windows_Phone_8_Devices&diff=203151&oldid=203090

Super Bowl Ads 2013 Buffalo Wild Wings Superbowl Start Time Jim Harbaugh Who Won The Superbowl Super Bowl Halftime Show 2013 Super Bowl Commercials 2013

@@ Line 56: / Line 56: @@
 {{Note|Another way you could go around this problem would be using reflection, but since FilterFactory, and the Imaging SDK itself, is oriented around an interface (IFilter) it gets a little difficult. If you manage to work it out, please update this (or start a new article!).}}
-== Backend ==
+== Main Backend ==
 Great, now that we've gotten the boring stuff out of the way, we can start working on the actual app. You should be looking at a window with a "MainPage.xaml" tab open and a few other things made for us by Visual Studio. Close any currently open tabs (there should be an X next to the tab name), and we'll start working on the backend.
@@ Line 72: / Line 72: @@
 Basically, we're telling the OS that we support being launched as a lens, and to use the "_default" task (which should navigate to MainPage.xaml, you can make sure under the {{Icode|<Tasks>}} element in the same file.
 === ImagingSDK Wrapper ===
 Press Shift + Alt + C, then add a new class file with the name ''ImagingSDK.cs''. Since we want to keep track of what filters have been applied to an image, we'll create helper functions in the {{Icode|ImagingSDK}} class to replace the default ones from EditingSession.
 First, change class {{Icode|class ImagingSDK}} to {{Icode|class ImagingSDK : IDisposable}}, since we should have a way to dispose of our EditingSession once we're done with it.
@@ Line 149: / Line 170: @@
 }
 </code>
-We accept a {{Icode|Buffer}} as input, which is one of the two inputs an {{Icode|EditingSession}} accepts (the other being {{Icode|Bitmap}}) as a parameter, then initializing RawSession with that. One thing to remember when using Nokia's FilterModel is that the filter itself is stored in the FilterModel's {{Icode|Components}}, so you should loop over each of those when adding a FilterModel. This theoretically allows for multiple IFilters per FilterModel, but, as far as I know, all FilterModels currently only have one Component.
+{{Icode|ImagingSDK}} accepts a {{Icode|Buffer}} as input, which is one of the two inputs an {{Icode|EditingSession}} accepts (the other being {{Icode|Bitmap}}) as a parameter, then initializing RawSession with that. One thing to remember when using Nokia's FilterModel is that the filter itself is stored in the FilterModel's {{Icode|Components}}, so you should loop over each of those when adding a FilterModel. This theoretically allows for multiple IFilters per FilterModel, but, as far as I know, all FilterModels currently only have one Component.

jeanelle leeland

Sunday, July 21, 2013

How to Use the Nokia Imaging SDK to create a "Photo Cookbook" for Windows Phone 8 Devices