Rangkaian proses yang akan dilakukan oleh software ini adalah baca gambar background, baca gambar button, mengatur gambar interface, dan simpan hasil interface yang baru. Proses ini dapat digambarkan dengan blok diagram sebagai berikut:
Baca gambar untuk background
Simpan interface ke file Mengatur gambar file Baca gambar untuk button
Gambar 3.2. Gambar Block Diagram
3.1. Alur proses software
Software ini akan memliki dua bagian utama, bagian background untuk membuka file gambar background. Bagian button untuk membuka file gambar button, mengatur gambar button untuk kondisi idle, pressed, disabled, dan mouse over, mengatur posisi button, dan menghapus button. Proses utama untuk membuat interface yang baru dapat dilihat pada flowchart berikut :
Gambar 3.3. Gambar flowchart utama
3.1.1. Proses pengolahan background
Proses ini diawali dengan memilih menu background untuk membuka gambar background. Proses ini dapat juga diawali dari membuka interface yang ada. Pengaturan letak background dilakukan melalui mouse dengan cara drag.
Jika ingin menghapus gambar background, dapat dilakukan dengan menekan tombol delete pada keyboard setelah memilih background. Setelah interface yang baru diimplementasikan pada Delphi, form yang baru merupakan gambar background dari interface yang telah dibuat.
Start
End Open main form
Start interface design
Save interface to file Load existing
interface? Yes Load existing interface
No
Gambar 3.4. Gambar flowchart untuk pengolahan background 3.1.2. Proses pengolahan button
Proses ini akan dijalankan bila user menjalankan perintah load idle button. Proses ini meliputi membuka gambar bitmap untuk button keadaan idle, memilih button yang ingin dimodifikasi melalui combo box, memilih gambar bitmap untuk kondisi pressed, mouse over, dan disabled. Untuk mengatur letak button, digunakan cara yang sama dengan background, yaitu dengan cara drag dari mouse. Untuk menghapus gambar button, dapat dilakukan dengan menekan tombol delete pada keyboard setelah memilih button yang akan dihapus menggunakan mouse. Berbagai macam gambar pada button dibutuhkan untuk mendefinisikan keadaan button ketika interface ini dipakai dalam pemrograman.
Pada program Delphi disediakan beberapa event untuk button. Beberapa event tersebut diwakilkan melalui gambar yang berbeda pada pembuatan interface.
Keadaan button yang sering dipakai adalah keadaan ketika idle, mouse over, pressed, dan disabled. Sehingga pada program pembuat interface ini, hanya keadaan-keadaan tersebut yang dibuat untuk dapat diimplementasikan pada program Delphi.
Start
End
Load background/interface
Setting background
Gambar 3.5. Gambar flowchart untuk pengolahan button
3.2. Modul-modul pembentuk program
Berdasarkan alur proses pada gambar 3.5, terdapat beberapa modul yang digunakan untuk membentuk program ini. Modul-modul tersebut adalah modul penyimpanan interface dan modul pembuatan form tidak beraturan.
3.2.1. Modul pembuatan form tidak beraturan
Sebuah form pada dasarnya hanya terdiri dari sebuah area yang dinamakan region. Besar region dapat bervariasi tetapi bentuknya tetap persegi.
Start
Load new button or old interface ?
Choose from existing button
Load pressed, mouse over, and disabled button
Setting button
End Yes
No
Gambar 3.6. Penjelasan tentang bentuk region secara umum
Untuk membuat sebuah form yang bentuknya mengikuti bentuk dari sebuah gambar bitmap maka setiap baris horizontal dari bitmap harus didefinisikan sebagai sebuah region yang besarnya sesuai dengan panjang pixel yang membntuk gambar bitmap pada baris tersebut. Kemudian region-region tersebut digabungkan menjadi satu sehingga bentuk dari form akan mengikuti bentuk dari gambar bitmap.
Gambar 3.7. Penempatan region menurut penggunaan bitmap
Gambar tersebut menjelaskan pengisian region pada bagian melengkung dari bangun elips. Dari hasil zoom in tersebut, setiap region akan menumpuk membentuk benda garis melengkung pada bagian kiri.
Beberapa perintah yang digunakan dalam kaitannya dengan pengolahan region :
• Function CreateRectRgn (x1, y1, x2, y2: integer): HRGN REGION 1
(X2, y2) (X1, y1)
Width
Height
REGION 2 REGION 3 REGION 4
REGION 5 REGION 6
REGION 7 REGION 1
Fungsi ini digunakan untuk membuat sebuah region dengan koordinat kiri atas didefinisikan oleh parameter x1, y1 dan koordinat kanan bawah didefinisikan oleh parameter x2, y2. Nilai kembalian dari fungsi ini jika sukses adalah sebuah region dengan tipe data HRGN dan jika tidak adalah nilai NULL.
• Function CombineRgn (DestReg, SourceReg1, SourceReg2, CombineMode): integer
Fungsi ini digunakan untuk menggabungkan dua region menjadi satu.
Parameter DestReg adalah region hasil penggabungan antara region pada parameter SourceReg1 dan SourceReg2. Sedangkan CombineMode adalah mode yang digunakan dalam penggabungan, nilainya adalah :
RGN_AND: menggabungkan hanya bagian yang bersinggungan antara dua region.
RGN_COPY: membuat copy dari region SourceReg1.
RGN_DIFF: menggabungkan bagian dari SourceReg1 yang bukan bagian dari SouceReg2.
RGN_OR: menggabungkan kedua region menjadi satu.
RGN_XOR: menggabungkan kedua region kecuali bagian yang bersentuhan.
Hasil dari fungsi ini adalah sebuah nilai integer dengan kemungkinan sebagai berikut :
NULLREGION: Region yang dihasilkan kosong.
SIMPLEREGION: Region yang dihasilkan adalah sebuah persegi.
COMPLEXREGION: Region yang dihasilkan lebih dari sebuah persegi.
ERROR: Tidak ada region yang dihasilkan.
3.2.2. Modul penyimpanan hasil interface
Hasil file dari program ini merupakan kumpulan file bitmap dari gambar background dan button. Di dalamnya juga terdapat data koordinat mengenai gambar background dan button. Format file ini adalah file dengan ekstensi *.gin.
Gambar 3.8 menjelaskan tentang format file *.gin.
Gambar 3.8. Struktur penyimpanan hasil interface Penjelasan header interface:
- Byte 1 dan 2: Warna yang digunakan sebagai warna transparan untuk bitmap.
- Byte 3 dan 4: Posisi koordinat x kiri atas interface - Byte 5 dan 6: Posisi koordinat y kiri atas interface Penejlasan header background:
- Byte 1 & 2: Jumlah background dalam interface Penjelasan blok background:
- Byte 1: Flag yang menunjukkan background berisi bitmap atau tidak.
- Byte 2 dan 3: Jarak koordinat x kiri atas background dengan x kiri atas interface.
- Byte 4 dan 5: Jarak koordinat y kiri atas background dengan y kiri atas interface.
- Byte 6…dan seterusnya: Data bitmap.
Penjelasan header button:
- Byte 1 & 2: Jumlah button dalam interface.
Penjelasan blok button:
Header Background Background Header Button
Button : : : : : : Button
Default Button Press Button Mouse Over Button Header Interface
Disable Button
Blok button terdiri dari tiga bagian yaitu Idle Button yang berisi gambar bitmap pada saat button tidak ditekan, Pressed Button yang berisi gambar bitmap pada saat button ditekan dan, Mouse Over Button yang berisi gambar bitmap pada saat kursor mouse berada di atas button. Ketiga bagian tersebut mempunyai sturktur yang sama.
- Byte 1: Flag yang menunjukkan button berisi bitmap atau tidak
- Byte 2 dan 3: Jarak koordinat x kiri atas button dengan x kiri atas interface.
- Byte 4 dan 5: Jarak koordinat y kiri atas button dengan y kiri atas interface.
- Byte 6…dan seterusnya: Data bitmap.
Setiap interface hanya memiliki satu background dan terdiri atas beberapa button.
Gambar 3.9. Gambar flowchart penyimpanan interface Start
Save to stream Read background
Read button
Save to stream
Last button?
Write stream to file
End
No
Yes
Free stream Create file
Delete transparent color
Delete transparent color
Gambar 3.10. Gambar flowchart membuka interface Draw background
Read background
Read button
Draw button
Last button?
End
No
Yes Start
Free stream Assign file to stream
3.3. Upload hasil interface
Setelah pemasangan interface selesai dibuat, maka interface tersebut siap dipakai untuk program. User membuat sebuah aplikasi baru pada delphi, tetapi form utama harus dilengkapi dengan komponen Graphical Interface ini.
Komponen bernama IntfEngine digunakan untuk membuka file interface dan meletakkannya pada form utama. Komponen tersebut hanya perlu di-drag and drop ke form utama. Pada property FileName dari komponen tersebut dapat diisi dengan tempat file interface yang akan dipakai. Untuk membuat sebuah interface yang memiliki bentuk sesuai dengan yang diinginkan, warna transparan pada gambar dihapus ketika dilakukan peyimpanan gambar. Dalam hal ini, untuk setiap pembuatan gambar melalui program graphic, setiap gambar button dan background harus menggunakan warna merah sebagai warna transparan. Karena warna ini digunakan sebagai penanda bahwa area dengan warna merah tersebut tidak terpakai.
3.4. Desain form program
Berikut merupakan tampilan form utama untuk program ini yang memiliki dua menu utama , untuk pengolahan background dan pengolahan button.
Menu file digunakan untuk menyimpan atau membuka interface, keluar program, dan untuk menghapus bagian kerja.
Gambar 3.11. Gambar form utama program pembuatan interface
Setiap kali dilakukan pemilihan menu background atau button, program akan menunggu penekanan tombol mouse pada area kerja. Lokasi penekanan tombol ini kemudian digunakan sebagai tempat gambar. Setelah dilakukan penekanan tombol mouse, akan muncul menu untuk membuka gambar sesuai dengan apa yang dipilih.
