Surface Development Part 4: Reacting to Physical Objects

Surface has the ability to recognize and respond to actual physical real-world objects placed on the Surface top, and it does this by means of tags. 


There are two types of tags that are recognized by Surface's vision system:

Byte tags Identity tag
ByteTag IdentityTag

Byte tags have 256 unique values.  They can be used in Surface applications where the Surface reacts to a few different physical objects. 

Identity tags have 340,282,366,920,938 septillion (that's 24 more zeroes) unique values.  They can be used in Surface applications where you need to uniquely identify a large number of people, such as tags on a hotel loyalty card. 


Next, let's look at the code that you would write to allow the Surface to respond to a tag.  This is done by the TagVisualizer control, along with TagVisualization and TagVisualizationDefinition, in the namespace Microsoft.Surface.Presentation.Controls

For example, let’s say that we are writing an application for a retail store which sells cellular phones, using the Surface as a kiosk to display product information.  (This is a real scenario - AT&T is currently doing this in select stores.)  When you set a cell phone on the Surface top, you want a visualization with information on the phone specs, calling plans, network coverage, etc. to appear on the Surface next to it.  To accomplish this, the steps are:

1. Create a TagVisualization which contains the XAML to display the phone specs, calling plans, network coverage, etc.  In Visual Studio, you can right-click on a Surface project in the Solution Explorer and select Add, New Item.  Select a "Tag Visualization (WPF)" and name it CellPhoneData.xaml.  Then, in that XAML, you can create a rich visual experience which displays the relevant cell phone data. 

2. Put a physical tag on the cell phone (tags are included with the Surface unit).  In this scenario, there will probably be a limited number of demo cell phones available for customers to play with, so a byte tag would suffice.  Let's say that the tag that we put on the Samsung Saga cell phone was 0xC1 (one of the tags shown above). 

3. Create a TagVisualizer, which contains a TagVisualizationDefinition.  This maps the TagVisualization that we created in step #1 to the tag’s value, enabling the cell phone data visualization to appear when the tagged cell phone is placed on the Surface.  The code would look something like this:


Note that this code would be in the main SurfaceWindow XAML, not in the TagVisualization XAML.  We can set the various offsets to make the cell phone data on the Surface appear positioned properly from the physical cell phone.  Optionally, we could set other properties, like the maximum number of cell phones allowed and the behavior when a tag is removed from the Surface. 

Comments (6)
  1. Hopefully you’ve learned a little about Surface development this week!&#160; I didn’t originally intend

  2. Misfit Geek says:

    I’m a huge Microsoft Surface Fan. Jennifer Marsman just completed a blog series on developing for the Surface complete with embedded videos. Click on the links to check them out. Surface Development Part 1: What is the Microsoft Surface? Surface Development

  3. Chris Koenig says:

    For all you Surface Fans, my colleague Jennifer Marsman has written a series of blog posts about developing

  4. Thank you for submitting this cool story – Trackback from DotNetShoutout

  5. ChrisKoenig says:

    For all you Surface Fans, my colleague Jennifer Marsman has written a series of blog posts about developing

Comments are closed.

Skip to main content