×
Namespaces

Variants
Actions
(Difference between revisions)

Test Apps for Viewing Custom Filters (Nokia Imaging SDK)

From Nokia Developer Wiki
Jump to: navigation, search
Rob.Kachmar (Talk | contribs)
m (Rob.Kachmar moved page Viewing Custom Filters (Nokia Imaging SDK) to Test Apps for Viewing Custom Filters (Nokia Imaging SDK): More in line with the fact that the solution has apps designed for testing.)
BuildNokia (Talk | contribs)
(BuildNokia -)
Line 1: Line 1:
 
[[Category:Nokia Imaging SDK Custom Effect]][[Category:Testing on Windows Phone]][[Category:XAML]][[Category:Tutorial]][[Category:Code Examples]][[Category:Windows Phone 8]]
 
[[Category:Nokia Imaging SDK Custom Effect]][[Category:Testing on Windows Phone]][[Category:XAML]][[Category:Tutorial]][[Category:Code Examples]][[Category:Windows Phone 8]]
 
{{Abstract|This article describes the test app(s) used to view many of the community contributed [[:Category:Nokia Imaging SDK Custom Effect]]s, and explains how to use it to view your own custom filters on a physical device or the emulator.}}
 
{{Abstract|This article describes the test app(s) used to view many of the community contributed [[:Category:Nokia Imaging SDK Custom Effect]]s, and explains how to use it to view your own custom filters on a physical device or the emulator.}}
 +
{{CurrentWikiChallengeAnnouncement}}
 
{{SeeAlso|
 
{{SeeAlso|
 
* [http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk/core-concepts.html Core concepts]
 
* [http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk/core-concepts.html Core concepts]

Revision as of 17:26, 6 June 2014

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.

Announcements.pngNokia Original Imaging Effect Wiki Challenge (02 Aug 2014): Congratulations to Lee McPherson,Yassine Serhane, Venu Kumar,Sebastiano Galazzo, Rodrigo Díaz Tajada, Oliver Ulm, Kenneth Kau, and Philip Taffet for writing winning articles in the Nokia Original Imaging Effect Wiki Challenge. There were so many good effects that it was difficult to choose. Thank you to all who participated.


This announcement may have expired, and needs to be checked.

WP Metro Icon Bug.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Nokia Imaging SDK 1.0
Devices(s): Nokia Lumia 920
Compatibility
Platform(s):
Windows Phone 8
Article
Created: Rob.Kachmar (16 Feb 2014)
Last edited: BuildNokia (06 Jun 2014)

Contents

Introduction

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.

CustomFilters ViewingCustomFilters SolutionExplorerMainItems.PNG

These include:

  • 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:

  1. Right click Solution 'RealtimeFilterDemo' (3 projects) at the very top level of the Solution Explorer navigation pane and select Properties
    CustomFilters ViewingCustomFilters SolutionProperties.PNG
  2. In the left-hand pane, under Configuration Properties, select Configuration, then change the Platform value for each of the 3 projects to x86
    CustomFilters ViewingCustomFilters ConfigurationProperties.PNG
  3. Additionally, you should change the start up project to the StaticFilterViewer by right clicking on its project name and selecting Set as StartUp Project
    CustomFilters ViewingCustomFilters StaticFilterViewerStartUpProject.PNG


Troubleshooting

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.

  1. Go to Tools >>> Library Package Manager >>> Manage NuGet Packages for Solution...
  2. Click on Installed packages in the left-hand pane
  3. Click the Manage button for the Nokia Imaging SDK package
  4. Uncheck all the boxes and click the OK button
  5. Now click Online in the left-hand pane
  6. Search for Nokia Imaging SDK
  7. Click the Install button for the Nokia Imaging SDK package
  8. Check all the boxes and click the OK button
  9. 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.

Note.pngNote: The folder already contains a number of effects, many of which are documented in Category:Nokia Imaging SDK Custom Effects. Check out these filters and Custom Filter QuickStart for Nokia Imaging SDK to better understand how to create your own effects.

  1. namespace NISDKExtendedEffects.ImageEffects
  2. {
  3.     public class YourCustomEffectClass : CustomEffectBase
  4.     ...
  5. }

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.

  1.                 case 44:
  2.                     {
  3.                         EffectName = String.Format(nameFormat, (_effectIndex + 1), "Custom SepiaEffect - 0.62");
  4.                         _customEffect = new SepiaEffect(_cameraPreviewImageSource, 0.62);
  5.                     }
  6.                     break;
  7.  
  8.                 case 45:
  9.                     {
  10.                         EffectName = String.Format(nameFormat, (_effectIndex + 1), "Your Custom Effect");
  11.                         _customEffect = new YourCustomEffect(_cameraPreviewImageSource);
  12.                     }
  13.                     break;
  14.             }
  15.  
  16.             if (filters.Count > 0)
  17.             {
  18.                 _filterEffect = new FilterEffect(_cameraPreviewImageSource)
  19.                 {
  20.                     Filters = filters
  21.                 };
  22.             }
  23.         }
  24.  
  25.         private int _effectCount = 46;  // Remember to increment by one with each case added above.
  26.     }
  27. }

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.

  1.                 case 44:
  2.                     {
  3.                         EffectName = String.Format(nameFormat, (m_EffectIndex + 1), "Custom SepiaEffect - 0.62");
  4.                         m_CustomEffect = new SepiaEffect(m_StreamImageSource, 0.62);
  5.                     }
  6.                     break;
  7.  
  8.                 case 45:
  9.                     {
  10.                         EffectName = String.Format(nameFormat, (m_EffectIndex + 1), "Your Custom Effect");
  11.                         m_CustomEffect = new YourCustomEffect(m_StreamImageSource);
  12.                     }
  13.                     break;
  14.             }
  15.  
  16.             if (filters.Count > 0)
  17.             {
  18.                 m_FilterEffect = new FilterEffect(m_StreamImageSource)
  19.                 {
  20.                     Filters = filters
  21.                 };
  22.  
  23.                 m_CustomEffect = new NoEffect(m_FilterEffect);
  24.             }
  25.         }
  26.  
  27.         private int m_EffectCount = 46;  // Remember to increment by one with each case added above.
  28.     }
  29. }

Add Images

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.

  1. private async Task Initialize()
  2. {
  3.     Busy = true;
  4.     m_SDKCustomEffects = new SDKCustomEffects();
  5.  
  6.     await LoadLocalImageNames();
  7.     m_CurrentLocalImageIndex = m_LocalImages.Count() - 1; // Start with the last image in the list
  8.     m_LocalPictureName = m_LocalImages[m_CurrentLocalImageIndex];
  9.     LoadLocalImage();
  10.  
  11.     // Start off at the last effect
  12.     m_SDKCustomEffects.PreviousEffect();
  13.     StatusTextBlock.Text = m_SDKCustomEffects.EffectName;
  14.     await ProcessImage();
  15.     Busy = false;
  16. }

Note.pngNote: If you want the pre-loaded images to sort differently, you could modify the code that loads up their names in the LoadLocalImageNames() method. However, it is easier just to name your default images alphabetically in the sort order you prefer.

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.

Summary

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.

213 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×