GGaammee TTeebbaakk KKaarrttuu ddeennggaann …ilmukomputer.org/wp-content/uploads/2010/08/puja-multipointpart2.pdf · pengembangan aplikasi berbasiskan Multipoint menggunakan Visual

Komunitas eLearning IlmuKomputer.Com

Copyright © 2003-2007 IlmuKomputer.Com

1

GGaammee TTeebbaakk KKaarrttuu ddeennggaann WWiinnddoowwss

MMuullttiippooiinntt SSDDKK ((PPaarrtt IIII))

Puja Pramudya [email protected]

http://limaapril.wordpress.com

Microsoft ® Multipoint TM

SDK merupakan sebuah framework yang menyediakan lingkungan

pengembangan dimana para developer dapat mengembangkan aplikasi yang memungkinkan

hingga 250 mouse secara simultan bekerja dalam satu komputer. Multipoint SDK terutama

digunakan untuk membangun aplikasi edukasi untuk sekolah-sekolah yang memiliki

keterbatasan dalam hal infrastruktur teknologi sehingga makin banyak siswa-siswa yang dapat

bersentuhan dengan komputer. Pilot program ini sudah diujicobakan di India oleh Microsoft

Research menunjukkan manfaat dari teknologi ini untuk beberapa subjek, teknologi

pembelajaran kolaboratif seperti Mutlipoint meningkatkan proses pembelajaran jika

dibandingkan dengan skenario satu siswa satu komputer.

Tidak perlu bingung dengan aplikasi-aplikasi dimana banyak orang dapat mengontrol banyak

mouse untuk melakukan kegiatan operasional dengan komputer. Pada kasus-kasus seperti itu,

sistem tidak dapat mengidentifikasi mouse mana yang menyebabkan perubahan, dan secara

umum tidak terdapat kebebasan untuk mengontrol beragam alat input tersebut. Multipoint

adalah teknologi yang memungkinkan developer membangun aplikasi yang memanfaatkan

banyak mouse, termasuk kemampuan untuk mengetahui event dari pengguna yang berbeda

secara independen dan melakukan permission yang berbeda-beda untuk setiap mouse.

Kebutuhan Perangkat Lunak Dan Keras Multipoint SDK ditulis untuk pemrograman Visual C# sehingga banyak samples ditulis dengan

menggunakan C#. Akan tetapi dengan menggunakan Visual Studio, sangat memungkinkan

Lisensi Dokumen: Copyright © 2003-2007 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.



2

pengembangan aplikasi berbasiskan Multipoint menggunakan Visual C++ atau Visual Basic

Perangkat Keras

Kebutuhan perangkat keras diperoleh dari resource yang diperlukan untuk lingkungan

pengembangan dan go-live. Berikut adalah yang disarankan :

Komputer (sebuah komputer, Pentium 4 telah diuji dengan sukses, komputer yang

prosessornya lebih lambat belum pernah dilakukan ujicoba)

Dua hingga empat mouse untuk pengujian

USB port / USB Hub

RAM minimal 128 MB

RAM video minimal 16 MB

Video card resolusi minimal 800x 600 ( dan warna 32-bit sangat disarankan)

Perangkat Lunak

Lingkungan pengembangan sangat disarankan dengan menggunakan Microsoft Expression

BlendTM dengan Visual Studi 2005 atau 2008. Kemudian kebutuhan minimal ialah :

Windows Vista® disarankan meski telah diujicobakan dan berjalan dengan baik di

Windows® XP SP2.

.NET Framework versi 3.0 (minimal)

Visual Studio 2005 dengan ekstensi WPF telah terinstall.

Multipoint SDK akan meng-install template yang sesuai pada Visual Studio akan tetapi SDK ini

tidak mendukung pengembangan Windows form biasa.

Instalasi Multipoint SDK

Multipoint SDK dapat didownload dari Microsoft Download Center di alamat url

http://www.microsoft.com/downloads/details.aspx?FamilyID=A137998B-E8D6-4FFF-B805-27

98D2C6E41D&displaylang=en.

Make it into Multiplayer !

Menambahkan Referensi Yang Dibutuhkan

Untuk memulai pemrograman menggunakan Multipoint SDK, tambahkan assembly dibutuhkan.

Pada jendela solusi, Pilih References -> Klik Kanan -> Add Reference -> Pilih Tab Browse

-> Cari file binary Multipoint SDK

http://www.microsoft.com/downloads/details.aspx?FamilyID=A137998B-E8D6-4FFF-B805-2798D2C6E41D&displaylang=en

http://www.microsoft.com/downloads/details.aspx?FamilyID=A137998B-E8D6-4FFF-B805-2798D2C6E41D&displaylang=en



3

Secara default SDK terinstall pada path C:\Program Files\Microsoft MultiPoint SDK\Bin

Inisiasi Multipoint Sebelum sebuah aplikasi dapat menerima input dari banyak mouse, Multipoint SDK harus

diinisialisasi. Untuk melakukan ini , aplikasi harus menginisialisasi Multipoint SDK objek

danmengasosiasikannya dengan sebuah jendela aplikasi WPF. Event loaded dari jendela

utama aplikasi adalah cara yang disarankan dengan mengikuti langkah-langkah berikut :

Deklarasi dan set Window.Loaded event handler. Inisialisasi harus dillakukan hanya ketika

Window sudah di load.

Panggil fungsi Initialize pada Mutlipoint SDK objek, dan window yang aktif menjadi parameter

inputnya. Secara internal, akan dilakukan proses berikut :

Mendaftarkan window yang aktif untuk berkomunikasi dengan SDK, window mana

yang harus memonitor Multipoint mouse events. Karena SDK memerlukan window

yang bertindak sebagai parent yang bertanggung jawab secara visual.

Mendaftarkan mouse. Proses akan mengenumerasi melalui seluruh alat input yang

terdaftar dan membangun koleksi mouse yang tersedia untuk aplikasi.

Multipoint tidak dapat menerima input dari trackpad pada sebuah laptop sehingga untuk

pembangunan dan testing aplikasi sangat disarankan menggunakan USB mouse

Menggambar sebuah mouse device untuk setiap mouse, dan meng-assign pointer

Multipoint standard untuk masing-masing mouse yang terpasang.



4

Menyembunyikan pointer sistem. Pada aplikasi Multipoint, pointer sistem tidak

digunakan sehingga lebih baik disimpan untuk menghindari kebingungan.

Tambahkan :

using Microsoft.MultiPoint.SDK;

Kode untuk inisialisasi adalah sebagai berikut :

void Window1_Loaded(object sender, RoutedEventArgs e)

{

InitCard();

MultiPointSDK.Instance.Initialize(this);

Utility.InitSoal();

CurrentSoal = Utility.RandomSoal();

UpdateSoal();

//kocok kartu

Utility.AssignCard(ListOfCard);

}

Tekan F5 untuk melihat hasilnya.

Dapat kita lihat terdapat 2 pointer berwarna hitam pada bagian pojok kanan atas aplikasi. Hal ini

menunjukkan inisiasi telah berhasil kita lakukan. Sekarang kita akan melanjutkan pekerjaan

kita.



5

Menon-aktifkan Aplikasi

Ketika multipoint mouse sudah aktif, kita tidak dapat melakukan hal-hal yang biasa kita lakukan

menggunakan kursor karena kontrol WPF pada umumnya secara default tidak

“multipoint-aware”. Karena itu untuk menon-aktifkan aplikasi kita akan menggunakan

key_down event handler.

public Window1()

{

InitializeComponent();

ListOfCard = new List<Card>();

this.Loaded += new RoutedEventHandler(Window1_Loaded);

this.KeyDown += new

System.Windows.Input.KeyEventHandler(Window1_KeyDown);

}

void Window1_KeyDown(object sender,

System.Windows.Input.KeyEventArgs e)

{

if (e.Key == Key.Escape)

{

App.Current.Shutdown();

}

}

Membuat Kelas Player

Untuk memodelkan para pemain yang bermain pada game tebak kartu ini, mari kita buat sebuah

kelas yang merepresentasikan pemain dengan hal-hal yang perlu disimpan seperti nama, mouse

device yang berasosiasi dengan pemain, nilai dan jawaban pemain.

Pada jendela solusi, pilih Project -> Klik Kanan -> Add Class -> Beri nama Player.cs



6

using System.Text;

using Microsoft.MultiPoint.CommonTypes;

namespace MultipointCardGuess

{

class Player

{

public DeviceInfo MultipointMouse;

public string Name;

public int Score;

public string Guessed;

public Player()

{ }

public Player(DeviceInfo mm)

{

MultipointMouse = mm;

}

}

}

Object multipoint mouse bertipe DeviceInfo. Jangan lupa untuk menambahkan referensi

using Microsoft.MultiPoint.CommonTypes . Tambahkan beberapa method untuk melakukan

reset nilai score, reset jawaban pemain dan fungsi yang dirasakan perlu. Ini akan berguna pada

saat permainan berjalan nantinya.

/// <summary>

/// Mengembalikan nilai pemain menjadi 0

/// </summary>

public void ResetScore()

{

Score = 0;

}

/// <summary>

/// Mereset tebakan jawaban pemain

/// </summary>

public void ResetGuessed()

{

Guessed = String.Empty;

}

public void AddScore(int Point)

{

Score += Point;



7

}

public void AddGuessed(string Guessed)

{

this.Guessed = Guessed;

}

Menambahkan Kelas PlayerManager

Kelas Player sudah kita implementasi. Namun sekarang kita perlu sesuatu untuk mengatur

segala hal yang berhubungan dengan Player, meng-assign setiap multipoint mouse ke pemain

tertentu, menyembunyikan pointer dan lain-lain. Karena itu kita memerlukan sebuah kelas baru,

dan kelas ini akan kita beri nama PlayerManager.

Pada jendela solusi, pilih project, Klik Kanan -> Add Class -> Beri nama PlayerManager.cs

Untuk implementasi kelas ini, kita akan menggunakan singleton pattern. Sederhananya, dalam

dunia software engineering, singleton adalah sebuah kelas yang hanya memungkinkan kelas

tersebut diinstansiasi sekali selama aplikasi berjalan. Biasanya, kelas singleton tidak

memerlukan parameter untuk diinstansiasi.

Dalam kelas PlayerManager dua field utama yang akan kita simpan adalah instansiasi dari

MultipointSDK dan daftar pemain yang sedang bermain.



8

/// Multipoint object

/// </summary>

public readonly MultiPointSDK MultiPointObject =

MultiPointSDK.Instance;

/// <summary>

/// singleton implementation

/// </summary>

private static PlayerManager instance = new PlayerManager();

/// <summary>

/// daftar seluruh pemain

/// </summary>

public List<Player> PlayerList { get; set; }

/// <summary>

/// Default constructor

/// </summary>

private PlayerManager()

{

PlayerList = new List<Player>();

}

/// <summary>

/// get Instance of PM

/// </summary>

public static PlayerManager Instance

{

get

{

return instance;

}

}

Inisialisasi Player

Kita akan melanjutkan fase inisialisasi aplikasi kita yang kita tinggalkan sejenak tadi. Ketika

Multipoint SDK sudah diaktivasi untuk window game tebak kartu ini, kita harus meng-assign

multipoint mouse yang terdaftar kepada para pemain. Hal ini dapat kita lakukan dengan

mengenumerasi multipoint mouse object pada MultipointSDK.Instance.MouseDeviceList.

Fungsi InisialisasiPlayer ini kita tambahkan pada kelas PlayerManager.



9

public void InisialisasiPlayer()

{

int i = 1;

if (this.PlayerList.Count == 0)

{

foreach (DeviceInfo ml in MultiPointObject.MouseDeviceList)

{

Player p = new Player(ml);

p.Name = String.Format("Pemain {0}", i);

this.PlayerList.Add(new Player(p));

i++;

}

}

}

Pada fungsi ini, saya juga menambahkan satu baris kode untuk memberi nama default bagi para

pemain.

Fungsi Seleksi Warna Cursor

Mungkin ada yang mulai bertanya bagaimana kita membedakan kursor yang satu dengan yang

lainnya, terutama jika sudah cukup banyak orang yang memainkan game ini. Jangan khawatir,

Multipoint SDK telah menyediakan properti untuk memudahkan kita membedakan satu

multipoint mouse dengan yang lainnya. Ada dua cara yang dapat kita lakukan, yaitu memberi

warna kursor yang berbeda, atau memberikan icon image yang berbeda. Pendekatan pertama

adalah yang akan kita lakukan dalam game ini.

Buka kelas Utility lalu tambahkan kode berikut :

public static System.Windows.Media.Color SelectColor(int index)

{

switch (index)

{

case 1:

return Colors.Red;

case 2:

return Colors.Brown;

case 3:

return Colors.Blue;

case 4:

return Colors.Green;

case 5:

return Colors.Yellow;

case 6:

return Colors.Purple;

default:

return Colors.Black;



10

}

}

Fungsi SelectColor mengambil input angka untuk mengembalikan warna yang sudah

didaftarkan. Cara ini mungkin bukan yang paling baik ,tapi setidaknya simpel dan cukup

menjelaskan apa yang ingin dicapai.

Kita gunakan fungsi SelectColor ini pada kelas PlayerManager, modifikasi kode

InisialisasiPlayer menjadi :

public void InisialisasiPlayer()

{

int i = 1;

if (this.PlayerList.Count == 0)

{

foreach (DeviceInfo ml in MultiPointObject.MouseDeviceList)

{

Player p = new Player(ml);

((MultiPointMouseDevice)p.MultipointMouse.DeviceVisual).CursorColor =

Utility.SelectColor(i,p);

p.Name = String.Format("Pemain {0}", i);

this.PlayerList.Add(new Player((DeviceInfo)ml));

i++;

}

}

}

Jangan lupa tambahkan referensi using Microsoft.MultiPoint.MousePlugIn agar tipe

MultiPointMouseDevice dapat dikenali.

Gunakan fungsi InisialisasiPlayer() pada Window1.xaml.cs .

void Window1_Loaded(object sender, RoutedEventArgs e)

{

InitCard();

MultiPointSDK.Instance.Initialize(this);

PlayerManager.Instance.InisialisasiPlayer();

Utility.InitSoal();

CurrentSoal = Utility.RandomSoal();

UpdateSoal();



11

//kocok kartu

Utility.AssignCard(ListOfCard);

}

Tekan F5 untuk melihat hasilnya.

Voila! Ada dua USB Mouse yang saya pasang dan teridentifikasi dan diberi tanda dengan warna

yang berbeda. Sekarang kita sudah dapat membedakan pointer yang ada pada layar.



12

Biografi Penulis Puja Pramudya. Menyelesaikan S1 di Program Studi Teknik Informatika,

Institut Teknologi Bandung tahun 2010. Memiliki ketertarikan di bidang

image processing, e-learning, smart client development dan information

system. Aktif berorganisasi di himpunan mahasiswa dan komunitas INDC,

Microsoft User Group Indonesia (MUGI) Bandung serta Microsoft

Innovation Center ITB. Mendapatkan penghargaan sebagai Juara I Game

Development Contest pada Pagelaran Mahasiswa TIK (gemasTIK) 2009

yang diselenggarakan oleh Dirjen Pendidikan Tinggi (DIKTI) dan Juara I

Software Design pada Microsoft Imagine Cup 2010 yang diselenggarakan

Microsoft Indonesia dan mewakili Indonesia berlaga di Worldwide Final Imagine Cup 2010 di

Warsawa, Polandia. Saat ini mendalami bahasa pemrograman Java dan C# serta teknologi

Windows Presentation Foundation, Silverlight , ASP.NET dan Windows Phone. Aktif menulis

pada blog yang berfokus di teknologi Microsoft di http://geeks.netindonesia.net/blogs/poedja_p/

dan situs blog http://limaapril.wordpress.com .

Kontak :

Y! : poedja_p

Facebook : http://www.facebook.com/poedja

Twitter : @poedja_p

http://geeks.netindonesia.net/blogs/poedja_p/

http://limaapril.wordpress.com/

GGaammee TTeebbaakk KKaarrttuu ddeennggaann …ilmukomputer.org/wp-content/uploads/2010/08/puja-multipointpart2.pdf · pengembangan aplikasi berbasiskan Multipoint menggunakan Visual

Documents