Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Using Tag in Silverlight Deep Zoom

Bukan rahasia lagi untuk membuat Silverlight Deep Zoom seperti Hard Rock Memorabilia atau Obama Deep Zoom cukup dengan menggunakan Deep Zoom Composer (walau tentunya untuk kasus Hard Rock Memorabilia terdapat code tambahan).

Pada Hard Rock Memorabilia, dapat kita lihat  gambar-gambar dikelompokkan berdasarkan artis-artisnya, sehingga ketika user mengklik menu nama artis yang berada pada sisi kiri, maka secara otomatis gambar-gambar akan difilter berdasarkan artis yang dipilih.

__01

Tulisan ringan kali ini akan membuat hal yang mirip seperti di atas dengan menggunakan Deep Zoom Composer dan Visual Studio 2008.

Pertama akan dibuat Silverlight Deep Zoom sederhana dengan menggunakan Deep Zoom Composer. Seperti telah diketahui bahwa untuk membuat Silverlight Deep Zoom diperlukan 3 langkah, yaitu :

__02

Import, untuk mengimport gambar yang akan digunakan.

Compose, mengatur tata letak gambar. Kita cukup men-drag-n-drop gambar-gambar untuk disusun sesuai selera.

__03

Pada contoh misalnya sudah disusun 4 gambar, kita bisa mengelompokkan ke empat gambar tersebut dengan memberikan nilai Tag yang sama (liat lingkaran merah). Bila setiap gambar unik, maka kita dapat memberikan nilai Tag yang unik juga untuk setiap gambar.

Setelah Proses “Compose” selesai, langkah yang terakhir adalah Export.

__04

Pilih tab Silverlight Export, dan klik tombol Export, maka akan di dapati kotak opsi berikut :

__05

Bila tidak sabar untuk mencoba hasil gamba-gambar yang bisa di zoom-in dan zoom-out, maka bisa langsung diklik Preview in Browser, tetapi karena kita akan sedikit mengotori tangan dengan pekerjaan penulisan code (kalau ada), maka kita bisa memilih View Project Folder.

Mari kita tengok sejenak apa yg ada di dalam Project Folder, kita akan mendapati dua folder yaitu : DeepZoomProject & DeepZoomProjectWeb. Gambar dan informasi tag-tag yang telah diberikan pada gambar-gambar sebelumnya disimpan pada project DeepZoomProjectWeb pada folder ClientBin > GeneratedImages.

__08 

Pada folder yg ada di atas, tersimpan gambar-gambar yg telah tepotong-potong. Sedangkan pada file Metadata.xml terdapat informasi yang menyimpan nilai tag pada setiap gambar. Berikut ini contoh isi dari file Metadata.xml.

<Image>
    <FileName>C:\Users\M Reza Faisal\Documents\Expression\Deep Zoom Composer Projects\ModelsDeepZoom\source images\endlesslines.jpg</FileName>
    <x>0.139386243187913</x>
    <y>0</y>
    <Width>0.116093376118841</Width>
    <Height>0.247035362002187</Height>
    <ZOrder>2</ZOrder>
    <Tag>Esta</Tag>
  </Image>
  <Image>
    <FileName>C:\Users\M Reza Faisal\Documents\Expression\Deep Zoom Composer Projects\ModelsDeepZoom\source images\freedom.jpg</FileName>
    <x>0</x>
    <y>0.278272556100677</y>
    <Width>0.131690525415852</Width>
    <Height>0.295775325012466</Height>
    <ZOrder>3</ZOrder>
    <Tag>Esta</Tag>
  </Image>

Langkah selanjutnya adalah dengan mengunduh solution DeepZoomMetadata berikut ini. Ada beberapa file yang telah dimodifikasi pada solution ini agar bisa digunakan pada SL 3.0 Beta 1 (dan semoga juga bisa digunakan pada SL 2.0 RTW) karena sebelumnya solution ini didapat saat SL 2.0 masih dalam versi Beta 2.

Setelah file di atas diunduh, dan dibuka dengan VS2008 atau Visual Web Developer, maka dapat dilihat solution explorer seperti berikut :

__09

Kalau diperhatikan, pada folder ClientBin tidak ditemukan folder GeneratedImages, sebagai gantinya kita cukup copy folder GeneratedImages dari olahan Deep Zoom Composer, kemudian paste folder tersebut ke folder ClientBin via VS2008 (yang telah dilingkari merah). Build solution dan pilih DeepZoomMetadataTestPage.html untuk “di view in browser”. Dan hasilnya akan bisa dilihat seperti pada gambar berikut ini.

__10

Saat Salah satu nilai pada ListBox dipilih, misalnya Esta maka hanya gambar-gambar dengan tag Esta saja yang akan ditampilkan.

Selamat mencoba dan selamat menikmati akhir pekan…dengan ngoding, belajar dan bekerja :)

Share this post: | | | |
Posted: Jun 06 2009, 07:48 PM by reyza | with 4 comment(s)
Filed under:

Comments

Wely said:

Esta tuh siapa yah?

Kyknya kenal? Hahaha

# June 7, 2009 7:03 AM

reyza said:

Sudah diduga, pasti lo yg pertama komentar :)

# June 7, 2009 8:14 AM

agusto said:

Mantap Bro, tag nya.Bener kata welly.hehehe

# June 8, 2009 1:54 AM

dans said:

mantafff, udah kecolongan start  nih..

# June 9, 2009 8:54 AM