Kinect02 程式將 SlideShow 圖片播放程式加上 Kinect Posture 操控功能，讓使用者除了滑鼠、觸控螢幕操控之外，亦可以身體的姿勢操控自動播放彩色影像，或一次播放一張彩色影像。

1. Kinect 2.0 Programming
(2)
Kinect02
FELab
2015/12/12
1

2. Kinect Posture 偵測與應用
 Kinect02 目標、開發、執行
 Kinect Posture 偵測與應用系統簡介
 Kinect02 畫面規劃
 Kinect02 實作
 Kinect02 解說
2

3. 3

4. 4

5. 5

6. 6
Kinect02 程式將 SlideShow 圖片播放程式加上 Kinect
Posture 操控功能，讓使用者除了滑鼠、觸控螢幕操
控之外，亦可以身體的姿勢操控自動播放彩色影像，
或一次播放一張彩色影像。
開發工具為 Windows 10 加上 Visual Studio 2015 環境
之 C# + WPF + Kinect for Windows SDK 2.0
Kinect02 目標、開發、執行

7. 7
程式執行時需在桌面有名為 MImage 之檔案夾，內
置數目不限的圖檔。
程式執行時需將 Kinect One 接上電腦之 USB 3.0 插
槽，建議將螢幕解析度調為 1920x1080 或以上。
Kinect02 專案下載 (Kinect02.zip & Mimage.zip)
https://onedrive.live.com/redir?resid=AB6DA2015C8C4A60!2308&
authkey=!ANeqqNQzHPgLwbw&ithint=file%2czip
https://onedrive.live.com/redir?resid=AB6DA2015C8C4A60!2309&
authkey=!ADu9H-hhNq75Lig&ithint=file%2czip

8. 8
Kinect Posture 偵測與應用系統簡介
Posture 指身體擺出某種姿勢，例如
右手向上高舉 (自動播放， AutoShow 類別)
左手肘高舉 (向後一張， Previous 類別)
右手肘高舉 (向前一張， Next 類別)
左手向左平舉 (到第一張， First 類別)
右手向右平舉 (到最後一張， Last 類別)

9. 9
每種姿勢的偵測功能寫成一個類別 (class)
程式同時偵測五種姿勢，若有符合任一姿勢標準，
則觸發該事件。
AutoShow、Previous、Next、First、Last 五個類別
觸發的事件，其功能分別對等於 AutoShow、
Previous、Next、First、Last 五個控制項的 Click 事件。

10. 10
利用 Kinect for Windows SDK 2.0 提供的骨架座標
利用 Body 類別的物件儲存骨架座標資料
使用到的關節點為 JointType 之 6 個列舉值：
ShoulderLeft、ElbowLeft、WristLeft、
ShoulderRight、ElbowRight、WristRight
利用6 個關節點座標資料判斷 AutoShow、Previous、
Next、First、Last 五種姿勢。

11. 11
Y
Z
X

12. 12
構想此程式含有底下元件：
一個 Image 秀出圖檔
一個 CheckBox 操控自動播放
四個 Button 分別操控前一張、後一張、最前張、最後
張播放
一個 ProgressBar 顯示播放進度
Kinect02 畫面規劃

13. 13
視窗大小為 1440x810 (SlideShow)
Image 控制項顯示 1024x768 圖像 (SlideImage)
CheckBox 控制項操控自動播放 (AutoShow)
Button 控制項操控前一張播放(<) (Previous)
Button 控制項操控後一張播放(>) (Next)
Button 控制項操控最前張播放(<<) (First)
Button 控制項操控最後張播放(>>) (Last)
ProgressBar 控制項顯示播放進度 (Progress)

14. 14
建立 Kinect02 方案
 起動 Visual Studio Professional 2015
 點選「檔案(F)」 → 「新增(N)」 → 「專案(P)…」 → 「Visual
C#」 → 「WPF 應用程式」
 「名稱(N)」填入 Kinect02 (原來是WpfApplication1)
 「位置(L)」利用瀏覽(B)… 選定目錄
 點選「確定」
Kinect02 實作

15. 15
加入 Microsoft.Kinect 組件使 SDK 可以被專案使用
 在『參考』處按右鍵， 點選『加入參考(R)』
 點選「擴充功能」 → 挑選「Microsoft.Kinect 2.0.0.0」
→ CheckBox 處點一下使出現打勾
 點選「確定」

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

17. 17
『擴充功能』之
Microsoft.Kinect
2.0.0.0 打勾

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

19. 19
 將 Window 屬性修改為
名稱：Kinect02
Background：單色筆刷
(R:100 G:200 B:150 A:100%)
FontSize：20
Height：810
ResizeMode：CanMinimize
Title：Slide Show (Kinect)
Width：1440
程式執行時，視窗只可
縮至最小，無法放大

20. 20
將 Kinect02 視窗加入一個 Image 控制項
 滑鼠在工具箱的 Image 點一下，然後在視窗設計區點一下
 名稱：SlideImage
 將 SlideImage 屬性修改為
Height：768
Margin：0 0 0 0
Width：1024

21. 21
將 Kinect02 加入一個 CheckBox 控制項
 名稱：AutoShow
 將 AutoShow 屬性修改為
Background：單色筆刷 (R：60 G：120 B：180 A：100%)
Content：自動播放 (右手高舉) FontSize：32
Foreground：單色筆刷 (R：230 G：230 B：50 A：100%)
Height：50
HorizontalContentAlignment：Center
Margin：1070 20 0 0
VerticalContentAlignment：Center
Width：310

22. 22
將 Kinect02 加入四個 Button 控制項
 名稱：Previous
 將 Previous 屬性修改為
Background：單色筆刷 (R：200 G：100 B：200 A：100%)
Content：< (左手肘高舉 )
FontSize：32
Height：50
Margin：1070 100 0 0
Width：310

23. 23
 名稱：Next
 將 Next 屬性修改為
Background：單色筆刷 (R：200 G：100 B：200 A：100%)
Content：> (右手肘高舉)
FontSize：32
Height：50
Margin：1070 170 0 0
Width：310

24. 24
 名稱：First
 將 First 屬性修改為
Background：單色筆刷 (R：200 G：100 B：200 A：100%)
Content：<< (左手平舉)
FontSize：32
Height：50
Margin：1070 240 0 0
Width：310

25. 25
 名稱：Last
 將 Last 屬性修改為
Background：單色筆刷 (R：200 G：100 B：200 A：100%)
Content：>> (右手平舉)
FontSize：32
Height：50
Margin：1070 310 0 0
Width：310

26. 26
將 Kinect02 加入一個 ProgressBar 控制項
 名稱：Progress
 將 Progress 屬性修改為
Background：單色筆刷 (R：220 G：200 B：100 A：100%)
FontSize：32
Foreground：單色筆刷 (R：200 G：100 B：200 A：100%)
Height：30
Margin：1070 390 0 0
Width：310

27. 27
 滑鼠雙擊 Kinect02 事件視窗的 Loaded 右邊空白欄位
 滑鼠雙擊 Kinect02 事件視窗的 Unloaded 右邊空白欄位
 滑鼠雙擊 AutoShow 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Previous 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Next 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 First 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Last 事件視窗的 Click 右邊空白欄位
加入 Kinect02 專案欲處理的事件

28. 28
現在 MainWindow.xaml 檔案如下

29. 29

30. 30

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

32. 32

33. 33

34. 34
輸入 timer.Tick += 接著按 Tab 鍵
自動產生 timer_Tick 函式
每間隔 2 秒，會觸發一次 Tick 事件，希望每次 Tick 事
件被觸發時做甚麼事情，就寫在 timer_Tick 函式裏。

35. 35
因為把圖秀到 SlideImage 很多事件都會用到，所以把此
功能寫成slideShow 函式，方便使用。

36. 36

37. 37

38. 38

39. 39

40. 40
建置 Kinect02 專案
 「建置(B)」 → 「重建方案(R)」
執行 Kinect02 專案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

41. 41
滑鼠、觸控螢幕的操控功能有了，還沒有體感操控

42. 42
 在『C# Kinect02』處按右鍵 ，點選『加入(D)』 → 『類別
(C)…』 →「名稱(N)」填入 AutoShow.cs →「新增(A)」
加入 Kinect02 五個姿勢偵測的類別
在『Kinect02』處按右鍵，
點選『加入(D)』→
『類別(C)…』

43. 43
填入類別名稱

44. 44
 在『C# Kinect02』處按右鍵 ，點選『加入(D)』 → 『類別
(C)…』 →「名稱(N)」填入 Previous.cs →「新增(A)」
 在『C# Kinect02』處按右鍵 ，點選『加入(D)』 → 『類別
(C)…』 →「名稱(N)」填入 Next.cs →「新增(A)」
 在『C# Kinect02』處按右鍵 ，點選『加入(D)』 → 『類別
(C)…』 →「名稱(N)」填入 First.cs →「新增(A)」
 在『C# Kinect02』處按右鍵 ，點選『加入(D)』 → 『類別©…』
→「名稱(N)」填入 Last.cs →「新增(A)」

45. 45
專案多出這五個類別檔案

46. 46
偵測右手向上高舉，就寫在
AutoShow 類別裏。

47. 47
偵測左手向左平舉，就寫在 First
類別裏。

48. 48
偵測右手向右平舉，就寫在 Last
類別裏。

49. 49
偵測右手肘高舉，就寫在 Next 類
別裏。

50. 50
偵測左手肘高舉，就寫在
Previous 類別裏。

51. 51
寫入程式碼至 AutoShow.cs 檔案

52. 52

53. 53

54. 54

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

56. 56

57. 57

58. 58
輸入 bodyFrameReader.FrameArrived +=
接著按 Tab 鍵
自動產生 BodyFrameReader_FrameArrived 函式

59. 59
輸入 autoShow.Detected +=
接著按 Tab 鍵
自動產生 AutoShow_Detected 函式

60. 60

61. 61

62. 62

63. 63
建置 Kinect02 專案
 「建置(B)」 → 「重建方案(R)」
執行 Kinect02 專案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

64. 64
滑鼠、觸控螢幕的操控功能，加上自動播放一種體感操控

65. 65
寫入程式碼至 First.cs 檔案

66. 66

67. 67

68. 68

69. 69
寫入程式碼至 Last.cs 檔案

70. 70

71. 71

72. 72

73. 73
寫入程式碼至 Next.cs 檔案

74. 74

75. 75

76. 76

77. 77
寫入程式碼至 Previous.cs 檔案

78. 78

79. 79

80. 80

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

82. 82

83. 83

84. 84

85. 85

86. 86

87. 87

88. 88

89. 89

90. 90

91. 91

92. 92

93. 93

94. 94

95. 95
建置 Kinect02 專案
 「建置(B)」 → 「重建方案(R)」
執行 Kinect02 專案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

96. 96
滑鼠、觸控螢幕的操控功能，加上五種姿勢體感操控

97. 97
 Kinect 骨架串流相關類別
 KinectSensor 類別的物件代表一台 Kinect One，以
GetDefault( ) 方法連接Kinect One，以 Open( ) 方法啟動
Kinect One，以 Close( ) 方法停止 Kinect One
 新的影格資料送達電腦時觸發 BodyFrameReader 的
FrameArrived 事件，可利用事件傳遞的參數
BodyFrameArrivedEventArgs 物件取得影格資料
(BodyFrame 物件)
Kinect02 解說

98. 98
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
 BodyFrameSource 屬性取得骨架資料來源

99. 99
BodyFrameReader 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.bodyframereader.aspx
 BodyFrameReader 類別的物件操控骨架資料串流
 FrameArrived 事件被觸發當骨架資料送達時

100. 100
BodyFrame 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.bodyframe.aspx
 BodyFrame 類別的物件儲存骨架資料串流
 BodyCount 屬性：可追踪骨架的數目
 BodyFrameSource：取得骨架資料來源
 GetAndRefreshBodyData( ) 方法：取得骨架資料存入指定
的陣列

101. 101
Body 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.body.aspx
 Body 類別的物件描述ㄧ副骨架資料
 IsTracked 屬性：判斷骨架是否被追踪
 Joints 屬性：取得骨架關節座標

102. 102
BodyFrameArrivedEventArgs 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.bodyframearrivedeventar
gs.aspx
 BodyFrameReader 的 FrameArrived 事件，傳遞的參數就是
BodyFrameArrivedEventArgs 類別的物件，含有骨架資料
(BodyFrame 物件)
 FrameReference 屬性取得骨架資料來源的參照

103. 103
JointType 列舉
 https://msdn.microsoft.com/en-
us/library/microsoft.kinect.jointtype.aspx
 各成員所代表整數值如下頁所示：

104. 104

105. 105

106. 106
C# 之 event
 https://msdn.microsoft.com/zh-tw/library/8627sbea.aspx
 Event (事件) 與 delegate (派遣)
 public event EventHandler Detected
.NET Framework 之 EvenHandler
 https://msdn.microsoft.com/zh-
tw/library/system.eventhandler(v=vs.110).aspx

107. 107
.NET Framework Math 類別
 https://msdn.microsoft.com/zh-
tw/library/system.math(v=vs.110).aspx
 Abs( ) 方法

108. 108
.NET Framework TimeSpan 結構
 https://msdn.microsoft.com/zh-
tw/library/system.timespan(v=vs.110).aspx
TimeSpan(Int64) 建構函式 (10000000 代表 1 秒)