Kinect 2.0 Programming (1)

Kinect01

FELab

2015/01/01 (2015/12/12 Rev.)

1

Kinect 2.0 程式從零開始

Color Basics-WPF 範例程式

Kinect01 目標、開發、執行

Kinect01 畫面規劃

Kinect01 實作

Kinect01 解說

2

3

4

5

6

7

8

9

Color Basics-WPF 範例程式

執行「Kinect for Windows SDK v2.0 \ SDK Browser

(Kinect for Windows) v2.0」→「Color Basics-WPF」

→「Run」

執行 Install則可將整個專案安裝於指定目錄，做為

自行開發程式的參考，或以此程式當樣本，修改為自

己想要的功能。

10

11

12

Kinect01 程式顯示 Kinect One 持續傳入的彩色影像

(1920x1080 @30fps)，提供影像分色處理選項與影像

存檔功能，並顯示已存檔數目。

開發工具為Windows 10 加上 Visual Studio 2015 環境

之 C# + WPF + Kinect for Windows SDK 2.0

程式執行時需將 Kinect One 接上電腦之 USB 3.0 插

槽

Kinect01 目標、開發、執行

13

建議將螢幕解析度調為 1920x1080或以上

Kinect01專案下載 (Kinect01.zip)

https://onedrive.live.com/redir?resid=AB6DA2015C8C4A60!2307&

authkey=!ABC9MN8j_jtzCfU&ithint=file%2czip

14

視窗大小為 1440x810

一個 Image控制項顯示 1280x720 @30fps 即時影像

四個 Button控制項分別做為影像分色處理的選項

(Red、Green、Blue、Color)

一個 Button控制項自動將畫面影像以 jpg 格式，存

檔於 Kinect01 專案之與 Kinect01.exe 相同檔案夾，檔

名預設為 color000001.jpg、、、color999999.jpg。

Kinect01 畫面規劃

15

一個 Label控制項顯示已儲存影像檔案數目

利用WriteableBitmap類別配置記憶體區塊，將記憶

體區塊的影像即時顯示在 Image控制項

每個 Kinect One 傳入的彩色影像 (Frame)，存入指定

的記憶體區塊，經影像處理後，傳至 Image 控制項

呈現出來。

一個 KinectSensor類別的物件代表一台 Kinect One

(一台電腦只能接一台設備)

16

視窗大小為 1440x810 (Kinect01)

Image控制項顯示 1280x720圖像 (ColorImage)

Button控制項操控紅色影像 (Red)

Button控制項操控綠色影像 (Green)

Button控制項操控藍色影像 (Blue)

Button控制項操控回復彩色影像 (Color)

Button控制項操控影像存檔 (Save)

Label控制項顯示已存檔影像數目 (Count)

17

建立 Kinect01 方案

起動 Visual Studio Professional 2015

點選「檔案(F)」→「新增(N)」→「專案(P)…」→「Visual

C#」→「WPF 應用程式」

「名稱(N)」填入 Kinect01 (原來是WpfApplication1)

「位置(L)」利用瀏覽(B)… 選定目錄

點選「確定」

Kinect01 實作

18

填入專案名稱利用瀏覽選定目錄

選擇 Kinect01方案儲存位置為 D:\Win10\檔案夾

19

現在畫面如下，如果不是，請按「視窗(W) 」→「重設視窗配置(R) 」

20

專案名稱為 Kinect01

自動產生MainWindow.xaml和MainWindow.xaml.cs檔案

21

Title、Height、Width三個屬性都有預設的屬性值

MainWindow.xaml檔案控制

MainWindow 視窗的外觀

MainWindow 視窗配置設計區

22

專案名稱為 Kinect01，所以自動產生 namespace Kinect01

MainWindow.xaml.cs 檔案控制MainWindow

視窗的執行

23

加入Microsoft.Kinect組件使 SDK 可以被專案使用

在『參考』處按右鍵，點選『加入參考(R)』

點選「擴充功能」→挑選「Microsoft.Kinect 2.0.0.0」

→ CheckBox 處點一下使出現打勾

點選「確定」

24

在『參考』處按右鍵，點選『加入參考(R)…』

25

『擴充功能』之Microsoft.Kinect

2.0.0.0 打勾

26

專案多出這一項，表示Kinect SDK 2.0 可以使用了

27

在視窗設計區的MainWindow處點一下

叫出Window 的屬性視窗 (二種方式皆可)

28

在MainWindow.xaml 檔案內容的Window 處點一下

29

透過Window 的屬性視窗修改Window 的屬性值

顯示屬性(property)

顯示事件(event)

30

將Window 屬性修改為

名稱：Kinect01

FontSize：20

Height：810

ResizeMode：CanMinimize

Title：Kinect ColorFrame

Width：1440

程式執行時，視窗只可縮至最小，無法放大

31

將 Kinect01 視窗加入一個 Image控制項

滑鼠在工具箱的 Image點一下，然後在視窗設計區點一下

名稱：ColorImage

將 ColorImage屬性修改為

Height：720

Margin：70 0 0 0

Width：1280

32

將 Kinect01視窗加入四個 Button控制項

名稱：Red

將 Red屬性修改為

Background：單色筆刷 (R：255 G：0 B：0 A：100%)

Content：RED

FontSize：32

Height：45

Margin：70 725 0 0

Width：150

33

名稱：Green

將 Green屬性修改為

Background：單色筆刷 (R：0 G：255 B：0 A：100%)

Content：GREEN

FontSize：32

Height：45

Margin：250 725 0 0

Width：150

34

名稱：Blue

將 Blue屬性修改為

Background：單色筆刷 (R：0 G：0 B：255 A：100%)

Content：BLUE

FontSize：32

Height：45

Margin：430 725 0 0

Width：150

35

名稱：Color

將 Color屬性修改為

Background：漸層筆刷 (放射漸層 R：160 G：160 B：80

A：100%)

Content：COLOR

FontSize：32

Height：45

Margin：610 725 0 0

Width：150

36

將 Kinect01視窗加入一個 Button控制項

名稱：Save

將 Save屬性修改為

Background：單色筆刷 (R：180 G：100 B：220 A：100%)

Content：SAVE

FontSize：32

Height：45

Margin：860 725 0 0

Width：150

37

將 Kinect01視窗加入一個 Label控制項

名稱：Count

將 Count屬性修改為

Background：單色筆刷 (R：210 G：140 B：70 A：100%)

Content：存檔影像：000000

FontSize：32

Height：45

Margin：1040 725 0 0

Width：310

38

透過事件視窗建立Window 的事件處理方法(函式)

點擊 Kinect01 事件的Icon，切換至事件視窗

事件

39

滑鼠雙擊 Kinect01 事件視窗的 Loaded右邊空白欄位

此動作表示專案要處理Window 的 Loaded事件，Visual Studio 系統自動為我們指定 Loaded 事件的處理方法為 Kinect01_Loaded( ) 函式

雙擊之後系統自動產生

40

滑鼠雙擊 Kinect01 事件視窗的 Unloaded右邊空白欄位

此動作表示專案要處理Window 的 Unloaded事件，Visual Studio 系統自動為我們指定 Loaded 事件的處理方法為 Kinect01_Unloaded( ) 函式

雙擊之後系統自動產生

41

滑鼠雙擊 Red事件視窗的 Click右邊空白欄位

滑鼠雙擊 Green事件視窗的 Click右邊空白欄位

滑鼠雙擊 Blue事件視窗的 Click右邊空白欄位

滑鼠雙擊 Color事件視窗的 Click右邊空白欄位

滑鼠雙擊 Save事件視窗的 Click右邊空白欄位

Red的 Click事件處理函式為 Red_Click( )Green的 Click事件處理函式為 Green_Click( )

Blue的 Click事件處理函式為 Blue_Click( )Color的 Click事件處理函式為 Color_Click( )Save的 Click事件處理函式為 Save_Click( )

42

現在MainWindow.xaml 檔案如下

43

44

45

現在MainWindow.xaml.cs 檔案如下

46

視窗載入 (Loaded事件)

視窗關閉 (Unloaded事件)

Visual Studio 2015 自動幫我們產生。視窗Loaded和 Unloaded時要做的事情，就寫在此二方法(函式)內

47

Red被按了 (Click事件)

Green被按了 (Click事件)

Blue被按了 (Click事件)

Color被按了 (Click事件)

48

Save被按了 (Click事件)

49

建置 Kinect01 專案

「建置(B)」→「建置方案(B)」

執行 Kinect01 專案

「偵錯(D)」→「啟動但不偵錯(H)」

50

現在專案執行畫面如下

51

寫入程式碼至MainWindow.xaml.cs 檔案

52

53

+=之後接著按 Tab鍵

54

輸入 colorFrameReader.FrameArrived += 接著按 Tab鍵

自動產生 ColorFrameReader_FrameArrived函式

每一個 RGB 影格 (Frame) 傳入時，會觸發一次FrameArrived事件，希望程式對一個 RGB 影格做甚麼處理，就寫在ColorFrameReader_FrameArrived 函

式裏，每秒觸發 30 次。

55

56

57

58

59

60

61

建置 Kinect01 方案

「建置(B)」→「重建方案(R)」

執行 Kinect01 方案

「偵錯(D)」→「啟動但不偵錯(H)」

62

現在專案執行畫面如下 (Kinect 圖是鏡像)

63

color000001.jpg 檔案內容如下 (Kinect 圖是鏡像)

64

Kinect01.exe 是執行檔，寄給朋友就可分享。

65

Kinect RGB 影像串流相關類別

KinectSensor類別的物件代表一台 Kinect One，以

GetDefault( ) 方法連接Kinect One，以 Open( )方法啟動

Kinect One，以 Close( )方法停止 Kinect One

新的影格資料送達電腦時觸發 ColorFrameReader的

FrameArrived事件，可利用事件傳遞的參數

ColorFrameArrivedEventArgs 物件取得影格資料

(ColorFrame物件)

Kinect01 解說

66

KinectSensor 類別

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.kinectsensor.aspx?cs-save-

lang=1&cs-lang=csharp#code-snippet-1

KinectSensor類別的物件代表一台 Kinect One，以

GetDefault( ) 方法連接 Kinect One，以 Open( )方法啟動

Kinect One，以 Close( )方法停止 Kinect One

ColorFrameSource屬性取得彩色影像來源

67

ColorFrameReader 類別

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.colorframereader.aspx?cs-

save-lang=1&cs-lang=csharp#code-snippet-1

ColorFrameReader類別的物件操控彩色 (RGB)影像串流

FrameArrived事件被觸發當彩色影像送達時

68

ColorFrame 類別

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.colorframe.aspx

ColorFrame類別的物件儲存彩色 (RGB) 影像串流

CopyConvertedFrameDataToArray( ) 方法將原始彩色影像

依指定的格式轉換後，存入指定的陣列

69

FrameDescription 類別

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.framedescription.aspx

ColorFrameReader類別的物件描述彩色 (RGB)影像的性質

BytesPerPixel屬性描述每個 Pixel 有幾個 Byte

Height屬性描述影像高度的 Pixel 數

Width屬性描述影像寬度的 Pixel 數

70

ColorFrameArrivedEventArgs 類別

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.colorframearrivedeventar

gs.aspx

ColorFrameReader的 FrameArrived事件，傳遞的參數就是

ColorFrameArrivedEventArgs 類別的物件，含有影格資料

(ColorFrame物件)

FrameReference屬性取得彩色影像來源的參照

71

ColorImageFormat 列舉

https://msdn.microsoft.com/en-

us/library/windowspreview.kinect.colorimageformat.aspx

Bgra 成員：一個像素佔用 4 個 byte (blue、green、red 各 1

個 byte，最後 1 個 byte 未使用)

各成員所代表整數值如下頁所示：

72

73

.NET Framework WriteableBitmap 類別

http://msdn.microsoft.com/zh-

tw/library/system.windows.media.imaging.writeablebitmap.a

spx

WriteableBitmap類別的物件存放 RGB 影格資料

WritePixels(Int32Rect, Array, Int32, Int32) 方法將 byte 陣列

的影像存入WriteableBitmap 物件

74

.NET Framework Int32Rect 結構

http://msdn.microsoft.com/zh-

tw/library/system.windows.int32rect.aspx

Int32Rect 結構描述寬度、高度和整數矩形的位置

Height屬性取得或設定矩形的高度

Width屬性取得或設定矩形的寬度

75

.NET Framework 4.6 和 4.5 影像檔案儲存相關類別

1. File 類別

https://msdn.microsoft.com/zh-

tw/library/system.io.file(v=vs.110).aspx

2. FileStream 類別

http://msdn.microsoft.com/zh-

tw/library/system.io.filestream.aspx

76

3. BitmapSource 類別

http://msdn.microsoft.com/zh-

tw/library/system.windows.media.imaging.bitmapsource.as

px

4. JpegBitmapEncoder 類別

http://msdn.microsoft.com/zh-

tw/library/system.windows.media.imaging.jpegbitmapenco

der.aspx

77

Visual Studio C# Kinect 程式設計參考資料

1. 劉超群，Kinect體感程式探索使用C#，2013，松崗，

ISBN:978-957-22-4115-8。

2. Programming Kinect for Windows v2: (02)

http://channel9.msdn.com/Series/Programming-Kinect-for-Windows-v2