Sunday, 23 March 2014

Nokia Imaging API for Windows 8

Recently I attended a User Group meeting with Jan Hannemann (@bitdisaster), a Nokia Developer Ambassador, presenting on the Nokia APIs.  He shared with the group about the Nokia Imaging API, HERE API and Nokia MixRadio API.  All three were very interesting.  In the group there were a number of people, myself included,  that immediately thought of some potential new apps using the APIs presented.  It's one thing to read about an API but quite another to see it in action.  I think that seeing it generates more ideas than just ready about it.


http://www.windowsphone.com/s?appid=35282d3f-a22c-485e-aa5f-8d61cea29e46
The one I want to focus on today is the Nokia Imaging API version 1.1.  With Version 1.1 it became available to Windows 8.1.  I decided to take a crack at converting one of my many Windows Phone apps to Windows 8.1.  I chose Neon Camera as my most successful camera app as my candidate.

I've already done quite a few apps with Nokia HERE and Imaging APIs in Windows Phone.  I have to admit they are pretty easy to use and produce great results.  One difficulty I had was that the samples created by Nokia are AWESOME (in their complexity) and for a beginner just dipping their toes into creating something it can be a bit overwhelming and not very easy to follow. 

So, you can download the samples to see what is possible and then try to sort out the many many levels of seeming obfuscation or just do a few simple steps to see what happens.  You can add as many effects at one time as you need and the layer on each other.  This sample code only does one.  it works in either Windows Phone or Windows 8.1.

// First you need to reference a few libraries.
using Nokia.Graphics.Imaging;
using Windows.UI.Xaml.Media.Imaging;

public MainPage()
{
    // WriteableBitmap selectedPhoto - Get this from the camera or camera roll
    // Turn it into a stream.
    MemoryStream scaledStream = await GetPhotoMemoryStream(selectedPhoto);
    
    // We need a Nokia Graphics Imaging Buffer Image source for the effects generator
    scaledStream.Seek(0, SeekOrigin.Begin);
    Nokia.Graphics.Imaging.BufferImageSource buffer = new Nokia.Graphics.Imaging.BufferImageSource(scaledStream.GetWindowsRuntimeBuffer());

    // Load the base image into the effect
    Nokia.Graphics.Imaging.FilterEffect effect = new Nokia.Graphics.Imaging.FilterEffect(buffer);
    // Tell it what filters you want
    effect.Filters = GetFilterEffectList();

    // Create a blank WriteableBitmap of the appropriate size
    WriteableBitmap _tmpBitMap = new WriteableBitmap(App.selectedPhoto.PixelWidth, App.selectedPhoto.PixelHeight);
    
    // Create the Renderer, pass in the blank WriteableBitmap and the effect list.
    Nokia.Graphics.Imaging.WriteableBitmapRenderer renderer = new Nokia.Graphics.Imaging.WriteableBitmapRenderer(effect, _tmpBitMap);

    //  Mash together the original picture with the effects into the new bitmap
    await renderer.RenderAsync();

    // Display the image on the screen (A XAML Image object)
    PreviewImage.Source = _tmpBitMap;
    
}

private List<IFilter> GetFilterEffectList()
{
    // Filters are as easy as creating a list and then piling on 
    //   as many filters as you need.  They get applied in the order
    //  you add them here.  See the SDK for a list of filter names.
    //   I've added the MagicPenFilters which produces a Neon Effect.
    List<IFilter> filterList = new List<IFilter>();
    filterList.Add(new MagicPenFilter());
    return filterList;
}