kinect v2 からusbでつないだ機器をコントロールしてみよう vol.1
DESCRIPTION
Kinectを使うWindowsストアアプリの注意点を理解する カラーカメラの画像を画面に表示する 頭のボーンの位置をカメラ画像に合わせて表示する USB接続機器の操作ジェスチャーを判定するTRANSCRIPT
![Page 1: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/1.jpg)
Kinect v2 からUSBでつないだ機器をコントロールしてみよう
Vol.01 2014/11/14
![Page 2: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/2.jpg)
本日のゴール
Kinectを使うWindowsストアアプリの注意点を理解する
カラーカメラの画像を画面に表示する
頭のボーンの位置をカメラ画像に合わせて表示する
USB接続機器の操作ジェスチャーを判定する
![Page 3: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/3.jpg)
チェック
Microsoft Windows 8.1 (x64)
Visual Studio Community 2013
Kinect for Windows SDK v2.0http://www.microsoft.com/en-us/kinectforwindows/⇒[download]
![Page 4: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/4.jpg)
KineMissile
![Page 5: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/5.jpg)
不要なファイルの削除
![Page 6: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/6.jpg)
3つのフォルダを作成
Models
ViewModels
Views
【Views】 画面定義などを記述
【ViewModels】複数のModelをまとめるなど
【Models】KinectやUSB機器と接続するコードを記述
![Page 7: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/7.jpg)
ViewsフォルダにMainPage.xamlを作成
フォルダ右クリック[追加]-[新しい項目]
![Page 8: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/8.jpg)
appmanifestの機能の設定
![Page 9: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/9.jpg)
ここでビルド
![Page 10: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/10.jpg)
コンパイルエラーの対応
![Page 11: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/11.jpg)
コンパイルエラーの対応
MainPage
![Page 12: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/12.jpg)
ソリューションエクスプローラープロジェクト名を右クリック⇒[追加]-[参照]
Kinect for Windows SDK v2への参照設定追加
![Page 13: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/13.jpg)
メニューバーの[ビルド]-[構成マネージャー]
Kinect SDKはx64専用なので実行時はx64Visual Studioはx86専用なので編集時はx86
![Page 14: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/14.jpg)
教材をコピー
![Page 15: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/15.jpg)
フォルダ右クリック⇒[追加]-[既存の項目]
教材の2ファイルをそれぞれ所定のフォルダに追加
![Page 16: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/16.jpg)
ここでビルド
![Page 17: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/17.jpg)
<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の編集
ここにコードを書く
こう書かれている部分を探す
![Page 18: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/18.jpg)
<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の編集
![Page 19: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/19.jpg)
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の編集
![Page 20: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/20.jpg)
ここでビルド
![Page 21: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/21.jpg)
Kinectをつないでみよう
![Page 22: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/22.jpg)
ここで実行⇒カラーカメラの画像表示
![Page 23: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/23.jpg)
<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への追加編集
![Page 24: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/24.jpg)
頭部のボーンの取得コード例 (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}
![Page 25: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/25.jpg)
ここで実行⇒画像の顔部分に赤い四角を表示
![Page 26: Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1](https://reader033.vdocuments.net/reader033/viewer/2022050907/5592c5791a28abd10f8b4748/html5/thumbnails/26.jpg)
腕を振り下ろすと機器操作のコード例(KinectModel.vb)
If (born.Joints(JointType.HandLeft).Position.Y > born.Joints(JointType.Head).Position.Y) ThenMe.IsUp = True
ElseIf (born.Joints(JointType.HandLeft).Position.Y < born.Joints(JointType.Head).Position.Y + 10) ThenIf (Me.IsUp) Then
'ミサイル発射Me.IsUp = False
End IfEnd If