Hi all,

last week my son's teacher asked whether there were dads who wanted to come and talk about their daytime job in class. Although I drop off the kids at school in the morning (not every day) I don't get to spend a lot of time with them in and around school. Therefor I thought it was a nice idea and proposed to put a Surface table in their classroom for the day.

This Sunday I spent a couple of hours creating two very basic games that they could play on the machine.

The first one is a version of the game memory, the second one is a sound-based game. All in all I spent around five hours developping both games, so don't expect high-end games ! But I achieved my goals: the kids had a wonderfull time !

I have added some screenshots, some pictures from the day itself and a zip file containing the code.

 Memory Game (three player mode)

 Memory game (using colors as cards)

 Sound game (try to remember the order of the sounds played by the app)

Maybe you can have some fun time with your kids and these games as well.

Enjoy !

boris

KidsGames.zip (1.46 mb)

Last wednesday I presented a lunch session at the TechDays2010 in Belgium entitled "How we created 'De Kinderpuzzel'". This session was about a Microsoft Surface project we did for the Flemish Television and the production house Koeken Troef !.

The slides that I used for this presentation you can see below (just click on the link).

You can now watch the presentation on channel 9: http://channel9.msdn.com/posts/liese/TechDays-2010--Developer-Walkthrough-how-we-built-De-Kinderpuzzel/If I understood correctly the video of this presentation will become available on Channel9. As soon as this happens I'll post a link here.For now, you can already have a look at the excellent keynote by Anders Hejlsberg.

For one of our Surface related projects we needed to create a scrolling panel that makes the centered item look bigger. In top of that the items should grow gradually as they approach the center and shrink again as they move away.

The idea I implemented to achieve this effect is to bind the ScaleX and ScaleY properties of the ScaleTransform for the content images to a Gauss-curve. The following picture shows these normal distributions. Using the parameters of the functions you can easily control the height, width and position of the curve. This enables us to create the fish-eye effect.

I used the standard formula (see http://en.wikipedia.org/wiki/Gaussian_function):

for some real constants a > 0, b, c > 0, and e ≈ 2.718281828 (Euler's number). The graph of a Gaussian is a characteristic symmetric "bell curve" shape that quickly falls off towards plus/minus infinity. The parameter a is the height of the curve's peak, b is the position of the centre of the peak, and c controls the width of the "bell".

Using a, b and c we can thus control the shape of the bell and hence the shape of the Fish-Eye.

The final result looks like this:

I have included a demo-project showing the code for a proof-of-concept control. Please feel free to use the code but bear in mind that this is not production code and it is provided as is. If you feel like it, just let me know what you think about it and whether you are using it. All other comments, ideas or suggestions are also welcomed.

FishEyeScrollPanel.zip (1,96 mb)

Recently we were asked to write some software for our surface to be used in a live election show on local television. Because the time to create the application was limited (little over three weeks) we could only create a basic application. However, we managed to get in some nice features that added value to the (over five our) television show.

The people of the network asked us to create the following:

• an application on the surface that could be used by the host of the show to present election results and discuss these with an expert guest.
• make sure the host and expert could choose the results they wanted to discuss.
• not only make sure the application presented the results on the table, but it had to provide a full screen output of the results as well (which could then be mixed in to the show by the director)

This is the setup we realized for this television show:

Once the application had been written we went into the studio to test the application in the circumstances that it was to be used. Trying to use the surface in a well lid studio was not trivial. Two days before we entered the studio the complete lighting had been set-up. Unfortunately this had been done using ambient lights and spots containing a lot of infra-red light.

As you might have guessed (and we should have too) a surface does not operate very well under (IR-)spots. We therefore had to adapt our application to maximize the use of the inputs that still could be seen. By writing our proper manipulations and gestures we were able to make the table behave as it should under the spots. However, smaller movements could not be detected. This prevented us from implementing all features that we would have liked.

In order to prevent running in to problems you should make sure that the studio is equiped with one of the following types of lighting: LED, KenoFlow, or other non (hot IR) illumination.

Below you will find some pictures of how the surface was built into the set.

 
How the surface was built into the desk.

 
How the studio looks like on camera. The surface is nicely build into the desk.

 
Overview shot of the studio.

 
The view the host of the show has during the show.

 
Our little desk from where we could select the results, move them onto the surface, control the full screen video output, etc.

I'll post some video fragments of the show and how the surface was used pretty soon.