×
Namespaces

Variants
Actions
(Difference between revisions)

Edge detection filter in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Creating UI)
somnathbanik (Talk | contribs)
(Somnathbanik - - Code Behind)
Line 55: Line 55:
  
 
===Code Behind===
 
===Code Behind===
Use the Photo Chooser to select an image from the gallery and store it to a BitmapImage
+
* Use the Photo Chooser Task to select an image from the gallery and store it to a [http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage%28v=vs.110%29.aspx BitmapImage]
 
<code csharp>
 
<code csharp>
 
public MainPage()
 
public MainPage()
Line 64: Line 64:
 
             photoChooserTask = new PhotoChooserTask();
 
             photoChooserTask = new PhotoChooserTask();
 
             photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
 
             photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
 +
        }
  
 
+
void photoChooserTask_Completed(object sender, PhotoResult e)
        }
+
        void photoChooserTask_Completed(object sender, PhotoResult e)
+
 
         {
 
         {
 
             if (e.TaskResult == TaskResult.OK)
 
             if (e.TaskResult == TaskResult.OK)
Line 74: Line 73:
 
                 bmp.SetSource(e.ChosenPhoto);
 
                 bmp.SetSource(e.ChosenPhoto);
 
                 imageOriginal.Source = bmp;
 
                 imageOriginal.Source = bmp;
 
 
 
             }
 
             }
 
         }
 
         }
  
 
</code>
 
</code>
We add the WriteableBitmapEx library into our project reference to get RGB  value of a pixel. The EdgeDetection() method calculates the edges of an image and returns the final image to the called function.
+
* We add the [http://writeablebitmapex.codeplex.com/ WriteableBitmapEx] library to our project reference to get '''RGB''' value of a pixel. The{{Icode| EdgeDetection()}} method calculates the edges of an image and returns the final image to the called function.
 
<code csharp>
 
<code csharp>
 
private WriteableBitmap EdgeDetection(WriteableBitmap bmp)
 
private WriteableBitmap EdgeDetection(WriteableBitmap bmp)
Line 87: Line 84:
 
             for (int i = 1; i < bmp.PixelWidth-1; i++)
 
             for (int i = 1; i < bmp.PixelWidth-1; i++)
 
             {
 
             {
 
 
                 for (int j = 1; j < bmp.PixelHeight-1; j++)
 
                 for (int j = 1; j < bmp.PixelHeight-1; j++)
 
                 {
 
                 {
Line 93: Line 89:
 
                     Color cx2 = bmp.GetPixel(i, j);
 
                     Color cx2 = bmp.GetPixel(i, j);
 
                     Color cx3 = bmp.GetPixel(i + 1, j);
 
                     Color cx3 = bmp.GetPixel(i + 1, j);
 
 
                     Color cy1 = bmp.GetPixel(i, j - 1);
 
                     Color cy1 = bmp.GetPixel(i, j - 1);
 
                     Color cy2 = bmp.GetPixel(i, j);
 
                     Color cy2 = bmp.GetPixel(i, j);
 
                     Color cy3 = bmp.GetPixel(i, j + 1);
 
                     Color cy3 = bmp.GetPixel(i, j + 1);
 
 
                     int lx = (cx1.R + cx1.G + cx1.B) + (cx3.R + cx3.G + cx3.B) - (2 * (cx2.R + cx2.G + cx2.B));
 
                     int lx = (cx1.R + cx1.G + cx1.B) + (cx3.R + cx3.G + cx3.B) - (2 * (cx2.R + cx2.G + cx2.B));
 
                     int ly = (cy1.R + cy1.G + cy1.B) + (cy3.R + cy3.G + cy3.B) - (2 * (cy2.R + cy2.G + cy2.B));
 
                     int ly = (cy1.R + cy1.G + cy1.B) + (cy3.R + cy3.G + cy3.B) - (2 * (cy2.R + cy2.G + cy2.B));
 
 
                     double root = Math.Sqrt(lx * lx / 4 + ly * ly / 4);
 
                     double root = Math.Sqrt(lx * lx / 4 + ly * ly / 4);
 
                     if (root > 15)
 
                     if (root > 15)
Line 106: Line 99:
 
                     else
 
                     else
 
                         bitmap.SetPixel(i, j, Colors.White);
 
                         bitmap.SetPixel(i, j, Colors.White);
                 
 
 
                 }
 
                 }
 
             }
 
             }
 
 
 
             return bitmap;
 
             return bitmap;
 
         }
 
         }
 
 
     
 
 
</code>
 
</code>
Finally we initiate the edge detection process with a button clicked event and display the output in an Image control.
+
* Finally we initiate the edge detection process with a Button clicked event and display the output in an Image control.
 
<code csharp>
 
<code csharp>
 
private void Button_Click_2(object sender, RoutedEventArgs e)
 
private void Button_Click_2(object sender, RoutedEventArgs e)
Line 126: Line 113:
 
             writeableBmp.Invalidate();
 
             writeableBmp.Invalidate();
 
             newWBmp.Invalidate();
 
             newWBmp.Invalidate();
           
+
          }
        }
+
 
</code>
 
</code>
 
  
 
==Source Code==
 
==Source Code==
 
* The full source code of the example is available here: [[File: EdgeDetectionWp8.zip]]
 
* The full source code of the example is available here: [[File: EdgeDetectionWp8.zip]]

Revision as of 14:03, 11 December 2013

This article demonstrate how to create an edge detection filter in Windows Phone.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820,920
Compatibility
Platform(s):
Windows Phone 8
Article
Created: somnathbanik (11 Dec 2013)
Last edited: somnathbanik (11 Dec 2013)

Contents

Introduction

Edge detection is the change in pixel brightness of a digital image. The pixel at which the image brightness changes we mark that point as an edge of the image. In this article we will create a edge detection filter that will detect the edges with black points. We have followed the Wiki for reference.

Implementation

Create a standard Windows Phone Project

Let’s create a standard Windows Phone Application Project

  • Launch Visual Studio
  • Click on File
  • Click on New Project
  • Select Windows Phone App (Visual C# Template)
  • Add Name and Location of the project
  • Click OK to create the project.

Creating UI

  • Once you are done creating the standard project let’s add two Buttons and two Image controls in the MainPage.xaml. These controls are added to select an original image from the picture hub and apply edge filter on to it.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<Image x:Name="imageOriginal" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Select Image" Click="Button_Click_1" ></Button>
<Image x:Name="imageProcessed" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Detect Edge" Click="Button_Click_2" ></Button>
</StackPanel>
</StackPanel>
</Grid>

Code Behind

  • Use the Photo Chooser Task to select an image from the gallery and store it to a BitmapImage
public MainPage()
{
InitializeComponent();
 
//select picture from picture hub
photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
}
 
void photoChooserTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
bmp = new BitmapImage();
bmp.SetSource(e.ChosenPhoto);
imageOriginal.Source = bmp;
}
}
  • We add the WriteableBitmapEx library to our project reference to get RGB value of a pixel. The EdgeDetection() method calculates the edges of an image and returns the final image to the called function.
private WriteableBitmap EdgeDetection(WriteableBitmap bmp)
{
WriteableBitmap bitmap = new WriteableBitmap(bmp.PixelWidth, bmp.PixelHeight);
for (int i = 1; i < bmp.PixelWidth-1; i++)
{
for (int j = 1; j < bmp.PixelHeight-1; j++)
{
Color cx1 = bmp.GetPixel(i - 1, j);
Color cx2 = bmp.GetPixel(i, j);
Color cx3 = bmp.GetPixel(i + 1, j);
Color cy1 = bmp.GetPixel(i, j - 1);
Color cy2 = bmp.GetPixel(i, j);
Color cy3 = bmp.GetPixel(i, j + 1);
int lx = (cx1.R + cx1.G + cx1.B) + (cx3.R + cx3.G + cx3.B) - (2 * (cx2.R + cx2.G + cx2.B));
int ly = (cy1.R + cy1.G + cy1.B) + (cy3.R + cy3.G + cy3.B) - (2 * (cy2.R + cy2.G + cy2.B));
double root = Math.Sqrt(lx * lx / 4 + ly * ly / 4);
if (root > 15)
bitmap.SetPixel(i, j, Colors.Black);
else
bitmap.SetPixel(i, j, Colors.White);
}
}
return bitmap;
}
  • Finally we initiate the edge detection process with a Button clicked event and display the output in an Image control.
private void Button_Click_2(object sender, RoutedEventArgs e)
{
WriteableBitmap writeableBmp = new WriteableBitmap(bmp);
WriteableBitmap newWBmp = EdgeDetection(writeableBmp);
imageProcessed.Source = newWBmp;
writeableBmp.Invalidate();
newWBmp.Invalidate();
}

Source Code

113 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.

×