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.

I have submitted a session proposal to MIX 2010. The title of my session is 'Real-world multi touch applications on Surface and Silverlight'.

In order to be elected to present your session a voting system is put into place. Out of 150 proposals 10 get to  present their proposals. So if you can spend a couple

of minutes, just follow this link and vote for my session (search for 'boris' and click on the session title).

Should I get elected I will make sure you receive the link to the video-feed. That way you can have a look at the session as well ;-)

Thanks !

boris

By the way: this is the abstract for the submitted session: 

The Microsoft Surface Computing platform is a compelling new technology that introduces new ways of interacting with software applications. Although the hardware platform is excellent, it’s the software running on it that makes the Surface computer come to life. This session will talk about exactly that: how to create ‘real-world’ multi touch applications for the Microsoft Surface platform.

In this session we will discuss ‘real world’ usage of Microsoft Surface, on the commercial, organizational and technical levels. We’ll investigate why our customers are interested in Surface computing and what is holding them back. Furthermore, we’ll have a look at what technical, physical and commercial burdens need to be surpassed to sell and create a successful Surface project. What problems we face when using Surface computers (e.g. in a television studio or in a public place) and what issues come up when designing and developing for the Surface platform. We will also focus on our experiences in trying to create user interfaces that require no prior knowledge and almost no learning curve from our users.

We will focus on a number of projects, one of which combines Surface and (multi-touch) Silverlight/WPF technologies. Based on customer demand we created a set of applications that run on Microsoft Surface and on Silverlight/WPF. We will explain why and how we came to the proposed solution and how we could accommodate the customer’s wishes.

On the technical level we will have an in depth look at this application and the problems we faced during the creation thereof. How we designed the application taking into account that it must be available both on Surface and Silverlight without losing the specific features of both platforms.

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.

Recently the IBBT (the Flemish Institute for Broadband Technologies) organized a contest: INCA - Innovative and Creative Applications. In this competition you get one month of time to create an application that is either innovative, creative or both :-)

We created 'Tableau'. This application provides a customer a simple and intuitive way of finding his way around the S.M.A.K. museum.

It can be seen as a virtual and interactive guide to the museum and the art works in the museum. Although the application was created for a museum, it could be used for a large number of other venues: 

• Libraries
• Public space (city hall, ...)
• Musea
• Public services (fire department, police, etc.)
• ...

Some key concepts we have tried to add to the application: 

• Intuitve: The multi-touch interface helps to make the application accessible without any prior knowledge. 
• Natural: The way in which the art can be looked at, rotated, resized, etc is very natural to the user.
• Social: The application not only can be used by multiple people simultaneously, it also inspires people to interact with each other.  
• Super-real: the real and the virtual merge together, e.g. through interaction with physical objects.
• Spatial: The application can be used from all sides of the surface table. The appliation supports 360 degrees use.
• Accessible: The application has been developed to be accessible by as much people as possible (enabled and disabled, children and elderly people)

You can see a short demonstration video below (Thanks to the S.M.A.K. museum for making available their wonderful art collection. 

Tableau: low resolution(11MB)  - high resolution (115MB)

Hi all,

I have added two features to the tool as requested by a number of people that are using it. You can now:

1. Show the byte numbers in the center of the tag
2. Show the page number on each page that is printed

Hopefully these little changes can help someone print ByteTags. Let me know should you require some other or more features. 

SurfaceTagPrinting_2.zip (1.30 mb)

Update (15/03/2009 - 16:09): I have fixed the "show bounding box" issue. Pleas download the new version below.

A Microsoft Surface unit comes with a limited amount of ByteTags that you can use to have the surface recognize objects. While testing some of the applications that we are developing ByteTags are used. I wanted to create a little tool that allows me to create the tags I need easily.

Therefore I decided last night I to create a small application that allows the creation of ByteTags. I haven't put to much time in creating this, but the following functionality should be available:

• Select the tags that you want to print
• Indicate how many times a certain tag needs to be included
• Limited layout option for printing your tags (page size, page margins, tag margins)
• Printing the tags. I have tested them on our surface unit and they seem to be recognized correctly.

One issue I haven't been able to solve yet is the 'Tag Bounding Box'. Currently the application always draws a bounding box around each tag. For some reason my databinding on the checkbox is not working :-(

I would like to add the generation of IdentityTags as well, but haven't found the specification for those. Please, drop me a line of you can help me out there. I will then add that functionality to the tool.

Feel free to play around with the tool. If you have any questions, remarks or feature requests: let me know! Also if you are interested in the source code of the project drop me a line. I'm currently not posting it publicly because it needs to be cleaned up first. 

Disclaimer: Read the instruction on printing byte tags in the SDK carefully. Not all printers produce the same results.

SurfaceTagPrinting_fix.zip (1.28 mb)

Having read most of the Surface SDK over the last couple of days, I started playing with the examples. I started changing one of the SDK examples in order to create an application that I had in my mind for a long time. That is coming along nicely. I'll blog about this application later.

Last night I was a little confused on what events are generated when touching the surface. The Visualization example does a good job at showing the data (what object is recognized, where is it positioned, what's the rotation, etc.) received in an application when the surface is touched. I wanted to know a little more about the chain of events received by a SurfaceControl.

Therefore I spent half an hour creating a small application that lists these events. The application itself will not teach you a lot, but it's interesting to play around with the events that are received. It can bring some extra understanding on how the contacts are being processed (especially for a beginning surface developer).

Please feel free to download the application and have a look at the results.

TouchIdentifierApplication.zip (181.06 kb)

When our Microsoft Surface arrived, this is the list of things I did and needed to get it installed the way I wanted:

1. Cut open the cardboard box at the top side (although it is clearly indicated that you shouldn't cut the box). Not that it is a problem when you (gently) cut the box, but the top part of the box just slides off, so it's a little stupid cutting it apart.
2. I read the manual ! I didn't want to run a couple of thousend just by doing something I should have known. (Since it's only a very short booklet this can be done rather fast.)
3. I asked a couple of colleagues to help me move it to my office. However, before picking it up I tried to find out what is the best way of holding the thing. The manual doesn't state anything about this. I did some searching on the net and found a movie of people moving the surface by holding on to the transparent part of the machine. Although this seems to be the logical thing to do, I wanted to make sure that the top can hold the weight of the machine. I still haven't found any official statement regarding this topic, but I guess that you can safely move it this way. Warning: if you need to move it up our down a staircase you probably want to be with more than two persons !
4. I've always been convinced that the environment you are developing in is very important. Therefore I wanted to set mine up in such a way that it feels comfortable working both on the surface and on my other development machines. I wanted to have enough space to easily move around the surface, demonstrate applications to other people, have some hallway testing once and awhile (after all a surface has been created to use in a more social setting). On the other hand it also wanted to be close enough not to have to get up and walk to the surface when developing for it or when trying something out. To achieve this goal it turned that I needed:
   
   
   • An extra long VGA-cable in order to have the external monitor positioned next to my other screens. I want to developed while being seated at a desk, not on my knees next to the surface :-)
   • Either a wireless mouse and keyboard or a mouse and keyboard with a USB extension cable.
   • An network connection (I went for the wired option, although the wireless is working fine) 
     
     (You can see the environment I'm working in now on the picture below)
     
5. I almost managed to get the environment I liked. The only downside to my set-up is that you can not move around the table anymore. On one side there is not enough room to stand or sit. I'll have to ask for a bigger office ! 
6. Once the physical installation was completed I set up the software development environment. The unit comes with Visual Studio 2008 Express and a 30-day trial of Expression Blend. I replaced both of them with their full featured counterparts.
7. That was it. We are now ready to do some actual programming !