.NET life

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.

Microsoft Surface supports two types of tags.

Byte Tags

These tags store 8 bits of data (1 byte), so there are 256 unique tag values.

Each byte tag that the Microsoft Surface Vision System identifies has an orientation and an 8-bit tag value. The following figure illustrates the basic tag that all other tags are based on.

1: Infrared-absorbing background
2: One infrared-reflecting circle (0.125-inch radius) in the center of the tag. This circle locates the tag on the Microsoft Surface screen.
3: Three infrared-reflecting circles (0.08 inch radius) located 0.28 inches from the center of the tag in each direction (left, right, and down). These "guide" circles determine the tag orientation.

In addition, each tag contains from zero to eight data bits that define the tag value. These data bits are white circles (0.075-inch radius) that are centered in one of the following locations:
- 0.3058 inches horizontally and 0.2038 inches vertically (bits 1, 2, 5, and 6) from the center of the tag.
- 0.2038 inches horizontally and 0.3058 inches vertically (bits 0, 3, 4, and 7) from the center of the tag.

The highest order bit (bit 7) is at the 1 o'clock position when you look at the printed side of the tag. Less significant bits are then read counter-clockwise from the 12 o'clock position. A circle represents 1. The absence of a circle represents 0.

Examples of bytes tags:

Tag 0x00 (00000000)

Tag 0xFF (11111111)

Tag 0xC1 (11000001)

Tag 0xC6 (11000110)

Identity Tags

These tags store 128 bits of data (two 64-bit values), so there is an effectively unlimited range of unique tag values.

As for tags bytes, an identity tag has circles of position:

The operating principle is the same as for bytes tags.

Example of identity tag:

Using tags

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

<s:TagVisualization x:Class="TagSample.TagVisualization1"
    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"
     Height="60" Width="60">
    <Grid Background="Blue">

    </Grid>
</s:TagVisualization>

Now add the following XAML code in the SurfaceWindow1.xaml:

<s:TagVisualizer VisualizationAdded="OnVisualizationAdded" >
    <s:TagVisualizer.Definitions>
        <!-- Hex = 1 -->
        <s:ByteTagVisualizationDefinition Value="1" Source="Tag1.xaml"/> 
        <!-- Hex = F3 -->
        <s:ByteTagVisualizationDefinition Value="243" Source="Tag2.xaml" /> 
        <!-- Hex: Series = 00000315 / Value = 0000000A -->
        <s:IdentityTagVisualizationDefinition Series="789" Value="10" Source="Tag3.xaml" />
    </s:TagVisualizer.Definitions>
    <DockPanel LastChildFill="False">
        <TextBlock x:Name="TagValue" 
                    HorizontalAlignment="Center"
                    DockPanel.Dock="Bottom"/>
    </DockPanel>
</s:TagVisualizer>

TagVisualizer is a content control that automatically displays visualization objects when a tag is placed on the 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:

private void OnVisualizationAdded(object sender, TagVisualizerEventArgs e)
{
    TagData aTag = e.TagVisualization.VisualizedTag;
    string type = "";
    string value = "";
            
    switch (aTag.Type)
    {
        case TagType.Byte:
            type = "Byte Tag";
            value = aTag.Byte.Value.ToString();
            break;
        case TagType.Identity:
            type = "Identity Tag";
            value = aTag.Identity.Series.ToString() + " - " + aTag.Identity.Value.ToString();
            break;
    }

    this.TagValue.Text = type + ":" + value;
}

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

Note that the integer values need to be converted into hexadecimal while using in the simulator.

You can set TagVisualizer and TagVisualizationDefinition directly from the code behind like this:

TagVisualizer aVisualyzer = new TagVisualizer();
MainGrid.Children.Add(aVisualyzer);
ByteTagVisualizationDefinition byteTag = new
ByteTagVisualizationDefinition();
byteTag.Value = 0xF3;
byteTag.Source = new Uri("/Tag2.xaml", UriKind.Relative);
aVisualyzer.Definitions.Add(byteTag);