×
Namespaces

Variants
Actions
Revision as of 09:33, 18 February 2014 by Rob.Kachmar (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Brightness Custom Effect (Nokia Imaging SDK)

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create a Brightness Effect similar to the BrightnessFilter in the Nokia Imaging SDK. It is provided for educational purposes rather than developer re-use.

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

Contents

Introduction

The BrightnessEffect adjusts the brightness of an image up or down very similar to the Nokia Imaging SDK's inbuilt BrightnessFilter. The main differences are that it is implemented as a custom effect and it is less efficient.

Warning.pngWarning: The BrightnessEffect should not be used in place of the inbuilt BrightnessFilter. It is provided for educational purposes - to make it easier to understand the techniques used so that more complex filters can be created.

The article provides links to the filter source code and test code, an explanation of how the filter works, and code snippets showing how it is used.

Source code

Full source code for the BrightnessEffect custom effect is provided below (toggle "Expand") and also in a ready-to-use file here: BrightnessEffect.cs.

BrightnessEffect.cs (03 Feb 2014)

  1. // ============================================================================
  2. // DATE        AUTHOR                   DESCRIPTION
  3. // ----------  -----------------------  ---------------------------------------
  4. // 2014.01.15  Rob.Kachmar              Initial creation
  5. // 2014.02.01  Rob.Kachmar              Reducing Math calc for performance
  6. // ============================================================================
  7. // NOTE: The built-in BrightnessFilter() is more than twice as fast as this.  
  8. //       This was simply created to show the logic that can be used to achieve 
  9. //       an effect that allows adjusting the brightness of an image.
  10. //       Lumia 920 - 16-17 FPS with BrightnessFilter() 
  11. //                   vs 
  12. //                   7-8 FPS with BrightnessEffect()
  13. // ============================================================================
  14.  
  15. using Nokia.Graphics.Imaging;
  16. using System;
  17.  
  18. namespace NISDKExtendedEffects.ImageEffects
  19. {
  20.     public class BrightnessEffect : CustomEffectBase
  21.     {
  22.         private double m_BrightnessPercentage = 0;
  23.  
  24.         public BrightnessEffect(IImageProvider source, double brightness = 0)
  25.             : base(source)
  26.         {
  27.             m_BrightnessPercentage = brightness;
  28.         }
  29.  
  30.         protected override void OnProcess(PixelRegion sourcePixelRegion, PixelRegion targetPixelRegion)
  31.         {
  32.             var sourcePixels = sourcePixelRegion.ImagePixels;
  33.             var targetPixels = targetPixelRegion.ImagePixels;
  34.  
  35.             sourcePixelRegion.ForEachRow((index, width, position) =>
  36.             {
  37.                 for (int x = 0; x < width; ++x, ++index)
  38.                 {
  39.                     uint currentPixel = sourcePixels[index]; // get the current pixel
  40.                     uint red = (currentPixel & 0x00ff0000) >> 16; // red color component
  41.                     uint green = (currentPixel & 0x0000ff00) >> 8; // green color component
  42.                     uint blue = currentPixel & 0x000000ff; // blue color component
  43.  
  44.                     if (m_BrightnessPercentage < 0)
  45.                     {
  46.                         // Dimming the image - A value of -1 or -100%, will completely reduce all colors to 0
  47.                         // Reduce each color component by the passed in percentage of the amount of color
  48.                         // it is currently displaying.
  49.                         red = (uint)Math.Max(0, (red + (red * m_BrightnessPercentage)));
  50.                         green = (uint)Math.Max(0, (green + (green * m_BrightnessPercentage)));
  51.                         blue = (uint)Math.Max(0, (blue + (blue * m_BrightnessPercentage)));
  52.                     }
  53.                     else
  54.                     {
  55.                         // Brightening the image - A value of 1 or 100%, will completely increase all colors to 255
  56.                         // Increase each color component by the passed in percentage of the amount of color
  57.                         // is has left before it reaches the max of 255.
  58.                         red = (uint)Math.Min(255, (red + ((255 - red) * m_BrightnessPercentage)));
  59.                         green = (uint)Math.Min(255, (green + ((255 - green) * m_BrightnessPercentage)));
  60.                         blue = (uint)Math.Min(255, (blue + ((255 - blue) * m_BrightnessPercentage)));
  61.                     }
  62.  
  63.                     // Reassembling each component back into a pixel for the target pixel location
  64.                     targetPixels[index] = 0xff000000 | (red << 16) | (green << 8) | blue; 
  65.                 }
  66.             });
  67.         }
  68.     }
  69. }

Testing

The Test Apps for Viewing Custom Filters allow you to cycle through a number of different custom effects (including BrightnessEffect) and apply them to the real-time camera preview or a static image.

In addition, the custom effect file can be dropped into your own project, and used as described in the section Using the filter.

Pre-requisites

Performance

The BrightnessEffect is less efficient than the Nokia Imaging SDK's inbuilt BrightnessFilter.

Device BrightnessEffect BrightnessFilter
Lumia 920 7-8 FPS 16-17 FPS

The BrightnessEffect class runs at about 7-8 FPS (frames per second). The inbuilt BrightnessFilter runs at around 16-17 FPS.

The Real Time Filter Demo test project is configured so that the inbuilt and custom effect run side-by-side for easy comparison.


Code walkthrough

The technique for changing the brightness of an image involves adjusting each of the RGB color components up or down uniformly. Moving the colors down gets them closer to zero (black), and moving them up gets them closer to 255 (white).

If you are dimming an image, you will use a negative percentage value to indicate how dim you would like to make the image. If you choose -1.0 (-100%), then each color component will go to zero making the image completely black. Any other percentage value will be that portion of a particular color component subtracted from itself.

If you are brightening an image, you will use a positive percentage value to indicate how bright you would like to make the image. If you choose 1.0 (100%), then each color component will go to 255 making the image completely white. Any other percentage value will be that portion of a particular color component's distance to 255 added to itself.

  1. if (m_BrightnessPercentage < 0)
  2. {
  3.     // Dimming the image - A value of -1 or -100%, will completely reduce all colors to 0
  4.     // Reduce each color component by the passed in percentage of the amount of color
  5.     // it is currently displaying.
  6.     red = (uint)Math.Max(0, (red + (red * m_BrightnessPercentage)));
  7.     green = (uint)Math.Max(0, (green + (green * m_BrightnessPercentage)));
  8.     blue = (uint)Math.Max(0, (blue + (blue * m_BrightnessPercentage)));
  9. }
  10. else
  11. {
  12.     // Brightening the image - A value of 1 or 100%, will completely increase all colors to 255
  13.     // Increase each color component by the passed in percentage of the amount of color
  14.     // is has left before it reaches the max of 255.
  15.     red = (uint)Math.Min(255, (red + ((255 - red) * m_BrightnessPercentage)));
  16.     green = (uint)Math.Min(255, (green + ((255 - green) * m_BrightnessPercentage)));
  17.     blue = (uint)Math.Min(255, (blue + ((255 - blue) * m_BrightnessPercentage)));
  18. }


Using the filter

Drop an image control into your XAML.

  1. <Image x:Name="FilterEffectImage" Width="800" Height="480" Stretch="Fill" Grid.RowSpan="2" />

Use this code to apply the filter effect to your chosen image and assign it to the XAML image control.

  1. // Initialize a WriteableBitmap with the dimensions of the XAML image control
  2. WriteableBitmap writeableBitmap = new WriteableBitmap((int)FilterEffectImage.Width, (int)FilterEffectImage.Height);
  3.  
  4. // Example: Accessing an image stream within a standard photo chooser task callback
  5. // http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394019(v=vs.105).aspx
  6. //using (var imageStream = new StreamImageSource(e.ChosenPhoto))
  7.  
  8. // Example: Accessing an image stream from a sample picture loaded with the project in a folder called "Pictures"
  9. var resource = App.GetResourceStream(new Uri(string.Concat("Pictures/", "sample_photo_08.jpg"), UriKind.Relative));
  10. using (var imageStream = new StreamImageSource(resource.Stream))
  11. {
  12.     // Applying the custom filter effect to the image stream
  13.     using (var customEffect = new BrightnessEffect(imageStream, 0.50))
  14.     {
  15.         // Rendering the resulting image to a WriteableBitmap
  16.         using (var renderer = new WriteableBitmapRenderer(customEffect, writeableBitmap))
  17.         {
  18.             // Applying the WriteableBitmap to our xaml image control
  19.             FilterEffectImage.Source = await renderer.RenderAsync();
  20.         }
  21.     }
  22. }


License

The code has been released with the standard MIT License, and can be viewed in the Github project here.


Summary

Hopefully you've enjoyed seeing how this custom effect implementation unlocks some of the mystery behind the amazing Nokia Imaging SDK.

As with all articles on the wiki, you are welcome to contribute any changes to this code that would improve the quality, whether it be additional features or improving its efficiency.

This page was last modified on 18 February 2014, at 09:33.
93 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.

×