Finally got an opportunity to deliver a speaking and demo about Kinect development yesterday (Oct 30, 2011), on a seminar entitled “Technology is Our Life” organized by computer science students of Universitas Padjajaran (UNPAD). It’s full house, attended by 200 persons mostly coming UNPAD, UNIKOM, and Maranatha University students. Most of them are fist timer with the Kinect, so they’re quite amazed what we can do with Kinect.
Some photos:
Demoing Skeletal Tracking and Light Saber
Demoing PowerPoint control and Kinect Effect
Kinect Development
I’m gonna switch language to Bahasa Indonesia as there are already a lot of references in English, for example: Kinect for Windows SDK Quickstarts.
Posting ini ingin berbagi tentang bagaimana memulai pengembangan aplikasi dengan Kinect. Bagi yang belum tahu Kinect (dan dari seminar kemarin, ternyata banyak yang belum tahu) pada dasarnya sebuah perangkat tambahan console game Xbox 360 dari Microsoft, yg berfungsi untuk mengenali gerakan dan suara pemain. Pertama kali diperkenalkan dengan codename “Project Natal” tanggal 1 Juni 2009, dan diluncurkan November tahun lalu, Kinect telah berkembang bukan lagi hanya sebagai pelengkap Xbox, tapi sudah di-hack untuk keperluan apapun, mulai dari hal-hal yang fun dan lucu, sampai untuk keperluan yang selama ini hanya bisa kita lihat di Sci-fi movies.
Kinect digunakan untuk bekerja dengan gambar menggunakan gesture tangan dan jari, mirip salah satu film sci-fi terbaik Minority Report.
Great stuff! But how can we achieve something like that? Well, lets start with something simple. To develop Kinect-based application, we need an SDK, other official SDK from Microsoft, or the open source found in OpenKinect.org site. For the sake of simplicity, I’ll use official Kinect SDK.
Ingredients:
Preparation
- Install Kinect for Windows SDK. Cukup double click pada file installer yang sudah di-download, misalnya: KinectSDK64.msi, dan ikuti petunjuk selanjutnya.
- Install ketiga file terkait dengan Microsoft Speech SDK (jika diperlukan untuk fungsionalitas pengenalan suara).
- Extract Coding4fun Kinect Toolkit (Coding4Fun.Kinect.zip). Di dalamnya akan ditemukan 2 dll penting: Coding4Fun.Kinect.WinForm.dll dan Coding4Fun.Kinect.Wpf.dll. Masing-masing berkaitan dengan apakah kita ingin men-develop aplikasi berbasis Windows Form atau Windows Presentation Foundation (WPF).
Let’s Code
1. Fire up Visual Studio 2010, dan buat project baru (File –> New –> Project). Kali ini kita membuat aplikasi berbasis WPF, so make sure untuk memilih WPF Application seperti dialog berikut.
2. Add Reference ke Microsoft.Research.Kinect dan Coding4Fun.Kinect.Wpf (karena kita membuat WPF application).
Klik kanan pada project di dalam Solution Explorer. Lalu muncul Add reference dialog, cari Microsoft.Research.Kinect, dan klik OK.
Untuk menambahkan referensi ke Coding4fun.Kinect.Wpf, buka Add reference dialog. Lalu Browse dan cari file dll tersebut. Jika kedua library di atas berhasil di-add reference, akan tampil seperti ini pada group References di dalam project.
3. Lets design the user interface. Double klik pada MainWindow,xaml (pada Solution Explorer), dan tulis code XAML berikut.
<Window x:Class="KinectCamAndTilt.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Height="334" Width="842"
Loaded="Window_Loaded" Closed="Window_Closed">
<Grid Height="280
">
<Image Height="240" HorizontalAlignment="Left" Margin="20,20,0,0"
Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="320" />
<Image Height="240" HorizontalAlignment="Left" Margin="359,20,0,0"
Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="320" />
<Button Content="Up" Height="35" HorizontalAlignment="Left"
Margin="733,20,0,0" Name="button1" VerticalAlignment="Top"
Width="75" Click="button1_Click" />
<Button Content="Reset" Height="35" HorizontalAlignment="Left"
Margin="733,75,0,0" Name="button2" VerticalAlignment="Top"
Width="75" Click="button2_Click" />
<Button Content="Down" Height="35" HorizontalAlignment="Left"
Margin="733,130,0,0" Name="button3" VerticalAlignment="Top"
Width="75" Click="button3_Click" />
</Grid>
</Window>
Dan akan didapatkan tampilan kira-kira seperti di bawah ini. Pada code XAML di atas, dituliskan 5 control:
- image1 (kiri): untuk menampilkan video stream dari Kinect
- image2: untuk menampilkan depth steam
- button1: untuk menaikan sudut elevasi Kinect
- button2: untuk me-reset sudut elevasi
- button3: untuk menurunkan sudut elevasi
4. Mari tulis code untuk MainWindow,xaml.cs
a. Pertama, make sure untuk menuliskan using statement seperti ini:
using Microsoft.Research.Kinect.Nui;
using Coding4Fun.Kinect.Wpf;
b. Instansiasi kelas Runtime. Kelas ini bisa dianggap sebagai instance dari sensor Kinect dan sebagai pintu gerbang untuk mengakses fungsionalitasnya. Jadikan runtime sebagai global variable.
Runtime runtime = new Runtime();
c. Tulis code pada event handler Window Loaded dan Closed:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
runtime.Initialize(RuntimeOptions.UseColor | RuntimeOptions.UseDepth);
runtime.VideoFrameReady += new EventHandler<ImageFrameReadyEventArgs>
(runtime_VideoFrameReady);
runtime.DepthFrameReady += new EventHandler<ImageFrameReadyEventArgs>
(runtime_DepthFrameReady);
runtime.VideoStream.Open(ImageStreamType.Video, 2,
ImageResolution.Resolution640x480,
ImageType.Color);
runtime.DepthStream.Open(ImageStreamType.Depth, 2,
ImageResolution.Resolution320x240,
ImageType.Depth);
runtime.NuiCamera.ElevationAngle = 0;
}
private void Window_Closed(object sender, EventArgs e)
{
runtime.Uninitialize();
}
d. Lalu handle event VideoFrameReady dan DepthFrameReady, seperti berikut:
void runtime_VideoFrameReady(object sender, ImageFrameReadyEventArgs e)
{
image1.Source = e.ImageFrame.ToBitmapSource();
}
void runtime_DepthFrameReady(object sender, ImageFrameReadyEventArgs e)
{
image2.Source = e.ImageFrame.ToBitmapSource();
}
e. Handle event click untuk ketiga button di atas:
private void button1_Click(object sender, RoutedEventArgs e)
{
//Camera.ElevationMaximum = +27 degree
if (runtime.NuiCamera.ElevationAngle + 5 > Camera.ElevationMaximum)
return;
runtime.NuiCamera.ElevationAngle += 5;
}
private void button2_Click(object sender, RoutedEventArgs e)
{
runtime.NuiCamera.ElevationAngle = 0;
}
private void button3_Click(object sender, RoutedEventArgs e)
{
//Camera.ElevationMinimum= -27 degree
if (runtime.NuiCamera.ElevationAngle - 5 < Camera.ElevationMinimum)
return;
runtime.NuiCamera.ElevationAngle -= 5;
}
5. Let’s try it. Tekan F5 dan seharusnya akan tampil:
- Video kiri menampilkan video stream dari Kinect
- Video kanan menampilkan depth steam. Depth stream akan memperlihatkan kedalaman (jarak) dari setiap pixel ke sensor Kinect.
- Button Up: untuk menaikan sudut elevasi Kinect, agar Kinect “melihat” ke atas. Sudut maksimum adalah +27 derajat.
- Button Reset: untuk me-reset sudut elevasi (0 derajat).
- Button Down: untuk menurunkan sudut elevasi. Sudut minimum adalah –27 derajat.
That’s it. You can download the complete source code here:
Enjoy!