SLARToolkit Beginner`s Guide.docx

Beginner’s Guide

This step by step guide explains how to build a basic Silverlight SLARToolkit application with the CaptureSourceMarkerDetector. The Marker Detectors documentation shows how to use the other Marker Detector implementations.
Microsoft Visual Studio 2010  (Express is sufficient), the Silverlight 4 Tools for Visual Studio  and a standard webcam are required.
The final Visual Studio solution of this guide's application is available in the Source Code repository: trunk\SLARToolKit\Solution\SLARToolKitBeginnersGuide.sln


1. Start Visual Studio and create a new Silverlight Application.

 

2. Select at least Silverlight 4 as the Silverlight Version and uncheck the Host the Silverlight application in a new web site CheckBox.

 

3. Download the latest SLARToolkit binaries and add a reference  to the SLARTooklit.dll and Matrix3DEx.dll.

 

4. Open the MainPage.xaml file and add an event handler to the Loaded event (UserControl_Loaded).
 

<UserControl x:Class="SLARToolKitBeginnersGuide.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="550" d:DesignWidth="700"

    Loaded="UserControl_Loaded">

Add a StackPanel to the LayoutRoot Grid and a TextBlock, a Grid with an Rectangle and a Button as children of the StackPanel. Also add an event handler to the Button's Click event (Button_Click). 
The video stream from the webcam will be shown inside the Rectangle with the help of a VideoBrush. The Button is used to ask the user for the webcam access and to start the capturing.
 

<!-- ... -->

    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel>

            <TextBlock Text="SLARToolkit - Silverlight Augmented Reality Beginner's Guide" HorizontalAlignment="Center" />

            <Grid Width="640" Height="480">

                <Rectangle Name="Viewport" Stroke="Black" StrokeThickness="2" />

            </Grid>

            <Button Content="Start Fun" HorizontalAlignment="Center" Click="Button_Click" />

        </StackPanel>

    </Grid>

The complete XAML file should now look like this:
 

<UserControl x:Class="SLARToolKitBeginnersGuide.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="550" d:DesignWidth="700"

    Loaded="UserControl_Loaded">

    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel>

            <TextBlock Text="SLARToolkit - Silverlight Augmented Reality Beginner's Guide" HorizontalAlignment="Center" />

            <Grid Width="640" Height="480">

                <Rectangle Name="Viewport" Stroke="Black" StrokeThickness="2" />

            </Grid>

            <Button Content="Start Fun" HorizontalAlignment="Center" Click="Button_Click" />

        </StackPanel>

    </Grid>

</UserControl>

5. Open the code-behind (MainPage.xaml.cs), add a member variable of the type CaptureSource, then navigate to the Loaded event handler (UserControl_Loaded), initialize the CaptureSource with the default video device and fill the Rectangle with a VideoBrush that has its source set to the CaptureSource.
 

CaptureSource captureSource;

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;

}

Navigate to the Button_Click event handler, request the webcam device access and start the capturing.
 

private void Button_Click(object sender, RoutedEventArgs e)

{

   // Request webcam access and start the capturing

   if (CaptureDeviceConfiguration.RequestDeviceAccess())

   {

      captureSource.Start();

   }

}

The complete code-behind should now look like this: 
 

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace SLARToolKitBeginnersGuide

{

   public partial class MainPage : UserControl

   {

      CaptureSource captureSource;

      public MainPage()

      {

         InitializeComponent();

      }

      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;

      }

      private void Button_Click(object sender, RoutedEventArgs e)

...