Downloaded 10 times
![MainWindow.xaml.csに書き足そう
• Kinectセンサーを用意しよう
• private KinectSensor kinect;｜Kinectセンサーを格納するインスタンス
【３】
• try { … } catch { … }｜例外処理
• KinectSensor.KinectSensors.Count()｜接続されているKinectセンサーの数を数える
• kinect = KinectSensor.KinectSensors[0];｜Kinectセンサーを取得する
【４】](https://image.slidesharecdn.com/handsonkinect141108-141110025330-conversion-gate01/75/MSP-Kinect-Kinect-16-2048.jpg)
![MainWindow.xaml.csに書き足そう
• 骨格情報を取得しよう
• Skeleton[] skeletons = new skeleton[skeletonFrame.SkeletonArrayLength];
• 骨格情報を格納する配列を用意
• skeletonFrame.CopySkeletonDataTo(skeletons);
• 骨格情報を取得する【11】](https://image.slidesharecdn.com/handsonkinect141108-141110025330-conversion-gate01/75/MSP-Kinect-Kinect-23-2048.jpg)
![MainWindow.xaml.csに書き足そう
• トラッキングされている人物を検出
• skeletons[playerIndex].TrackingState == SkeletonTrackingState.Tracked
• TrackedになるまでplayerIndexを1ずつ多くしていく
• if (playerIndex == skeletons.Length)
• もしTrackedのものがなければ，処理を中断
• Skeleton skeleton = skeletons[playerIndex++];
• トラッキングされている人物のSkeletonだけを取得
• ※DepthImagePixel内のplayerIndexは1から始まるので，playerIndex++とする
【12】
【13】](https://image.slidesharecdn.com/handsonkinect141108-141110025330-conversion-gate01/75/MSP-Kinect-Kinect-24-2048.jpg)
![MainWindow.xaml.csに書き足そう
• 各種骨格を取得する
• Joint head_joint = skeleton.Joints[JointType.Head];
• Joint footLeft_joint = skeleton.Joints[JointType.FootLeft];
• Joint footRight_joint = skeleton.Joints[JointType.FootRight];
• 各ジョイントがTrackedされていなければ処理を中断
【14】](https://image.slidesharecdn.com/handsonkinect141108-141110025330-conversion-gate01/75/MSP-Kinect-Kinect-25-2048.jpg)
![MainWindow.xaml.csに書き足そう
• 深度イメージのデータを取得する
• DepthImagePixel[] depthPixel = new DepthImagePixel[depthFrame.PixelDataLength];
• DepthImagePixel構造体の配列を用意
• 16bitの深度情報
• プレイヤーインデックス
• depthFrame.CopyDepthImagePixelDataTo(depthPixel);
• depthPixelに深度データを取得する
【15】](https://image.slidesharecdn.com/handsonkinect141108-141110025330-conversion-gate01/75/MSP-Kinect-Kinect-26-2048.jpg)
Uploaded byYasutomo Imairi
関西MSP勉強会～Kinect編～ ハンズオン資料 Kinectで身長を計測しよう！
関西MSP勉強会～Kinect編～ Kinectで身長を計測しよう！ のハンズオン資料です
関西MSP勉強会～Kinect編～ ハンズオン資料 Kinectで身長を計測しよう！
- 1. ハンズオン講座 ～Kinectで身長を計測しよう！～ MicrosoftStudent Partners Fellow 同志社大学大学院 今入康友（通称：いまにゅー） Twitter: @imanyu Facebook: facebook.com/imanyu
- 2. ハンズオンの概要 • Kinectセンサーを使ったデスクトップアプリを作る • 骨格情報から頭と足の位置をセンサーで取得し，その距離を基に計算 • 頭の座標にずれがあるので，深度情報より頭の頂点を求める
- 3. WPFアプリケーション • WPF｜WindowsPresentation Foundation • 魅力的な外観のユーザーエクスペリエンスを持つ Windowsクライアントアプリケーションを作成するための 次世代プレゼンテーションシステム ザムル • ビュー(XAML)とロジック(C#/VisualBasic)を分けて作成 • XAMLとC#/VBが連携してプログラムが動きます • もっと詳しいことを知りたい人は MSDNのWindows Presentation Foundationをご覧ください (http://msdn.microsoft.com/ja-jp/library/ms754130%28v=vs.110%29.aspx)
- 4. XAMLとC＃について XAML C# Button Clickイベント Clickイベント { 丸の色を青色に変える; 三角を移動させる; } 目に見える部分を担当 （ユーザが見る・使うものを提供） 目に見えない部分を担当 （計算したり，XAMLに命令したり） Hello World!
- 5. Kinectセンサー｜Kinect for Windows • ジェスチャーや音声を認識できるセンサーデバイス • XBOX 360のゲームシステムとして登場 • 3D深度センサー，RGBカメラ，指向性マイクアレイを搭載
- 6. 開発環境 • Windows8.1 • Windows 7 環境でも大丈夫です • Visual Studio Professional 2013 • Kinect for Windows SDK v1.8 • グループで1台の機材なので，分担してプログラミングをしよう！
- 7. プロジェクトの作成 • ファイル→新規作成→ プロジェクト • Visual C# → Windows デスクトップ→ WPFアプリケーションを選ぶ • 名前を「KinectHeightMeasure」と入力して，OKを押す
- 8. 参考資料 • プロジェクトの中身 • Properties｜プロジェクトの設定が色々入ってる • 参照設定｜ライブラリやアセンブリなどの管理 • App.config｜Settings.settingsの中身が記述されてる • App.xaml/App.xaml.cs｜起動時の設定など • MainWindow.xaml/MainWindow.xaml.cs ｜メインのプログラムが記述されてる • 今日使うのは，参照設定とMainWindow.xamlと MainWindow.xaml.csを使います
- 9. MainWindow.xamlを見てみよう • 初期画面はこんな感じ デザイナウィンドウ XAMLで書かれたものが グラフィカルに表示されるところ これがXAML
- 10. とりあえず実行してみよう • プロジェクト作成直後の状態で実行できます • デバッグ→ デバッグ開始/ デバッグなしで開始を押してみましょう • F5 またはCtrl + F5 でもOK • 何も表示されないウィンドウが 表示されます • ×で閉じてください
- 11. ちょこっと勉強会のための用意 • 今作ったプロジェクト内のソースを別のものに置き換えます • MainWindow.xaml内のソースを デスクトップ上「kinect_source_xaml.txt」の中身をコピーして 置き換えてください • MainWindow.xaml.cs内のソースを デスクトップ上「kinect_source_cs.txt」の中身をコピーして 置き換えてください
- 12. MainWindow.xamlに書き足そう • ウィンドウサイズを変更 • <Window>内のHeightとWidthの数値を変更する • Height｜350 → 511 • Width｜525 → 648 • ウィンドウタイトルを変更 • <Window>内のTitleを変更する • Title｜MainWindow → Kinectで身長計測
- 13. MainWindow.xamlに書き足そう • KinectのRGBカメラの映像を出すコントロールを追加 • <Image>コントロールを使用 • x:Name=“Kinect_image”｜コントロールの名前 • Height=“480”｜コントロールの高さ • Width=“640”｜コントロールの幅 • <Image x:Name=“kinect_image” Height=“480” Width=“640” /> 【１】
- 14. 参照設定を追加しよう • KinectSDKをプログラムで使用するために参照設定を追加する • 参照設定を右クリック→ 参照の追加→ 左ペインの参照→参照をクリック 「C:Program FilesMicrosoft SDKsKinectv1.8Assemblies」 の中からMicrosoft.Kinect.dllを選択して追加を押す • 参照設定にMicrosoft.Kinectが追加されたらOK
- 15. MainWindow.xaml.csに書き足そう • KinectSDKを使えるようにしましょう • usingを追加しよう • using Microsoft.Kinect; 【２】
- 16. MainWindow.xaml.csに書き足そう • Kinectセンサーを用意しよう • private KinectSensor kinect;｜Kinectセンサーを格納するインスタンス 【３】 • try { … } catch { … }｜例外処理 • KinectSensor.KinectSensors.Count()｜接続されているKinectセンサーの数を数える • kinect = KinectSensor.KinectSensors[0];｜Kinectセンサーを取得する 【４】
- 17. MainWindow.xaml.csに書き足そう • ColorStream，SkeletonStream，DepthStreamを設定しよう • RGBストリームを許可する｜640×480の大きさ，30フレーム/秒に設定 • 深度ストリームを許可する｜640×480の大きさ，30フレーム/秒に設定 • 骨格ストリームを許可する ※Streamとは… 【５】 Kinectから送られてくるデータの流れのこと
- 18. MainWindow.xaml.csに書き足そう • フレームが届いた時の処理を設定する • kinect.AllFramesReady += kinect_AllFramesReady; • += と書いて，TABキーを2回押すと，自動的にkinect_AllFramesReadyメソッドが生成 • Kinectを開始する • kinect.Start(); 【６】 【７】
- 19. MainWindow.xaml.csに書き足そう • ColorImageFrameが届いた時の処理 • ColorImageFrame colorFrame = e.OpenColorImageFrame() • ColorImageFrameを取得する • colorFrame.CopyPixelDataTo(colorPixel); • colorFrameのピクセルデータをcolorPixel(byte配列)にコピーする • kinect_image.Source = BitmapSource.Create(~~~~); • XAMLのkinect_imageのSourceにBitmapSourceを代入する 【８】
- 20. MainWindow.xaml.csに書き足そう • DepthImageFrameとSkeletonFrameが届いた時の処理 • DepthImageFrame depthFrame = e.OpenDepthImageFrame() • DepthImageFrameを取得する • SkeletonFrame skeletonFrame = e.OpenSkeletonFrame() • SkeletonFrameを取得する 【９】
- 21. MainWindow.xaml.csに書き足そう • 身長計測用メソッド「MeasureHeightメソッド」を呼び出す • kinect_AllFramesReadyメソッド内で呼び出す 【10】
- 22. MainWindow.xaml.csに書き足そう • 身長計測用メソッド「MeasureHeightメソッド」を作ろう • メソッド名：MeasureHeight • 戻り値の型：void • 引数１：DepthImageFrame • 引数２：SkeletonFrame • private void MeasureHeight(DepthImageFrame depthFrame, SkeletonFrame skeletonFrame) { }
- 23. MainWindow.xaml.csに書き足そう • 骨格情報を取得しよう • Skeleton[] skeletons = new skeleton[skeletonFrame.SkeletonArrayLength]; • 骨格情報を格納する配列を用意 • skeletonFrame.CopySkeletonDataTo(skeletons); • 骨格情報を取得する【11】
- 24. MainWindow.xaml.csに書き足そう • トラッキングされている人物を検出 • skeletons[playerIndex].TrackingState == SkeletonTrackingState.Tracked • TrackedになるまでplayerIndexを1ずつ多くしていく • if (playerIndex == skeletons.Length) • もしTrackedのものがなければ，処理を中断 • Skeleton skeleton = skeletons[playerIndex++]; • トラッキングされている人物のSkeletonだけを取得 • ※DepthImagePixel内のplayerIndexは1から始まるので，playerIndex++とする 【12】 【13】
- 25. MainWindow.xaml.csに書き足そう • 各種骨格を取得する • Joint head_joint = skeleton.Joints[JointType.Head]; • Joint footLeft_joint = skeleton.Joints[JointType.FootLeft]; • Joint footRight_joint = skeleton.Joints[JointType.FootRight]; • 各ジョイントがTrackedされていなければ処理を中断 【14】
- 26. MainWindow.xaml.csに書き足そう • 深度イメージのデータを取得する • DepthImagePixel[] depthPixel = new DepthImagePixel[depthFrame.PixelDataLength]; • DepthImagePixel構造体の配列を用意 • 16bitの深度情報 • プレイヤーインデックス • depthFrame.CopyDepthImagePixelDataTo(depthPixel); • depthPixelに深度データを取得する 【15】
- 27. MainWindow.xaml.csに書き足そう • 頭の頂点を探そう • kinect.CoordinateMapper.MapSkeletonPointToDepthPoint(); • 骨格データから深度データに座標変換をする 【16】 • 認識しているプレイヤーの頭のY座標を1ずつ小さくしていき頂点を探す • headDepth.Yを更新して，元の骨格データに座標変換する top headDepth.Y y x 【17】 【18】
- 28. MainWindow.xaml.csに書き足そう • foot_jointを作成する • Joint foot_joint = footLeft_joint.Position.Y < footRight_joint.Position.Y ? footLeft_joint : footRight_joint; • 左右のY座標が小さい方を足のY座標とする • 三項演算子｜ “条件？ trueの時: falseの時;” • 頭と足のY座標を取得する • double head_y = head_joint.Position.Y; • double foot_y = foot_joint.Position.Y; 【19】 【20】
- 29. MainWindow.xamlに書き足そう • 身長を表示するコントロールを用意しよう • <TextBlock>コントロールを使用 • x:Name=“height_textblock”｜名前 • FontSize=“35”｜文字の大きさ • FontWeight=“Bold”｜太文字に • Foregroud=“Red”｜文字色を赤色 • Text=“---cm”｜表示する文字 • HorizontalAlignment=“Left”｜左を基準 • VerticalAlignment=“Top”｜上を基準 • <TextBlock x:Name=“height_textblock” Text=“---cm” HorizontalAlignment=“Left” VerticalAlignment=“Top” Foreground=“Red” FontSize=“35” FontWeight=“Bold” /> 【21】
- 30. MainWindow.xaml.csに書き足そう • 身長を計算しよう • 頭のY座標– 足のY座標の絶対値が身長となる（単位：メートル） • Math.Abs()を使用して絶対値を計算する • 単位がメートルなので100倍してセンチメートルに変換する • ToStringメソッドで，小数点第一位までを表示する • 小数点第二位で四捨五入される • 計算結果をXAMLのheight_textblockに表示させる 【22】
- 31. MainWindow.xaml.csに書き足そう • 身長をわかりやすく表示させよう • 体の横に線（細い四角）を描画する • 線の真ん中に，身長を表示させる • 身長をわかりやすく表示するメソッド「DrawHeightメソッド」を作成する • メソッド名：DrawHeight • 戻り値の型：void • 引数１：SkeletonPoint｜頭 • 引数２：SkeletonPoint｜足
- 32. MainWindow.xaml.csに書き足そう • 身長をわかりやすく表示させるメソッド「DrawHeightメソッド」を 呼び出す • MeasureHeightメソッド内で呼び出す 【23】
- 33. MainWindow.xaml.csに書き足そう • SkeletonPointをColorImagePointに座標変換する • kinect.CoordinateMapper.MapSkeletonPointToColorPointを使用する 【24】
- 34. MainWindow.xamlに書き足そう • 追加の情報を載せるコントロールを用意しよう • <Canvas>コントロールを使用 • x:Name=“height_canvas”｜コントロールの名前 • Height=“480”｜コントロールの高さ • Width=“640”｜コントロールの幅 【25】 • <Canvas x:Name=“height_canvas” Height=“480” Width=“640” />
- 35. MainWindow.xaml.csに書き足そう • 線(細い四角形)を作成して，height_canvasに追加しよう • Rectangleで四角形を作成 • Margin：左上右下の位置を設定する • height_canvas.Children.Addで四角形を追加 • height_canvas.Children.Clear();｜追加する前に以前追加されたものをすべてクリアする • height_textblockの位置を調整 【26】 【27】 【28】
- 36.