BAB 3 PERANCANGAN SISTEM
3.1
Pengertian Umum Perancangan Media Penyampaian Informasi Otomatis Dengan LED Matrix Berbasis Arduino adalah suatu sistem media penyampaian informasi di dalam ruangan yang menggunakan led matrix dan sensor PING))). Led matrix berfungsi untuk menampilkan message informasi yang akan disampaikan kepada masyarakat berupa susunan karakter, angka dan huruf yang membentuk suatu kalimat. Sensor PING))) berfungsi untuk mendeteksi objek dalam jangkauan jarak yang telah ditentukan sebelumnya, apakah terdapat objek atau tidak pada jarak tersebut. Ketika objek berada dalam jangkauan sensor maka informasi akan berganti dari text default ke text sensor. Ketika Objek tidak ada dalam jangkauan sensor maka text sensor akan kembali ke text default dan urutan text sensor diatur secara random. Perancangan Media Penyampaian Informasi Otomatis Dengan Sensor Ultrasonic Berbasis Arduino merupakan sistem media penyampaian informasi yang dapat menampilkan beragam informasi sebanyak 11 message (1 text default dan 10 text sensor), kalimat yang ditampilkan dapat berupa kombinasi warna dan pengguna dapat mengatur jarak jangkauan sensor yang diinginkan ( 2 cm – 3 m)
35
36
3.2
Perancangan Perangkat Keras Perangkat keras yang akan digunakan dalam sistem ini antara lain meliputi arduino duemilanove 328 yang digunakan dalam melakukan kontrol komunikasi dan jalur data yang terjadi pada sistem, sensor PING yang digunakan untuk mendeteksi keberadaan objek berdasarkan jarak jangkauan sensor, led matrix yang berfungsi untuk menampilkan text default dan text sensor, kemudian Personal Computer atau laptop yang berfungsi sebagai media interaksi manusia dengan komputer dimana aplikasi pada PC atau laptop dapat memberikan inputan kalimat (1 text default dan 10 text sensor), kombinasi warna, preview inputan, seting jarak jangkauan sensor dan report hasil inputan.
3.2.1
Blok Diagram Sistem Blok diagram dari Perancangan Media Penyampaian Informasi Otomatis Dengan Sensor Ultrasonic Berbasis Arduino adalah sebagai berikut :
Gambar 3.1. Blok Diagram Implementasi Sistem
37
Secara garis besar komunikasi data antar modul yang terdapat pada perancangan sistem ini adalah sebagai berikut :
A
D E
B
F
C
Gambar 3.2. Blok Diagram Jalur Komunikasi Data Penjelasan blok diagram mengenai jalur komunikasi data antar modul adalah sebagai berikut : •
A adalah proses pengiriman data inputan berupa 1 text default, 10 text sensor, kombinasi warna, dan jarak jangkauan sensor
•
B adalah proses pengaktifan sensor PING oleh arduino sebagai controller
•
C adalah proses pengiriman data jarak hasil pendeteksian objek
38
•
D adalah proses pengiriman data pendeteksian jarak dan inputan yang telah disimpan
•
E adalah proses pengiriman data inputan berupa susunan kalimat yang telah diinput
•
F adalah proses menampilkan susunan kalimat dan kombinasi warna yang telah diinput oleh PC atau Laptop
3.2.2
Modul Arduino Duemilanove 328 Pada sistem ini menggunakan arduino duemilanove 328 sebagai modul utama controller, modul ini berfungsi untuk melakukan penerimaan data dan pengiriman data. Arduino menghubungkan
komunikasi data antara PC
dengan modul sensor dan backpack matrix. Selain itu juga, arduino merupakan pemberi instruksi pengambilan jarak pada modul sensor Ping sesuai dengan jangkauan jarak yang sudah ditentukan oleh PC. Arduino juga memiliki fungsi lain untuk mengirimkan instruksi input dan pergerakan karakter melalui jalur komunikasi data SPI ( MOSI, SS, dan SCK) ke backpack matrix. Arduino menyimpan seluruh data input pada memory EEPROM, tujuannya adalah ketika arduino kehilangan power maka seluruh inputan tidak hilang sehingga arduino dapat menampilkan inputan yang telah disimpan.
39
Gambar 3.3. Arduino Board Berikut ini adalah skematik arduino duemilanove 328 :
Gambar 3.4. Skematik Arduino Board Arduino memiliki beberapa pin yang berfungsi sebagai penghubung antar modul yang digunakan pada sistem ini, berikut adalah konfigurasi pin arduino yang digunakan sebagai koneksi antar modul :
40
Gambar 3.5. Konfigurasi Arduino •
Pin power Vin 5 Volt Pin power ini digunakan untuk menghubungkan power arduino kepada matrix backpack. Matrix backpack dihubungkan dengan pin power 5 V karena matrix backpack memerlukan tegangan sebesar 5V. Apabila tegangan yang masuk ke matrix lebih besar dari 5V maka matrix akan rusak dan jika kurang dari 5V maka data yang diberikan oleh arduino akan kacau.
•
Pin Ground Pin Ground berfungsi untuk menghubungkan jalur ground pada matrix backpack dan jalur ground sensor ping
•
Pin 7 Pin 7 pada arduino berfungsi untuk menghubungkan jalur data antara sensor ping dengan input arduino.
41
•
Pin 10 ( CS ) Pin 10 pada arduino berfungsi untuk menghubungkan pin CS antara arduino duemilanove dengan pin CS pada matrix backpack
•
Pin 11 ( MOSI ) Pin 11 pada arduino berfungsi untuk menghubungkan pin MOSI antara arduino dengan matrix backpack, dimana arduino di seting sebagai master dan matrix backpack di seting sebagai slave
•
Pin 13 ( SCK ) Pin 13 berfungsi sebagai SCK yang berfungsi sebagai clock pada proses pengiriman data secara SPI. Pin ini juga terhubung dengan pin SCK pada matrix backpack
3.2.3
Modul Sparkfun Matrix RG with Backpack Modul ini merupakan modul yang berfungsi untuk mengontrol led matrix dua warna yaitu merah dan hijau. Led matrix controller ini dapat melakukan kontrol kepada led matrix sebesar 8x8. Selain itu, modul ini juga memiliki pin koneksi berupa female dan male yang memudahkan dalam menggabungkan beberapa led matrix.
42
Gambar 3.6. Backpack Matrix RG Modul ini bekerja pada power 5 V, apabila modul ini mendapat power lebih dari 5 V maka modul ini akan rusak dan apabila mendapat power kurang dari 5 V maka akan terjadi error data karena data digital hanya dapat bekerja pada tegangan 5 V. Selain tegangan ada hal yang lain yang perlu diperhatikan pada perancangan ini, hal tersebut adalah arus. Sparkfun backpack ini bekerja pada arus maksimal 300 mA setiap board backpack dan rekomendasi arus yang dapat digunakan pada backpack ini adalah sebesar 100 mA. Jika backpack tersebut disambung lebih dari satu backpack maka berlaku perhitungan arus seperti dibawah ini :
X = N * Imax dan Xtyp = N * Ityp X
= Arus Maksimal yang dibutuhkan
Xtyp
= Arus rekomendasi yang dibutuhkan
43
N
= Jumlah Backpack yang digunakan
Ityp
= Arus rekomendasi
Imax
= Arus Maksimal
Pada perancangan display informasi kali ini, digunakan 12 buah led matrix yang disusun menjadi satu baris maka arus yang digunakan untuk dapat mengaktifkan 12 buah led matrix adalah sebagai berikut : Xtyp = N * Ityp Xtyp = 12 * 100 mA Xtyp = 1200 mA
X = N * Imax X = 12 * 300 mA X = 3600 mA Dari perhitungan diatas dapat terlihat, jika led matrix yang digunakan sebanyak 12 buah maka arus yang dibutuhkan untuk mengaktifkan led matrix adalah 1200 mA dan arus maksimal yang dapat diterima untuk mengaktifkan 12 buah led matrix adalah 3600 mA. Komunikasi data yang digunakan pada modul ini adalah komunikasi SPI. Komunikasi SPI ini berfungsi untuk mengirimkan data input kepada
44
AVR yang sudah terintegrasi didalam modul ini. Data input yang dikirim arduino akan masuk ke matrix backpack melalui MOSI karena arduino berfungsi sebagai master dan matrix backpack berfungsi sebagai slave. Setelah itu, Proses pengiriman data melalui SPI membutuhkan CLK yang terintegrasi sebagai pin SCK. Semua inputan akan ditolak apabila pin CS masih mendapat logic TRUE dan semua data akan diakumulasi atau diproses apabila pin CS mendapat logic LOW Berikut ini adalah gambar Led Matrix RG pada Modul Sparkfun backpack :
Gambar 3.7. Led Matrix RG Berikut ini adalah tabel nilai warna yang dapat digunakan :
45
Berikut ini adalah protocol yang digunakan pada modul ini agar dapat digunakan :
3.2.4
•
Berikan CS logika LOW
•
Delay 500 microsecond
•
Kirim 0x00 via SPI
•
Kirim 0x01 via SPI
•
Kirim 0x02 via SPI
•
Delay 500 microsecond
•
Berikan CS logika HIGH
Modul Sensor Ping
Gambar 3.8. Skematik Sensor Ping
46
Modul ini berfungsi untuk menangkap atau mendeteksi objek yang berada dalam jarak jangkauan sensor yang telah ditentukan atau diinput oleh user atau pengguna. Jarak sensor yang dapat di seting adalah 2 cm sampai dengan 3 m. Power yang digunakan oleh sensor ini adalah 5 V yang dihasilkan oleh rangkaian regulator yang menghasilkan tegangan stabil 5 V. apabila lebih dari 5 V maka sensor akan mengalami kerusakan. Selain itu pin data SIG dari sensor terhubung dengan pin 7 pada arduino. Berikut ini adalah modul sensor yang telah terpasang pada sistem :
Gambar 3.9. Gambar Modul Sensor Ultrasonic
47
3.2.5
Dimensi Perangkat Keras Pada Perangcangan Media Penyampaian Informasi Otomatis Dengan LED Matrix Berbasis Arduino menggunakan beberapa bangun dengan ukuran sebagai berikut : • Dimensi box package ( 1,4 m x 12 cm x 6 cm ) Box package merupakan sebuah rancang bangun yang berfungsi sebagai tempat untuk meletakan seluruh komponen sehingga dapat siap untuk diaplikasikan. Box ini terbuat dari Kayu dan ditutup dengan acrylic hitam. Ukuran dari box ini adalah panjang 1,4 m, lebar 12 cm, tinggi 6 cm ) Berikut ini adalah dimensi ukuran box :
Gambar 3.10. Dimensi Box
48
• Dimensi panjang Led Matrix (61,5 cm x 5 cm) Pada perancangan sistem ini menggunakan 12 buah led matrix dan masing-masing led matrix ini memiliki 8x8 led. Dimensi 12 led matrix ini memiliki panjang 61,5 cm dan lebar 5 cm Berikut ini adalah dimensi panjang led matrix :
5 cm 61,5 cm
Gambar 3.11. Dimensi Led Matrix • Dimensi modul sensor ping ( 4,5 cm x 3 cm x 3,5 cm ) Pada modul sensor ping memiliki dimensi dengan ukuran panjang 4,5 cm, lebar 3 cm dan tinggi 3,5 cm, modul sensor ini diletakan di luar box utama.
49
Berikut ini adalah dimensi modul sensor ping :
Gambar 3.12. Dimensi Modul Sensor Ping • Dimensi Led Matrix sampai Arduino ( 77 cm x 5 cm ) Dimensi pada sistem ini memiliki rancang bangun dengan ukuran panjang dari led matrix sampai arduino yang memiliki ukuran panjang 77 cm dan lebar 5 cm Berikut ini adalah Dimensi tersebut :
5 cm 77 cm
50
Gambar 3.13. Dimensi Led Matrix Beserta Arduino Board 3.3
Perancangan Perangkat Lunak Perancangan perangkat lunak dapat dibedakan menjadi dua bagian yakni perancangan perangkat lunak pada Modul Controller ( arduino duemilanove 328 ) dengan menggunakan program arduino-0018 berbasis bahasa C dan juga perancangan perangkat lunak pada PC dengan menggunakan Microsoft Visual Studio 2008 sebagai media interaksi manusia dengan komputer.
3.3.1
Perancangan Perangkat Lunak pada Arduino Pada arduino duemilanove 328 menggunakan satu buah microcontroller ATmega 328 yang sudah memiliki bootloader sehingga dapat langsung melakukan input program melalui koneksi serial.
51
Berikut ini adalah flowchart yang terdapat pada arduino :
Gambar 3.14. Flowchart Modul Arduino
52
Algoritma yang digunakan untuk modul arduino controller dimulai dengan proses inisialisasi pin arduino, warna dasar atau kombinasi warna led matrix, index text default dan text sensor. Untuk pin arduino inisialisasi yang digunakan tergantung pada pin yang dipakai pada sistem, untuk sistem ini pin arduino yang digunakan adalah pin 7 sebagai pin untuk sensor ping, pin 10 sebagai CS, pin 11 sebagai MOSI dan pin 13 sebagai SCK. Selain itu arduino juga melakukan inisialisasi baud rate yang digunakan. arduino juga melakukan inisialisasi untuk warna dasar dan kombinasi warna yang digunakan sesuai dengan protocol matrix backpack. Inisialisasi lain yang dilakukan adalah dengan menentukan index untuk text default dan text sensor. Setelah itu program akan menerima dan menyimpan data input dari PC di EEPROM berupa satu buah text default, kombinasi warna text default, 10 text sensor, kombinasi warna sensor, dan seting jarak jangkauan sensor. Setelah semua inputan dari PC disimpan dalam EEPROM maka sistem akan mengirimkan report atau laporan berupa seluruh data yang berhasil disimpan dalam EEPROM ke PC Setelah itu program akan masuk kebagian perulangan terus menerus selama program masih diaktifkan. Program akan melakukan proses pengaktifan sensor Ping sesuai dengan protocol yang sudah ditentukan sebelumnya. Setelah sensor ping aktif maka program akan melakukan pengecekan pada signal input dari sensor.
53
. Apabila ada objek yang terdeteksi pada proses pengecekan maka program akan mengirimkan nilai atau ukuran jarak sensor dengan objek dan akan ditampilkan di PC. Selain itu, Jika pada proses pengecekan terdapat objek dalam jarak jangkauan sensor maka program akan melakukan atau mengirimkan instruksi index text sensor yang berisi 10 text sensor. Setelah itu, program akan melakukan random text sensor berdasarkan keberadaan objek. Setelah proses random sudah dilakukan maka led matrix akan menampilkan karakter yang telah di random dan kombinasi warna yang telah di tentukan. Apabila dalam proses pengecekan sensor ping ternyata tidak ada objek yang berada dalam jangkauan maka program akan melakukan atau mengirimkan index text default yang berisi text default. Setelah text default sudah diterima maka led matrix akan menampilkan karakter dan kombinasi warna untuk text default. Program ini dilakukan secara terus menerus sampai sistem kehilangan power. Pada arduino digunakan memori EEPROM dimana mode pengalamatan yang disetting adalah sebagai berikut :
54
Keterangan : •
Pada alamat memory dari 0x00 sampai 0x5C, merupakan alamat memory yang digunakan untuk menyimpan data text default yang dapat diinput sebanyak 92 karakter atau 92 byte.
55
•
Pada alamat memory dari 0x5C sampai 0x3F4, merupakan alamat memory yang digunakan untuk menyimpan data 10 text sensor yang dapat diinput masingmasing sebanyak 92 karakter atau 92 byte.
•
Pada alamat memory dari 0x3F4 sampai 0x3F6, merupakan alamat memory yang digunakan untuk menyimpan seting warna text default
•
Pada alamat memory dari 0x3F6 sampai 0x3F8, merupakan alamat memory yang digunakan untuk menyimpan seting warna untuk 10 text sensor
•
Pada alamat memory dari 0x3F8 sampai 0x3FA, merupakan alamat memory yang digunakan untuk menyimpan seting jarak minimal sensor
•
Pada alamat memory dari 0x3FA sampai 0x3FC, merupakan alamat memory yang digunakan untuk menyimpan seting jarak maksimal sensor
3.3.2
Perancangan Tampilan GUI pada PC Pada perancangan sistem media informasi ini menggunakan suatu tampilan atau aplikasi interface anatara manusia dengan komputer yang berfungsi untuk memberikan inputan pada media informasi. Tampilan GUI ini menggunakan Microsoft visual studio 2008.
56
Berikut ini adalah tampilan flowchart dari tampilan GUI :
Start
D eklarasi Variable
Inisialisasi B aud R ate
B
Input N ilai Port
C ek N ilai Port?
Tidak
YA
Koneksi ke EEPR O M Arduino
Cek data EEPRO M ?
TID A K
A
YA
Am bil data input dari EEPRO M
Tam pilkan data input EEPR O M pada debug
A
Gambar 3.15. Flowchart Kondisi Awal Sistem
57
Algoritma program pada tampilan GUI dimulai dengan menentukan setiap variable yang digunakan pada sistem aplikasi tersebut. Setelah seluruh variable yang digunakan pada program sudah dideklarasi, maka langkah selanjutnya adalah melakukan inisialisasi berupa nilai baudrate yang digunakan pada sistem perancangan media informasi. Nilai baudrate yang digunakan pada aplikasi harus sesuai dengan nilai baudrate yang digunakan pada modul arduino duemilanove. Langkah selanjutnya adalah dengan menentukan nilai port yang sedang digunakan oleh koneksi serial. Setelah itu program akan melakukan pengecekan pada kolom port. Apabila user akan melakukan open port maka nilai port harus diinput pada kolom port dengan benar sesuai dengan port yang sedang aktif. Jika koneksi serial port sudah aktif atau sudah siap digunakan maka aplikasi GUI pada windows akan terhubung dengan hardware pada sistem perancangan media informasi. Setelah koneksi serial antara aplikasi dengan modul arduino sudah terhubung, maka program akan melakukan pengecekan pada memori EEPROM dari modul arduino. Jika pada memori EEPROM terdapat inputan data yang sudah disimpan sebelumnya maka program akan membaca atau mengambil data input dari EEPROM berupa 1 text default, 10 text sensor, kombinasi warna text default, kombinasi warna text sensor dan seting jarak jangkauan sensor. Setelah semua inputan sudah dideklarasikan dalam variable array maka program akan menampilkan semua inputan tersebut pada kolom debug. Kolom debug dapat menampilkan semua inputan yang terdapat pada EEPROM sehingga user dapat
58
mengetahui seluruh isi data yang sedang berjalan.
Gambar 3.16. Flowchart Input Karakter
59
Langkah program selanjutnya adalah dengan memasukan inputan yang akan diinput pada sistem perancangan media informasi. Pada langkah ini dilakukan inputan berupa text default, text sensor dan kombinasi warna. Pertama kali dilakukan input text default, text default yang diinput dapat berupa huruf, karakter, dan angka. Setelah text default diinput maka, user akan memilih pilihan kombinasi warna default. Kombinasi warna ini akan ditampilkan pada led matrix dan pada display preview. Setelah semua input sudah dimasukan maka program akan melakukan pengecekan pada tombol set. Jika tombol set telah ditekan, maka program akan melakukan pengecekan selanjutnya untuk koneksi serial port. Apabila koneksi serial port belum di create atau terjadi salah nilai port yang diinput maka program akan mengeluarkan warning atau report kondisi pada kolom debug. Jika serial port belum di create maka user harus melakukan input nilai port dengan benar. Setelah itu program akan melakukan update data text default dan kombinasi warna default untuk diproses. Setelah itu program akan menampilkan semua data yang telah diinput pada kolom debug berupa text default, kombinasi warna default dan kombinasi warna sensor. Setelah menampilkan semua data input, maka program akan melakukan pengiriman seluruh data input menuju serial port. Serial port akan mengirimkan seluruh nilai untuk diproses di modul arduino.
60
Untuk memasukan atau melakukan input kalimat sensor, maka program akan menerima input dari user berupa huruf, karakter dan angka. Text sensor yang diinput berjumlah 10 text. Setelah melakukan input data dari user, maka program akan melakukan pengecekan pada tombol set sensor. Jika dalam pengecekan ternyata terdapat kondisi aktif maka program akan melakukan pengecekan koneksi serial port, apabila dalam pengecekan terdapat koneksi serial belum berhasil di create atau ada kesalahan nilai port maka program akan mengeluarkan warning pada kolom debug. Apabila koneksi serial port sudah berhasil di create maka program akan melakukan update data input text sensor dan index text sensor yang telah di seting oleh user. Setelah melakukan update data input, maka program akan menampilkan semua data input sensor yang berupa kalimat dan nilai index yang telah diseting oleh user pada kolom debug. Tampilan ini berfungsi untuk memberikan informasi kepada user terhadap seluruh input yang telah diinput. Setelah menampilkan semua data sensor yang telah diinput, maka program akan mengirimkan seluruh nilai inputan sensor menuju serial port untuk diteruskan dan diproses oleh modul arduino. Program juga melakukan pengecekan pada tombol close, apabila dalam proses pengecekan didapat bahwa tombol close ditekan maka aplikasi akan keluar dari windows.
61 A
Input nilai min & max sensor
Tombol set sensor ditekan? TIDAK YA
Cek koneksi serial port?
Tampilkan Warning
B
TIDAK YA Update data min&max sensor
Tampilkan nilai min&max Sensor pada kolom debug
Kirim inputan min & max sensor ke serial port
END
Gambar 3.17. Flowchart Input Jarak Sensor Untuk melakukan seting jarak jangkauan sensor maka dilakukan beberapa tahapan. Program akan menerima input yang dilakukan oleh user berupa nilai maximal dan nilai minimal sensor. Setelah proses input nilai jarak jangkauan maka program akan melakukan pengecekan tombol set jarak,
62
apabila tombol ditekan maka program akan melakukan proses selanjutnya. Program akan melakukan pengecekan koneksi serial, apabila dalam pengecekan koneksi didapat bahwa koneksi serial belum di create maka program akan mengeluarkan warning pada kolom debug dan apabila koneksi serial sudah di create maka program akan melakukan update semua nilai jarak jangkauan sensor ( minimal dan maksimal ). Nilai jarak yang telah diinput akan ditampilkan pada kolom debug sehingga nilai jarak minimal dan maksimal tersebut dapat dilihat oleh user. Setelah
program
menampilkan
semua
inputan
maka
program
akan
mengirimkan seluruh nilai jarak pada serial port. A
Tombol Baca EEPROM ditekan ?
Tidak
YA Cek koneksi serial?
Tampilkan Warning Tidak
YA Baca Isi EEPROM melalui Serial Port
Tampilkan data EEPROM pada kolom debug
END
Gambar 3.18. Flowchart Baca EEPROM
B
63
Flowchart diatas merupakan alur program yang berfungsi untuk membaca nilai input dari EEPROM yang akan ditampilkan pada kolom debug sehingga user dapat mengetahui segala isi inputan yang ada dalam EEPROM. Program akan melakukan pengecekan tombol ‘Baca EEPROM’, apabila dalam proses pengecekan tombol didapat bahwa tombol aktif maka program akan melakukan pengecekan selanjutnya yang berupa pengecekan koneksi serial port, apabila dalam pengecekan didapat koneksi serial belum di create maka program akan mengeluarkan warning pada kolom debug dan apabila koneksi serial sudah berhasil di create maka program akan melakukan proses baca isi EEPROM dari serial port. Inputan EEPROM yang dibaca berupa 1 text default, 10 text sensor, kombinasi warna default, kombinasi warna sensor, dan seting jarak. Semua inputan akan ditampilkan pada kolom debug.
64
A
TIDAK Tombol Preview 1 ditekan?
TIDAK Tombol Preview 2 ditekan?
YA
YA
Hapus Layar Preview
Hapus Layar Preview
Update data text default
Update data text sensor
Update Pilihan warna default
Update Pilihan warna sensor
Tampilkan data input pada kolom preview
Tampilkan data input pada kolom preview
Rubah button menjadi Stop Preview
Rubah button menjadi Stop Preview
Tombol Stop ditekan?
Tombol Stop ditekan?
TIDAK
TIDAK
YA
YA
END
Gambar 3.19. Flowchart Preview
END
65
Untuk menampilkan preview dari inputan yang telah diinput oleh user maka program akan melakukan proses pengecekan tombol preview. Pada aplikasi ini terdapat 2 macam tombol preview, yang pertama adalah tombol preview yang berfungsi untuk menampilkan inputan text default dan kombinasi warna default sedangkan tombol preview kedua berfungsi untuk menampilkan inputan text sensor dan kombinasi warna sensor. Apabila dalam proses pengecekan didapat kondisi bahwa tombol ditekan maka program akan melakukan hapus layar preview. Setelah layar preview sudah dihapus maka program akan mengupdate data input yang telah diseting oleh user. Setelah itu jika data input sudah di update maka seluruh inputan akan ditampilkan pada layar preview. Selama tombol preview ditekan maka tampilan button akan berubah menjadi stop preview. Stop preview akan bekerja selama proses preview dijalankan. Jika tombol stop preview ditekan maka tampilan button akan berubah kembali menjadi preview.
