Kinectを使うWindowsストアアプリの注意点を理解する カラーカメラの画像を画面に表示する 頭のボーンの位置をカメラ画像に合わせて表示する USB接続機器の操作ジェスチャーを判定する

1. Kinect v2 からUSBでつないだ機器をコ
ントロールしてみよう
Vol.01 2014/11/14

2. 本日のゴール
Kinectを使うWindowsストアアプリの注意点を理解する
カラーカメラの画像を画面に表示する
頭のボーンの位置をカメラ画像に合わせて表示する
USB接続機器の操作ジェスチャーを判定する

3. チェック
Microsoft Windows 8.1 (x64)
Visual Studio Community 2013
Kinect for Windows SDK v2.0
http://www.microsoft.com/en-us/kinectforwindows/
⇒[download]

4. KineMissile

5. 不要なファイルの削除

6. ３つのフォルダを作成
Models
ViewModels
Views
【Views】 画面定義などを記述
【ViewModels】 複数のModelをまとめるなど
【Models】KinectやUSB機器と接続するコードを記述

7. ViewsフォルダにMainPage.xamlを作成
フォルダ右クリック
[追加]-[新しい項目]

8. appmanifestの機能の設定

9. ここでビルド

10. コンパイルエラーの対応

11. コンパイルエラーの対応
MainPage

12. ソリューションエクスプローラー
プロジェクト名を右クリック⇒[追加]-[参照]
Kinect for Windows SDK v2への参照設定追加

13. メニューバーの[ビルド]-[構成マネージャー]
Kinect SDKはx64専用なので実行時はx64
Visual Studioはx86専用なので編集時はx86

14. 教材をコピー

15. フォルダ右クリック⇒[追加]-[既存の項目]
教材の２ファイルをそれぞれ所定のフォルダに追加

16. ここでビルド

17. <Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<Grid>
<Viewbox Height="700" Width="1024">
<Image Source="{Binding ColorImageElement}" Stretch="UniformToFill" />
</Viewbox>
</Grid>
</StackPanel>
MainPage.xamlの編集
ここにコードを書く
こう書かれている
部分を探す

18. <Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<Grid>
<Viewbox Height="700" Width="1024">
<Image Source="{Binding ColorImageElement}" Stretch="UniformToFill" />
</Viewbox>
</Grid>
</StackPanel>
MainPage.xamlの編集

19. Private Model As New ViewModels.MainViewModel
Public Sub New()
InitializeComponent()
Me._navigationHelper = New Common.NavigationHelper(Me)
AddHandler Me._navigationHelper.LoadState, AddressOf NavigationHelper_LoadState
AddHandler Me._navigationHelper.SaveState, AddressOf NavigationHelper_SaveState
Me.DataContext = Me.Model
End Sub
Private Sub NavigationHelper_LoadState(sender As Object, e As Common.LoadStateEventArgs)
Me.Model.KinectConnect()
End Sub
Private Sub NavigationHelper_SaveState(sender As Object, e As Common.SaveStateEventArgs)
Me.Model.KinectDisConnect()
End Sub
MainPage.xaml.vbの編集

20. ここでビルド

21. Kinectをつないでみよう

22. ここで実行⇒カラーカメラの画像表示

23. <StackPanel Grid.Row="1">
<Grid>
<Viewbox Height="700" Width="1024">
<Image Source="{Binding ColorImageElement}" Stretch="UniformToFill" />
</Viewbox>
<Viewbox Height="700" Width="1024">
<Canvas Name="BodyCanvas" Height="1080" Width="1920"
DataContext="{Binding BodyImageElement}">
<Rectangle Stroke="Red"
StrokeThickness="30" Width="200" Height="200"
Canvas.Top="{Binding Top}" Canvas.Left="{Binding Left}" />
</Canvas>
</Viewbox>
</Grid>
</StackPanel>
MainPage.xamlへの追加編集

24. 頭部のボーンの取得コード例 (KinectModel.vb)
カラー画像とボーンでは座標系が違う
座標をカラー画像に合わせる⇒MapCameraPointToColorSpace
Dim headPos = Me.Kinect.CoordinateMapper.MapCameraPointToColorSpace(
born.Joints(JointType.Head).Position)
Me.BodyImageElement = New PosRect With {.Top = headPos.Y - 200 / 2,
.Left = headPos.X - 200 / 2}

25. ここで実行⇒画像の顔部分に赤い四角を表示

26. 腕を振り下ろすと機器操作のコード例(KinectModel.vb)
If (born.Joints(JointType.HandLeft).Position.Y > born.Joints(JointType.Head).Position.Y) Then
Me.IsUp = True
ElseIf (born.Joints(JointType.HandLeft).Position.Y < born.Joints(JointType.Head).Position.Y + 10) Then
If (Me.IsUp) Then
'ミサイル発射
Me.IsUp = False
End If
End If