NativeScript ตอน 1 ลองติดตั้งและทดสอบ

เร็วๆนี้ได้รู้ข่าวเครื่องมือในการพัฒนา Mobile app ตัวใหม่ ชื่อ NativeScript ที่อ้างว่าเป็น multi-platform แต่สามารถสร้าง app แบบ native ได้ ซึ่งปกติแล้วไม่เคยเจอมาก่อน ที่ผ่านมาเคยใช้แต่ Apache Cordova และกำลังจะลอง ionic framework ซึ่งทั้งสองอันก็อาศัยหลักการคล้ายๆกันคือรันผ่าน WebViews และมักจะถูกมองว่าช้ากว่า native app ดังนั้น เมื่อมีเทคโนโลยีใหม่มาล่อตาล่อใจก็คงต้องลองดูกันหน่อย

ว่าแล้วก็ไปที่เว็บไซต์ของ NativeScript กันก่อน แล้วไปลองอ่านดูรายละเอียดเบื้องต้น

อืม Cross-platform, Native and Fast, เขียนด้วย xml + JavaScript และ Open source มันจะดีงามอะไรขนาดนั้น มีข้อจำกัดหลักๆก็คือ ใช้ได้กับ Android platform ที่ 4.0 เป็นต้นไป ก็ยังโอเคอยู่ ลองเลยดีกว่า

สมมติว่าเราจะติดตั้งบน Windows และเน้นไปที่ Android platform ก็แล้วกันนะครับ ลองดูคู่มือที่นี่ได้

ขั้นตอนการติดตั้ง (ต้องต่อเน็ตอยู่ด้วยนะครับ)
1. ถ้ายังไม่มี JDK ก็ติดตั้งซะ

2. ดาวน์โหลด Android SDK มาติดตั้ง สมมติว่าของผมอยู่ที่ D:\android\android-sdk-windows

3. ติดตั้ง node.js ตอนลงอย่าลืมให้มันกำหนด path ให้อัตโนมัติด้วย

4. กำหนด Environment variables ให้เครื่องเราได้แก่
JAVA_HOME เช่น C:\Program Files\Java\jdk1.8.0_20
ANDROID_HOME เช่น D:\android\android-sdk-windows

และ ถ้าต้องการ ก็เพิ่ม path ของ Android ไปด้วยเลย
%ANDROID_HOME%\tools; %ANDROID_HOME%\platform-tools

5. ติดตั้ง NativeScript CLI (Command line interface) โดยเรียก command prompt แล้วใช้คำสั่ง
npm install -g nativescript
ซึ่งตัว -g ก็คือให้ติดตั้งแบบ global ซึ่งใครๆก็เรียกใช้ได้
แล้วก็รอๆๆๆ ระหว่างทางอาจมีการถามว่าจะส่งข้อมูลให้ผู้พัฒนาไหม ก็เลือกตามใจชอบ ถ้าไม่คิดอะไรมากก็กด n ไป จนเรียบร้อย

6. ทดสอบการติดตั้ง โดยพิมพ์คำสั่งที่ command prompt ว่า
tns doctor
ถ้ามีคำเตือนต่างๆ ก็ลองทำตามที่เค้าบอกดู ตัวอย่างเช่นโปรแกรมอาจจะบอกว่า Android Build Tools มันเวอร์ชันต่ำไป ต้องการเวอร์ชันนี้ บลาๆๆๆ ก็ไปอัพเดทซะ

หลังจากนั้น  ปิดและเปิด command prompt ใหม่ แล้วลองเรียก tns doctor อีก ถ้าไม่มีคำเตือนอะไร น่าจะขึ้นข้อความว่า
"No issues were detected"

ทดสอบสร้างแอพ
ลองมาสร้างแอพโดยใช้ default template กันครับ
1. เปิด command prompt แล้วย้ายไปยังโฟลเดอร์ที่เราต้องการเก็บ source code เช่น D:\Codes\nativescript ด้วยคำสั่ง cd

2. สร้างโปรเจคชื่อ HelloWorld ด้วยคำสั่ง
tns create HelloWorld

ถ้าสำเร็จ ก็จะเกิดโฟลเดอร์ชื่อตามโปรเจคนี้

3. เพิ่ม Android platform เนื่องจากเราจะทดสอบบนระบบนี้ (ตอนนี้ต่อเน็ตด้วยนะครับ)
cd HelloWorld
tns platform add android

4. ตรวจสอบดูว่าเราเชื่อมต่อกับ emulator หรือ device แล้วหรือยังโดยใช้คำสั่ง
adb devices
หรือ
tns device
(เรียกใช้ครั้งเดียวตอนแรกสุดก็พอ)
ซึ่งน่าจะมีรายการอุปกรณ์แสดงให้เห็น เช่น


5. รันเพื่อดูผลบน emulator เช่น Genymotion หรือ device (ต้องต่อเน็ตเพื่อโหลด gradle มา build ในครั้งแรกด้วยครับ ใช้เวลานานพอควร)
tns run android

อย่าลืมเปิดเครื่องให้อยู่ใน debug mode และยืนยันถ้ามีคำถามเมื่อเชื่อมต่อกับเครื่องด้วย
(ถ้าต้องการรันบน Android emulator ที่มากับ SDK ก็ใช้คำสั่ง tns run android --emulator แทน)

6. ผลลัพธ์ที่ได้

 

ถ้าต้องการยกเลิกการรัน ให้กด CTRL+ C ที่ command prompt ครับ

จากการทดสอบใช้แอพดังกล่าว ยังไม่เห็นความเร็วที่แตกต่างกับ hybrid platform ตัวอื่นเท่าไหร่ เดี๋ยวลองสร้างแอพที่ซับซ้อนขึ้นคงจะเห็นผลบ้างครับ

การสร้าง Javadoc

Javadoc คืออะไร มีไว้ทำไม
-คือการสร้างเอกสารที่อธิบายรายละเอียดของ source code ของ Java ซึ่งรวมถึงคลาส (คลาส, ตัวแปร และ method ของคลาส) ฯลฯ ซึ่งเมื่อสร้างออกมาแล้วก็จะเป็นไฟล์ html ที่เปิดดูได้ด้วยเว็บบราวเซอร์ทั่วไป

-มีไว้เพื่อสร้างคำอธิบายต่างของโค้ดโดยอัตโนมัติ ทำให้เมื่อเรากลับมาดูโค้ดก็จะเข้าใจง่ายขึ้น

ตัวอย่าง
-ก็เหมือนหน้าตา api หรือ reference ต่างๆในเว็บของ Oracle เช่น Class Math (https://docs.oracle.com/javase/7/docs/api/java/lang/Math.html)

จะสร้างอย่างไร
ใช้เครื่องหมาย
/**
* your explanation here
*/
ใส่ไว้ก่อนโค้ดที่ต้องการอธิบาย

โครงสร้าง
อาจจะแบ่งออกได้เป็น 3 ส่วนคือ
1. ส่วนที่เป็นคำอธิบายโค้ด เช่น คลาส โดยทั่วไป มักจะมีรายละเอียดเช่น คลาสนี้มันมีวัตถุประสงค์เพื่ออะไร ชื่อนักพัฒนา เวอร์ชัน ณ ปัจจุบัน วันที่เริ่มทำ ฯลฯ มีแท็กที่นิยมคือ

@author ชื่อนักพัฒนา
@version เวอร์ชัน ณ ปัจจุบัน
@since วันที่เริ่มทำ
ตัวอย่าง

/**
 * Robot class
 * <p>
 * A class to simulate a robot 
 * <p>
 * @author Surapong
 * @version 1.0
 * @since 2016-03-16
 */

2. คำอธิบายตัวแปร
ตัวอย่าง

/**
* The height of the robot
*/
private double height = 1.90;

3. คำอธิบาย method

ซึ่งจะมีแท็กที่นิยมใช้คือ 

@param สำหรับอธิบายพารามิเตอร์

@return สำหรับอธิบายชนิดของข้อมูลที่ส่งกลับ

ตัวอย่าง

 /**
  * 
  * @return height of the robot
  */
 public double getHeight() {
  return height;
 }
 
 /**
  * 
  * @param height Set the robot's height
  */
 public void setHeight(double height) {
  this.height = height;
 }

การสร้าง Javadoc ใน Eclipse

1. เพิ่มคำอธิบายด้วยเครื่องหมาย /**    */ ใน source code

2. เลือกเมนู Project / Generate Javadoc

3. เลือกรายละเอียดต่างๆ แล้วกด Finish

หมายเหตุ ถ้าอยากสร้าง Javadoc ของทุกตัวแปรทั้งชนิด private, protected และ public ให้เลือกตัวเลือกที่เขียนว่า Create Javadoc for members with visibility... แล้วเลือก private ครับ

การเลือกตรวจจับ Skeleton เฉพาะบางคนด้วย Kinect

Kinect เวอร์ชันแรกสามารถตรวจจับ Skeleton ได้สูงสุดถึง 6 คนพร้อมกัน แต่ตรวจจับข้อต่อได้เพียง 2 คน อีก 4 คนจะได้แค่ตำแหน่งดังรูป

ที่มาของรูป Kinect for Windows | Human Interface Guidelines v1.8

แต่ละคนก็จะมี TrackingID เป็นตัวเลขสุ่มจำนวนเต็มที่มากกว่า 0 และค่านี้จะคงที่ตลอดถ้าคนนั้นๆยังถูกตรวจจับได้ (อยู่ในเฟรมและไม่มีอะไรบัง) แต่ถ้าเกิดการตรวจจับไม่ได้ เช่น ออกไปจากเฟรมแล้วกลับเข้ามาใหม่ Kinect ก็จะสุ่ม TrackingID ให้คนนั้นใหม่อีกที

อย่างไรก็ตาม ในบางครั้งเราต้องการตรวจจับแค่คนเดียว เช่น ในการใช้ซอฟต์แวร์หรือเล่นเกมคนเดียว ก็สามารถทำได้ครับ โดยใช้คำสั่ง
1. KinectSensor.SkeletonStream.AppChoosesSkeletons = true;
พร้อมๆกับ
2.  KinectSensor.SkeletonStream.ChooseSkeletons(trackingID);

คราวนี้ Kinect ก็จะ track คนที่มี trackingID นี้ตลอด ไม่สนคนอื่นแม้ว่าจะอยู่ในเฟรมด้วย

สำหรับตัวอย่างคราวนี้ เราจะตั้งเงื่อนไขว่า

• จะ track เฉพาะคนแรกที่กล้องเจอเท่านั้น (ตอนแรกควรจะมีคนเดียวอยู่ในเฟรม)
• ต่อมาแม้ว่าจะมีคนเข้ามาในเฟรมเพิ่มก็จะไม่ track
• คนที่ถูก track จะไม่ออกจากเฟรมเสมอ และต้องไม่ถูกบดบังจนไม่สามารถ track ได้

หมายเหตุ จากการทดลองพบว่า

• Kinect จะส่ง skeleton มาหกชุดเสมอ (เป็นอาร์เรย์) คนที่ถูก track จะอยู่ในตำแหน่งสุ่ม 0-5 ของอาร์เรย์ ตำแหน่งในอาร์เรย์ไม่เกี่ยวอะไรเลยกับ trackingID
• จะมี skeleton เดียวเท่านั้นที่เราสั่งให้ track ที่มีค่า TrackingState เป็น Tracked ส่วน skeleton อื่นจะไม่ใช่สถานะนี้

อ้างอิงเนื้อหาจาก https://msdn.microsoft.com/en-us/library/jj131025.aspx

โค้ด UI

<Window x:Class="SingleDectection.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" SizeToContent="WidthAndHeight" Loaded="Window_Loaded" Closing="Window_Closing">
    <StackPanel>
        <Canvas Height="480" Width="640">
            <Image Name="kinectVideo"  Height="480" Width="640"></Image>
            <Canvas Name="skeletonCanvas" Height="480" Width="640"></Canvas>
        </Canvas>
        <TextBlock Name="textID" Text="Tracking ID" HorizontalAlignment="Center" FontSize="22" />
    </StackPanel>
</Window>

โค้ด C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Kinect;

namespace SingleDectection
{    
    public partial class MainWindow : Window
    {
        KinectSensor myKinect;

        public MainWindow()
        {
            InitializeComponent();
        }

        //======== Window Loaded and Closing ========
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            startKinect();
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            stopKinect();
        }

        //=============== Start and Stop Kinect =========================
        void startKinect()
        {
            // Check to see if a Kinect is available
            if (KinectSensor.KinectSensors.Count == 0)
            {
                MessageBox.Show("No Kinects detected", "Camera Viewer");
                Application.Current.Shutdown();
                return;
            }

            // Start the Kinect and enable both video and skeleton streams
            try
            {
                // Get the first Kinect on the computer
                myKinect = KinectSensor.KinectSensors[0];
                myKinect.ColorStream.Enable();
                myKinect.SkeletonStream.Enable();                
                myKinect.Start();
            }
            catch
            {
                MessageBox.Show("Kinect initialise failed", "Camera Viewer");
                Application.Current.Shutdown();
                return;
            }

            // connect a handler to the event that fires when new frames are available
            myKinect.ColorFrameReady += new EventHandler<ColorImageFrameReadyEventArgs>(myKinect_ColorFrameReady);
            myKinect.SkeletonFrameReady += new EventHandler<SkeletonFrameReadyEventArgs>(myKinect_SkeletonFrameReady);
        }

        void stopKinect()
        {
            if (myKinect != null)
                myKinect.Stop();
        }

        //================================== video =============================
        byte[] colorData = null;
        WriteableBitmap colorImageBitmap = null;

        private void myKinect_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
        {
            using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
            {
                if (colorFrame == null) return;

                if (colorData == null)
                    colorData = new byte[colorFrame.PixelDataLength];

                colorFrame.CopyPixelDataTo(colorData);

                if (colorImageBitmap == null)
                {
                    colorImageBitmap = new WriteableBitmap(
                        colorFrame.Width,
                        colorFrame.Height,
                        96,  // DpiX
                        96,  // DpiY
                        PixelFormats.Bgr32,
                        null);
                }

                colorImageBitmap.WritePixels(
                    new Int32Rect(0, 0, colorFrame.Width, colorFrame.Height),
                    colorData, // video data
                    colorFrame.Width * colorFrame.BytesPerPixel, // stride,
                    0   // offset into the array - start at 0
                    );

                kinectVideo.Source = colorImageBitmap;
            }
        }

        //================================== skeleton ===========================
        //drawing color
        Brush brushRed = new SolidColorBrush(Colors.Red);
        Brush brushGreen = new SolidColorBrush(Colors.Green);

        //method to draw a line between joints
        void drawLine(Joint j1, Joint j2)
        {
            //if any joint is not tracked
            if (j1.TrackingState == JointTrackingState.NotTracked || j2.TrackingState == JointTrackingState.NotTracked)
            {
                //do not draw
                return;
            }

            //line properties
            Line bone = new Line();
            //line thickness            
            bone.StrokeThickness = 5;

            //if any joint is inferred
            if (j1.TrackingState == JointTrackingState.Inferred || j2.TrackingState == JointTrackingState.Inferred)
            {
                //set color to red
                bone.Stroke = brushRed;
            }
            else if (j1.TrackingState == JointTrackingState.Tracked && j2.TrackingState == JointTrackingState.Tracked)
            {
                //both joints are tracked, set color to green
                bone.Stroke = brushGreen;
            }

            //map joint position to display location
            //starting point
            ColorImagePoint j1p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j1.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X1 = j1p.X;
            bone.Y1 = j1p.Y;
            //ending point
            ColorImagePoint j2p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j2.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X2 = j2p.X;
            bone.Y2 = j2p.Y;

            //add line to canvas
            skeletonCanvas.Children.Add(bone);
        }

        //Track a skeleton by ID
        int personID = 0;

        private void myKinect_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
        {
            // Remove the old skeleton
            skeletonCanvas.Children.Clear();

            Skeleton[] skeletons = null;

            using (SkeletonFrame frame = e.OpenSkeletonFrame())
            {
                if (frame != null)
                {
                    skeletons = new Skeleton[frame.SkeletonArrayLength];
                    frame.CopySkeletonDataTo(skeletons);
                }
            }

            if (skeletons == null)
                return;

            //Objective: to track only the first person
            //Assumption: First person must be alone in the screen and be tracked at the beginning to get his/her ID
            //Assumption: That first person must not leave the screen or be obscured, otherwise Kinect will dispose his/her ID

            //textID.Text = "Person ID = " + personID;

            //if not get person ID yet
            if (personID == 0)
            {
                //textID.Text = "Skeleton size = " + skeletons.Length;
                //find ID of the first tracked skeleton
                foreach (Skeleton skeleton in skeletons)
                {
                    if (skeleton.TrackingState == SkeletonTrackingState.Tracked)
                    {
                        personID = skeleton.TrackingId;                                                
                        //allow track on specific skeleton (not all)
                        myKinect.SkeletonStream.AppChoosesSkeletons = true;
                        //track only this skeleton
                        myKinect.SkeletonStream.ChooseSkeletons(personID);
                        //neglect other skeletons
                        break;
                    }
                }
            }
            else
            {
                //draw the tracked skeleton only
                //the skeletonFrameReady event will always return six skeletons, though we track only one
                //the tracked skeleton will be randomly in the skeleton array, no matter what its tracking ID is                            
                //while tracked, the tracking ID is constant                

                //Draw only the tracked skeleton
                foreach (Skeleton skeleton in skeletons)
                {
                    if (skeleton.TrackingState == SkeletonTrackingState.Tracked)
                    {
                        //Debug info
                        textID.Text = "Tracking ID, Current=" + skeleton.TrackingId + ": Before=" + personID;   //must be equal to personID

                        //draw head to neck
                        drawLine(skeleton.Joints[JointType.Head], skeleton.Joints[JointType.ShoulderCenter]);
                        //draw neck to spine
                        drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.Spine]);
                        //draw spine to hip center
                        drawLine(skeleton.Joints[JointType.Spine], skeleton.Joints[JointType.HipCenter]);

                        //draw left arm
                        drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.ShoulderLeft]);
                        drawLine(skeleton.Joints[JointType.ShoulderLeft], skeleton.Joints[JointType.ElbowLeft]);
                        drawLine(skeleton.Joints[JointType.ElbowLeft], skeleton.Joints[JointType.WristLeft]);
                        drawLine(skeleton.Joints[JointType.WristLeft], skeleton.Joints[JointType.HandLeft]);

                        //draw right arm
                        drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.ShoulderRight]);
                        drawLine(skeleton.Joints[JointType.ShoulderRight], skeleton.Joints[JointType.ElbowRight]);
                        drawLine(skeleton.Joints[JointType.ElbowRight], skeleton.Joints[JointType.WristRight]);
                        drawLine(skeleton.Joints[JointType.WristRight], skeleton.Joints[JointType.HandRight]);

                        //draw left leg
                        drawLine(skeleton.Joints[JointType.HipCenter], skeleton.Joints[JointType.HipLeft]);
                        drawLine(skeleton.Joints[JointType.HipLeft], skeleton.Joints[JointType.KneeLeft]);
                        drawLine(skeleton.Joints[JointType.KneeLeft], skeleton.Joints[JointType.AnkleLeft]);
                        drawLine(skeleton.Joints[JointType.AnkleLeft], skeleton.Joints[JointType.FootLeft]);

                        //draw right leg
                        drawLine(skeleton.Joints[JointType.HipCenter], skeleton.Joints[JointType.HipRight]);
                        drawLine(skeleton.Joints[JointType.HipRight], skeleton.Joints[JointType.KneeRight]);
                        drawLine(skeleton.Joints[JointType.KneeRight], skeleton.Joints[JointType.AnkleRight]);
                        drawLine(skeleton.Joints[JointType.AnkleRight], skeleton.Joints[JointType.FootRight]);

                        //neglect other not tracked skeletons
                        break;
                    }
                }
                
            }//end if-else get personID
        }//end skeleton frame ready method

    }//end class
}

การวาด Skeleton จาก Kinect ตอนที่ 4: วาดซ้อนทับกับภาพวิดีโอ

ก่อนหน้านี้เราได้ลองวาด Skeleton แบบเต็มตัว และตรวจสอบว่าข้อต่อถูกตรวจจับหรือไม่ ตอนนี้เรามาลองวาด Skeleton ซ้อนทับกับภาพวิดีโอกันดูครับ

หลักการก็ตรงไปตรงมา คือส่วนของ UI ก็จะวาง canvas เป็นพื้นหลัง ทับด้วย Image เพื่อแสดงผลวิดีโอ และ ถูกทับอีกทีด้วย canvas เพื่อวาด skeleton

เมื่อซ้อนกันตามลำดับนี้ ภาพ Skeleton ก็จะอยู่บน ภาพวิดีโอ โดยอัตโนมัติครับ

รูปผลลัพธ์ก็จะคล้ายๆกับแบบนี้ครับ

ที่มา: Kinect for Windows | Human Interface Guidelines v1.8

โค้ด UI

<Window x:Class="SkeletonVideo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Skeleton and Video" SizeToContent="WidthAndHeight" Loaded="Window_Loaded" Closing="Window_Closing">
    <Canvas Height="480" Width="640">
        <Image Name="kinectVideo" Height="480" Width="640"/>
        <Canvas Name="skeletonCanvas" Height="480" Width="640"/>
    </Canvas>
</Window>

ส่วนของโค้ด ก็จะอ่านทั้งภาพวิดีโอและ skeleton จากนั้นก็วาดลงไปบน UI ที่เกี่ยวข้อง

โค้ด C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Kinect;

namespace SkeletonVideo
{
    public partial class MainWindow : Window
    {
        KinectSensor myKinect;

        public MainWindow()
        {
            InitializeComponent();
        }

        //======== Window Loaded and Closing ========
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            startKinect();
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            stopKinect();
        }
        
        //=============== Start and Stop Kinect =========================
        void startKinect()
        {
            // Check to see if a Kinect is available
            if (KinectSensor.KinectSensors.Count == 0)
            {
                MessageBox.Show("No Kinects detected", "Camera Viewer");
                Application.Current.Shutdown();
                return;
            }

            // Start the Kinect and enable both video and skeleton streams
            try
            {
                // Get the first Kinect on the computer
                myKinect = KinectSensor.KinectSensors[0];
                myKinect.ColorStream.Enable();
                myKinect.SkeletonStream.Enable();
                myKinect.Start();
            }
            catch
            {
                MessageBox.Show("Kinect initialise failed", "Camera Viewer");
                Application.Current.Shutdown();
                return;
            }

            // connect a handler to the event that fires when new frames are available
            myKinect.ColorFrameReady += new EventHandler<ColorImageFrameReadyEventArgs>(myKinect_ColorFrameReady);
            myKinect.SkeletonFrameReady += new EventHandler<SkeletonFrameReadyEventArgs>(myKinect_SkeletonFrameReady);
        }

        void stopKinect()
        {
            if (myKinect != null)
                myKinect.Stop();
        }

        //================================== video =============================
        byte[] colorData = null;
        WriteableBitmap colorImageBitmap = null;

        private void myKinect_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
        {
            using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
            {
                if (colorFrame == null) return;

                if (colorData == null)
                    colorData = new byte[colorFrame.PixelDataLength];

                colorFrame.CopyPixelDataTo(colorData);

                if (colorImageBitmap == null)
                {
                    colorImageBitmap = new WriteableBitmap(
                        colorFrame.Width,
                        colorFrame.Height,
                        96,  // DpiX
                        96,  // DpiY
                        PixelFormats.Bgr32,
                        null);
                }

                colorImageBitmap.WritePixels(
                    new Int32Rect(0, 0, colorFrame.Width, colorFrame.Height),
                    colorData, // video data
                    colorFrame.Width * colorFrame.BytesPerPixel, // stride,
                    0   // offset into the array - start at 0
                    );

                kinectVideo.Source = colorImageBitmap;
            }
        }

        //================================== skeleton ===========================
        //drawing color
        Brush brushRed = new SolidColorBrush(Colors.Red);
        Brush brushGreen = new SolidColorBrush(Colors.Green);

        //method to draw a line between joints
        void drawLine(Joint j1, Joint j2)
        {
            //if any joint is not tracked
            if (j1.TrackingState == JointTrackingState.NotTracked || j2.TrackingState == JointTrackingState.NotTracked)
            {
                //do not draw
                return;
            }

            //line properties
            Line bone = new Line();
            //line thickness            
            bone.StrokeThickness = 5;

            //if any joint is inferred
            if (j1.TrackingState == JointTrackingState.Inferred || j2.TrackingState == JointTrackingState.Inferred)
            {
                //set color to red
                bone.Stroke = brushRed;
            }
            else if (j1.TrackingState == JointTrackingState.Tracked && j2.TrackingState == JointTrackingState.Tracked)
            {
                //both joints are tracked, set color to green
                bone.Stroke = brushGreen;
            }

            //map joint position to display location
            //starting point
            ColorImagePoint j1p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j1.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X1 = j1p.X;
            bone.Y1 = j1p.Y;
            //ending point
            ColorImagePoint j2p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j2.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X2 = j2p.X;
            bone.Y2 = j2p.Y;

            //add line to canvas
            skeletonCanvas.Children.Add(bone);
        }

        private void myKinect_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
        {
            // Remove the old skeleton
            skeletonCanvas.Children.Clear();

            Skeleton[] skeletons = null;

            using (SkeletonFrame frame = e.OpenSkeletonFrame())
            {
                if (frame != null)
                {
                    skeletons = new Skeleton[frame.SkeletonArrayLength];
                    frame.CopySkeletonDataTo(skeletons);
                }
            }

            if (skeletons == null)
                return;

            foreach (Skeleton skeleton in skeletons)
            {
                if (skeleton.TrackingState == SkeletonTrackingState.Tracked)
                {
                    //draw head to neck
                    drawLine(skeleton.Joints[JointType.Head], skeleton.Joints[JointType.ShoulderCenter]);
                    //draw neck to spine
                    drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.Spine]);
                    //draw spine to hip center
                    drawLine(skeleton.Joints[JointType.Spine], skeleton.Joints[JointType.HipCenter]);

                    //draw left arm
                    drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.ShoulderLeft]);
                    drawLine(skeleton.Joints[JointType.ShoulderLeft], skeleton.Joints[JointType.ElbowLeft]);
                    drawLine(skeleton.Joints[JointType.ElbowLeft], skeleton.Joints[JointType.WristLeft]);
                    drawLine(skeleton.Joints[JointType.WristLeft], skeleton.Joints[JointType.HandLeft]);

                    //draw right arm
                    drawLine(skeleton.Joints[JointType.ShoulderCenter], skeleton.Joints[JointType.ShoulderRight]);
                    drawLine(skeleton.Joints[JointType.ShoulderRight], skeleton.Joints[JointType.ElbowRight]);
                    drawLine(skeleton.Joints[JointType.ElbowRight], skeleton.Joints[JointType.WristRight]);
                    drawLine(skeleton.Joints[JointType.WristRight], skeleton.Joints[JointType.HandRight]);

                    //draw left leg
                    drawLine(skeleton.Joints[JointType.HipCenter], skeleton.Joints[JointType.HipLeft]);
                    drawLine(skeleton.Joints[JointType.HipLeft], skeleton.Joints[JointType.KneeLeft]);
                    drawLine(skeleton.Joints[JointType.KneeLeft], skeleton.Joints[JointType.AnkleLeft]);
                    drawLine(skeleton.Joints[JointType.AnkleLeft], skeleton.Joints[JointType.FootLeft]);

                    //draw right leg
                    drawLine(skeleton.Joints[JointType.HipCenter], skeleton.Joints[JointType.HipRight]);
                    drawLine(skeleton.Joints[JointType.HipRight], skeleton.Joints[JointType.KneeRight]);
                    drawLine(skeleton.Joints[JointType.KneeRight], skeleton.Joints[JointType.AnkleRight]);
                    drawLine(skeleton.Joints[JointType.AnkleRight], skeleton.Joints[JointType.FootRight]);
                }
            }//end foreach
        }

    }//end class
}

การวาด Skeleton จาก Kinect ตอนที่ 3: วาดทั้งตัวแบบระบุสถานะ

ตอนที่แล้วเราสามารถวาด Skeleton ได้ทั้งตัวแล้ว แต่สังเกตว่าจะมีบางตำแหน่งที่เส้นดูแปลกๆ ทั้งนี้อาจจะเนื่องมาจาก Kinect ไม่สามารถตรวจจับข้อต่อได้

ดังนั้น เพื่อให้การแสดงผลสะท้อนถึงสถานะการตรวจจับข้อต่อ เราจะลองใช้สีในการจำแนก เช่น สีเขียวหมายถึงจับข้อต่อได้ (Tracked) และสีแดงคือตรวจจับไม่ได้แต่พอคาดการณ์ได้ (Inferrred) และถ้าตรวจจับไม่ได้เลย (NotTracked) ก็จะไม่วาดเส้นครับ

ผลลัพธ์ก็ประมาณนี้ สังเกตว่าช่วงขวาเป็นสีแดงเกือบทั้งหมด เพราะกล้องอยู่สูงและผมยืนใกล้กล้องมากครับ

โค้ด C# เปลี่ยนเฉพาะส่วนของฟังก์ชันที่ใช้ในการวาดเส้นครับ

        //drawing color
        Brush brushRed = new SolidColorBrush(Colors.Red);
        Brush brushGreen = new SolidColorBrush(Colors.Green);

        //method to draw a line between joints
        void drawLine(Joint j1, Joint j2)
        {           
            //if any joint is not tracked
            if (j1.TrackingState == JointTrackingState.NotTracked || j2.TrackingState == JointTrackingState.NotTracked)
            {
                //do not draw
                return;
            }

            //line properties
            Line bone = new Line();
            //line thickness            
            bone.StrokeThickness = 5;

            //if any joint is inferred
            if (j1.TrackingState == JointTrackingState.Inferred || j2.TrackingState == JointTrackingState.Inferred)
            {
                //set color to red
                bone.Stroke = brushRed;
            }
            else if (j1.TrackingState == JointTrackingState.Tracked && j2.TrackingState == JointTrackingState.Tracked)
            {
                //both joints are tracked, set color to green
                bone.Stroke = brushGreen;
            }
           
            //map joint position to display location
            //starting point
            ColorImagePoint j1p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j1.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X1 = j1p.X;
            bone.Y1 = j1p.Y;
            //ending point
            ColorImagePoint j2p = myKinect.CoordinateMapper.MapSkeletonPointToColorPoint(j2.Position, ColorImageFormat.RgbResolution640x480Fps30);
            bone.X2 = j2p.X;
            bone.Y2 = j2p.Y;

            //add line to canvas
            skeletonCanvas.Children.Add(bone);
        }