Dear Friends,
Today is Sunday. I am sure you have many plans for the day even I have also. My plan is to share one awesome feature of Silverlight which is Augment Reality. I am very excited for this.
A new toolkit is introduced which is SLAR toolkit. The Silverlight Augment reality by the name it is clear that it’s more about reality work.
The current sample project we match pattern of an image. We just move the corresponding images in front of our web cam and if the pattern matches we put some kind of marker like text box, images.
Is it interesting? , Really it is when you tried it you will enjoy the functionality more.
I tried this toolkit and I am very much impressed with this new utility. With this utility you can try various feature programs, games and make the things more interesting more live.
You can download this new feature toolkit from http://slartoolkit.codeplex.com/releases/view/45629
I am going to show you an existing sample to you which is mainly for recognizing the pattern images.
Although I am not going to do something extra it’s exactly same which is provided by SLAR Toolkit.
So here are the steps
1) Create a new Silverlight project in VS 2010 (don’t include host Silverlight option)
2) Copy Matrix3DEx.dll, SLARToolkit.dll in bin folder of the project and add reference of the DLL in the project.
3) Now add pat files in projects (the pat files are basically pattern file which you can create for an image. The pattern file can be create from photo shop or other image editing tool)
4) The structure of the project now looks like as below.
5) On main page XAML put following coding
<UserControl x:Class=”SLARTest.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006”
mc:Ignorable=”d”
d:DesignHeight=”300″ d:DesignWidth=”400″ Loaded=”UserControl_Loaded”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<StackPanel>
<TextBlock Text=”IndianDotnet.wordpress.com ” HorizontalAlignment=”Center” />
<Grid Width=”640″ Height=”480″>
<Rectangle Name=”Viewport” Stroke=”Black” StrokeThickness=”2″ />
<Canvas>
<TextBox Name=”Txt” Text=”SLAR toolkit test with Indiandotnet” Width=”300″ Height=”300″ TextWrapping=”Wrap” AcceptsReturn=”True” FontSize=”16″ />
</Canvas>
</Grid>
<Button Content=”Start Fun” HorizontalAlignment=”Center” Click=”Button_Click” />
</StackPanel>
</Grid>
</UserControl>
On Main page ‘s code behind we need to write below code
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
// Initialize the webcam
captureSource = new CaptureSource();
captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
// Fill the Viewport Rectangle with the VideoBrush
var vidBrush = new VideoBrush();
vidBrush.SetSource(captureSource);
Viewport.Fill = vidBrush;
// Initialize the Detector
arDetector = new CaptureSourceMarkerDetector();
// Load the marker pattern. It has 16×16 segments and a width of 80 millimeters
var marker = Marker.LoadFromResource(“Marker_Hiro_16x16segments_80width.pat”, 16, 16, 80);
// The perspective projection has the near plane at 1 and the far plane at 4000
arDetector.Initialize(captureSource, 1, 4000, marker);
// Attach the AR detection event handler
// The event is fired if at least one marker was detected
arDetector.MarkersDetected += (s, me) =>
{
// Change to UI thread in order to manipulate the text control’s projection
Dispatcher.BeginInvoke(() =>
{
// Calculate the projection matrix
var dr = me.DetectionResults;
if (dr.HasResults)
{
// Center at origin of the TextBlock
var centerAtOrigin = Matrix3DFactory.CreateTranslation(-Txt.ActualWidth * 0.5, -Txt.ActualHeight * 0.5, 0);
// Swap the y-axis and scale down by half
var scale = Matrix3DFactory.CreateScale(0.5, -0.5, 0.5);
// Calculate the complete transformation matrix based on the first detection result
var world = centerAtOrigin * scale * dr[0].Transformation;
// Calculate the final transformation matrix by using the camera projection matrix from SLARToolkit
var vp = Matrix3DFactory.CreateViewportTransformation(Viewport.ActualWidth, Viewport.ActualHeight);
var m = Matrix3DFactory.CreateViewportProjection(world, Matrix3D.Identity, arDetector.Projection, vp);
// Apply the final transformation matrix to the TextBox
Txt.Projection = new Matrix3DProjection { ProjectionMatrix = m };
}
});
};
}
private void Button_Click(object sender, RoutedEventArgs e)
{
// Request webcam access and start the capturing
if (CaptureDeviceConfiguration.RequestDeviceAccess())
{
captureSource.Start();
}
}
Now when you will run the code you are surprised by the working functionality of the page.
In our example we have taken “Hiro.pat” file
So when we run this if we put hiro image pattern print out the image is captured and the textbox comes in front of the image.
Thanks & Regards
Rajat Jaiswal
Learn & Share ASP.NET & SQL SERVER 