aris_feryanto

WPF Effect: Adding Parameter to Custom Effect

Pada postingan sebelumnya, kita telah mengetahui bagaimana membuat sebuah GrayscaleEffect yang “menghilangkan” warna dari elemen UI. Dalam Effect ini kita tidak menggunakan parameter apapun (hanya <fx:GrayscaleEffect /> saja). Kali ini saya akan mencoba menjelaskan sedikit, bagaimana menambahkan parameter untuk GrayscaleEffect. Kita akan menambahkan parameter GrayStrength yang mengatur seberapa banyak warna yang akan diubah menjadi grayscale. Dan dengan sedikit mengutak-atik, kita bahkan bisa membuat animasi UI yang perlahan-lahan berubah dari berwarna menjadi grayscale, sama seperti Windows XP ketika akan di-shutdown.

KODE SHADER

Dari program yang telah dibuat pada postingan sebelumnya, pertama-tama kita ubah kode Grayscale.fx menjadi seperti di bawah:

sampler2D implicitInput : register(s0);
float grayStrength : register(c0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 color = tex2D(implicitInput, uv.xy);
    float4 newcolor;
    newcolor = (color.r + color.g + color.b) * 0.33333333 * grayStrength;
    newcolor.rgb += color.rgb * (1 - grayStrength);
    newcolor.a = color.a;
    return newcolor;
}

kode shader di atas:

• menambahkan parameter grayStrength pada register “c0”
• mengalikan grayStrength sebagai intensitas warna grayscale, dan
• menambahkan komponen RGB dengan intensitas (1 – grayStrength)

nilai grayStrength adalah bilangan desimal dari 0.0 sampai 1.0.

Kemudian kompilasi lagi kode .fx ini dengan DirectX (fxc.exe) menjadi file .ps dengan cara yang sama seperti pada tutorial sebelumnya.

NB: untuk lebih detail mengenai kode HLSL bisa dilihat di MSDN

PEMBUNGKUS EFFECT DALAM C#

Untuk pembungkus dalam C#, kita cukup menambahkan property GrayStrength, property GrayStrengthProperty, dan kode UpdateShaderValue untuk GrayStrengthProperty dalam konstruktor GrayscaleEffect.

Pada kode di atas, assignment untuk GrayStrengthProperty cukup panjang. Dan terdapat kode seperti

Ini digunakan untuk menyinkronkan penambahan parameter grayStrength pada kode shader Grayscale.fx yang ditempatkan pada (register “c0” == PixelShaderConstantCallback(0) ). Apabila terdapat lebih dari 1 parameter yang ditambahkan, maka bisa digunakan register c1, c2, dst…. Tentu saja dengan penambahan juga pada pembungkus C#.

Setelah selesai menambahkan kode di atas, rebuild project Class Library GrayscaleEffect.

KODE WPF APPLICATION

Sekarang, apabila kita meng-apply GrayscaleEffect pada sebuah image dengan sintaks sebagai berikut:

maka image akan terlihat berwarna, bukan grayscale. Hal ini terjadi karena kita belum mengeset parameter GrayStrength pada kode XAML. Apabila ditambahkan parameter GrayStrength pada XAML seperti di bawah,

maka akan terlihat image berubah menjadi sedikit grayscale, namun masih sedikit berwarna.

ANIMASI EFFECT

Sekarang, bagian serunya. Kita akan membuat animasi image yang perlahan-lahan menjadi grayscale.

Pertama-tama, ubah Effect pada kode XAML

Lalu, tambahkan kode event handler untuk komponen Window pada UI untuk Event Window_Loaded seperti di bawah.

Jalankan program dengan menekan F5, dan lihat image yang perlahan-lahan berubah menjadi grayscale dalam 3 detik ( TimeSpan(0,0,3) ). :D

Share this post: | | | |

WPF Effect: Creating A Custom Effect

Beberapa tutorial berbahasa Inggris tentang WPF Effect yang saya lihat, tidak menampilkan bagaimana langkah-langkah yang cukup jelas untuk membuat Custom Effect. Akhirnya saya mencoba-coba mengutak-atik sana sini di Visual C# 2008 Express Edition saya dan berhasil membuat sebuah Effect yang sederhana. Di sini saya akan mencoba berbagi bagaimana caranya…

Bersiap…

Pertama-tama harus diinstall beberapa tool yang dibutuhkan untuk membuat Custom Effect, yaitu:

• Microsoft Visual C# 2008 (Express Edition)
• Microsoft DirectX SDK

Selain itu, dibutuhkan pengetahuan membuat pixel shader dalam bahasa HLSL yang akan coba saya bahas sedikit nantinya (jika ada waktu :p).

Mulai…!

Custom Effect yang akan kita buat kali ini adalah Grayscale Effect.

  ==>

MEMBUAT SHADER

1. Buka notepad (atau editor kesayangan Anda yang lain)
2. Ketikkan kode program shader berikut:
   
   sampler2D implicitInput : register(s0);

   float4 main(float2 uv : TEXCOORD) : COLOR
   {
       float4 color = tex2D(implicitInput, uv.xy);
       float4 newcolor;
       newcolor = (color.r + color.g + color.b) * 0.33333333;
       newcolor.a = color.a;
       return newcolor;
   }
   
   NB: kode program shader di atas bekerja untuk setiap pixel. newcolor di-set menjadi campuran warna rgb yang intensitasnya dibagi rata 1/3.
   

3. Simpan dengan nama file Grayscale.fx (ingat: gunakan encoding ANSI, jangan unicode, compiler shader dari DirectX hanya bisa mengkompilasi kode dengan encoding ANSI)
4. Buka DirextX SDK Command Prompt, pindahkan CWD (Current Working Directory) ke tempat penyimpanan file .fx sebelumnya.
5. Ketikkan
   
   fxc /T ps_2_0 /E main /Fo Grayscale.ps Grayscale.fx
   
   untuk mengkompilasi file .fx yang telah dibuat dan meng-output kan hasilnya ke Grayscale.ps.

MEMBUAT PEMBUNGKUS EFFECT DI C#

1. Buat project baru di Visual C# 2008, File –> New Project, pilih template Class Library. Beri nama GrayscaleEffect.
2. Rename dokumen Class1.cs menjadi GrayscaleEffect.cs.
3. Tambahkan file .ps yang telah dikompilasi ke dalam project
   
4. Set Property “Build Action” pada file .ps yang telah ditambahkan menjadi Resource
   
5. Tambahkan References “WindowsBase”, “PresentationCore”, dan “PresentationFramework”
   
6. Ketikkan kode berikut dalam file Grayscale.cs
   
   1. using System;
   2. using System.Windows;
   3. using System.Windows.Media;
   4. using System.Windows.Media.Effects;
   6. namespace GrayscaleEffect
   7. {
   8.     public class GrayscaleEffect : ShaderEffect
   9.     {
   10.         public GrayscaleEffect()
   11.         {
   12.             PixelShader =
   13.                 new PixelShader()
   14.                 {
   15.                     UriSource = new Uri("pack://application:,,,/GrayscaleEffect;component/Grayscale.ps")
   16.                 };
   17.             UpdateShaderValue(InputProperty);
   18.         }
   20.         public Brush Input
   21.         {
   22.             get { return (Brush)GetValue(InputProperty); }
   23.             set { SetValue(InputProperty, value); }
   24.         }
   26.         public static DependencyProperty InputProperty =
   27.             ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(GrayscaleEffect), 0);
   28.     }
   29. }
   
   Sedikit penjelasan: Kode di atas membuat kelas GrayscaleEffect yang merupakan turunan dari kelas ShaderEffect. Dalam konstruktornya, property PixelShader di-set dengan shader dari file .ps hasil kompilasi fxc sebelumnya. Property Input dan InputProperty (DependencyProperty-nya) dari kelas ini merupakan “penghubung” dengan implicitInput dalam kode program shader sebelumnya.
   
   
7. Build project dengan menekan F6

MEMBUAT APLIKASI WPF YANG MENGGUNAKAN EFFECT YANG TELAH DIBUAT

1. Tambahkan project baru ke dalam solution, Klik kanan solution –> Add –> New Project.
   
   Karena project library GrayscaleEffect tadi belum disimpan, maka VS akan menanyakan tempat penyimpanan. Pilih directory yang diinginkan, simpan, dan lanjutkan membuat project baru.
2. Pilih template WPF Application, beri nama GrayscaleTest.
3. Tambahkan Reference GrayscaleEffect pada project, Klik kanan pada References GrayscaleTest –> Add Reference –> Tab Projects –> GrayscaleEffect –> OK
4. Tambahkan namespace dalam kode XAML untuk library GrayscaleEffect yang telah dibuat.
   1. xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
5. Tambahkan sebuah image dari file gambar ke dalam Grid yang telah ada secara default. Kemudian tambahkan property Grid.Effect sebagai berikut:
   1. <Grid.Effect>
   2.     <fx:GrayscaleEffect />
   3. </Grid.Effect>
6. Kode XAML keseluruhannya akan mirip seperti berikut:
   1. <Window x:Class="GrayscaleTest.Window1"
   2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4.    xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
   5.    Title="Window1" Height="300" Width="300">
   6.     <Grid>
   7.         <Grid.Effect>
   8.             <fx:GrayscaleEffect />
   9.         </Grid.Effect>
   10.         <Image Margin="12,12,66,100" Name="image1" Stretch="Fill" Source="nature.jpg" />
   11.     </Grid>
   12. </Window>
7. Set GrayscaleTest sebagai StartupProject
   
8. Jalankan dengan menekan tombol F5. Lihat Image berubah warna menjadi grayscale.

Demikian tutorial membuat GrayscaleEffect. Pada postingan selanjutnya, saya akan membahas bagaimana menganimasikan GrayscaleEffect ini menjadi seperti background Windows XP yang menjadi grayscale saat akan di shutdown.

Share this post: | | | |

WPF Effect: Introduction

Tergolong sesuatu yang sudah cukup lama ada dalam WPF, tapi saya penasaran dan ingin mencoba mengutak-atik. Setelah menemukan beberapa referensi (di bawah), saya tertarik sekali untuk mencoba “GPU-accelerated custom effect”. ^^

Dengan adanya .NET framework 3.5 SP1, banyak fitur dan peningkatan telah ditambahkan. Salah satunya untuk memperkaya user exprience dalam hal interface untuk WPF. GPU (Graphics Proccessing Unit) pada perangkat komputer telah semakin berkembang. Hal inilah yang menjadi faktor pendukung sehingga pada .NET framework 3.5 SP1 ini, WPF mendukung “GPU-accelerated effect” (untuk selanjutnya disebut “Effect”). Untuk fitur ini, WPF 3.5 SP1 hanya mendukung Pixel Shader versi 2.0 dan tidak ada dukungan untuk Vertex Shader.

Contoh Effect sederhana

Contoh Effect yang sederhana dan telah built-in di dalam WPF adalah DropShadowEffect. Untuk membuat sebuah label seperti di bawah

menjadi seperti ini

cukup dilakukan dengan menambahkan property Effect dari label dalam kode XAML seperti di bawah.

Ini hanya satu contoh dari Effect yang sudah built-in. Developer bisa mengembangkan berbagai macam Effect sendiri. Beberapa developer telah membuat library berisi Effect yang umum digunakan di http://www.codeplex.com/wpffx.

Apa bedanya dengan BitmapEffect?

Ketika WPF dirilis, awalnya terdapat sebuah kelas bernama BitmapEffect yang pada dasarnya sama seperti Effect. Hanya saja terdapat isu performansi untuk BitmapEffect. BitmapEffect menggunakan thread UI untuk memproses, sehingga akan timbul masalah saat efek yang digunakan cukup kompleks. Penggunaan CPU akan meningkat. Sedangkan Effect memanfaatkan kemampuan GPU untuk “mempercantik” UI program. Semua proses menggambarkan Effect, ditangani oleh GPU, sehingga tidak memberikan kerja “extra” bagi CPU.

Komponen apa saja yang bisa diberi Effect?

Ini salah satu hal yang menarik di WPF. Effect bisa diaplikasikan pada setiap komponen UI yang merupakan turunan dari UIElement (Grid, Panel, Button, Image, dll). Effect bekerja per pixel. Ketika sebuah Effect diaplikasikan pada UIElement, WPF me-rasterize UIElement pada ukuran tertentu menjadi bitmap, dan kemudian mengaplikasikan Effect untuk setiap pixel bitmap nya.

Dengan memanfaatkan kemampuan pemrosesan GPU, aplikasi WPF bisa menggunakan Effect yang membuat:

• Modifikasi warna
• Efek gerakan
• Efek yang menghasilkan pola-pola fraktal yang dihasilkan menggunakan algoritma
• Efek yang multiple-input

Effect ditulis dalam bahasa HLSL (High Level Shading Language), dikompilasi dengan DirectX SDK (fxc.exe), kemudian dibungkus dengan kode C# (atau VB, dalam hal ini saya menggunakan C#), dan akhirnya siap digunakan dalam UI.

Pada postingan berikutnya, saya akan mencoba menjelaskan step by step untuk membuat Custom Effect. Jika ada kekurangan, mohon kritik dan sarannya..

Sumber:
Greg Schechter's Blog
Membuat Shader Effect pada WPF by Wely

Share this post: | | | |

Windows Live Writer – GREAT Tool for Blogging..!!

Tadi pagi, isenk2 melihat-lihat postingan blog di geeks, saya tidak sengaja melihat postingan mengenai server geeks yang pernah down karena disk failure (para sesepuh yang uda lama pasti tau n salut buat tim Gulver atas dedikasinya ^^). Pas baca,

“Semoga para blogger baik di geeks maupun wss-id memanfaatkan fasilitas Windows Live Writer, sehingga masih memilki backup di hardisk masing-masing dan mohon untuk melakukan reposting.”

saya langsung penasaran dengan Windows Live Writer.. Apa itu??

Trus, lanjut baca2 lagi komen2 dari geeks yang lain, baca komen dari Jimmy Chandra,

“Untung ngeblog pake Windows Live Writer, gua bisa recover semua post yang hilang, hehehe.  Tinggal direpublish aja :)”

Wah, makin penasaran buat nyobain Windows Live Writer.

Langsung download Windows Live Writer di http://download.live.com/writer. Setup pertama kali juga gampang, tinggal masukin URL blog ini, username, n password. Setting yang telah ada di blog juga diunduh ke dalam Writer (termasuk setting tampilan, themes), sehingga kita bisa melakukan editing dengan lingkungan yang sama seperti di blog (font, themes, lebar page, dll). Untuk melihat hasil editan, tersedia fasilitas preview. Kita juga bisa mengedit kode html dari post kita.

Untuk publishing, cukup klik tombol Publish, dan kita bisa langsung melihat post yang baru saja kita lakukan. Jika ingin membuka postingan yang sudah ada juga bisa. Tinggal klik tombol Open, dan pilih blog yang ingin diedit postingannya.

Keren deh Windows Live Writer…! ^^

NB: Postingan ini dibuat n dipublish pake Writer. :)

Share this post: | | | |

Membuat jam sederhana dengan WPF – Part 2 (DispatcherTimer untuk update UI)

Dari tutorial bagian sebelumnya, kita tambahkan kode untuk update jarum jam dengan DispatcherTimer.

DispatcherTimer digunakan agar tidak perlu lagi menambahkan kode untuk menangani masalah UI yang memiliki thread tersendiri pada aplikasi WPF (apabila menggunakan Timer biasa).

Pertama-tama tambahkan kode untuk inisialisasi sudut setiap jarum jam di konstruktor Window1 setelah inisialisasi komponen. Selanjutnya buat objek DispatcherTimer yang baru untuk mengupdate jarum jam setiap detiknya. Kita tambahkan EventHandler yang kita beri nama timer_Tick untuk event Tick. Dalam handler ini, kita update sudut dari setiap jarum jam.

Demikian tutorial membuat jam pada part 2. Semoga bermanfaat...

Pada bagian selanjutnya, kita akan menggerakkan jarum jam dengan menggunakan animasi.

Share this post: | | | |

Membuat jam sederhana dengan WPF – Part 1 (UI)

User Interface (UI) yang lebih baik. Itulah salah satu nilai lebih yang dimiliki WPF. Berikut ini merupakan tutorial membuat jam sederhana dengan WPF. Dalam tutorial ini akan dipelajari bagaimana membuat elemen UI secara visual (dengan drag n drop dari toolbox dan mengubah-ubah nilai property), melalui kode XAML, dan melalui kode C#.
Karena ditujukan untuk pemula WPF (karena saya juga masih pemula ), maka akan terdapat penjelasan langkah-langkah yang cukup detail.
Sedikit pengenalan WPF. Dalam WPF, UI dan kode merupakan dua bagian yang terpisah. UI secara umum dibangun di atas kode XAML (walaupun dapat juga melalui kode). Sedangkan kode merupakan file tersendiri tergantung bahasa yang digunakan. UI dan kode yang terpisah ini mengizinkan developer dan designer dapat bekerja secara paralel yang membuat waktu pengembangan aplikasi menjadi lebih singkat. XAML menggunakan format XML yang sekarang telah banyak digunakan. Dalam file XAML, terdapat tag-tag yang mendeskripsikan elemen UI aplikasi. Elemen yang dapat dideskripsikan dalam XAML cukup banyak, meliputi bentuk-bentuk sederhana (line, rectangle, ellipse, dll), komponen seperti dalam aplikasi windows berbasis form (textbox, button, label, dll), hingga Viewport3D untuk menampilkan objek 3 dimensi dalam UI.
Pertama-tama, buka Microsoft Visual C# (yang saya gunakan Microsoft Visual C# 2008 Express Edition). Buat project baru (Ctrl + Shift + N), pilih Template WPF Application, dan beri nama Clock.

Klik tombol OK. Akan terbentuk 2 tab baru, yaitu Window1.xaml (desain UI) dan Window1.xaml.cs (kode). Secara default, akan ditampilkan tab Window1.xaml. Klik kanan pada Window1 pada layar Design, pilih Properties, kemudian ganti Title menjadi Clock.

Selanjutnya, ganti <Grid> dan </Grid> pada layar XAML (bagian bawah) yang merupakan elemen default menjadi <Canvas> dan </Canvas> karena kita hanya akan menggambar jam di dalamnya. Grid lebih diperuntukkan bila ingin menata elemen UI berdasarkan kolom dan baris.
Pilih Ellipse dari Toolbox di sebelah kiri, kemudian buat sembarang Ellipse dalam area Canvas. Ubah Canvas.Left = 40, Canvas.Top = 35, serta Height dan Width-nya menjadi 200. Dengan cara yang sama, buat sebuah Ellipse lagi dengan Canvas.Left = 35, Canvas.Top = 30, Height dan Width 210.
Selanjutnya kita akan mengedit UI melalui XAML. Kita akan menambahkan warna pada elemen-elemen yang telah dibuat. Tambahkan kode berikut ke bagian XAML.

Dua buah Ellipse yang telah kita buat, merupakan background dan highlight untuk jam. Dengan mengatur property Ellipse.Fill, ellipse1 diisi dengan gradient yang linear dari warna #555555 (Red = 0x55, Green = 0x55, Blue = 0x55) ke warna #000000 (hitam). Sedangkan ellipse2 diisi dengan gradient radial untuk effek bayangan dalam jam dan bingkai jam berwarna putih.
Selanjutnya kita akan menambahkan jarum jam. Berikut kodenya:

Kode yang ditampilkan di sini hanya untuk membuat jarum penunjuk jam, karena untuk menit dan detik pada dasarnya sama. Di sini jarum jam dibangun dari Rectangle. Rectangle dipercantik dengan menambahkan RadiusX dan RadiusY (sudutnya tidak siku-siku) dan efek drop shadow. Untuk menempatkan jarum jam pada posisi di tengah-tengah jam, dilakukan transformasi. Ada 3 buah transformasi yang perlu dilakukan:
1.    Translasi untuk menempatkan sudut kiri atas Rectangle sebagai titik pusat rotasi jarum jam.
2.    Rotasi yang diberi nama “hour” (agar bisa diakses dari kode C#) untuk mengatur sudut putaran jarum jam (digunakan dalam tutorial part 2).
3.    Translasi untuk menempatkan pusat rotasi jarum jam di tengah-tengah bingkai jam (berdasarkan perhitungan).
Buat untuk menit dan detik dengan cara yang sama, lalu menyesuaikan ukuran dan property lainnya.
Selanjutnya kita akan menggambar penanda jam (penanda angka 1-12). Karena akan merepotkan apabila menggambar pada layar langsung (sulit mengatur posisi) dan mengedit kode XAML (kode terlalu panjang karena ada 60 elemen), maka kita akan menggambar UI melalui kode C#. Pertama-tama tambahkan elemen Canvas terlebih dahulu pada XAML seperti di bawah ini:

Kemudian tambahkan potongan kode berikut dalam kode C#.

Dalam kode ini kita membuat lingkaran dengan ukuran yang lebih besar untuk penanda setiap 5 menitnya, mentransformasikan posisinya, dan menambahkannya untuk digambar dalam Canvas cvsMarker.
Untuk melihat hasilnya, jalankan dengan menekan F5.

Demikian tutorial membuat UI jam pada part 1. Semoga bermanfaat...
Pada bagian selanjutnya, kita akan menggerakkan jarum jam.

Share this post: | | | |