PR

KinectButtonを動的に作成して、ジェスチャーで文字を表示させるサンプル

2012年8月9日(木)
薬師寺 国安

今回は、画面上に「Kinect Button」を作成して表示、ジェスチャーで操作するサンプルを作成していきます。

今回のサンプルは、「Beginning Kinect Programming with the Microsoft Kinect SDK」という洋書のサンプルに付属している、Beginning.Kinect.Framework.dllを使用します。ダウンロードされるファイルの、ソリューションエクスプローラー内のDLLというフォルダ内に、このDLLが置かれています。著作権上ダウンロードされたxaml.vbコード内には「Copyright (c) 2012 Jarrett Webb & James Ashley」の一文を明記しています。

このDLLに含まれるKinect Buttonを使ったサンプルを紹介します。実際に動かした動画は以下です。動作の確認をする場合は、左右どちらの手でもボタンの選択はできますが、どちらかの手を使用している場合は、使用していない手は、後ろに隠す感じにしておいてください。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。

次に、「WPF アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_ButtonClick」という名前を付けています。

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、コンポーネントを追加しておきます。今回追加するのは、Microsoft.Kinectと、Microsoft.Samples.Kinect.WpfViewers.dll、Beginning.Kinect.Framework.dllの3つです。.NETタブ内に表示されていないDLLファイルは「参照」タブからDLLファイルを指定します。

Microsoft.Kinect.dllは、C:\Program Files\Microsoft SDKs\Kinect\v1.5\Assemblies内に存在しますので、これを指定します。また、Kinectforwindowssdkv1.zipを下記のURLよりダウンロードし、解凍してできるフォルダ、
\KinectforWindowsSDKV1\KinectforWindowsSDKV1\2.Setting Up Dev Environment\SettingUpDevEnvironmentVB\SettingUpDevEnvironment\bin\Release
の内にある、Microsoft.Samples.Kinect.WpfViewers.dllを参照の追加で追加してください。
→ Kinectforwindowssdkv1(RapidLibrary)

Beginning.Kinect.Framework.dllはソリューションエクスプローラー内のDLLフォルダにあります。既に参照はしていますが、もしエラーが表示される場合は、このDLLを再度、参照の追加を行ってください。

コントロールの配置

Beginning.Kinect.Framework.dllを「参照の追加」で追加すると、ツールボックス内に図1のようなコントロールが追加されます。もし、追加されていない場合は、ツールボックス上でマウスの右クリックで表示される「アイテムの選択(I)」と選択して表示されるコントロールの一覧から、KinectButtonを選択してください。

図1:Beginning.Kinect.Framework.dllを参照の追加で表示されるコントロール

ツールボックスからデザイン画面上にTextBlockを1個、KinectButtonを3個、KinectColorViewerを1個、KinectSensorChooserを1個配置します。 要素のBackgroundプロパティにBlackを指定して黒の背景としています。また、要素のWindowStateプロパティにMaximizedを指定して、全画面で表示されるようにしています。
今回のKinectButtonを使ったサンプルは全画面表示前提にしてください。全画面表示でないとうまく動作しませんので、注意が必要です。
次に、KinectColorViewerを選択し、プロパティの「その他」パネルにあるKinectの「データバインドの適用」を選択します。
ElementNameにKinectSensorChooser1を指定し、「パス」にKinectを指定します。
KinectButtonのClickイベントと、KinectCursorLeaveイベントにイベントハンドラを指定しておきます。BackgroundにはGoldを指定しています。

書き出されるXAMLコードはリスト1、レイアウトは図2のようになります。

リスト1 書き出されたXAMLコード(MainWindow.xaml)

  • (1)WindowStateにMaximizedを指定し、全画面表示にしている。
  • (2)要素のBackgroundにBlackを指定している。
  • (3)Kinectプロパティにバインディングが設定されている。
  • (4)ClickとKinectCursorLeaveイベントにイベントハンドラが指定されている。
<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowState="Maximized"
  Title="MainWindow" Height="797" Width="953" xmlns:my="clr-namespace:Beginning.Kinect.Framework.Controls;assembly=Beginning.Kinect.Framework" xmlns:my1="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers"> ■(1)
  <Grid Background="Black"> ■(2)
    <TextBlock Height="64" Name="TextBlock1" Text="" FontSize="40" FontWeight="Bold" Foreground="Red" Margin="76,457,161,237" />
    <my:KinectButton Content="Kinect Button1" Height="130" Width="130"  HorizontalAlignment="Left" Margin="76,21,0,0" Name="kinectButton1" VerticalAlignment="Top" Click="Button_Click" Background="Gold" KinectCursorLeave="Button_KinectCursorLeave" Cursor="Hand" FontSize="16" FontWeight="Bold" /> ■(4)
    <my:KinectButton Background="Gold" Content="Kinect Button2" Height="130" HorizontalAlignment="Left" Margin="76,173,0,0" Name="KinectButton2" VerticalAlignment="Top" Width="130" Click="Button_Click"  KinectCursorLeave="Button_KinectCursorLeave" Cursor="Hand" FontSize="16" FontWeight="Bold" /> ■(4)
    <my:KinectButton Background="Gold" Content="Kinect Button3" Height="130" HorizontalAlignment="Left" Margin="76,321,0,0" Name="KinectButton3" VerticalAlignment="Top" Width="130" Click="Button_Click"  KinectCursorLeave="Button_KinectCursorLeave" Cursor="Hand" FontSize="16" FontWeight="Bold" /> ■(4)
    <my1:KinectColorViewer Height="120" HorizontalAlignment="Right" Margin="0,575,695,0" Name="KinectColorViewer1" VerticalAlignment="Top" Width="160" Kinect="{Binding ElementName=KinectSensorChooser1, Path=Kinect}" /> ■(3)
    <my1:KinectSensorChooser HorizontalAlignment="Left" Margin="375,597,0,0" Name="KinectSensorChooser1" VerticalAlignment="Top" Width="172" Height="140" />
  </Grid>
</Window>
図2:各コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • Kinect Buttonを使って画面上にボタンを表示・操作するサンプル(1)

  • Kinect Buttonを使って画面上にボタンを表示・操作するサンプル(2)

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています