And now for the IR properties:

The Wiimote can track up to 4 infrared (IR) LEDs at a time. If I were a programmer, I would have created an IR LED enum with the following properties as part of each IR LED. But since I’m not, these properties can be accessed with the following convention: IR[#][propertyName]. Each IR LED has the following properties:

IR[#]RawPosition

Type: Point

Summary: The IR camera has a X,Y resolution of 1024, 768. This property will give you the raw X,Y position that the Wiimote is tracking this LED at.

Binding Usage Example:

<Grid Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=”IR1RawPosition.X, Mode=OneWay}”
Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=”IR1RawPosition.Y, Mode=OneWay}” />

Additional Info: This will work best if your Canvas is the exact dimensions of the Wiimote camera (1024, 768). These properties are automatically converted to take into account the IsMultiPoint setting (described in the Miscellaneous Properties (coming soon)).

IR[#]Position

Type: Point

Summary: This is the X,Y ratio of the position of your IR LED. The best way to use this is in a multi-binding with the width and height of your target Canvas. Fortunately for you, I’ve added a converter that will help with this. Simply add the following code in your resources:

<Wii:VariableCanvasPointConverter x:Key=”VariableCanvasConverter” />

And follow the binding example below.

Binding Usage Example:

<Grid>
   <Canvas.Left>
      <MultiBinding Converter=”{StaticResource VariableCanvasConverter}“>
         <Binding Source=”{StaticResource WiiData}” Path=”IR1Position.X” Mode=”OneWay” />
         <Binding ElementName=”MyCanvas” Path=”ActualWidth” Mode=”Default” />
      </MultiBinding>
   </Canvas.Left>
   <Canvas.Top>
      <MultiBinding Converter=”{StaticResource VariableCanvasConverter}“>
         <Binding Source=”{StaticResource WiiData}” Path=”IR1Position.Y” Mode=”OneWay” />
         <Binding ElementName=”MyCanvas” Path=”ActualHeight” Mode=”Default” />
      </MultiBinding>
   </Canvas.Top>
</Grid>

Additional Info: These properties are automatically converted to take into account the IsMultiPoint setting (described in the Miscellaneous Properties (coming soon)).

IR[#]Found

Type: boolean

Summary: This is a property that is “true” if the Wiimote can see the target LED and “false” if it cannot.

Binding Usage Example:

<Grid IsEnabled=”{Binding Source={StaticResource WiiData}, Path=IR2Found, Mode=OneWay}” />

Additional Info:  This property is also available for the midpoint between the first and second infrared light (MidPointFound) and for the target point (TargetFound) which displays a calculated position of where the Wiimote is being pointed.

IR[#]Size

Type: double

Summary: The Wiimote naturally picks up the size of the LED it is tracking. To get larger sizes  (which translates into better reliability) use a small cluster of LEDs (three should do the trick) rather than a single one.

Binding Usage Example:

<Grid Width=”{Binding Source={StaticResource WiiData}, Path=IR1Size, Mode=OneWay}” />

IsIR[#]Visible

Type: bool

Summary: This item is meant for two way binding. If you want a way to programmatically choose whether or not to show the item that is bound to your IR interface, use this property. It is most useful when used in conjunction with the BoolToVisibility Converter, which can be used by placing this XAML in your resources:

<BooleanToVisibilityConverter x:Key=”boolToVis” />

Binding Usage Example:

<Grid Visibility=”{Binding Source={StaticResource WiiData}, Path=IsIR3Visible, Mode=OneWay, Converter={StaticResource boolToVis}“/>

<CheckBox IsChecked=”{Binding Source={StaticResource WiiData}, Path=IsIR3Visible, Mode=TwoWay}“/>

Additional Info:  This is a great property to attach to a checkbox (as seen above) to allow user control over which items are to be shown.

In addition to the infrared lights, the WPF Wii library is set up to display two calculated points as well:

• A midpoint between IR1 and IR2
• A target point (based on the midpoint) which indicates where the Wiimote is being pointed.

These two calculated points still have the position properties listed above (TargetRawPosition, MidPoint RawPosition, TargetPosition, MidPointPosition) as well as the visibility booleans (IsTargetVisible and IsMidPointVisible) and the “found” boolean properties (MidPointFound and IsTargetPossible).

Of course, you can also play around with the items in Intellisense is also a great way to discover all the available properties.

WPF Wii Binding Library (dlls only) 

WPF Wii Binding Library (source)

 There are really two parts to the WPF Wiimote Visualizer. The first part is the WPF Wiimote Binding Library, which we’ll cover in this post (or at least make this post the hub of that information). The second part is the Visualizer program itself, which is basically just the WPF Wiimote Library bound to a bunch of XAML elements.

The WPF Wiimote Binding Library will allow simple binding between your Wiimote and your WPF application (I’ve got a whole post on that here). But let me extrapolate a little on what the library has to offer. I’ve seperated out the data into different posts to make it a little more digestible.

Infrared Data

Button Data (coming soon)

Misc Data (Rumble, Battery, Accelerometers) (coming soon)

Nunchuk Data (coming soon)

 You would be so wrong.

 So, first I tried to duplicate his infrared array. He is using 100 IR LEDs to project a flood of IR light that is then reflected back to the Wiimote screen using reflective tape.

Reflective Tape: Is not easy to find. At all. Go ahead and try it. 3M sells reflective tape, but none of the hardware stores in Salt Lake City had any. As a plus, they said they could have it on hand within two weeks.

Ebay is an option if (again) you don’t mind waiting two weeks to get something. But there are many kinds of reflective tape. Which one works best? We’ll get to that part.

Infrared Array: Johnny Lee gives no specs on his IR array, so I can’t speak to its efficacy. I built one with 96 high output IR LED’s. In addition to the LED’s (which are $2 per LED at Radio Shack and closer to 30 cents per LED at Mouser), I had to get a breadboard, batteries, a voltimiter, and some resistors.

In the end, it didn’t work. The LEDs all lit up just fine, but they didn’t output anywhere near enough light to give a healthy reflection. Was this the light or the relfective tape I was using? We’ll get to that part.

Infrared Spotlight: I initially assumed it was the light. So I got my hands on a 1,000,000 candle power IR spotlight to solve that problem. Turned it on and… nothing. The Wiimote picked up the spotlight shining on my shirt, but it wouldn’t pick up the reflection off the tape. So is this a problem with the light or with the tape?

 I have no idea, but I can tell you that the tape is borderline useless with everything I’ve tried.

Maybe I’m using low power IR LED’s (1.3 volt, 100mA) or maybe I’m using the wrong kind of reflective tape (I tried both engineering grade and retroreflective daybright… whatever that means), but I have had zero success replicating Johnny Lee’s design.

My next step is going to be an attempt to mount IR LED’s directly into a pair of gloves, which is how the Cynergy demo was done. This was the solutions that I finally got that working… as you’ll see in some videos over the next couple days.

 Instead, use my new WPF/Wii library. It uses the WPF INotifyPropertyChanged interface to act as an interface so that we can bind the Wiimote data directly to the XAML. More on that in a little bit, but first…

In this post, we’ll walk through creating a basic multi-point capable app that uses the Wiimote as an input device. What is really unique about this post is the fact that we’re going to do this in a way that requires absolutely no code whatsoever on your part.

That’s right. No code. At all. Zero knowledge of C# required.

First, download the “WPF_Wii_Binding_Library” and the “WiimoteLib” dlls, unzip them and put them in the same folder (somewhere you can find them).

Open up Blend or Visual Studio 2008 and start a new application. (Visual Studio 2008 is reccomended for this tutorial.)

Now, head right on over to your “Project” tab or “Solution Explorer” and right click on the “References” folder and click “Add Reference”.

Blend

VS 2008

Browse for the reference “WPF_Wii_Binding_Library” (the one you just downloaded) and click “Open”.

In your main composition, add a “Canvas”.

<Canvas>
</Canvas>

Draw three ellipses and give them three different colors.

Define the following XML namespace Window:

<Window …
 xmlns:Wii=”clr-namespace:WPF_Wii_Binding_Library;assembly=WPF_Wii_Binding_Library“>

In your Resources, add the following resources (you can just copy this code if you want):

<Wii:WPFWii x:Key=”WiiData” IsMultiPointMode=”True“  />
<BooleanToVisibilityConverter x:Key=”boolToVis” />

Note: If you’re using anything less than Blend 2 December Preview, I can make no guarantees that this solution won’t throw a fit. Even with the B2DP, it is still having issues. The best way to do this is really through Visual Studio 2008. But if you don’t mind just typing all your XAML, Blend will still compile fine.

Find your first Ellipse in the XAML. Add the following Visibility property:

Visibility=”{Binding Source={StaticResource WiiData}, Path=IR1Found, Converter={StaticResource boolToVis}}”

What this is doing is connecting to the Wiimote and checking to see if it can see your first infrared LED. I suggest using the sensor bar that comes with the Wii for the time being.  If it can see the LED, your ellipse will be visible. If it can’t, it won’t.

It is now time for us to make the magic. Replace whatever “Canvas.Left” and “Canvas.Top” properties so that your Ellipse looks like the following:

<Ellipse Width=”30″
      Height=”30″
      Fill=”#FF0045FF”
      Stroke=”#FF000000″
      Visibility=”{Binding Source={StaticResource WiiData}, Path=IR1Found, Converter={StaticResource boolToVis}}”
      Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=IR1Position.X, Mode=OneWay}”
      Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=IR1Position.Y, Mode=OneWay}” />

We’re binding that ellipse to the X,Y position the Wiimote has tracked the first infrared LED. Let’s do the same with our second infrared LED and the midpoint between the two LEDs.

LED number 2:

Visibility=”{Binding Source={StaticResource WiiData}, Path=IR2Found, Converter={StaticResource boolToVis}}”
Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=IR2Position.X, Mode=OneWay}”
Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=IR2Position.Y, Mode=OneWay}”

Mid point:

Visibility=”{Binding Source={StaticResource WiiData}, Path=MidPointFound, Converter={StaticResource boolToVis}}”
Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=MidPointPosition.X, Mode=OneWay}”
Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=MidPointPosition.Y, Mode=OneWay}”

Guess what?

You’re done. That’s all you need.  Just make sure your Wiimote is connected to your computer and you’re ready to rock and roll. (Need help with that part? Check here.)

You’ve just created a Wiimote application with 0 (zero) lines of custom code and (depending on your formatting) less than 20 lines of XAML markup.

The next tutorial may take a week or more to make since I need to wait for my infrared lights and circuits to come in in order to build an infrared array. (Don’t worry, I’ll be posting a tutorial on how to build that infrared array. That tutorial will assume that you have never touched a circuit in your life.)

Warning: The project will not run if your Wii controller isn’t connected to your computer.

Using the WPF Wii Data Visualizer (Video)

OK, now that we’ve gotten our Wii Controllers all hooked up to our computers, it’s time to take a look at the data we’re getting from it.

Over the weekend, I pieced together a little application that will help us visualize the incoming Wiimote data in a way that would help understand the raw data points a little better as well as help out as we head toward our ultimate goal of multi-point WPF application development. This is what I came up with.

Disclaimer: The source code at this point is a mess. While the interface is all done in XAML and is very WPF, the code-behind is a hacked together mish-mash. I will at some point go back and restructure the code-behind to take advantage of the INotifyPropertyChanged interface. When I do that, I’ll post on it and we’ll see another example of why WPF is so freaking cool.

A point of note: I am not a programmer. I am a designer. This means that whatever code I post will probably be a mess. But it also means that if I can make something work in WPF, anyone can.

The first question we need to address is how to pull multi-point interaction data into your system. You could, of course, buy one of these. I don’t have that kind of money, so I decided to try my hand at the poor man’s multi-point: the ever useful Wiimote controller for the Nintendo Wii.

In this post, we’ll go over how exactly to connect your Wii controller to your computer via Bluetooth. (I’m using Vista. Could be different for XP, but I haven’t tried.)

First, open up your Control Panel and double click on “Bluetooth Devices”

That will bring up your Bluetooth Devices Window. Before we start the Bluetooth discovery process, I want to take note of something. While connecting the Wiimote to your computer may seem like it should be a science, it has in my experience been more of an art. One of the things that I’ve found helps my art is to go to the “Options” tab and check the “Allow Bluetooth devices to find this computer” box:

Yes, I am well aware that this is poor security. But it works for me.

Now lets go back to the “Devices” tab and click “Add…” at the bottom and you’ll get started with the “Add Bluetooth Device Wizard”.

Check “My device is set up and ready to be found.”

Now, before you click “Next”, make sure your Wii is either off or out of range of your Wii controller. (If you don’t, it Wii will take control of the Bluetooth signal and your computer won’t be able to find it.)
 Press the “1″ and “2″ buttons simultaneously on your Wii controller. The four lights at the bottom should start flashing in unison.

Now, quickly, press “Next”.

After searching for a little while, you should see “Nintendo RVL-CNT-01″ or something similar. Click on it and press “Next”.

In the passkey section, select “Don’t use a passkey”.

At this point, the flashing lights on your Wiimote will stop flashing. As far as I can surmise, this means that your Wiimote is not longer broadcasting. So press the “1″ and “2″ buttons again and hit “Next”

You should get the following message:

Followed by:

Followed by:

When you see this, you should be golden. Once the computer grabs a hold of the Wiimote Bluetooth signal, it holds on with a vice-like grip. Click on “Finish” in the wizard and close the Bluetooth window.

As a way of double checking your connection status, open up a data visualization application for the Wii controller. My recommendation is my own recently semi-completed WPF Wii Data Visualizer.

Another (more complete) option is Brian Peek’s Managed Library for Nintendo’s Wiimote. We’ll come back to Brian’s work again and again as it is his library that makes everything here possible.

Meanwhile, if this is working for you, check out my next step to WPF multi-point happiness in which we take a closer look at some of the data that comes out of the Wiimote.

A note of encouragement: If your Wii doesn’t work the first time, just try again. My first time, I had to try several times before I could get anything out of my hardware.

As a point of note, the “Wii” is worst name for a game console. Ever. Period.