Microsoft Surface Tagged Objects and Tag Visualizations

Continued from Developing Microsoft Surface Applications

Microsoft Surface applications can recognize special tags besides fingers and  objects. These tags are similar to bar codes in concept and can store a particular value which can be retrieved by Surface’s vision system.

Tags are a pattern of white dots (infrared reflective) in black background (infrared absorbing) and are normally printed on a card or are printed and stuck to the plain surface of an object. Such objects with a tag are called as Tagged Objects.

Microsoft Surface supports two types of tags:


Byte Tags

• Stores 8 bits of data (1 byte).
• 256 possible unique values.
• Smaller size (3/4 x 3/4 inches).
• Reliable tracking even for faster moving tags.
• Represented in code by ByteTag structure.
• ByteTag.Value property represents the tag value.

Identity Tags

• Stores 128 bits of data (two 64 bit values).
• Larger range of possible unique values (i.e. 340,282,366,920,938,000,000,000,000,000,000,000,000).
• Larger size (1 x 1 inches).
• Functions better when tags are stationary or nearly stationary.
• Represented in code by IdentityTag structure.
• IdentityTag.Series and IdentityTag.Value together represents the tag value.

These tags are usually pre-printed and available from Microsoft or are printed using special tools that come with the Surface SDK.

Now let us build a sample application that deals with tagged objects. Create a new Surface project and add three Tag Visualization items (Add > New Item > Visual C# > Surface > v1.0 > Tag Visualization (WPF)). These items defines the UI that appears when a tagged object is placed on Surface. For now, let us just specify a height and width for it and then have a blank grid with a background color.

<s:TagVisualization x:Class="TagSample.BlueTags"
    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="BlueTags_Loaded" Height="50" Width="50">
    <Grid Background="Blue">
            
    </Grid>
</s:TagVisualization>

Now add the following XAML code in the SurfaceWindow1.xaml

<Grid Background="{StaticResource WindowBackground}" >
  <s:TagVisualizer VisualizationAdded="OnVisualizationAdded" >
    <s:TagVisualizer.Definitions>
      <!-- ByteTag: 10 = A -->
      <s:ByteTagVisualizationDefinition Value="10"
                                        Source="BlueTags.xaml">
      </s:ByteTagVisualizationDefinition>
      
      <!-- ByteTag: 250 = FA -->
      <s:ByteTagVisualizationDefinition Value="250"
                                        Source="RedTags.xaml">
      </s:ByteTagVisualizationDefinition>

      <!-- IdentityTag: 500 = 1F4, 1000 = 3E8 -->
      <s:IdentityTagVisualizationDefinition Series="500" Value="1000"
                                        Source="YellowTags.xaml">
      </s:IdentityTagVisualizationDefinition>
      
    </s:TagVisualizer.Definitions>
    <DockPanel LastChildFill="False">
      <TextBlock x:Name="uxDisplay"
                 HorizontalAlignment="Center"
                 DockPanel.Dock="Bottom"
                 Text="Watch here"/>
    </DockPanel>
  </s:TagVisualizer>
</Grid>

TagVisualizer is a content control that automatically displays visualization objects when a tag is placed on the control.  We keep this as the root containing control within Grid. Then we define three tags using TagVisualizationDefinition. Each definition specifies what kind of tag (Byte or Identity) we are using, its value, and the source file for TagVisualization. Finally we have a TextBlock to display the values.

Also note that we have defined VisualizationAdded event on the TagVisualizer. This gets fired whenever a tag is placed. Add the following code to handle this event.

void OnVisualizationAdded(object sender, TagVisualizerEventArgs e)
{
    String type = "";
    String value = "";

    if (e.TagVisualization.VisualizedTag.Type == TagType.Byte)
    {
        type = "Byte Tag";
        value = e.TagVisualization.VisualizedTag.Byte.Value.ToString();
    }
    else if (e.TagVisualization.VisualizedTag.Type == TagType.Identity)
    {
        type = "Identity Tag";
        value = e.TagVisualization.VisualizedTag.Identity.Series.ToString() + " - " + e.TagVisualization.VisualizedTag.Identity.Value.ToString();
    }

    uxDisplay.Text = type + ":" + value;
}

In this code, we are retrieving the tag information from the event arguments and then display it in a text box.



Run the application and try placing different tags. Note that the integer values need to be converted to Hexadecimal format while using in the simulator (I use Windows Calculator, change its View to Scientific, use ‘Dec’ option for decimal, type in a number and then choose ‘Hex’ option to convert it to Hexadecimal value) (E.g.: Value 10 in Hex = A).

Continued to: Microsoft Surface Applications - Deployment and Object Routing