Tagged Objects in Microsoft Surface – TagVisualizer, TagVisualization, TagVisualizationDefinition

Microsoft introduced a new concept called Tag driven application or Tagged Objects in Surface SDK through which the surface can identify Objects placed over the surface table. Object is printed with some tags that surface engine can read. Tags are either Byte Tags or Identity Tags.

How can we achieve this using Surface SDK? Let’s have a look at that.
I tried a sample by using Tagged Objects in Surface SDK.

Tag Visualization is possible by using these three classes:

• TagVisualizer – is what is actually responding to the Tagged Object and showing up the TagVisualization when placing a tag.
• TagVisualization - is what we are showing in the surface when a tag is placed in the surface.
• TagVisualizationDefinition – is using for defining the tag value to which the TagVisualizer will respond and also source, physical location, orientation and other properties of the visualization.

So let’s try a sample.

• Create a Surface project from the Visual Studio 2008 Template.
• In the SurfaceWindow1, add a TagVisualizer.
  XML

  <s:TagVisualizer Name="TagVisualizer">
  ....
  </s:TagVisualizer> 

• Add a TagVisualization to the project. Add New Item>TagVisualization. I created TagVisualization SampleTagVisualization:
  XML

  <s:TagVisualization x:Class="MySurfaceApplication.SampleTagVisualization"          
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:s="http://schemas.microsoft.com/surface/2008"
  Loaded="SampleTagVisualization_Loaded">
  <Grid Height="400"
   Width="600"
   Background="White">
  <TextBlock Text="Some Tagged Object UI here."
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Foreground="Red" />
  </Grid>
  </s:TagVisualization>

• Add TagVisualizationDefinition to SurfaceWindow1 for TagVisualizer. We can add this either by XAML or from code behind.

  Either from XAML:

  XML

  <s:TagVisualizer Name="TagVisualizer">
  <s:TagVisualizer.Definitions>
  <s:ByteTagVisualizationDefinition Value="192"
  Source="SampleTagVisualization.xaml"
  UsesTagOrientation="True"
  TagRemovedBehavior="Fade"
  PhysicalCenterOffsetFromTag="7.5,4.5"/>
  </s:TagVisualizer.Definitions>
  </s:TagVisualizer>

  or from code behind (add it in the constructor):

  XML

  ByteTagVisualizationDefinition tagVisualizationDefinition = new 
  ByteTagVisualizationDefinition();
  tagVisualizationDefinition.Value = 192;
  tagVisualizationDefinition.Source = new Uri("SampleTagVisualization.xaml",
  UriKind.Relative);
  tagVisualizationDefinition.UsesTagOrientation = true;
  tagVisualizationDefinition.TagRemovedBehavior = TagRemovedBehavior.Fade;
  tagVisualizationDefinition.PhysicalCenterOffsetFromTag = new 
  Vector(7.5, 4.5);
  TagVisualizer.Definitions.Add(tagVisualizationDefinition);

  Build and run the application in Surface Simulator. Tag Value is here 192. So give Tag Value as C0 (Hexadecimal). 

• More Microsoft Surface articles.