Test Apps for Viewing Custom Filters (Nokia Imaging SDK)
This article describes the test app(s) used to view many of the community contributed Category:Nokia Imaging SDK Custom Effects, and explains how to use it to view your own custom filters on a physical device or the emulator.
Nokia Original Imaging Effect Wiki Challenge (21 Jul 2014): Winners have been announced for the Nokia Original Imaging Effect Wiki Challenge. The Tweet-Off to decide which authors win a Nokia Lumia 630 starts today. Follow the Nokia Developer Twitter feed and retweet your favorite entries.
Windows Phone 8
This article will walk you through the process of setting up a solution that contains three Windows Phone 8 projects you can use to add and view your own Nokia Imaging SDK Custom Effects.
- NISDKExtendedEffects - This is a (shared) Class Library for containing the custom effects
- RealtimeFilterDemo - This app project allows you to apply custom effects (from NISDKExtendedEffects) to the real-time camera preview. It is a fork of the Nokia Real-time Filter Demo project with a few tweaks. Technically you can run it on the emulator, but it is much more impressive to run it on a physical device.
- StaticFilterViewer - This app project is for applying custom effects to static images and saving the result. If you only have access to an emulator, this project should be set as the StartUp project.
Setup the Solution
This section shows how to get hold of the project, describes the most important files, and explains how to get the app up and running on your environment.
First, download the solution from Github here. Unzip the file and open the RealtimeFilterDemo.sln file in Visual Studio.
The most important files/folder in the project, are highlighted in the screenshot of the Solution Explorer below.
- NISDKExtendedEffects\ImageEffects - Custom effect class files should be copied into this folder
- RealtimeFilterDemo\NokiaImagingSDKEffects.cs - Custom effects are created and added to the real-time view in this file (by modifying a switch statement).
- StaticFilterViewer\SDKCustomEffects.cs - Custom effects are created and added to the static viewer app in this file (by modifying a switch statement).
- StaticFilterViewer\Pictures - Images to be delivered along with the app.
Running the app on a device
The device should already be configured for an ARM platform and ready to run. If it does not build "out of the box", see the #Troubleshooting section below.
Running the app on the Emulator
If you want to run on an emulator, you'll need to change the target platform to x86:
- Right click Solution 'RealtimeFilterDemo' (3 projects) at the very top level of the Solution Explorer navigation pane and select Properties
- In the left-hand pane, under Configuration Properties, select Configuration, then change the Platform value for each of the 3 projects to x86
- Additionally, you should change the start up project to the StaticFilterViewer by right clicking on its project name and selecting Set as StartUp Project
At this point you should be able to run the app. However, if you run into issues, the first thing you should try is to uninstall and reinstall the Nokia Imaging SDK Nuget package.
- Go to Tools >>> Library Package Manager >>> Manage NuGet Packages for Solution...
- Click on Installed packages in the left-hand pane
- Click the Manage button for the Nokia Imaging SDK package
- Uncheck all the boxes and click the OK button
- Now click Online in the left-hand pane
- Search for Nokia Imaging SDK
- Click the Install button for the Nokia Imaging SDK package
- Check all the boxes and click the OK button
- Click the I Accept button
Add Custom Effects
The first step is to copy your custom effect's C# source file into the ImageEffects folder of the NISDKExtendedEffects class library project. Remember to make sure your new class is in the NISDKExtendedEffects.ImageEffects namespace.
public class YourCustomEffectClass : CustomEffectBase
After your new class is part of NISDKExtendedEffects, you'll want to reference it in the RealtimeFilterDemo and StaticFilterViewer projects so you can view it in the apps.
In the RealtimeFilterDemo project, you need to open NokiaImagingSDKEffects.cs and scroll down to the bottom. You should see the end of a long switch statement in the Initialize() method. You'll also see a member variable _effectCount. For every new effect or variation of the same effect, you'll need to increment the _effectCount variable by one. Additionally, you'll need to add another case to the switch statement and increment it by one as well. The new case should follow the same basic pattern as the others. You update EffectName with the label you want to see for your new effect, and you update _customEffect with the result of your custom effect that has _cameraPreviewImageSource passed into it as the IImageProvider input variable.
EffectName = String.Format(nameFormat, (_effectIndex + 1), "Custom SepiaEffect - 0.62");
_customEffect = new SepiaEffect(_cameraPreviewImageSource, 0.62);
EffectName = String.Format(nameFormat, (_effectIndex + 1), "Your Custom Effect");
_customEffect = new YourCustomEffect(_cameraPreviewImageSource);
if (filters.Count > 0)
_filterEffect = new FilterEffect(_cameraPreviewImageSource)
Filters = filters
private int _effectCount = 46; // Remember to increment by one with each case added above.
In the StaticFilterViewer project, you need to open SDKCustomEffects.cs and scroll down to the bottom. You should see the end of a long switch statement in the Initialize() method. You'll also see a member variable m_EffectCount. For every new effect or variation of the same effect, you'll need to increment the m_EffectCount variable by one. Additionally, you'll need to add another case to the switch statement and increment it by one as well. The new case should follow the same basic pattern as the others. You update EffectName with the label you want to see for your new effect, and you update m_CustomEffect with the result of your custom effect that has m_StreamImageSource passed into it as the IImageProvider input variable.
EffectName = String.Format(nameFormat, (m_EffectIndex + 1), "Custom SepiaEffect - 0.62");
m_CustomEffect = new SepiaEffect(m_StreamImageSource, 0.62);
EffectName = String.Format(nameFormat, (m_EffectIndex + 1), "Your Custom Effect");
m_CustomEffect = new YourCustomEffect(m_StreamImageSource);
if (filters.Count > 0)
m_FilterEffect = new FilterEffect(m_StreamImageSource)
Filters = filters
m_CustomEffect = new NoEffect(m_FilterEffect);
private int m_EffectCount = 46; // Remember to increment by one with each case added above.
If you load up the StaticFilterViewer project, you've probably noticed that you can use the up and down arrows to cycle through the 9 sample pictures that come pre-loaded with the emulator. These images have been placed in the Pictures folder of the app, so they pre-load within the app. If you would like any additional images, or different images, to pre-load with the app, just change and/or add images in the Pictures folder.
Currently the StaticFilterViewer app is designed to sort the image names alphabetically and start off with the last one in the sequence. If you would rather the app just start with the first image in the sequence, then comment out the highlighted line below within the Initialize() method of MainPage.xaml.cs.
private async Task Initialize()
Busy = true;
m_SDKCustomEffects = new SDKCustomEffects();
m_CurrentLocalImageIndex = m_LocalImages.Count() - 1; // Start with the last image in the list
m_LocalPictureName = m_LocalImages[m_CurrentLocalImageIndex];
// Start off at the last effect
StatusTextBlock.Text = m_SDKCustomEffects.EffectName;
Busy = false;
Additionally, you also have the option of loading up any image from your device or emulator after the app has started. Just open the app bar menu items and select Choose Image.
Now you have everything you need to view your own custom effects. Please also take the time to share your fun creations with the rest of the community in the Custom Effect Gallery.