Navigating through a Natural User Interface using your palm is quite common – after all, it’s the primary navigation mechanism XBOX uses. Many Windows Kinect applications implement hand tracking for similar purposes. Today, I would like to share a Kinect hand cursor control I developed and you can use for your own apps. This hand cursor control will save you tons of time and you’ll be able to integrate it right into your existing WPF code!
Here is the final result of this handful user control:
Using the control in your project is fairly easy. Read on!
OK, let’s type some quick code now.
Step 1: Download the Project from GitHub
Download the source code and build it using Visual Studio. Locate the assembly named KinectControls.dll.
Step 2: Import the Assembly to Your Project
Create a new WPF project and add a reference to the assembly you built previously.
Step 3: Import the Assembly to your XAML Code
Type the following line of code in your Window, view or user control definition:
You can now drag a
Canvas and place the hand cursor inside it:
<Canvas Name="canvas" Width="640" Height="480">
<Controls:KinectCursor x:Name="cursor" Width="100" Height="100" />
Step 4: Move the Cursor using C#
KinectCursor class contains a method named
Update. You need to call that method whenever you want to move the cursor. The
Update method gets the
Y coordinates of the hand in the 2D color or depth space. Alternatively, you can provide a
DepthSpacePoint that contains the coordinates. I placed this code inside
SkeletonFrameReady event handler. You can specify the “active” hand by comparing the Z values of the left and right hands.
var activeHand = handRight.Position.Z <= handLeft.Position.Z ? handRight : handLeft;
var position = _sensor.CoordinateMapper.MapSkeletonPointToColorPoint(
Also, notice the
Flip method? The
Flip method mirrors the cursor visual, so to properly match the active hand. That's it! You can check the complete source code on GitHub.
The hand image is a scalable vector shape I designed. You can change its color, dimensions or shadow effects easily:
Width="400" Height="400" Fill="Blue" />
You are free to use the user control as you wish for your personal and commercial projects, just by making a simple attribution in your project.