Joint tracking image on Skeletal Tracking not following correctly - kinect

Question

When I run the Channel9 MSDN Kinect quickstart series code for skeletal tracking, there are suppose to be images/ellipses that overlap the location of the joints selected. Instead I get images/ellipses that are slightly off and not exactly over the location of the joints. No matter where I move the joints, the images stay off to the side of the exact location of the joint. I have seen the video here (http://channel9.msdn.com/Series/KinectQuickstart/Skeletal-Tracking-Fundamentals) and theirs works. Is there something I did wrong that I am not noticing that I changed or forgot to update?
Update:
This is some line of code that might be causing it:
CoordinateMapper cm = new CoordinateMapper(kinectSensorChooser1.Kinect);
//Map a joint location to a point on the depth map
//head
DepthImagePoint headDepthPoint =
cm.MapSkeletonPointToDepthPoint(first.Joints[JointType.Head].Position, depth.Format);
This is a change over what is in the video as they updated with a new method to map skeleton to depth and depth to color point. It eliminates an error that occurred when the stream was terminated.
The method has parameters that ask for position and format. Could it be that the depth.Format is not the same format as the RGB640x480Resolution?
//Map a depth point to a point on the color image
//head
ColorImagePoint headColorPoint =
cm.MapDepthPointToColorPoint(depth.Format, headDepthPoint,
ColorImageFormat.RgbResolution640x480Fps30);
On the main window screen this is what I have for creating the images i am using:
<Canvas Name="MainCanvas">
<my:KinectColorViewer Canvas.Left="50" Canvas.Top="50" Height="480" Name="kinectColorViewer1" Width="640"
Kinect="{Binding ElementName=kinectSensorChooser1, Path=Kinect}" />
<Ellipse Canvas.Left="0" Canvas.Top="0" Height="50" Name="leftEllipse" Width="50" Fill="#FF4D298D" Opacity="1" Stroke="White"></Ellipse>
<Ellipse Canvas.Left="100" Canvas.Top="0" Height="50" Name="rightEllipse" Stroke="White" Width="50" Fill="#FF2CACE3" Opacity="1" />
<my:KinectSensorChooser Canvas.Left="250" Canvas.Top="380" Name="kinectSensorChooser1" Width="328" />
<Ellipse Canvas.Left="225" Canvas.Top="84" Height="50" Name="headImage" Stroke="White" Width="50" Fill="#FF2CACE3" Opacity="1" />
<my:KinectSkeletonViewer Canvas.Left="646" Canvas.Top="240" Name="kinectSkeletonViewer1" Width="640" Height="480" Kinect="{Binding ElementName=kinectSensorChooser1, Path=Kinect}" />
</Canvas>
And I have commented these lines of code about scaling position
//ScalePosition(headImage, first.Joints[JointType.Head]);
// ScalePosition(leftEllipse, first.Joints[JointType.HandLeft]);
//ScalePosition(rightEllipse, first.Joints[JointType.HandRight]);
and this function has been commented.
private void ScalePosition(FrameworkElement element, Joint joint)
{
//convert the value to X/Y
//Joint scaledJoint = joint.ScaleTo(1280, 720);
//convert & scale (.3 = means 1/3 of joint distance)
// Joint scaledJoint = joint.ScaleTo(1280, 720, .3f, .3f);
// Canvas.SetLeft(element, scaledJoint.Position.X);
// Canvas.SetTop(element, scaledJoint.Position.Y);
}
and this is commented out so no transform parameters are used:
//sensor.SkeletonStream.Enable(parameters);
and this is what stream and skeleton enable lines of code look like:
sensor.SkeletonStream.Enable();
sensor.AllFramesReady += new EventHandler<AllFramesReadyEventArgs>(sensor_AllFramesReady);
sensor.DepthStream.Enable(DepthImageFormat.Resolution640x480Fps30);
sensor.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);

Answer 1

Try the following steps.
Comment the lines that scaleTo() for testing porposes.
You initialized kinect with 640x480? Try to put this sizes to your my:KinectSkeletonViewer element on the XAML. I see that actualy it is Width="320" Height="240", change it.
Also check to not use strech on your Image element or in the Canvas that hosts it, for security, delete the Height="Auto" and Width="Auto" from your MainCanvas.
Start your skeleton stream with no TransformSmoothParameter or, if you want to use this, try the following parameters
this.KinectSensorManager.TransformSmoothParameters = new TransformSmoothParameters
{
Smoothing = 0.5f,
Correction = 0.5f,
Prediction = 0.5f,
JitterRadius = 0.05f,
MaxDeviationRadius = 0.04f
};
I am do the same you are trying to do using kinect for xbox and it worked fine to me.
When the channel9 video was recorded the sdk did not have the CoordinateMapper class, so, you dont need to convert to depth then to color, the coordinate mapper has a method to directly map the skeleton point to the color point, the method is MapSkeletonPointToColorPoint(), use the method and dont worry about the Depth Data.

Answer 2

It looks the problem I had was in the xaml code. I replaced the xaml code I had and replaced it with the original xaml code for the images and objects on my canvas.
<my:KinectColorViewer Canvas.Left="0" Canvas.Top="0" Width="640" Height="480" Name="kinectColorViewer1"
Kinect="{Binding ElementName=kinectSensorChooser1, Path=Kinect}" />
<Ellipse Canvas.Left="0" Canvas.Top="0" Height="50" Name="leftEllipse" Width="50" Fill="#FF4D298D" Opacity="1" Stroke="White" />
<Ellipse Canvas.Left="100" Canvas.Top="0" Fill="#FF2CACE3" Height="50" Name="rightEllipse" Width="50" Opacity="1" Stroke="White" />
<my:KinectSensorChooser Canvas.Left="250" Canvas.Top="380" Name="kinectSensorChooser1" Width="328" />
<Image Canvas.Left="66" Canvas.Top="90" Height="87" Name="headImage" Stretch="Fill" Width="84" Source="/SkeletalTracking;component/c4f-color.png" />
It might been have been a property or event setting that I had set incorrectly or not at all that introduced a shift in the image objects.