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:
<code class="language-markup"><Canvas Name="canvas" Width="640" Height="480">
<Controls:KinectCursor x:Name="cursor" Width="100" Height="100" />
Step 4: Move the cursor using C#
The 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 X and Y coordinates of the hand in the 2D color or depth space. Alternatively, you can provide a ColorSpacePoint or 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.
<code class="language-csharp">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:
<code class="language-markup"><Controls:KinectCursor x:Name="cursor" 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 or buying me a beer.
PS: New Kinect book – 20% off
This blog post is part of a new book I am publishing a new ebook in a few days. The book is an in-depth developer guide about Kinect, using simple language and step-by-step examples. You’ll learn usability tips, performance tricks and best practices for implementing robust Kinect apps. Please meet Kinect Essentials, the essence of my 3 years of teaching, writing and developing for the Kinect platform. Oh, did I mention that you’ll get a 20% discount if you simply subscribe now? Hurry up!
Subscribe here for 20% off