Align Kinect bone data with color and depth Images

Many people leave a message asking how to display the two types of image data on the same screen, that is, how to overlay the bone data to a color image or a deep image, adding a color image to a deep image is not discussed because it is meaningless.

This problem is actually very simple, because in many examples of the Kinect developer toolkit, we can see the superposition of the two types, and the source code also exists, which is why I don't want to take this reason. How to display these three images on the screen I will talk about 3: Basic knowledge, 4: depth of field data processing, and 6: Bone tracing. The point is,

• It is best to use writeablebitmap objects when displaying color and depth images;
• To overlay the skeleton data image and deep image, or color image, first determine the resolution and size of the deep image. For convenience, here, both the deep image data and the color image data are in the 640x480fps30 format, and the grid size is also set to 640*480.
• To overlay the bone data and deep image data, you need to convert the nodes to the space where the deep image is located. You can directly call mapskeletonpointtodepthpoint. If you want to overlay the bone data to a color image, you only need to call the mapskeletonpointtocolorpoint method.

Many codes are directly copied from previous articles.

I. Front-end code

The interface is simple. There are two image objects and a nested grid object under the Grid Object. The first two image objects are used to display color image data and deep image data respectively. The following grid objects are used to draw bones. Note that the attribute of the grid object must be set to transparent, in this way, you can draw the skeleton on the grid without covering the colored or deep images below.

The Code is as follows:

<Window x:Class="KinectSkeletonAlignwithColorandDepthImage.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Width="660" Height="520">    <Grid  Width="640" Height="480">        <Image x:Name="ColorImage" Visibility="Hidden"  />        <Image x:Name="DepthImage" />        <Grid x:Name="LayoutRoot" Background="Transparent" >        </Grid>    </Grid></Window>

 

Ii. Background code

The background code is the same as the code in the previous three articles. You only need to move the code here. I will not post it here, which is a waste of time. You can download the Code directly later.

The following is the effect of adding the skeleton data to the deep image.

If you want to see the effect of overlays on a color image, you only need to change the visibility attribute of depthimage to hidden, and then remove this attribute of colorimage, then, you can call mapskeletonpointtocolorpoint when converting the skeleton data to a color image.

Iii. Conclusion

To overlay the two data formats, you only need to convert the skeleton data to the corresponding space. This conversion method has been directly provided to us in the Kinect SDK. I believe you can do it yourself. This example is very simple. If you want to further process it, you can add the Form Scaling and then the image data corresponding to the scaling effect. I won't implement it here. The code is all previous Code. If you don't have to worry about it, click here to download it. I will write some things about Finger Recognition later.