A Basic 3D Asteroid Game in openGL with C#

This article is intended for beginners who want to start with 3D game programming and don’t know where to start. It is programmed in Opengl using VS 2008 and a small graphic engine I made myself called Shadowengine. It has the basics of what a game should have: a Score, levels of difficulty and a life counter. All this is written in a small number of code lines, with the objective of being simple and understandable.

The first problem I had to achieve is the scene to look like outer space. For that issue, I set the background color to black. In opengl, it is set this way:

...

The score is a number which increases over time and it grows faster everytime I pass a level. The level increases every 450 frames.

The last issue I had to address is the problem of asteroid collision. I make for the ship three positions (one for the ship and two for the wings) and every once in a while, I check the distance between all the asteroids and those three positions. If it is under a predefined value, I execute the collision event.

The project has 6 classes:

• AsteroidGenerator.cs - It handles the creation of asteroids in random places and with random sizes and speeds. It also has the method to query whether or not there has been a collision between the spaceship and an asteroid.
• Asteroid.cs - It handles all concerning an asteroid such as the movement, texture selection, drawing, among others.
• Star.cs - It has a method to create random white points and to draw them.
• Camera.cs - It handles the selection of the user camera and to set the right perspective view of the scene.
• SpaceShip.cs - This class contains all methods and attributes regarding the spaceship, such as movement, drawing, etc.
• Controller.cs - This class manages the game creation, game logic and contains all the classes needed to run the game. Here is a portion of code:
• ...

  Main.cs - This is the form which contains this visual components of the game. It contains the controller class and gives the player information through proper windows controls. It has a timer to periodically draw the scene and has the code for texture and object loading.

  ...

While written for VS2008, for me it loaded in VS2010 just fine (once it converted). Once loaded it compiled and ran the first time...

The game is very simple. Using WASD you move your ship to avoid the oncoming asteroids.

And while the comments/strings are not in English the code is easy enough to understand;

public Main()
  {
      InitializeComponent();
      hdc = (uint)pnlViewPort.Handle;
      string error = "";
      //Comando de inicializacion de la ventana grafica
      OpenGLControl.OpenGLInit(ref hdc, pnlViewPort.Width, pnlViewPort.Height, ref error);
      //inicia la posicion de la camara asi como define en angulo de perspectiva,etc etc
      controladora.Camara.SetPerspective();
      if (error != "")
      {
          MessageBox.Show("Something happened");
      }

      #region lights

      //Configuracion de las luces
      float[] materialAmbient = { 0.5F, 0.5F, 0.5F, 1.0F };
      float[] materialDiffuse = { 1f, 1f, 1f, 1.0f };
      float[] materialSpecular = { 1.0F, 1.0F, 1.0F, 1.0F };
      //brillo del material
      float[] materialShininess = { 1.0F };
      //posicion de la luz
      float[] ambientLightPosition = { 10F, -10F, 10F, 1.0F };
      // intensidad de la luz en RGB
      float[] lightAmbient = { 0.85F, 0.85F, 0.85F, 1.0F };

      Lighting.MaterialAmbient = materialAmbient;
      Lighting.MaterialDiffuse = materialDiffuse;
      Lighting.MaterialSpecular = materialSpecular;
      Lighting.MaterialShininess = materialShininess;
      Lighting.AmbientLightPosition = ambientLightPosition;
      Lighting.LightAmbient = lightAmbient;

      #endregion

      //Habilita las luces
      Lighting.SetupLighting();
      //cargar texturas
      ContentManager.SetModelList("modelos\\");
      ContentManager.LoadModels();
      ContentManager.SetTextureList("texturas\\");
      ContentManager.LoadTextures();
      //AudioPlayback.SoundDir = "sonidos\\";
      //AudioPlayback.LoadSounds();
      controladora.CreateObjects();
      //Color de fondo
      Gl.glClearColor(0, 0, 0, 1);//red green blue alpha 
      Gl.glShadeModel(Gl.GL_SMOOTH);  
  }

  private void tmrPaint_Tick(object sender, EventArgs e)
  {
      // limpia opengl
      Gl.glClear(Gl.GL_COLOR_BUFFER_BIT | Gl.GL_DEPTH_BUFFER_BIT);
      //dibuja la escena
      controladora.DrawScene();
      //cambia los buffer
      Winapi.SwapBuffers(hdc);
      //termina de pintar
      Gl.glFlush();

      if (started)
      {
          score += 1;
          count1++;
          count2++;
          levelCount++;
          if (levelCount == 450)
          {
              level++;
              AsteroidGenerator.GenerateAsteroid(35, false);
              lblLevel.Text = level.ToString();
              levelCount = 0;
          }
          if (count1 == 4)
          {
              lblScore.Text = score.ToString();
              count1 = 0;
              lives = controladora.Nave.Vidas;
          }
          if (count2 == 20)
          {
              ShowLife(lives);
              count2 = 0;
              if (lives == 0)
              {
                  started = false; 
                  MessageBox.Show("Game Over");
                  controladora.ResetGame();
                  score = 0;
                  level = 1;
                  lives = 3;
                  started = true;
                  count1 = 0;
                  count2 = 0;
                  lblLevel.Text = level.ToString();   
              }
          }
      }
  }

If you've thought about writing a 3D game, be it space or not, this project might be a good starting place for you...

Flying a S107 RC Helicopter using the Microsoft Kinect and the Arduino Uno

Flying a S107 RC Helicopter using the Microsoft Kinect and the Arduino Uno.

The Kinect detects my hands, head, and hips. This information is translated into x, y, z coordinates, processed with some 7th grade Algebra, and then sent to the Arduino over the serial port. The Arduino receives the signal, and converts it to a 38 kHz Infrared signal that the S107 can understand.

I've provided more information on this page: codingfun.collinboy.net

Hope to have this demo and other cool gadgets at the Kitsap Maker Festival in June!

Final note: The "I did it" line at the end of the video is in memory of my son Collin. I'd give all this up to have you back kiddo!

...

How to fly a S107 helicopter with the Kinect?

• You will need a Kinect with power adapter to connect to a Windows 7 (or 8) computer. Xbox Kinect or Windows Kinect will work.
• You will need an Arduino Board.
• You will need various resistors, transistors, IR LEDs.
• You will need some creativity.

This is not a step by step tutorial. I will provide the Arduino code that gets the Helicopter flying, but the rest is up to you to be creative.
So let’s get to the hard part first. Getting the Arduino to talk to the S107. The S107 speaks a specific language transmitted over a 38 kHz signal.
The signal structure that I used for the S107 is as follows:
(Note: Channel "A" uses Throttle Values 0 to 127. Channel "B" uses Throttle Values 128 to 255.)

1. Start Signal: 2000 us
2. Pause: 2000 us
3. Rudder Signal: 8 bits of transmission (for example 127 is "01111111", 63 is "00111111")
4. Elevator Signal: 8 bits of transmission
5. Throttle Signal: 8 bits of transmission
6. Trim Signal: 8 bits of transmission
7. End Signal: 300 us

With that, let’s look at the code: Here is a nice formatted link to the Arduino File.

...

As you can see, all you need to do is feed the void Transmit() with integer values between 0 and 127 (or 128 to 255 for Channel "B" ). Do this from the void loop().

You can actually alternate between the "A" and "B" channel without any problems (that I've encountered).

You may also see that there is no code in there for communicating with the Kinect. I wanted to give a clean version of the S107 code. The Kinect serial input requires more code in the void loop().

Reading from the serial is a lot of hassle. I will make an update soon to explain how to read from the serial port.

For the Kinect project, I used the Microsoft Kinect SDK software to determine the location of my hands relative to head and hips. This gave me a y-coordinate distance that could be scaled from 0 to 127.

The Kinect can also be used to measure distances relative to the sensor. Again, this data can easily be converted to scaled z-coordinate values between 0 and 127.

The fun part was determining the best use of x, y and z coordinates. You only have 2 hands, so controlling a 3 channel Heli takes some thinking.

Also fun is determining how to initialize the Heli (interlocks to avoid premature takeoff) and how to incorporate a kill switch.

I hope that this will help inspire some creativity to use the Kinect with the Arduino boards.

Project Information URL: http://codingfun.collinboy.net/, http://www.youtube.com/watch?feature=player_embedded&v=hfqh46s-BPM [Project found via Kinect Gesture-Controlled RC Helicopter]

Project Download URL: http://codingfun.collinboy.net/

Project Source URL: http://codingfun.collinboy.net/

// Connect (+) of IR LED to 5Vcc
// connect (-) to pin 4 with a 100 Ohm resistor in line.  For best results make a transistor circuit with external power source

#define RED 4    // the output pin of the IR LED

void setup() {
    pinMode(RED, OUTPUT);    // set IR LED (Pin 4) to Output
}

void loop() {
//Do you magic here.  The code directly below just throttles up to 60 and back down to 0.  
//You can get data from the serial port, a joystick, or whatever.  You just need to translate your input into values between 0 and 127.
//Pass those values to Transmit( ) as an integer between 0 and 127 and that's it!

    int t;
    for (t = 0; t < 40; t++) {
        Transmit(63, 63, t, 63);  //Rudder = 63, elevator = 63, throttle = t, trim = 63
             // Transmit(63, 63, ((40 - t) + 128), 63); //This would cause Channel "B" to throttle down

    }

    for (t = 40; t > 0; t--) {
        Transmit(63, 63, t, 63);
             // Transmit(63, 63, ((40 - t) + 128), 63); //This would cause Channel "B" to throttle up 
    }
} //End loop()

void Transmit(byte rudder, byte elevator, byte throttle, byte trim) {
    static byte Code[4];
    byte mask = 128;     //bitmask
    int i;

    Code[0] = rudder; // 0 -> 127; 63 is the midpoint.
    Code[1] = elevator; // 0 -> 127; 63 is the midpoint.
    Code[2] = throttle; // 0 -> 127; 0 is throttle off
    Code[3] = trim;    // Haven't messed with this
    
    OutPulse(2002);  // Start 38Khz pulse for 2000us (2002us is evenly divided by 26)
    delayMicroseconds(2000);  // 2000us off.

    for (i = 0; i<4; i++) {        // Loops through the Code[]
        for (mask = 128; mask > 0; mask >>=1) {    // See Arduino reference for bit masking (really cool stuff!)
        OutPulse(312);         // Sends 312 pulse each loop

            if(Code[i] & mask) {          //If both bit positions are 1 you get 1              
                delayMicroseconds(688);     // send 1 (700 off)
            } 
            else {
                delayMicroseconds(288);     // send 0 (300 off)
            }
        } //End mask loop
    }  //End i loop

    OutPulse(312);  //Send 300 microsecond Closing Pulse
    delay(60);       

} // End Transmit


void OutPulse(int Pulse) {  //sends 38Khz pulses over the Pulse Length
    int p;

    for(p = 0; p < (Pulse / 26) - 1; p++) {  //Takes about 26 microseconds per loop
        digitalWrite(RED, HIGH);
          delayMicroseconds(10);
        digitalWrite(RED, LOW);
          delayMicroseconds(10);
    }
}  //End OutPulse

Kinect SDK Full Release!–Shout Application!

The Kinect SDK V1 for windows has had multiple changes made to it since the Beta 2. The whole tracking system has changed and it has been built together so that samples are easy to drag and drop in from the tool box.

Biggest Changes

• Tracking: –You can play around with the settings much more and it feels easier to apply smoothing to your movement. Much of the jitter appears to be gone.
• Near Mode: – (ONLY ON WINDOWS KINECT) – Perhaps one of the most useful changes to the Kinect is that you can now start tracking things up to 40 CM close to the camera. I can see this being very useful for SEN students, however it is only available if you have the Windows Kinect.
• Variables: – The first thing which threw me off track was the amount of changes that have occurred. Many of the video tutorials which I have used showing you how to edit the elevation angle are no longer relevant.

  (runtime.NuiCamera.ElevationAngle != (int)slider1.Value) is now

  (kinectSensorChooser1.Kinect.ElevationAngle != (int)slider1.Value)

Useful Facts

• If you install V1 and try to download and run BETA 2 applications. They will not run. There have been too many changes and you will need to work through a lot of errors.
• If you are considering buying a Kinect for Windows device, please weigh up the options and consider what you will be using it for. If you want to use it on your Xbox and your Windows machine you will be disappointed. The Kinect for Windows device does not run on the Xbox 360. (I have tried this myself as I am lucky enough to have one of the new devices).
• Xbox 360 Kinect will run with the new SDK, however you will not be able to carry out near mode on it. There have been some changes in the hardware which allow this.

I recently had the pleasure of working with Shout Learning and I have been implementing some applications into Lodge Park Technology College. These applications would help teach students about the water cycle. You can preview the video below. This original application has now been adapted so that it can run with the full version of the SDK. You can download this application here with the source. The source should be helpful to some of you programming with the SDK V1 for the first time.

Click here to download the sample application – All future applications will be available to download from the Microsoft Partners In Learning Network. Sign up with your live ID and get access to materials by searching for the Kinect or the K-Team.

Project Information URL: http://raychambers.wordpress.com/2012/02/07/kinect-sdk-full-releaseshout-application/

Project Download URL: https://skydrive.live.com/?cid=2852c4bb97c60a65&id=2852C4BB97C60A65%21339

Project Source URL: https://skydrive.live.com/?cid=2852c4bb97c60a65&id=2852C4BB97C60A65%21339

Contact Information:

• Blog: http://raychambers.wordpress.com
• Twitter: @Lanky_Boi_Ray

• Show off a kind of cool OData data source
• How to use your location and others to see how "close" you are
• Help you find your local Windows Phone Champion
• Give you an app, with source, that brings both of those together

Find My Champ

What do you think of when you hear the word “Champ”? Someone who is the best? A sports champion? How about someone who fights for a cause? Here at Microsoft we have employees called “Developer Evangelists”. Part of their job is to help get the word out about Microsoft products and technologies. The other part of their job is to champion our developers.

Here in Windows Phone we call our evangelists “Phone Champs”. Champs ensure our developers get exactly the help & support they need and are the voice of the developer community. They are all experts on our platform and serve as local resources to answer questions from current or prospective developers. Champs can help you troubleshoot a problem in your app and can help you get your hands on a phone for testing. Oh, and some of our Champs are really funny and can tell you a good joke or two.

So how do you find one of our great Phone Champs? Today I’m happy to announce a new application to help you find them. We originally wanted to call the app “Champ Acquisition and Discovery 1.0 for Workgroups Windows Phone Edition.” Luckily cooler heads prevailed and we’re calling it “Find My Champ”.

...

Get the App

Go download the app’s source code. Compile the code in our dev tools and side-load Find My Champ onto your developer device or into the emulator. The app will also be in the Marketplace soon for you to download. Find your local Phone Champ and get in touch with them. Ask them for help with your app or to let you know about events or hackathons in your area.

We’d love to get your feedback on the Find My Champ application. Tell us what we can do to make it more useful. You can also come help us improve the app on Codeplex. Additionally, I suspect that many of you will have creative ideas for how to use the Champs OData feed in other applications, mashups, etc. Please let me know what you create!

The first thing that I thought was cool was that this is backed on an OData feed. This means that if we, the development community want to present our own view of the data, in our own apps, we can very easily.

Using the OData feed is very easy. Here's a snap from the must have LINQPad utility querying the feed.

LINQPad makes it almost too easy to play with this feed. Say I want all the Champs with a Last Name starting with E, order by LastName?

Or who have a MSDN blog and also have a Twitter account?

Okay, OData via Linq is cool, but what if you want the actual OData URL for this query? Again, LINQPad makes that click easy. Just click on the "SQL" right above the results;

Then to maybe finally blow your mind, did you know Notepad can open URL's?

So we're got the data, lets check out the app source.

First, when you download the source, you'll need to add one reference, easily done via NuGet.

When you first open the Solution you'll see this (if you expand the given items). Note the warning/missing icons;

Fire up NuGet and search for "SilverlightToolkitWP"

Click install.

That's it. You should now be good to go and able to run the app in the Emulator.

When first running the app in the Emulator, the Local list will be this default list. If you want to see the local people for a given location, set the location and then re-run the app (refresh doesn't yet seem to take a change in location into account).

So here I set the location;

Then exit and re-run the app in the Emulator.

Set to another location, exit and rerun the app. You don't need to kill the emulator or debugging session, just re-run it in the emulator (if that makes sense?)

The source is pretty easily readable and spelunkable;

Data binding is used as you would expect.

One of the things I thought key was how "local" was determined. How was your location and the Champ's Lat/Long's used to determine "local?"

public static double GetDistance(double fromLatitude, double fromLongitude, double toLatitude, double toLongitude)
{

     int earthRadius = 6371;         // earth's radius (mean) in km
     double chgLat = DegreeToRadians(toLatitude - fromLatitude);
     double chgLong = DegreeToRadians(toLongitude - fromLongitude);
     double a = Math.Sin(chgLat / 2) * Math.Sin(chgLat / 2) + Math.Cos(DegreeToRadians(fromLatitude)) * Math.Cos(DegreeToRadians(toLatitude)) * Math.Sin(chgLong / 2) * Math.Sin(chgLong / 2);
     double c = 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a));

     double d = earthRadius * c;

     return d;
}

private static double DegreeToRadians(double value)
{
     return Math.PI * value / 180.0;
}

private void UpdateDistance()
{
    if (GeoData.Status != GeoPositionStatus.Ready)
        return;
    // when position is updated, update distance
    var _FromLat = GeoData.Location.Latitude;
    var _FromLong = GeoData.Location.Longitude;
    var _ToLat = (double)Latitude;
    var _ToLong = (double)Longitude;
    this.DistanceAway = FMCLocation.GetDistance(_FromLat, _FromLong, _ToLat, _ToLong);
}


// this is the same as PropertyChanged("Distance"), just easier to use
public event EventHandler DistanceChanged;

private double m_DistanceAway;
public double DistanceAway
{
    get { return m_DistanceAway; }
    set
    {
        m_DistanceAway = value;
        OnPropertyChanged("DistanceAway");
        OnPropertyChanged("IsLocal");
        if (DistanceChanged != null)
            DistanceChanged(this, EventArgs.Empty);
    }
}

public bool IsLocal { get { return (DistanceAway > 0 && DistanceAway < 250); } }

If you're looking for help in building your Windows Phone 7 applications and are looking for help, think about contacting your local Champ. That's part of their job and desire, to be there to help you. Finding them, is now super easy, via this app (which you have to agree is kind of meta-cool...

Today is some information about default audio levels and how they might not be best for voice recognition (and how to fix that in your code)

Workaround for Kinect for Windows sub-optimal audio gain setting

The first version of Kinect for Windows SDK shipped with a default microphone gain setting that is known to be sub-optimal for speech recognition scenarios. This was addressed in the version's release notes, under "Known Issues" section, issue titled "Microphone Array default gain setting is sub-optimal".

The release notes give instructions to work around issue as a user, through manual steps, but since developers probably want to do this programmatically I'm attaching sample code to this post that shows how to configure this setting automatically.

Compiling the sample will build a console application that can be called as follows:

1. KinectAudioLevel
2. KinectAudioLevel 0
3. KinectAudioLevel 10
4. KinectAudioLevel 30

Command lines 1 and 2 will set gain on Kinect microphone to 0 dB (i.e.: no gain), which is the optimal setting for speech recognition. Command line 3 will set gain to 10dB, and command line 4 will set gain to 30dB, which is the maximum and corresponds to 100% in sound control panel.

We're working on improving the default settings in future releases, but for now speech recognition applications will get better results by explicitly setting default gain to 0dB, and applications that record audio should experiment with a gain setting that works best for them. [GD: Emphasis added]

Project Information URL: http://blogs.msdn.com/b/eddys_code/archive/2012/02/10/workaround-for-kinect-for-windows-sub-optimal-audio-gain-setting.aspx

Project Download URL: http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-components-postattachments/00-10-26-67-61/KinectAudioLevel.zip

Contact Information:

• Blog: http://blogs.msdn.com/b/eddys_code

Page Image, dual-head-mounted-listening-device, courtesy of x-ray delta one

But it was something that when I saw it on Pete Brown's site, I knew I had to share with you. Hopefully you'll find this 30 minute video as interesting as I did...

Arduino The Documentary

For anyone interested in open source microcontroller development, or why boards are named with *duino type names, this 1/2 hour documentary is a great watch.

Arduino.TheDocumentary.2010.English explains the origin of the Arduino in a relatively non-technical interview-based documentary style, with interviews for people involved in the creation, as well as key partners and users.

Spanish version is also available

from Vimeo.

Introduction

I've written a number of Windows Phone apps, and each time I've wanted to let people know about my other apps.  While I could mention the other apps somewhere, I wouldn't want to update all of my apps each time I release a new one.  It finally occurred to me that I could use the listing of apps directly from Marketplace instead.  This provides me with an easy-to-parse XML feed (Atom) of my apps with all of the info that I need.  Armed with that, it wasn't too much work to create a user control to let me drop in the list of apps anytime I need it.

This code doesn't require a physical phone, but it isn't very useful if you don't have a Marketplace account!  Ideally, you should have several published apps under your account for this to make much sense.  Once you have it in place though, all of your apps will always show your complete list without any special updates.

If you don't have the software installed, go to create.msdn.com, then click Download the free tools to download the Windows Phone Developer Tools (or use the direct download link provided above this Introduction section). This code is written for the Windows Phone Developer Tools 7.1 (Mango).  It’s is a mostly online install, and it’s pretty big so expect it to take some time. Even if you don’t have any development tools, this will give you Visual Studio Express, Blend, and XNA Game Studio. If you have the full-version tools already, it will add new templates.

Project Basics

The intention is to create a user control to display a list of apps from a given publisher (preferably yourself!).  This user control will be implemented as a ListBox with individual apps showing up visually similar to the way they do in Marketplace.  Touching an app in the list should bring the user directly to the appropriate Marketplace page.  It should be as easy as adding a project reference, adding the control to a XAML page, and setting the publisher (this could potentially be set by reading the WMAppManifest.xml file).

Marketplace Data

At first glance, getting Marketplace data programmatically isn't an option.  Sadly, there's no API for this.  Fortunately, there's a solution!  If you're using the Zune app to browse publishers and apps, you can watch the network traffic using Fiddler (http://fiddler2.com/fiddler2/).  What's nice is that everything you do in Zune results in a simple HTTP request for the data, which is returned as an XML stream.  A simple WebRequest object can do a DownloadStringAsync call to get the data, then the SyndicationFeed class can load and parse it.  There are extension elements for rating, release date, and price.  Even nicer, is that the image thumbnail can be resized server-side based on the URL query string.  This makes it super easy to get exactly what we need.

The server of interest is catalog.zune.net, and the URL format is:

/v3.2/en-US/apps?q=PublisherName&clientType=WinMobile 7.1&store=zest

The "q" parameter just needs to be set to the publisher name of interest.  Remember to URL encode yours if you have spaces in it.

Note the "clientType" parameter.  If you change it to WinMobile 7.0 you will get NoDo (pre-Mango) apps only.  You may or may not have anything show up for that, but it's not likely you'll want that list.

The "store" parameter is set to "zest" but we'll just have to take this one on faith!  I'm not aware of any other options here.  This could vary by country, but I don't have any data on that.

This will return all apps for Mango.  This returns feed information starting with a header:

<?xml version="1.0" encoding="utf-8"?>
<a:feed xmlns:a="http://www.w3.org/2005/Atom" xmlns:os=http://a9.com/-/spec/opensearch/1.1/ 
 xmlns="http://schemas.zune.net/catalog/apps/2008/02">
  <a:link rel="self" type="application/atom+xml" 
    href="/v3.2/en-US/apps?q=Arian+T.+Kulp&amp;store=zest&amp;clientType=WinMobile+7.1" />
  <os:startIndex>1</os:startIndex>
  <os:totalResults>5</os:totalResults>
  <os:itemsPerPage>5</os:itemsPerPage>
  <a:updated>2012-01-30T04:21:41.9702941Z</a:updated>
  <a:title type="text">List Of Items</a:title>
  <a:id>tag:catalog.zune.net,2012-01-30:/apps</a:id>

You can pretty much ignore this section.  The important stuff comes next!  Each Atom entry is one app, along with every bit of metadata that you need to make an interesting view:

  
<a:entry>
    <a:updated>2012-01-30T04:21:41.9858942Z</a:updated>
    <a:title type="text">Metro Lockscreen Creator</a:title>
    <a:id>urn:uuid:0f5eaaa8-e75e-4a04-a5f9-24db1c176a6b</a:id>
    <sortTitle>Metro Lockscreen Creator</sortTitle>
    <releaseDate>2011-07-26T14:30:39.987Z</releaseDate>
    <version>1.3.0.0</version>
    <averageUserRating>7.254902</averageUserRating>
    <userRatingCount>51</userRatingCount>
    <averageLastInstanceUserRating>5.2</averageLastInstanceUserRating>
    <lastInstanceUserRatingCount>5</lastInstanceUserRatingCount>
    <image>
      <id>urn:uuid:cb46389d-6d50-4be0-b4ff-75c968f301ea</id>
    </image>
    <categories>
      <category>
        <id>windowsphone.toolsandproductivity</id>
        <title>tools + productivity</title>
        <isRoot>True</isRoot>
      </category>
    </categories>
    <tags>
      <tag>apptag.independent</tag>
    </tags>
    <offers>
      <offer>
        <offerId>urn:uuid:b8d5cc60-0839-4bcb-b26e-e85ba3e92c8d</offerId>
        <mediaInstanceId>urn:uuid:2ff871ea-cf8a-488e-b613-286052b90a13</mediaInstanceId>
        <clientTypes>
          <clientType>WinMobile 7.1</clientType>
        </clientTypes>
        <paymentTypes>
          <paymentType>Credit Card</paymentType>
          <paymentType>Mobile Operator</paymentType>
        </paymentTypes>
        <store>Zest</store>
        <price>0</price>
        <displayPrice>$0.00</displayPrice>
        <priceCurrencyCode>USD</priceCurrencyCode>
        <licenseRight>Purchase</licenseRight>
      </offer>
    </offers>
    <publisher>
      <id>Arian T. Kulp</id>
      <name>Arian T. Kulp</name>
    </publisher>
  </a:entry>

From this block you can get title, release date, rating average and count, category, image ID (easily converted to URL), and price (per market).  The System.ServiceModel.Syndication.SyndicationFeed class can read from an XMLReader object and it handles everything for you.  Dealing with the custom Marketplace namespace can lead to some slight complication, but fortunately that's simplified as well.

Syndicated Data

For standard Atom elements (the ones with the a: namespace here), you can use properties of the SyndicationItem class.  For some reason, the SyndicationItem class isn't actually available in the Windows Phone libraries.  I'm not sure why this is the case, but it turns out that you can use the desktop version without a problem.  Just add a reference to the "C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.ServiceModel.Syndication" assembly.  You might get a warning when you add it, but it will work fine.  If you download the accompanying code, you'll get all the assemblies you need in it.

The SyndicationItem class gets you properties like Title and Id.  The other properties are all custom types in the "http://schemas.zune.net/catalog/apps/2008/02" namespace.  From these properties, you are interested in shortDescription, userRatingCount, averageUserRating, version, releaseDate, displayPrice, and priceCurrencyCode.  Instead of worrying about namespaces, since you know they are custom elements, you can use the ElementExtensions collection on the SyndicationItem and query the OuterName property.  A simple extension method makes this easy:

Visual Basic

Private Shared Function GetExtensionElementValue(Of T)(item As SyndicationItem, extensionElementName As String) As T
  Dim f = (From ee In item.ElementExtensions Where ee.OuterName = extensionElementName).FirstOrDefault()

  Return If(f Is Nothing, Nothing, f.GetObject(Of T)())
End Function

Visual C#

private static T GetExtensionElementValue<T>(SyndicationItem item, string extensionElementName)
{
    var f = item.ElementExtensions.Where(ee => ee.OuterName == extensionElementName).FirstOrDefault();
    return f == null ? default(T) : f.GetObject<T>();
}

With this method in place, you can create most of a new MarketplaceApp object with the following code:

Visual Basic

Dim app = New MarketplaceApp() With { _
    .Id = id, _
    .AppLink = "http://windowsphone.com/s?appid=" & Convert.ToString(id), _
    .Title = item.Title.Text, _
    .ShortDescription = GetExtensionElementValue(Of String)(item, "shortDescription"), _
    .UserRatingCount = GetExtensionElementValue(Of Integer)(item, "userRatingCount"), _
    .Version = GetExtensionElementValue(Of String)(item, "version"), _
    .AverageUserRating = GetExtensionElementValue(Of Double)(item, "averageUserRating") / 2.0, _
    .ReleaseDate = GetExtensionElementValue(Of String)(item, "releaseDate"), _
    .PrimaryImageUrl = Root & "/v3.2/en-US/apps/" & Convert.ToString(id) & "/primaryImage?width=95&height=95&resize=true", _
    .DisplayPrice = "Unknown" _
}

Visual C#

var app = new MarketplaceApp
{
    Id = id,
    AppLink = "http://windowsphone.com/s?appid=" + id,
    Title = item.Title.Text,
    ShortDescription = GetExtensionElementValue<string>(item, "shortDescription"),
    UserRatingCount = GetExtensionElementValue<int>(item, "userRatingCount"),
    Version = GetExtensionElementValue<string>(item, "version"),
    AverageUserRating = GetExtensionElementValue<double>(item, "averageUserRating") / 2.0,
    ReleaseDate = GetExtensionElementValue<string>(item, "releaseDate"),
    PrimaryImageUrl = Root + "/v3.2/en-US/apps/" + id + "/primaryImage?width=95&height=95&resize=true"
};

Where it gets a little bit tricky is the "offers" block.  This is an XML block within the overall Item block.  This requires that you shift over to an XmlReader method of parsing.  This works by reading the XML sequentially, stopping at elements of interest.  You start by finding the "offers" element, but instead of using the GetObject method, you use GetReader.  From there, you use a while loop to visit every node, and grab the value if it's of XmlNodeType.Element and either displayPrice or priceCurrencyCode.

Visual Basic

Dim offers = (From ee In item.ElementExtensions Where ee.OuterName = "offers").FirstOrDefault().GetReader()

' TODO: Restrict to current country's offer
If offers.ReadToFollowing("offer") Then
    While offers.Read()
        If offers.NodeType = XmlNodeType.Element Then
            If offers.Name = "displayPrice" Then
                app.DisplayPrice = offers.ReadElementContentAsString()
            ElseIf offers.Name = "priceCurrencyCode" Then
                app.PriceCurrencyCode = offers.ReadElementContentAsString()
            End If
        End If
    End While
End If

Visual C#

var offers = item.ElementExtensions.
    Where(ee => ee.OuterName == "offers").FirstOrDefault().GetReader();

// TODO: Restrict to current country's offer
if (offers.ReadToFollowing("offer"))
{
    while(offers.Read())
    {
        if (offers.NodeType == XmlNodeType.Element)
        {
            if (offers.Name == "displayPrice")
                app.DisplayPrice = offers.ReadElementContentAsString();
            else if (offers.Name == "priceCurrencyCode")
                app.PriceCurrencyCode = offers.ReadElementContentAsString();
        }
    }
}

Notice the "TODO" block.  If you are offering your app for sale at different prices in different markets, this will only grab the first offer.  Ideally, this should grab the offer for the user's location, but that's another topic!

Creating the Control

Creating a user control makes it easy to add your list of apps anywhere.  I like to add it to a PivotItem in my About page.  There are really three things to do:

1. Download the XML
2. Parse the XML into model objects
3. Bind the collection of items to a list

Of course, before you can show anything, you'll want to create a template to serve as the ItemTemplate in the control.  This will use databinding to point back at the properties of the marketplace entries to display the name, price, image, etc.  This can be created inline within the ListBox markup, or in the UserControl.Resources block (as it is in this case).  The root element is a Grid.  The Image shows the app's icon, and the StackPanel displays the title, price, and rating information.

<DataTemplate x:Key="AppTemplate">
    <Grid x:Name="LayoutRoot" Margin="0,0,0,4" Width="450" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="95"/>
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Image Source="{Binding PrimaryImageUrl}" Margin="0,0,20,10" />
        <StackPanel Grid.Column="1">
            <TextBlock Text="{Binding Title}" />
            <Controls1:RatingControl Max="5" Total="{Binding UserRatingCount}"
Score="{Binding AverageUserRating}" />
            <TextBlock Text="{Binding DisplayPrice}" />
        </StackPanel>
    </Grid>
</DataTemplate>

With the template complete, you just need a ListBox with the ItemTemplate set to the above template. 

<Grid>
    <ListBox x:Name="listBox" ItemsSource="{Binding Apps}"
ItemTemplate="{StaticResource AppTemplate}"SelectionChanged="ListBox_SelectionChanged" />
    <StackPanel x:Name="LoadingView" HorizontalAlignment="Center"
VerticalAlignment="Center"Visibility="Collapsed">
        <TextBlock TextWrapping="Wrap" Text="Loading list of apps..."
d:LayoutOverrides="Height"FontWeight="Black"/>
        <ProgressBar Margin="0,0,0,6" Height="5" IsIndeterminate="True"/>
    </StackPanel>
    <StackPanel x:Name="ErrorView" Orientation="Vertical" VerticalAlignment="Center"
HorizontalAlignment="Center" Visibility="Collapsed">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap"
Text="Sorry, there was an error reading the list of apps." FontStyle="Italic"/>
    </StackPanel>
</Grid>

The other elements are used to display a loading message and an error message.  Switching between the list, loading, or error message is accomplished using VisualStateManager with the "Normal," "Loading," or "Error" states accordingly.

The only other methods needed in the code-behind are to handle selection and caching.  When an item is selected, you create a MarketplaceDetailTask object, set the ContentIdentifier to the app's unique ID, and call Show().  Set the SelectedIndex property back to -1 to prevent a problem where a user can't press the same item twice in the row.

The caching is important so the app doesn't cause data access on every single visit to the control.  It's currently set to reload once per day, but this could be changed (or better yet, made configurable).  Even if it's more than a day, if there's an error downloading the data it will always fallback to cache.

Visual Basic

Dim items As IEnumerable(Of MarketplaceApp) = Nothing

If IsolatedStorageSettings.ApplicationSettings.Contains("PublisherAppsControls.Items") Then
  items = DirectCast(IsolatedStorageSettings.ApplicationSettings( _
    "PublisherAppsControls.Items"), IEnumerable(Of MarketplaceApp)) 
  ' Use the cache if within a day...
  Dim dt = CType(IsolatedStorageSettings.ApplicationSettings( _ 
    "PublisherAppsControls.Items.DateTime"), DateTime)

  If DateTime.Now.Subtract(dt).TotalDays < 1 Then
    ctrl.Apps.Clear()
    For Each i In items
      ctrl.Apps.Add(i)
    Next
    Return
  End If
End If

Visual C#

IEnumerable<MarketplaceApp> items = null;

if (IsolatedStorageSettings.ApplicationSettings.Contains("PublisherAppsControls.Items"))
{
    items = (IEnumerable<MarketplaceApp>)
             IsolatedStorageSettings.ApplicationSettings["PublisherAppsControls.Items"];
    // Use the cache if within a day...
    var dt = (DateTime)IsolatedStorageSettings.
               ApplicationSettings["PublisherAppsControls.Items.DateTime"];
    if (DateTime.Now.Subtract(dt).TotalDays < 1)
    {
        ctrl.Apps.Clear();
        foreach (var i in items) ctrl.Apps.Add(i);
        return;
    }
}

Next Steps

I haven't tested this app against publishers with large numbers of apps.  I'm not sure if they would all come back in the response or if there would be more requests to make.  It would also be good to filter out the currently running app.  This could be obtained from the WMAppManifest.xml file.  As mentioned in the article, it would also be good to restrict the offer to the current country, but I really don't know how to do that without using the location API, which seems too heavy-handed.

It would be nice to create a general-purpose library for Zune Marketplace data.  There are some good starts out there from the likes of Brandon Watson and Jesse Liberty, a CodePlex library, and even another Coding4Fun project, but much of that is based on general catalog data, or specialized for music entries.  Even better would be if Microsoft can put out their own API!  That would ensure a better experience if/when formats change over time.

Conclusion

XML has made the world of data so much easier to consume!  As soon as I saw structured data as the foundation for Zune I knew this would be a pretty easy project.  Being able to advertise all of your apps in each of your apps provides a great way to promote with a minimum of effort.

About the Author

Arian Kulp is a software developer living in Western Oregon. He creates samples, screencasts, demos, labs, and articles, speaks at programming events, and enjoys hiking and other outdoor adventures with his family.

WPF Sample Screenshots

Windows Phone Sample Screenshots

Clearly, the Mini does not have 512 pins and so we use Persistence of Vision to control the LEDs in the cube. The result is that seven pins on the Netduino Mini can control 512 LEDs.

At the end of this article you should be able to create a cube capable of the following:

Bill of Materials

The following items are also required:

• 5V Power capable of delivering 2A
• Solder (I used about 15 metres over the life of this project).
• One 30cm x 30cm piece of wood
• Drill and wood drill bits (4mm – 5mm)
• Some cardboard and tape
• A fair amount of patience
• Good attention to detail

You may need to shop around for the LEDs. I went to my preferred supplier and was quoted 18.5 pence each. By going on eBay I managed to negotiate the price down to 2.5 pence each including delivery. You are buying in bulk so don’t be afraid to ask for a good bulk price. Also, buy a few more than you need in case you have a faulty part or break a few.

Building the Cube

This is probably the most time consuming part of the project requiring a lot of patience and testing. The aim of the project is to convert these 512 blue LEDs:

Into this:

Shaping the LEDs

The exact dimensions of the cube depend upon the length of the legs on the LEDs. The legs are soldered together with the cathodes of the LEDs forming a horizontal plane and the anodes vertically connecting the layers. Each of the layers are configured into a common cathode display.

Take one of the LEDs and bend the cathode at a point as close to the body of the LED as possible. The cathode should be at 90 degrees to the anode and parallel to the flat base of the LED. This allows the horizontal legs to be soldered together to form the common cathode.

Shaping the anode is a little more difficult. The anodes connect the horizontal layers and so need to be shaped to ensure that each LED in the layer is directly above the corresponding LED in the layer below. Otherwise, each layer will be slightly offset from the one beneath it.

To achieve this, bend the anode in the opposite direction as described for the cathode. Then, still working with the anode, start about 2mm along the leg. Finally, bend the top 2-3mm through and fashion an angle at 90 degrees pointing back to the LED body. The end result should look like this:

The horizontal leg is the cathode and the vertical leg is the anode. When these are connected it should look like this:

Notice how the shaped anode allows the LEDs to be placed above each other.

Now repeat this process for the remaining 511 LEDs.

Building a Layer

Our next task is to connect the LEDs together. This is best achieved by using a template for the individual layers. Use a piece of wood with a grid of holes drilled into it as the template.

Measure the distance from the center of the now horizontal cathode to the end of the leg and subtract about 2mm. This will tell you how far apart the LEDs are in the horizontal plane. The 2mm will be used to overlap with the neighboring LED and will connect the cathodes. Now drill an 8 x 8grid of holes, each of which are distance of your choosing apart.  Here they are 20mm apart.

The holes need to be large enough to hold the LEDs securely but should not be so small that the LEDs are wedged into the hole and difficult to remove.

Take eight of the LEDs and place them along the top row with the cathodes all pointing to either the right or the left. If all are pointing to the right, the cathodes of seven LEDs will overlap slightly with the next LED to the right. The rightmost cathode will go off into space. Solder the cathodes together.

Now let’s add the remaining LEDs in the layer. I started on the left because I hold the soldering iron in my right hand. Take another seven LEDs and place these under the top row and down the far left column. The cathode of each first LED should overlap the cathode of the LED in the top layer. Solder these together.

Repeat with the remaining columns. At this point, you should have a horizontal row of LEDs connected together with eight strings of seven LEDs hanging from it. Eventually you should have something looking like this:

Now test the layer using a power supply and current limiting resistor. A 5V supply and a 68 Ohm resistor are adequate. Ground the cathode of the LED pointing off into space. Now touch each leg of the LEDs in turn with the positive output of the supply (through the current limiting resistor, of course). Each LED should light up and as you touch the anode.

One final bit of soldering is needed to add a stiffening wire to the layer. Cut and strip a piece of wire. The wire should be long enough to cross the entire layer. Place the stripped wire on the cathodes of the LEDs at the bottom of the string and solder it on to each.

At this point you will have one complete layer. Remove the layer from the template. This should be done carefully so that you do not put too much stress on the joints. Gently lifting it up with a screwdriver should help. Don’t hurry. Put this layer to one side and repeat another seven times.

Connecting the Layers - The Cube Appears

Now that all of the layers are built, test them again. This repeated test may save you future pain. Just imagine how difficult it will be to fix a bad joint in the middle of the cube. Check that the LEDs are still connected and none of the joints were broken when layers were removed from the template.

Now drop one of the layers back into the template. What we now need to do is to place a second layer on top of the first so that the anodes of the layer in the template touch the anodes of the LEDs in the upper layer. Once in place, we need to solder the anodes together, and so need a way of supporting the top layer whilst connecting the LEDs. A strip of cardboard can accomplish this. Cut the cardboard into strips (making sure the cardboard is the height needed to support the layer) and bind the strips together with tape. Two of these strips should be enough to support the layer. Here’s how it looked when several layers had already been connected:

Now that you have the layer supported, solder the anode of each LED in the top layer to the anode of the corresponding LED in the layer directly beneath it. Once this has been done, test each LED. Connect the cathode of the bottom layer to ground and touch each of the legs on the top layer in turn with the positive supply (going through the current limiting resistor). The LED on the bottom layer should light up. Repeat for each LED in the layer. Move the cathode to the top layer and repeat the test—this time the LED on the top layer should light. Again, repeat for each LED in the layer.

Now add the remaining layers. Just for safety, test every layer in the cube as it is built up. This repeated testing sounds like a big pain, but trust me it's worth it. At this point you will have a cube of LEDs looking something like this:

Now trim the cathodes that are still flying off into space.

Building the Controller Board

The controller board will allow any of the 512 LEDs in the cube to be turned on by a Netduino Mini using only seven pins.

Persistence of Vision

Connecting the anode to a positive supply while grounding the layer in which the LED is located can turn on any LED. You can also do this with more than one LED in a layer, and so within a layer can turn on 0 to 64 LEDs. To light the entire cube, we need to switch on each layer in turn while doing so fast enough to give the impression of static image. This is where the principle of Persistence of Vision comes into play.

The basic algorithm is as follows:

• Layer = 0
• Repeat
  • Connect the anodes of the desired LEDs in Layer to positive supply
  • Connect Layer to ground (this turns the layer on)
• Move to next Layer

If we do this fast enough, the human eye will see a single image as when watching TV or a movie.

Our basic building blocks for the controller are as follows:

• Microcontroller (a Netduino Mini) to run the whole show
• Hardware to select the layer to be turned on (74HC238 and TIP122 transistors)
• Hardware to turn on the LEDs (Shift registers)

Shift Registers

The shift registers determine which LEDs are turned on. The board has a series of eight cascaded 74HC595 registers. This allows us to control 64 LEDs (8 chips x 8 outputs). The following schematic shows how two of these registers should be wired together:

The above should be repeated until you have eight shift registers cascaded.

The output from the register is 5V and will give more than enough power to burn out an LED, so we need to put a current limiting resistor in the circuit. A 68 Ohm resistor is required for the LEDs in this project—make sure you verify the value you choose against the LEDs used.

Putting this together gives the following layout:

Each socket holds a 74HC595 shift register. The connections are identical for each register with the data cascaded into the next register. So if we look at the bottom left socket you will see the following:

• Below the socket there is a connector that allows the output to be connected to the LEDs in the cube.
• Above the connector are the resistors that limit the current flowing through the LEDs.
• The socket above that will hold the 74HC595 shift register.
• To the left of the socket is a 100nF capacitor. This smooths out the power supplied to the shift register and is connected between the power input and ground and placed as close to the IC as possible.

The following colors have been used:

• Red = Power
• Blue = SPI and cascaded data
• Yellow = RCK
• White = SPI clock

Note that the connectors and current limiting resistor are slightly offset as output 0 is on pin 15 and this is routed on the underside of the board. The remaining connections are a direct one to one path from the pin to the resistor/connector.

The microcontroller uses the Serial Peripheral Interface (SPI) bus to tell the shift registers which LED to turn on. The data from the registers is cascaded and so we can store 64 bits of information (1 bit for each LED in a layer). With logic 1 turning a particular LED on and 0 turns the LED off.

Layer Switching

The layer switching logic allows the controller to connect any one of the layers to ground (using a common cathode). Coupling this with the LED selection logic above allows us to turn on any one of the LEDs in the cube. This is achieved by using a transistor as a switch. The TIP122 was selected because it is capable of sinking 2A. This may seem like a lot considering the 25mA for each LED, but remember that we potentially have 64 LEDs being turned on at once. This means we may be drawing 1.6A of current. If you use a different LED, you will need to verify that the shift registers, power supply, and the transistor are capable of dealing with the amount of power you will be drawing.

The schematic for the layer switching looks like this:

The 74HC238 has three input signals. These represent a binary number 0-7. The chip converts this number into eight output lines. 0 turns on line 0, 1 turns on line 1 etc. The output from each line (0 through 7) is then fed in the base of a TIP122 transistor. This turns on the appropriate layer by connecting the layer through to ground.

One line for the Netduino Mini controls enable line on the 72HC238 chip. This allows us to turn all of the outputs off whilst a new value is being loaded into the chip. This line is used to make sure that the transitions between the states are “invisible.” Without this there is the chance that the viewer may see a flickering effect when new values are loaded into both the 74HC595s and the 74HC238.

The Completed Controller Board

The completed controller board looks something like this:

Note that there are a pair of connectors to the top right and bottom left of the Netduino Mini. The pair at the top right breakout the COM1 port. The two at the bottom left allow grounding of an FTDI lead (connected to the controller board) and also one socket that is not connected. This allows the 5V lead on the FTDI connector to have a place to live and not be in danger of touching something it shouldn’t.

And on the underside:

Connecting the Cube and Controller

The final task (from a hardware point of view) is to connect the cube to the controller board. I tried both ribbon cable and alarm cable. The alarm cable was a little more difficult to connect but was flexible. The ribbon cable was easier to work with but was not as flexible. The principle is the same whichever you chose.

Place the cube on a flat surface (the anodes touching the surface) with one face of the cube facing you. The connections should be made so that the lower back left corner is co-ordinate (0, 0, 0). The co-ordinates increase moving to the right, towards you and up. So looking at the controller board above, shift register 0 connects to the LEDs farthest away from you with output 0 from the register connecting to the LED to the far left. Cut and make the 8 cables according to this pattern varying the lengths to suit the location of the controller board with respect to the cube. Each cable will need a single eight-way socket on one end with the other end connected to the appropriate LED.

The layer selection logic should be connected using a similar cable. Each layer should be connected to a TIP122 with layer 0 being the bottom layer.

The cube will then look like this:

Connecting it up to the controller:

I found it easier to be consistent and wire each plug and LED identically, and so all of the connections above have a black wire to the right of the connector. It helps with connecting things up later.

If we have everything connected then we only need one more thing...

Software

The software running the cube needs to perform two main tasks:

• Work out which LEDs are turned on
• Run the display (cube)

These two tasks need to be performed at the same time (or so fast that they appear to run at the same time). Luckily the .NET Micro Framework has a built in mechanism to allow us to do this—threading. Threading allows us to do this by running two tasks interleaved. So task 1 will run for a while, the system will then switch and run task 2 for a while, then back to task 1 and so on.

To do this, the software is split into two parts, the main program that decides what to display and a separate class that runs the display.

LEDCube Class

This class has only one purpose in life, to output data to the controller board and so “run” the display. It is a relatively simple class containing the following methods:

• Constructor
• Buffer update method
• Display Buffer method

The constructor sets everything up by instantiating an instance of the SPI class and setting the buffer (which contains the data to be displayed) to be empty, effectively clearing the cube:

public LEDCube()
{
    config = new SPI.Configuration(SPI_mod: SPI.SPI_module.SPI1,
                                   ChipSelect_Port: Pins.GPIO_PIN_20,
                                   ChipSelect_ActiveState: false,
                                   ChipSelect_SetupTime: 0,
                                   ChipSelect_HoldTime: 0,
                                   Clock_IdleState: true,
                                   Clock_Edge: true,
                                   Clock_RateKHz: 100);    spi = new SPI(config);
    buffer = new byte[64];
    for (int index = 0; index < buffer.Length; index++)
    {
        buffer[index] = 0;
    }
}

The buffer is 64 bytes of data, 8 rows of 8 bytes. Each byte corresponds to a vertical layer in the cube.

The UpdateBuffer method allows the calling program to change what is displayed in the cube. A little control is needed here to ensure that the pattern displayed in the cube is consistent, and so locking is used to ensure that the buffer cannot be updated part way through a display cycle:

public void UpdateBuffer(byte[] newValues)
{
    lock (buffer)
    {
        for (int index = 0; index < buffer.Length; index++)
        {
            buffer[index] = newValues[index];
        }
    }
} 

The final method in this class is the method spawned off into it’s own thread:

public void DisplayBuffer()
{
    while (true)
    {
        lock (buffer)
        {
            byte[] displayData = new byte[8];            for (int row = 0; row < 8; row++)
            {
                int offset = row * 8;                for (int index = 0; index < 8; index++)
                {
                    displayData[index] = buffer[offset + index];
                }                enable.Write(true);
                bit0.Write((row & 1) != 0);
                bit1.Write((row & 2) != 0);
                bit2.Write((row & 4) != 0);
                spi.Write(displayData);
                enable.Write(false);
            }
        }
    }
}

This method again uses the lock statement to lock the buffer. This means we cannot update the buffer until a full cube of data has been displayed. The method takes a block of eight bytes representing a layer and then writes this to the shift registers using SPI. Note that the spi.Write is embedded in the write to the enable line. This ensures that all of the layers are turned off whilst we are updating the shift registers.

Wrapping all of this in the LEDCube class means that we now have a very simple class where we can spawn the DislpayBuffer method into its own thread.

Main Program

The main program sets the cube up and then controls what is actually shown in the cube. The first thing we need to do is to set up a buffer to store the cube display and then spawn off the DisplayBuffer into its own thread.

private static LEDCube cube = new LEDCube();
private static byte[] newFrame = new byte[64];
ClearCube();
Cube.UpdateBuffer(newFrame);
Thread display = new Thread(new ThreadStart(cube.DisplayBuffer));
display.Start(); 

The ClearCube method is trivial and simply sets all of the bytes in newFrame to zero. At this point we have a cube with a whole lot of nothing going on. The next thing we need to do is to add some effects.

Making it Rain

Now that we have the mechanism to control the cube, we simply need to work out what we want to display. The rain effect in the opening video illustrates the majority of the techniques used to control the cube.

The rain algorithm is as follows:

• Set up the cube with a number of rain drops
• Repeat
  • Count the drops in the bottom layer
  • Move drops down one layer
  • Add the number of drops that have disappeared back into the top layer

To do this we will create two methods:

• AddDrops
• Rain

private static void AddDrops(int count, int plane = -1)
{
    for (int drops = 0; drops < count; drops++)
    {
        bool findingSpace = true;
        while (findingSpace)
        {
            int x = rand.Next() % 8;
            int y = rand.Next() % 8;
            int z;            if (plane == -1)
            {
                z = rand.Next() % 8;
            }
            else
            {
                z = plane;
            }            int position = (z * 8) + y;
            byte value = (byte) ((1 << x) & 0xff);
            if ((newFrame[position] & value) == 0)
            {
                newFrame[position] |= value;
                findingSpace = false;
            }
        }
    }
}

AddDrops simply adds a specified number of rain drops to the buffer. It also makes sure that if asked for 10 it will always add 10 by checking to see if one exists in the location it wanted to use (check out the findingSpace variable):

private static void Rain(int noDrops, int cycles)
{
    ClearCube();
    AddDrops(noDrops);
    cube.UpdateBuffer(newFrame);
    for (int currentCycle = 0; currentCycle < cycles; currentCycle++)
    {
        int bitCount = 0;
        for (int plane = 0; plane < 8; plane++)
        {
            byte value = 1;
            for (int bit = 0; bit < 8; bit++)
            {
                if ((newFrame[56 + plane] & value) > 0)
                {
                    bitCount++;
                }
                value <<= 1;
            }
        }
        for (int plane = 7; plane > 0; plane--)
        {
            for (int currentByte = 0; currentByte < 8; currentByte++)
            {
                newFrame[(plane * 8) + currentByte] = newFrame[((plane - 1) * 8) + currentByte];
            }
        }
        for (int b = 0; b < 8; b++)
        {
            newFrame[b] = 0;
        }
        AddDrops(bitCount, 0);
        cube.UpdateBuffer(newFrame);
        Thread.Sleep(75);
    }
}

Rain adds the specified number of drops to the newFrame, shows the drops, and then moves them all down by one horizontal plane. Before doing this, it counts how many drops are going to fall out of the cube (the number in the bottom horizontal plane). After all the drops have moved down one plane it adds the drops which have disappeared out of the bottom of the cube back in at the top in random positions.

We can display this by adding the following to the main program:

while (true)
{
    Rain(10, 60000);
} 

Full source code at http://netduinoledcontrol.codeplex.com/.

If you add your own effects, remember to consider the rating of the equipment and parts used. Turning on a full horizontal layer consumes 1.6A for the LEDs alone. Things can get warm/hot if every LED in the cube is turned on at the same time so avoid such effects.

Conclusion

When I started out on this project I was not sure how fast the Netduino Mini could control the cube. It has proven that it is up to the task of keeping the display running whilst also being able to work on the upcoming “frame.” If you have gone this far and built a cube then how about expanding it:

• Add some filters and a microphone and make the display respond to its environment
• Connect the cube to a PC using Bluetooth
• Add an MP3 player module and write software to synchronise the display to the music

Where will you take it?

About The Author

Mark Stevens is a software engineer and self-confessed technology addict. Mark started in the computer industry in the 1980s and at the age of 16 wrote a disk operating system for a then state of the art 8-bit microprocessor (despite the fact the machine already had one). He did it for fun and has been hooked on IT ever since then. Mark currently writes line of business applications for Win32, ASP.NET, and Silverlight platforms. He has recently taken up microelectronics as a hobby and has since discovered that his wife does not like the smell of solder. Marks’ current exploits, thoughts, and contact information can be found on his blog.

Initial Mashup

The project was divided into three major components:

The desktop client – a Kinect-controlled 3D environment. It is only partially controlled by the motion sensor, since other responsibilities are delegate to the phone. Because it is a proof-of-concept and not a full-sized game, WPF is the primary sub-framework.

The mobile client – a Windows Phone application that also is in charge of partially controlling the 3D environment on the desktop client. We decided to use Silverlight in favor of XNA because we didn't want complex graphics and all we needed was the bird's eye view of the playable area.

The server – one of the most interesting (and issue-generating) components. This was the link between the desktop and the mobile client. Initially we planned on using a WCF service (and we actually did for a while), but then we decided to use sockets for better performance..

Developing the communication layer

Since we decided to remove support for WCF and focus on sockets, we needed to figure out a way to send appropriate data to both clients. Given the fact that the amounts of data that are being sent across clients are not really big, it seemed a good idea to make the server broadcast a dual data set—a collection of indicators that are used by both the phone and desktop clients. It will be the client's responsibility to select the required value.

Here is the general structure of a data package broadcasted by the server:

We tried to keep it as simple as possible. The desktop client is going to process the camera direction sent by the phone, and the phone will adjust the character position according to the movement generated by the Kinect-driven desktop client.

When the clients (both desktop and mobile) send data to the server, they identify themselves through a prefix. For example, the desktop client sends the following string to the server:

The c prefix identifies the sender as the desktop client (computer). The phone sends the camera angle, led by the p prefix (phone):

Before going any further, I must mention that socket communications on Windows Phone are fairly generic, so the code we decided to use is close to the Sockets Sample on MSDN. We added a custom string parser that makes sure that the proper data is read between devices.

The server

Our server is entirely based on socket interactions through the TCP layer. It is a .NET-based console application that is listening to incoming connections (limited to two) and is broadcasting the received content, synchronizing both the desktop and the mobile clients. It is a "dummy" server and so doesn't perform any data processing—it simply receives the data from one client and then passes it to another.

Here is how the listening process is organized:

public static void StartListening()
{

    byte[] dataBuffer = new Byte[StateObject.BUFFER_SIZE];
    IPEndPoint localEndPoint = new IPEndPoint(IPAddress.Any, PORT_NUMBER);
    Socket listener = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);

    try
    {
        listener.Bind(localEndPoint);
        listener.Listen(2);

        while (true)
        {
            completed.Reset();
            Console.WriteLine("Async transmission started.");
            listener.BeginAccept(new AsyncCallback(AcceptCallback),listener);
            completed.WaitOne();
        }

    }
    catch (Exception e)
    {
        Debug.WriteLine(e.ToString());
    }
}

The received byte array is later transformed to a standard string that is parsed according to the pattern described above. The parser detects the prefix and assigns the correct values depending on the sender.

private static void ParseContent(string content)
{
    var values = content.Split('|');
    if (content.StartsWith("c"))
    {
        position = int.Parse(values[1]);
    }
    else if (content.StartsWith("p"))
    {
        angle = int.Parse(values[1]);
    }
}

The difference in received data is present because each client is designed to affect only a part of the gameplay, and character movement cannot be directed by a desktop client or by the mobile application on its own. The mobile client reports the angle of character rotation, and the desktop client controls general movement progress and bonus pickups.

Once all values are read, the server broadcasts them back:

private static void Send(Socket handler)
{
    // The generalized string broadcasted by the server does not contain a platform
    // identifying prefix (p or c)
    string data = string.Format("{0}|{1}", angle, position);

    byte[] byteData = Encoding.UTF8.GetBytes(data);

    Console.WriteLine("DATA LENGTH [SENT] = {0} bytes. DATA = {1}", data.Length, data);

    handler.BeginSend(byteData, 0, byteData.Length, 0, new AsyncCallback(SendCallback), handler);
}

This is pretty much it when it comes to defining the server that handles cross-platform communications. It can be installed on a machine other than the one where the desktop client is running, as long as all of them work on either the same subnet or a network in which the IP addresses are static and have the invoked port open.

The desktop client

The desktop client was a bit of a graphical “fortress.” Rick was building the entire 3D environment while Adam and I were building the mobile application and the server interoperability layer.

We used the newly launched Kinect SDK to access the connected Kinect and it was initialized the moment the main window is loaded:

void SetupKinect()
{
    nui = new Runtime();

    try
    {
        nui.Initialize(RuntimeOptions.UseSkeletalTracking);
    }
    catch (InvalidOperationException)
    {
        MessageBox.Show("Runtime initialization failed. Please make sure Kinect device is plugged in.");
        return;
    }

    nui.SkeletonFrameReady += new EventHandler<SkeletonFrameReadyEventArgs>(nui_SkeletonFrameReady);
}

Runtime is the standard device class that identifies the Kinect currently connected to the PC. As long as we were using just one sensor, we did not need to provide a numeric index when instantiating the Runtime class itself.

Since we are only using skeletal tracking—the desktop client is responsible for moving the character forward on a detected jump—the Runtime instance is initialized with a RuntimeOptions.UseSkeletalTracking argument. The event handler is invoked once we detect a tracked skeleton:

void nui_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
{
    SkeletonFrame skeletonFrame = e.SkeletonFrame;

    foreach (SkeletonData data in skeletonFrame.Skeletons)
    {
        if (SkeletonTrackingState.Tracked == data.TrackingState)
        {

            phL = new Point(data.Joints[JointID.HandLeft].Position.X, data.Joints[JointID.HandLeft].Position.Y);
            phR = new Point(data.Joints[JointID.HandRight].Position.X, data.Joints[JointID.HandRight].Position.Y);
            pCore = new Point(data.Joints[JointID.HipCenter].Position.X, data.Joints[JointID.HipCenter].Position.Y);

            coreDeep = data.Joints[JointID.HipCenter].Position.Z;

            leftDeep = data.Joints[JointID.HandLeft].Position.Z - coreDeep;
            rightDeep = data.Joints[JointID.HandRight].Position.Z - coreDeep;

            handL.x = 640 + 600 * phL.X;
            handL.y = 350 - 300 * phL.Y;
            handR.x = 640 + 600 * phR.X;
            handR.y = 350 - 300 * phR.Y;

            bodyCore.x = 640 + 30 * pCore.X;
            bodyCore.y = 350 - 300 * pCore.Y;

            follow.x = bodyCore.x;
        }
    }
}

The Kinect sensor monitors six skeletons at once, but not all of them are tracked for movement. That's the reason to check the SkeletonTrackingState before displaying the joint indicators on the screen.

The joint indicators themselves are declared in the XAML layout in the main page:

<Canvas x:Name="touch_screen" Width="1280" Height="720" Background="#00FF0000">
    <local:BodyMarker x:Name="handL"/>
    <local:BodyMarker x:Name="handR"/>
    <local:BodyMarker x:Name="follow" x="0" y="0"/>
    <local:BodyMarker x:Name="bodyCore" x="0" y="0"/>
</Canvas>

The BodyMarker class is in fact a custom UserControl. It is easier to manage and later extend instances of a customizable unit rather than a simple ellipse:

<UserControl x:Class="KinectoPhone.Desktop.BodyMarker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
    <Canvas>
        <Ellipse x:Name="bkg" Width="10" Height="10" Canvas.Left="-5" Canvas.Top="-5"/>
    </Canvas>
</UserControl>

In the skeleton tracking code above, we are not only tracking the joint position, we're also adjusting the character position based on the center hip location in space as well as detecting the jump by coordinating joint positions by the Z-axis.

The data is sent via an instance of the same AsynchronousClient I used on the server side, but with small modifications. I implemented a short verification mechanism that ensures the fact that I am using an IPv4 address as the endpoint will be functional with only IPv4 and not IPv6 addresses for the time being:

public AsynchronousClient()
{
    // The worker that is constantly syncing the state of the
    // desktop client with the server.
    backgroundWorker.DoWork += new DoWorkEventHandler(backgroundWorker_DoWork);

    IPHostEntry ipHost = Dns.GetHostEntry("192.168.173.1");

    var ipv4address = (from c in ipHost.AddressList where c.AddressFamily == AddressFamily.InterNetwork select c).First();

    if (ipv4address != null)
    {
        IPAddress ipAddress = (IPAddress)ipv4address;
        remoteEndPoint = new IPEndPoint(ipAddress, port);

        InitializeClient();
    }
}

The BackgroundWorker is managing the constant synchronization building the location and meta string that is being sent with updated character position and activity data from the desktop client:

void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
{
    if (!client.Connected)
    {
        client.Shutdown(SocketShutdown.Both);
        client.Close();
        InitializeClient();
    }

    DesktopData cd = (DesktopData)e.Argument;
    Send(client, string.Format("c|{0}", cd.Position));
    sendDone.WaitOne();

    // Receive the response from the remote device.
    Receive(client);
    receiveDone.WaitOne();
}

When the desktop client receives data, it only reads information regarding the camera angle. Therefore, that’s the only indicator we needed to set from the outside:

void aClient_ResponseReceived(object sender, ResponseReceivedEventArgs e)
{
    Dispatcher.Invoke(new Action(delegate
    {

        var values = e.Response.Split('|');

        cameraTargetRotation = Convert.ToDouble(values[0]);

    }), DispatcherPriority.Normal);
}

Phone client

The phone client has only one responsibility—adjust the camera angle as the user tilts the device. We used standard accelerometer-based capabilities to track the movement of the device in space.

The app uses a different implementation of the AsynchronousClient called SocketHandler. It works well to link the phone to the server. For example, take a look at the handler that processes the received input:

private void ProcessReceive(SocketAsyncEventArgs e)
{
    if (e.SocketError == SocketError.Success)
    {
        // Received data from server
        string dataFromServer = Encoding.UTF8.GetString(e.Buffer, 0, e.BytesTransferred);

        Socket sock = e.UserToken as Socket;
        sock.Shutdown(SocketShutdown.Send);
        sock.Close();
        clientDone.Set();

        // Respond to the client in the UI thread to tell him that data was received
        System.Windows.Deployment.Current.Dispatcher.BeginInvoke(() =>
        {
            ResponseReceivedEventArgs args = new ResponseReceivedEventArgs();
            args.response = dataFromServer;
            OnResponseReceived(args);
        });

    }
    else
    {
        clientDone.Set();
        throw new SocketException((int)e.SocketError);
    }
}

Due to threading limitations, we had to use the dispatcher class to notify the UI about the fact that all data from the server was received and that it should be transformed to the position of the character on the map.

In the main page constructor, we are initializing the SocketHandler with the same values for the server as we did in the desktop client. Additionally, we're wiring an event handler that will handle the received string. Unlike ProcessReceive above, the wired event handler actually parses the string for required values and accordingly takes the appropriate action:

SocketHandler handler = new SocketHandler("192.168.1.6", 13001);
handler.ResponseReceived += new ResponseReceivedEventHandler(handler_ResponseReceived);

void handler_ResponseReceived(object sender, ResponseReceivedEventArgs e)
{
    previousPos = currentPos;

    string[] data = e.response.Split('|');
    int.TryParse(data[1], out currentPos);

    if (currentPos != previousPos)
    {
        targetIndex = currentPos;
    }
}

The data is sent back to the server with the help of a DispatcherTimer instance running every 300 milliseconds:

void timer_Tick(object sender, EventArgs e)
{
    handler.SendData(string.Format("p|{0}", curTriangleAngle.ToString("0")));
}

When the accelerometer detects a change in the current value, we make sure that the object is rotated in the right direction by checking the sign of the reading:

void accel_ReadingChanged(object sender, AccelerometerReadingEventArgs e)
{
    Dispatcher.BeginInvoke(new Action(() =>
    {
        previousY = currentY;
        currentY = e.Y;

        if (e.Y > .7 || e.Y < -.7)
        {
            if (e.Y > .7 && !isTurnDirty)
            {
                isTurnDirty = true;
                Turn(1);
            }
            else if (e.Y < -.7 && !isTurnDirty)
            {
                isTurnDirty = true;
                Turn(-1);
            }
        }
        else
        {
            isTurnDirty = false;
        }
    
    }));
}

void Turn(double direction)
{
    currentTurnTime = DateTime.Now;
    TimeSpan diffResult = currentTurnTime.Subtract(lastTurnTime);
    if (diffResult.TotalSeconds > 1)
    {
        lastTurnTime = currentTurnTime;
        targetTriangleAngle += direction * 90.0;
    }
}

The turn time is checked so that the character on the device screen doesn’t constantly rotate. Since the accelerometer is very sensitive and without a time limit, a slight tilt will have unexpected consequences on the rotation behavior.

How to test

Virtual Router is a great way to test the set-up. Virtual Router allows the server computer to become a WiFi hotspot so that any connected device will be automatically registered as a part of the local subnet.

You will need:

• A computer with a WiFi card (most laptops have them anyway)

Make sure that you have the WiFi card enabled and launch Virtual Router Manager. Set a new network name, as well as specify a password. It is worth mentioning that this network will act like a standard wireless network, so make sure you secure it with a strong password if you don't want it accessed from the outside.

Once you enable the hotspot, you can run the desktop client on the same machine. Connect the phone to the newly created wireless network and make sure that the proper IP is set in the code-behind for both the desktop client and the Windows Phone app.

The IP for the server machine can be found by running the ipconfig command in the console.

The IP address for the Windows Phone device that is connected to the hotspot is shown in the main Virtual Router Manager window.

In case the router cannot be started, make sure that connection sharing is enabled for your main connection and that it points to the Miniport interface.

Once the network is correctly set up, I would highly recommend launching the project components in the following order:

1. Server
2. Desktop client
3. Phone client

Conclusion

With the latest 7.1 SDK update for Windows Phone as well as the 7.5 (Mango) OS, it is fairly easy to set up a Kinect-to-WP communication layer through sockets. With small modifications and performance optimizations we can also send Kinect imagery (captured through the depth and video sensors) directly to the phone without major delays. The field of third-party games that interoperate with Kinect and run on mobile devices is yet to be fully developed, but we already made the first steps in that direction.

About the author

Dennis Delimarsky is a Windows Phone Development MVP. He enjoys technical writing as well as building cool stuff around the .NET platform. Besides Coding4Fun, he also blogs at Den by default. He can be contacted at ddelimarsky@live.com.

If you want to learn how to extend the engine, check out the Coding4Fun article!

Screenshots