Two kids games for Microsoft Surface

by brogge 11. June 2010 15:08

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)

PS. This code has been created on one afternoon, so this is not production quality code.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Microsoft Surface | Tech stuff | WPF

Session on TechDays10 - "How we created 'De Kinderpuzzel' "

by brogge 2. April 2010 16:40

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.

Currently rated 5.0 by 3 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

Kinderpuzzel | Microsoft Surface | Tech stuff | TechDays2010 | WPF

Session proposal for MIX 2010

by brogge 6. January 2010 11:12

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.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Microsoft Surface | MIX 2010

Creating a fish-eye scrolling panel for Microsoft Surface

by brogge 29. July 2009 21:25

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)

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Microsoft Surface | Tech stuff | WPF

Using our surface in a television studio

by brogge 12. June 2009 23:17

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:

Setup overview

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.

View of surface with lights on
A view of our surface with all studio lights on

 
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.

Currently rated 4.7 by 3 people

  • Currently 4.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Microsoft Surface | Tech stuff | Television

Learning how the surface contacts work

by brogge 6. March 2009 02:04

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)

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Microsoft Surface

Setting up our surface development environment

by brogge 24. February 2009 14:07

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 !

Currently rated 4.3 by 3 people

  • Currently 4.333333/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , ,

Microsoft Surface

Our first development surface arrived !

by brogge 14. February 2009 05:13

Yesterday our first development surface unit has arrived. We encountered some minor issues when installing it (mostly because of a lack of knowledge). This post describes some of these issues and the solutions we have found. Hopefully this information can help other people when installing a surface for the first time.

We ordered the development unit about a week ago and had it delivered yesterday, so we thought that was quite fast.



After having unpacked the unit we noticed that the bluetooth mouse and keyboard were not included. Finding a spare mouse and keyboard was not really an issue, but still, one expects to find all parts in the box.Besides that the manual includes all information needed to get the unit up and running quite fast. After half an hour we could start up the SurfaceDesk and start 'touching' the surface. We executed the short callibration because the manual states that the complete callibration has been done for each surface before shipping.

Unfortunately nothing happened when touching the surface. For some reason it did not recognize any fingers, tags not blobs. Only a complete black button seemed to trigger some kind of reaction.

In order to try to solve this, We then tried the full callibration. The procedure went quite well and reported that the callibration was succesfull. However, nothing changed in the behaviour of the surface. After having tried several things (rebooting, re-callibrating - both simple and complete) we found out that the callibration chart is covered (on both sides) with some kind of protective foil, of which it is not immediately clear that it needs to be removed. I don't know (yet) how the surface functions exactly, but my guess is that the foil makes the black squares look grey and therefor the unit doesn't callibrate correctly.

After having removed the foil (on both sides) and having executed the complete callibration with the correct callibration chart the unit is now working properly.

We now can start to play with the SDK, sample applications and write some code !

PS. We have contacted Microsoft and apparantly the mouse and keyboard are no longer shipped to Europe and Asia. The documentation does not yet reflect this change and still lists them as being in the box.

 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Microsoft Surface

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen