PR

手を動かして画面上の写真を左右にスライドさせるKinectサンプル

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

2012年8月3日にKinect for Windows Developer Toolki Version 1.5.2がリリースされました。下記のURLよりダウンロードできます。
→ Kinect Developer Downloads(Kinect for Windows)

今回は、左右の手の動きで画像がワイプして表示されるサンプルを作成します。Developer Toolkit Browserv1.5.2に掲載されている「Kinect for Windows Developer Toolkit v1.5.0」(図1)に含まれるSlideShow Gestures-WPF C#版をアレンジして作ったサンプルです。

図1:Kinect for Windows Developer Toolkit v1.5.2を起動した(クリックで拡大)

実際に動かした動画は以下になります。

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

プロジェクトの作成

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

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

ソリューションエクスプローラー内にImagesというフォルダを作り20枚の画像を取り込んでおきます。このうち実際に使用するのは18枚の画像で、残り2枚はダミーの画像です。

また、bin\Debugフォルダ内にリスト1のXML文書ファイル(Photo.xml)を配置しておきます。ダウンロード用のサンプルファイルには、これらの画像やXMLファイルは追加済みです。

リスト1 XML文書ファイル(Photo.xml)

最後の2枚はダミーの画像で表示はされません。

<?xml version="1.0"?>
<画像>
    <画像名>おしろい花.jpg</画像名>
    <画像名>サルビア.jpg</画像名>
    ~<画像名></画像名>繰り返し~
    <画像名>dummy01.jpg</画像名>
    <画像名>dummy02.jpg</画像名>
</画像>

参照の追加

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

Microsoft.Kinect.dllは、C:\Program Files\Microsoft SDKs\Kinect\v1.5\Assemblies内に存在しますので、これを指定します。CodingFun4.Kinect.Wpf.dllはCoding4Fun.Kinect.Toolkitをダウンロードして解凍したフォルダ内に存在していますので、それを指定してください。

Microsoft.Samples.Kinect.SwipeGestureRecognizer.dllは、図1のKinect for Windows Developer Toolkit v1.5.2に含まれるSlideShow Gestures-WPFをInstallアイコンから任意のフォルダにインストールしてください。インストールすると、\SlideShowGestures-WPF\bin\Debugフォルダ内にこのDLLがありますので、これを指定してください。

コントロールの配置

まずWindowのWidthを816、Heightを723に指定します。次に、ツールボックスからデザイン画面上にImageコントロールを4個、TextBlockコントロールを3個配置します。

画像が表示される3枚のImage(nextImage、previousImage,currentImage)のWidthに640、Heightに480と指定します。nextImageとpreviousImageは初期の状態ではOpacityに0を指定して透明化しておきます。

RGBカメラの画像(実写)を表示するImage(rgbImage)のWidthには128、Heightには96と指定しておきます。レイアウトは図2、コードはリスト2のようになります。

図2:各コントロールを配置した(クリックで拡大)

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

  • (1)要素のWidthを816、Heightを723と指定している。
  • (2)要素でx:NameがnextImageとpreviousImageのOpacityに0を指定し透明化しておく。
<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="723" Width="816"> ■(1)
<Grid>
    <Image x:Name="nextImage"  Opacity="0" Width="640" Height="480" /> ■(2)
    <Image x:Name="previousImage"  Opacity="0" Width="640" Height="480"  /> ■(2)
    <Image x:Name="currentImage"  Width="640" Height="480"  />
    <TextBlock Height="57" HorizontalAlignment="Left" Margin="76,595,0,0" Name="TextBlock1"  VerticalAlignment="Top" Width="516" FontSize="32" FontWeight="Bold" Foreground="Red" />
    <TextBlock Height="54" HorizontalAlignment="Left" Margin="69,48,0,0" Name="TextBlock2" Text="全部で18枚の画像があります。" VerticalAlignment="Top" Width="560" FontSize="40" FontWeight="Bold" Foreground="Navy" />
    <TextBlock Height="58" HorizontalAlignment="Left" Margin="598,594,0,0" Name="TextBlock3" Text="" VerticalAlignment="Top" Width="111" FontSize="40" FontWeight="Bold" />
    <Image Height="96" HorizontalAlignment="Left" Margin="632,0,0,0" Name="rgbImage" Stretch="Fill" VerticalAlignment="Top" Width="128" />
  </Grid>
</Window>
Think IT会員限定特典
  • 「スライドによるページナビゲーション」サンプルプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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