Click here to view the embedded video.

Once we got the basics running I tried to edit the XAML to make it look better. This turned out to be harder than expected. The surface has once again its own default designs, which in my opinion are worse than the WPF standard designs. The default look is grey and square. So I wanted to change it to something more akin to our other touchtable applications: white and round. However Paul used a ScatterView component to display the layerlist and the geodan logo. He had read that one can just drop components in a ScatterView, without the need to embed them in ScatterViewItems. This is true, but it is a nightmare for the (non-initiated) designer. What happens is that the grey-square design of the ScatterViewItem is drawn beneath any layout you come up with for your own item. This is a very puzzling behaviour, although not entirely unexpected once you know that the ScatterViewItem exists.

Once I solved this issue I could seriously try to change the layout of the ScatterViewItems. Here however real glitches appeared. We use rounded borders and dropshadows for our items. As you can see below there are (at least) two issues:

Rounded border on the Surface don't work

The dark rectangle in the top of the image is actually a shadow of  a ScatterViewItem which for some reason doesn’t start below it. However this makes it easy to see the first glitch in the rendering. As you can see there is a thin dark line near the edge, which makes a weird square corner at the corner. This shouldn’t be there and when you resize the ScatterViewItem down, the shadow becomes darker (as it should have been in the first place) and the line is not visible anymore. If you don’t use rounded corners on the shadow the line is still there, but harder to notice because it is exactly following the edge of the shadow.

The second annoying glitch I’ve found is the gap between the border and the content. If we zoom in a bit on the layercontrol you can see there is a pixel space between the border and the content:

A gap between border and content

So far I haven’t been able to eliminate the pixel wide gap. It doesn’t look bad in our application right now, but in general it is bad that there is such an uncontrollable gap. So I have the feeling that the Surface people are not a big fan of borders in general and rounded border specifically.

We spend quite some time calibrating, recalibrating and reading documentation from the invite only Microsoft site without any effect. In the end Vista asked us to install an update and to reboot the Surface. When it was rebooted we ran the ‘Surface Shell’ application from the Desktop and suddenly it worked!!

The Surface, or at least our version, comes with a set of code examples. We tried several to see how well it works and found out that especially the Grand Piano demo is a crowd drawer (mainly due to the sound probably). The Piano is a limited set of piano keys in perspective view. ‘Pressing’ a key results in a tone, just like a real piano

Playing piano on a Surface

The sensitivity of the Surface is well balanced. The Surface doesn’t notice fingers which are hovering just above the surface and you don’t need to apply any pressure to get noticed once you touch it. We’ve built our own table using a similar FTIR technique and we had quite some problems getting that balance right. Also the Surface is using 5 camera’s where we used just one as such it’s resolution is better as well.

It has additional logic in the interpretation of the camera feeds. It has three different types of touches it can recognize: finger, blob and tag. From each type it gives a location, an orientation, an id and in case of the tags a value.

Surface information of a finger

The difference between a blob and a finger is the size and shape of the touch, for instance a small square object is seen as a blob and a larger oval object is seen as a finger. Furthermore the earlier white-only bias of the Surface we experienced is now changed to a no-black bias. This gives some interesting results; a black/orange marker on the surface is recognized as a single finger at the tip of the marker;

Fingers come in strange shapes

The Surface feels pretty responsive, but using the Data Visualizer you notice that the position of the touch as interpreted by the Surface lags behind the actual touch. In the demos it is not noticeable but we found a similar lag very annoying on the DiamondTouch. On that table we managed to get rid of the lag and hopefully we can do the same here.

There is the famous demo of the telephone on the Surface, where it gets recognised and you can drag and drop data. We tried it and noticed that it doesn’t like android phones; it just doesn’t see the phone. An (ancient) windows mobile phone however does get recognised for what it is: a blob;

Android on the Surface

Obviously the Surface doesn’t automagically recognize phones or any other object. The table comes with a set of fiducials which you can stick on objects. These fiducials get recognised as tags with a value and using that value you can do fun stuff in your software.

Update

I discovered that while it doesn’t respond to hovering fingers, it does notice hovering areas the size of a hand. Which is slightly annoying since in normal use you easily have your hand hovering just above the surface while one or more fingers touch it. It might be possible to filter this unwanted behavior in real applications, because the hand shows up as a blob instead of a finger.

We were supposed to have two normal and one developer edition but it wasn’t very clear which one was which so we picked one and carried it to our office. This turned out to quite tricky, this thing is heavy and doesn’t have any clear handles. In the end we carried it by holding the projection-surface …

Once setup we had to fiddle a bit to get the powercable connected and find the proper (two) powerswitches. Once it booted it prompted us an EULA we had to accept. However the Surface is designed to be a standalone machine completely controlled by touch but before the touch was working we had to accept the EULA, which was only accessible by touch … hm

You need to accept to start touch, and you need touch to accept

So we had to plug in a mouse, but apparently we hadn’t chosen the developer edition since no usb ports where visible. The manual explained that we need to open up the side of the table to access the ports. After two screws and a bit of force we managed to open up the side and it gave us full access to all normal PC ports.

The surface insides

It asked us to create an admin account and once it was setup it gave us the choice to login as that admin or as TableUser, since we had no clue what the password for TableUser was, we logged in as admin.  After a bit we were shown a fresh Vista desktop with a few shortcuts. The most obvious for us was the calibration tool. We calibrated our table and started a touch application. It failed to run complaining that the filtergraph was not found at the location specified. We neither had knew what a filtergraph was, nor what the location specified was.  This got us stuck for quite a while, the manuals didn’t help and the online site with information was only accessible by invitation and due to some miscommunication(?) we were not (yet) invited.

Digging into things like registries, hidden folders and binary blobs we finally discovered that there are two versions of the calibration tool. One which does a background-light calibration and one which does a per camera calibration. We had run both, but we failed to notice that the latter had to run 5 times (5 cameras in the surface). Once we had done so the different surface programs ran without errors and without effect.

Pretty annoyed we banged our fist on the table and that seemed to have effect. It turned out that putting a lot of force on the table gave results, indicating a calibration issue. Having no idea how to finetune the calibration we started to experiment with different ways of touching. The current consensus is that it is designed for ubergeeks who never see the sun and are pure white; touching the Surface with a finger doesn’t give a result, wrapping the finger in white tissue suddenly does …

The 'attract' application

Hopefully we will figure out soon how to tweak the calibration and otherwise we need to buy a set of white surgical gloves to hand out to users

Basic animation of hiding a card from view

After watching the Secondlight demo from Microsoft, Johan came up with an idea to show ‘private’ information on a touchtable. For instance during a board game on the table a player wants to view his private stack of cards. In a traditional game he would have his cards turned upside down and would view them behind his hand. This behaviour can be mimiced on the table as well. If the user puts the side of his hand on the table the table can show the card within the confines of his hand.