この白い四角は、画像編集ソフトで追加しただけですｗ

自動的にこうやってモザイクがかかっているわけではありません！

 

 

さて、次はカメラを使ったアプリを作ってみようということです。
zigsow様の内容を引用させていただきます！

流れとしては以下の流れで作成します。

プロジェクトの作成
XAMLによるメインウィンドウの記述
画像情報を表示するImageコントロールの追加
"Loaded"イベントのハンドラメソッドを設定
C#によるロジックの記述
usingディレクティブの追加
フィールドの追加
"Loaded"イベントハンドラの記述
"ColorFrameReady"イベントハンドラの記述


さ、さっぱりわからない...
とりあえずやってみよう。

Visual Studioを起動して
ファイル→新規作成→プロジェクト
以上のようにクリックします。

なんだか見ただけでいやになるダイアログが！
こんなに選択肢あったら。。。逆にわからんｗ

とりあえず今回はWPFアプリケーションを選択し
名前は「KinectCameraSample」とします。

場所は...適当なとこで！

右のソリューションエクスプローラタブの
先ほど作成したKinectCameraSampleを右クリック
そして「参照の追加」をクリックします。

ま、またなんかごちゃごちゃしてるぅううう！
これ、今は解説見よう見まねでやってるからあれだけど、
自分で作ろうと思ったらできるのだろうか...
既に心配になってきましたｗ

さて、「拡張子タブ」をクリックして
「Microsofg.Kinect」を選択してOKをおします。

雛形が出来てきたところで
プロジェクトを保存します。
ファイル→すべてを保存

ここまでで、やっと第一章プロジェクト作成が終了です。
なんて濃い内容なんだ...

さあ、第二章コントロールの追加です。

ーーーーーーーーーーーーーーーーーーーーーーーー
　WPFなどのUIフレームワークでは、
　ユーザからの入力を受け取ったり、
　出力を表示する部品を「コントロール」と呼びます。
　Visual C# を使い、WPFのコントロールを追加してみましょう。
　ここでは、"Image"コントロールを作成し、
　"Height"などのプロパティを設定する手順を紹介しますが、
　その他のコントロールでも同様の手順で追加できます。
ーーーーーーーーーーーーーーーーーーーーーーーー
ふむふむ。。。

mainwindow.xamlをダブルクリックして開く。

左のツールボックスをクリックして
次にコモンWPFコントロールをクリック
そして、imageというパーツをウインドウにドラッグアンドドロップ！

なんか出ましたね。

ここで少し悩みました。
講座では、出てきたやつを右クリックして
プロパティを選択
そして右のダイアログから設定しろとあるのですが

Visual Stuido2012では少し違うようです。

まず、imageをドロップしたら
そのまま右下にプロパティが出ます。

そこのレイアウトを展開すると
width heightなどの設定値が出ると思います。

そして、ここも
プロパティ名を右クリではなく
右のほうにある小さい四角をクリックします。

するとこのようなダイアログが出るので
これでリセットを選択です。

さらに、共通タブのstretchもリセットしておきます。
Uniformになっていれば、
拡大縮小時に比率を維持したまま拡大縮小が行われます。
今回は最初からUniformが選択されていました。

適当な名前をつけておきます。

これでコントロールの追加編が終わりました。
いやぁ。。。難しい！
何をやってるのかいまのところさっぱりなのですがｗ

 

次は第三章イベントハンドラの設定です。

---------------------------------------------
「ユーザがマウスをクリックした」とか、
「コントロールが初期化された」といった
各種イベントに対する処理は「イベントハンドラ」に記述します。
WPFのコントロールに対するイベントハンドラを記述するには、
以下の2つの手順が必要です。

今回作成するアプリケーションは、
メインウィンドウの初期化時にKinectなどの初期化を行います。
このためにメインウィンドウのWindowオブジェクトの
"Loaded"イベントを使います。
ここでは、"Loaded"イベントのハンドラメソッドとして
"WindowLoaded"を登録する手順を示します。

追加対象のXAMLファイルを開きます （ここでは "MainWindow.xaml" ）
［ソリューションエクスプローラー］から"KinectCameraSample"の下にある
"MainWindow.xaml"をダブルクリックします。（すでに開いている場合は不要）
追加対象のコントロールを選択します。ここでは、Windowを選択します。
なお、デザインビュー上ではコントロールの選択が難しいことがあります。
この場合、以下の方法も試してみてください。
コントロールを選択した状態で［ESC］キーを押すと
親のコントロールが選択されます。
これを利用して、たとえば上記で追加したImageコントロールを選択し、
［ESC］を2回押すことで親の親（つまりWindow）を選択できます。
XAMLビュー上で該当するタグ（この場合は<Window>タグ）を
クリックすることでもコントロールを選択できます。
---------------------------------------------

ふむふむ。。。

とりあえずimageコントロールを選択した状態で
ESCキーを二回押す・・・

なるほど、種類がwindowになりましたね。

---------------------------------------------
［プロパティ］ビューの［イベント］タブを選択し、
［Loaded］に"WindowLoaded"を入力し、エンターを押します。
---------------------------------------------
これも非常にわかりにくいですね。

右のほうの雷のマークが[イベント]タブです。
これをクリックすると
下のほうに[Loaded]タブがあります。
そこに
[WindowLoaded]と入力しエンター

---------------------------------------------
XAMLにハンドラメソッド名が指定され、
コードビハインドにハンドラメソッドのひな形が作られます。
（ハンドラメソッドへの処理の追加は後程行います）
---------------------------------------------
ふむふむ、専門用語だらけでわけわからん。

ここに定義されたよ！ってことでしょう。
そして、実際の内容は後で書くよ。。。と

これでイベントハンドラの設定完了！

次はコードビハインドへの処理の追加。。。です

どうやらこれがラストセッションのようだ。。。
しかしラストが長いｗ

がんばりましょう！

----------------------------------------------
コードビハインドへの処理の追加は、
Visual Studio のソースエディタで行います。
追加対象のC#ファイルを開き、以下のように記述しましょう。
（ここでは "MainWindow.xaml.cs"に追加しています ）
----------------------------------------------
ふむふむ

----------------------------------------------
usingディレクティブの追加
Kinect for Windows SDKを使った開発では、
Microsoft.Kinect.KinectSensorクラスなどを多用するので、
usingディレクティブを追加して、
"KinectSensor"で参照できるようにしておきましょう。
----------------------------------------------
えっと・・・はい・・・？

[using Microsoft.Kinect;]を宣言しろってことかな

とりあえず追記しておきました。

なんか段々説明雑になってきてないか...

//Kinectセンサーからの画像情報を受け取るバッファ
private byte[] pixelBuffer = null;

//画面に表示するビットマップ
private WriteableBitmap bmpBuffer = null;

とりあえずいわれるがままに上の内容を追加。

---------------------------------------------------

//Kinectセンサーの取得(Kinectセンサーやバッファ類の初期化)
KinectSensor kinect = KinectSensor.KinectSensors[0];

//カラーストリームの有効化
kinect.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);

//バッファの初期化
pixelBuffer = new byte[kinect.ColorStream.FramePixelDataLength];
bmpBuffer = new WriteableBitmap(kinect.ColorStream.FrameWidth, kinect.ColorStream.FrameHeight, 96, 96, PixelFormats.Bgr32, null);

rgbImage.Source = bmpBuffer;

//イベントハンドラの登録
kinect.ColorFrameReady += ColorImageReady;

//Kinectセンサーからのストリーム取得を開始
kinect.Start();
---------------------------------------------------------

またまたいわれるがままに
追記。

---------------------------------------------------------
//ColorFrameReadyイベントのハンドラ(画像情報を取得して描画)

private void ColorImageReady(object sender, ColorImageFrameReadyEventArgs e)
{
using (ColorImageFrame imageFrame = e.OpenColorImageFrame())
{
if (imageFrame != null)
{
//画像情報の幅・高さ取得＊途中で変わらない想定
int frmWidth = imageFrame.Width;
int frmHeifht= imageFrame.Height;

//画像情報をバッファにコピー
imageFrame.CopyPixelDataTo(pixelBuffer);
//ビットマップに描画
Int32Rect src = new Int32Rect(0, 0, frmWidth, frmHeifht);
bmpBuffer.WritePixels(src, pixelBuffer, frmWidth * 4, 0):
}
}
}
-----------------------------------------------------------

さらにいわれるがまま追記。

これ、一個一個理解するの難しそうだぞ...
なんて駆け足なんだｗ

一応デバッグも成功して、
無事カメラは表示されました！
しかし...

理解するにはまだかなりかかりそうです。

 

今回は最初だったので、

Visual Studioでのプロジェクトの作成方法もしっかりかいておきました。

コードに関しては、今後どんどん長くなっていくので

どうかいていくかは考えることにします。