Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 17:16, 27 October 2013 by croozeus (Talk | contribs)

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

Handwriting overlay lens app for Windows Phone

From Wiki
Jump to: navigation, search
Featured Article
27 Oct
2013

This article explains how to develop a lens app where you can "handwrite" over the picture.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code Example
Source file: Media:DrawLens.zip
Tested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 920
Compatibility
Platform(s):
Windows Phone 8
Platform Security
Capabilities: ID_CAP_ISV_CAMERA, ID_CAP_MEDIALIB_PHOTO
Article
Created: GuruuMeditation (06 Oct 2013)
Last edited: croozeus (27 Oct 2013)

Introduction

A lens on Windows Phone is a specialised camera or imaging app that can be opened from the built-in camera app.

This code example shows how to create a lens which you can "handwrite" over (DrawLens), using the InkPresenter control. As lenses are well documented on the Windows Phone Dev Center (and you can get a list of useful resources in Camera Lens apps on Windows Phone), it primarily focuses on InkPresenter and the drawing aspects.

Lens example

As discussed in Camera Lens apps on Windows Phone (and its linked articles) the code to register the lens, add the icons needed in the lens-picker, and redirect "lens requests" to launch the required page in the lens app, is nearly "boilerplate" - you can view it in File:DrawLens.zip if needed!

This example therefore starts from the construction of LensPage.xaml the page that is launched when the lens is selected. We use the InkPresenter control for the drawing, and the WriteableBitmapEx Nuget package for the image processing.

The LensPage.xaml will look like this:

<phone:PhoneApplicationPage x:Class="DrawLens.LensPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape"
Orientation="Landscape"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
 
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
 
<StackPanel Orientation="Vertical"
x:Name="ButtonsSP"
Visibility="Collapsed">
<Button Content="Clear"
Margin="10,10"
Width="100"
Click="Clear_OnClick"></Button>
<Button Content="Save"
Width="100"
Click="Save_OnClick">
</Button>
</StackPanel>
<TextBlock Text="Processing..."
Visibility="Visible"
x:Name="ProcessingLabel"></TextBlock>
<InkPresenter Width="640"
Height="480"
MouseLeftButtonDown="TheInkPresenter_MouseLeftButtonDown"
LostMouseCapture="TheInkPresenter_LostMouseCapture"
MouseMove="TheInkPresenter_MouseMove"
x:Name="TheInkPresenter"
Grid.Column="1">
<InkPresenter.Background>
<VideoBrush x:Name="CameraBrush"></VideoBrush>
</InkPresenter.Background>
</InkPresenter>
</Grid>
 
</phone:PhoneApplicationPage>

There are two columns. One with the buttons Clear and Save and the other with an InkPresenter that has a video brush. The camera feed will be streamed to this brush. I will not explain how the InkPresenter is drawing the strokes, it is not the purpose of this wiki and it is explained in the InkPresenter link above.

First, when the page is loaded, we initialize the camera and redirect the feed to the InkPresenter videobrush background:

private PhotoCamera _camera;
 
public LensPage()
{
InitializeComponent();
 
this.Loaded += LensPage_Loaded;
}
 
void LensPage_Loaded(object sender, RoutedEventArgs e)
{
if (PhotoCamera.IsCameraTypeSupported(CameraType.Primary))
{
// Initialize camera, and show buttons only when camera ready
_camera = new PhotoCamera(CameraType.Primary);
// Event launched when the camera as taken a picture
_camera.CaptureImageAvailable += _camera_CaptureImageAvailable;
CameraBrush.SetSource(_camera);
}
 
}

When the user press on the Save button, we capture an image:

private void Save_OnClick(object sender, RoutedEventArgs e)  
{
_camera.CaptureImage();
}

When the image is captured, the camera CaptureImageAvailable event is launched. There you get the bitmap stream.

We make a bitmap from that stream and then take all the strokes data of the InkPresenter and redraw them on the bitmap (the DrawLineBresenham method in the code is based on the WritebeableBitmapEx one and allows us to draw lines thicker than 1 pixel - see the example source code). As the InkPresenter size is different than the size of the image, I compute the magnification ratio by dividing the image size by the InkPresenter size.

After drawing all the strokes, I save the bitmap to the Media Library.

/// <summary>
/// Called when image is available
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void _camera_CaptureImageAvailable(object sender, ContentReadyEventArgs e)
{
Dispatcher.BeginInvoke(() => CreateAndSave(e.ImageStream));
}
/// <summary>
/// Process the image
/// </summary>
/// <param name="stream"></param>
private void CreateAndSave(Stream stream)
{
// Get bitmap from stream
var _bitmap = new WriteableBitmap(1, 1);
 
_bitmap = _bitmap.FromStream(stream);
 
var width = _bitmap.PixelWidth;
 
var height = _bitmap.PixelHeight;
 
// Get ratio between the InkPresentersize and the bitmap size
var ratiox = width / TheInkPresenter.Width;
 
var ratioy = height / TheInkPresenter.Height;
 
// Draw each strokes on the bitmap
foreach (var stroke in TheInkPresenter.Strokes)
{
var x1 = stroke.StylusPoints[0].X * ratiox;
var y1 = stroke.StylusPoints[0].Y * ratioy;
 
foreach (var point in stroke.StylusPoints.Skip(1))
{
var x2 = point.X * ratiox;
 
var y2 = point.Y * ratioy;
 
DrawLineBresenham(_bitmap, (int)x1, (int)y1, (int)x2, (int)y2, Colors.Red, (int)ratiox, (int)ratioy);
 
x1 = x2;
y1 = y2;
}
}
// Save into library
_bitmap.SaveToMediaLibrary("DrawLensGenerated.jpg");
 
MessageBox.Show("Image saved !");
}

The resulting lens produces the images shown in the introduction.

Downloads

You can download the sources from here: File:DrawLens.zip

(Original article and a French translation can be found here : http://www.guruumeditation.net/developping-a-lens-app-for-windows-phone-8)

This page was last modified on 27 October 2013, at 17:16.
276 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.

×