39
BAB III PERANCANGAN DAN PEMBUATAN ALAT 3.1. Block Diagram dari Konfigurasi System
Button Channel 1 Button Channel 2 Button Channel 3
Arduino Uno Sebagai Main Kontrol
Button Channel 3 LCD 16x2 Display Button Channel 3
Channel Suhu
Display LCD Laptop/PC
Menampilkan Suhu Berdasarkan tombol Button channel yang ditekan Input Tombol animasi dari Tampilan LCD PC untuk dapat memilih channel dari PC
Gambar.3.1. Block Diagram System
Komunikasi Serial RS232
40
Dari Block Diagram System yang telah dirancang, Ada beberapa bagian utama dalam perancangan system ini yaitu: 1. Perancangan Sisi Hardware 2. Perancangan Sisi Software Sebagaimana 2 system ini terlebih dahulu dirancang satu – persatu agar mempermudah dalam pembuatan alat dan system. 3.2. Persiapan Perancangan Alat Perancanagan Alat ini membutuhkan alat – alat pendukung sebagai berikut: Tabel 3.1.
Tabel Komponen Hardware
NO
Sisi Hardware
Quatity
1
Arduino UnoR3 + kabel data
1
2
LM35DZ Sensor Suhu
5
3
LCD 16 x 2
1
4
PCB Dot Matrik
2
6
Resitor 10 kohm – ¼ watt
5
7
Pn Header 10 pin
5
8
Black Housing
10
9
Kabel Sisir 10 pin
2 meter
10
Kabel Audio 3 Pin
3 meter
11
Solder 40 watt
1
12
Timah Solder
1
13
Taktil Switch
5
14
Baut + Mur 3 mm
20
15
Gergaji
1
16
Acrilic 50 cm x 50 cm
1
17
Lem Acrilic
1
41
Tabel 3.2. Bahan- bahan Sisi Software NO
Sisi Software
1
Arduino IDE software
2
Visual Basic 6
3
Hiperterminal / Terminal 7
3.3.Perancangan Sisi Hardware 3.3.1. Wiring Diagram Hardware Ada beberapa bagian yang dapat dikelompokan dalam sisi Hardware yaitu: a. Perancangan dan pembuatan Rangkaian Sensor Suhu b. Perancangan dan pembuatan Rangkaian LCD c. Perancangan dan pembuatan Rangkaian Taktil Switch d. Arduino uno sebagai Pusat kontrol dan pentransfer data ke pc menggunakan komunikasi Serial RS232. Dari uraian diatas dapat dirancang simulasi dan pembuatan Wiring Diagramnya menggunakan Proteus :
42
Gambar.3.2. Wiring Diagram Dengan membuat simulasi rangkaian diatas dengan proteus ini akan menghemat efisiensi perancangan sehingga lebih fleksibel dan efektif. Yang mana rangkaian yang disimulasi nanti-nya akan diterapkan dengan pembuatan alatnya. Yaitu pada design circuit untuk dapat diterapkan, simulasi akan dijalankan sesuai program arduino yang diinginkan, dan setelah mendapatkan hasil yang baik dengan simulasi maka akan dilakukan penerapan simulasi ke design-an circuit alat, berikut adalah design circuit menggunakan Eagle :
43
Gambar.3.3. Sirkuit
Dari circuit diatas dihasilkan layout nya sebagai berikut:
Gambar.3.4. Layout tampak bawah 3.3.2. Proses Pembuatan layout PCB Hasil design layout eagle yang telah dibuat, diprint dengan kertas plastik transparant dan menggunakan printer laser jet. Berikut gambar nya:
44
Gambar.3.5. Hasil Layout pada transfer paper Teknik yang digunakan yaitu teknik sablon ke PCB dengan langkah sebagai berikut: Hasil print disablon dengan menggunakan strika. Setelah beberapa lama distrika hasil layout tinta hitamnya akan pindah ke PCB. Dan melakukan koreksi terhadap jalur yang putus. Proses selanjutnya Etching PCB yaitu melarutkan tembaga yang tidak tertutup tinta toner dengan ferit cloride (FeCl3). Mencampurkan ferit cloride dengan air dan masukan pcb yang sudah disablon, aduk secara menyearah sampai tembaga yang tidak tertutup tinta menghilang (habis). Hasil Setelah Proses etching pcb dapat diihat seperti gambar dibawah ini: Langkah selanjutnya pengeboran PCB dengan mini drill dengan mata bor 0.8mm Setelah proses pengeboran maka komponen dapat dipasang dan disolder sesuai dengan gambar layout yang didesain dengan eagle.
45
3.4. Perancangan Sisi Software Pada bagian perancangan sisi software ada dua yaitu: 1. Perancangan dan Pembuatan Software Untuk arduino menggunakan IDE Arduino menggunakan Bahasa pemrograman C++. 2. Perancangan dan Pembuatan Software untuk Tampilan Suhu pada LCD Laptop/ PC menggunakan Bahasa pemrograman Visual Basic 6. Pembuatan point-point berikut bertujuan agar dalam melakukan perancangan akan lebih terstruktur sehingga perancangan dan pembuatan lebih akurat dan efektif, untuk perancangan lebih jelasnya akan diperdalam pada point berikut. 3.4.1. Perancangan dan Pembuatan Software Arduino Pada perancangan program arduino nya digunakan bahasa pemrograman C++ dengan
menggunakan software Arduino IDE 1.0.6. sebelum membuat sebuah
program sebaiknya dilakukan perancangan Flowchart pada sistem alat akan dibuat. Berawal dari algoritma program yang akan dibuat, alur program , inisialisasi dan penetuan variable akan dirancang dulu pada flowchart, sehingga saat membuat program akan lebih terstruktur, efisien dan efektif. Dalam perancangan flowchart ada berapa point yang penting yaitu:
Inisialisasi
Scan Input Button
Baca data Analog dari sensor LM35 dan konversikan ke dalam Suhu dengan satuan Celsius
Kirim data suhu ke serial com
Tampilkan pada lcd
46
Untuk lebih jelasnya berikut flowchart dari sistem arduino yang akan dibuat: Flowchart 1: Awal program Inisialisasi: -
Include library LCD
-
Declarasi
vaiabel
sesuai
data type -
Setup serial Baudrate
-
Setup pin Mode I/O
Menampilkan text pada lcd Scan tombol channel berapa yang ditekan. Lalu isi parameter variable berdasarkan
tombol
channel
berapa yang ditekan,ex: jika tombol channel 1 yang ditekan maka variable line2 bernilai string “Suhu ch1” dan variable state_sh
bernilai
parameter
“5”.
tersebut
Lalu akan
tersimpan pada register pada variable line2 dan state_sh. Setelah parameter dari variable tersebut
terisi
maka
akan
dieksekusi fungsi dengan nama scroll_text.
47
Karena ada pemanggilan fungsi pada flowchart I, maka alur program
akan
menjalankan
fungsi scroll_text. Ambil parameter dari line2 dan state_sh lalu cetak nilai line2 pada lcd Melakukan scanning pada nilai parameter state_sh, contoh: jika state_sh
bernilai
“1”
maka
panggil fungsi calculate suhu dengan
sensor
sehingga
channel
1,
didapatkan
data
yang
telah
temperatur
dikonversi kedalam celcius, lalu lakukan pengiriman data serial ke pc dengan format data : (Nilai
state_sh):(hasil
nilai
calculate suhu) Contohnya: 1:30 Artinya : pada channel 1 didapat nilai suhu sebesar 30 derajat Celsius. Keluar dari fungsi lalu kembali pada scan tombol channel yang ditekan, merupakan berhingga.
proses looping
berikut tak
48
Dari flowchart diatas didapat gambaran alur program yang akan dibuat baik itu penentuan decision, variable , function / subroutin, proses scanning dan proses looping. Sehingga pembuatan program dapat kita kelompok – kelompakan agar script yang dibuat lebih terstruktur. Berikut point – point script yang sangat berpengaruh :
Inisialisasi LCD
Inisialisasi sensor Suhu dan Button pin.
Setup serial baudrate, lcd, led dan button
49
Script looping
Script function scroll_text
Script function calculate_suhu
Script diatas merupakan potongan dari script yang telah dibuat untuk melihat script full nya terdapat pada halaman lampiran.
50
Setelah membuat script maka tahap selanjutnya melakukan compilasi srcript bahasa C++ menjadi bahasa mesin dengan fomat *.hex lalu baru selanjutnya mengupload program ke hardware menggunakan kable data, pada software arduino Ide cara upload program kedalam chip arduino sebagai berikut:
Persiapkan script yang akan diupload
Pastikan script tidak ada yang error, dengan cara melakukan compile terlebih dahulu, dengan mengclick
3.4.2. Perancangan dan Pembuatan Software untuk Tampilan Suhu. Pada perancangan software untuk tampilan suhu, digunakan bahasa pemrograman bahasa basic menggunakan software Visual Basic 6.0. sebelum dilakukan pemetaan blok diagram dan flowchart yang akan dibuat dalam perancangan ini. 3.4.2.1. Blok Diagram Software
Device Arduino
MSComm Port
Process: Ambil data suhu Ambil data channel Convert Celcius to Kelvin Convert Celcius to Fahreint
Send/Receiv
Display : Suhu Iklan Running Text
Dari gambar diatas, dapat dilihat ada beberapa blok yang dapat mewakili sistem yang akan dibuat, dari pemetaan ini maka akan didapat point-point yang mesti dibuat terlebih dahulu, dan bagaimana alurnya.
51
Berikut penjelasan blok –blok dari diagram diatas:
Device Arduino merupakan hardware yang dapat melakukan komunikasi data serial dengan computer melalui usb port.
MSComm merupakan library dari Visual basic untuk menangani masalah komunikasi data serial, dengan nama file MSCOMM32.ocx
Send/Receive merupakan action dari komunikasi data serial
Process merupakan bagian yang akan menghandel data yang diterima dari serial port lalu data tersebut disimpan dalam sebuah parameter variable, parameter yang disimpan akan diproses dengan fungsi ambil data channel dan data suhu, convert celcius to kelvin, convert celcius to fahreinheit.
Display merupakan bagian output dari data yang telah diproses lalu ditampilkan dalam bentuk display tv, dibuatkan tampilan konten iklan dan running text sebagai attribut dalam tampilan porgram tersebut.
Setelah dibuatnya blok diagram maka tahap selanjutnya akan dapat dibuat flowchart dari sistem yang ingin dibuat, yang mana flowchart merupakan bagian yang akan menggambarkan secara lebih detail alur pada blok diagram dari sistem yang akan dibuat. Berikut flowcart program display:
52
Dari flowchart diatas dapat dilihat secara jelas alur program yang akan dibuat, dimulai dari start eksekusi, input/output data serial dan output display dari data suhu yang didapat dari dari LM35. Berikut beberapa penjelasan yang dapat mewakili flowchart diatas:
Start merupakan eksekusi awal untuk sebuah program sebelum melakukan eksekusi point yang selanjutnya.
Declarasi Variable dan component merupakan bagian yang melakukan inisialisasi sebuah parameter, library, reference, component dan plugin yang akan dipakai.
53
Scan Port : melakukan loop limit terhadap port yang dapat di open menggunakan MSComm, dan akan berhenti hingga tidak ada lagi port yang terdeteksi.
Setelah port terdeteksi maka akan dihitung banyak portnya, dan dimasukkan kedalam combo box, jika port yang terdeteksi hanya benilai 1 maka, eksekusi fungsi connect, yang artinya koneksi ke port serial diopen dan terhubung langsung ke port uart nya arduino dengan via RS232. Jika port yang terdeteksi lebih dari satu maka dilakukan fungsi manual connect yaitu user terlebih dahulu melakukan pemilihan port yang akan digunakan untuk arduino. Dan jika bernilai “0” maka akna kembali ke eksekusi scan port lagi.
Step selanjutya akan dilakukan beberapa eksekusi yaitu : setting frame,form as full screen, windows media player,text_size, object position dan loop event terhadap data serial berdasarkan event dari MSComm_onCom pada VB.
setting frame,form as full screen, windows media player,text_size, object position pada tahap ini dilakukan penyettingan agar mudah dalam menata tampilan
dan
GUI
yang
ingin
dibuat
dan
lebih
mudah
dalam
mengelompokkan nya. Dan akan memudahkan apabila ada penggatian nilai parameter terhadap objek. Setelah penyentingan lalu akan menampilkan running text yang isi sesuai dengan isi text box, dan akan dimainkan video yang telah disetting url nya menggunakan library yang dimiliki vb dengan nama wmp.dll.
loop
event
yaitu
melakukan
perulangan
eksekusi
terhadapat
MSComm_oncom jika ada event yang terjadi, apabila ada event input, maka eksekusi selanjutnya melakukan buffering string dan split data.
Lalu melakukan calculate terhadap data yang diperoleh dari hasil buffer dan spliter, sehingga akan didapat data suhu dan data channel apa yang dipakai untuk ditampilkan.
Setelah didapat data suhu dan data channel maka fungsi conversi celsius ke Fahrenheit dan fungsi celsius ke kelvin dijalankan.
54
Setelah didapat data fahrenheit dan data kelvin maka tampilkan dilayar. Dan program akan dilooping kembali pada looping event hingga ada event selajutnya pada MSComm_onCom.
3.4.2.2. Perancangan dan Pembuatan GUI pada Visual Basic GUI (Graphical User Interface) merupakan yang memungkinkan pengguna untuk berinteraksi dengan perangkat keras komputer serta memudahkan dalam mengoperasikan sebuah sistem operasi (user friendly). Selama bertahun-tahun berbagai GUI yang telah dikembangkan untuk berbagai sistem operasi seperti OS / 2, Macintosh, Windows, amiga, Linux, Symbian OS, dan banyak lagi. Untuk membuat tampilan menggunakan visual basic sangat mudah berikut beberapa bagian dari pembuatan GUI pada visual basic, berikut tampilan yang akan dibuat :
Dari tampilan diatas dapat dilihat ada beberapa bagian yang menjadi point-point penting perancangan GUI , berikut point –point dan penjelasan nya:
55
Full Screen : untuk membuat tampilan ful screen dibutuhkan script yang dapat melakukannya, berikut potongan script yang dapat mewakili nya:
Script diatas merupakan declarasii variable dan inisialisasi library yang akan digunakan untuk membuat form full screen, dan berikut fungsi nya seperti potongan script dibawah ini:
56
Fungsi cmdMaximize_click yang merupakan akan mengubah form pada maximal dan menghilangkan layar window yang ada pada form shingga akan mengahasilkan tampilan yang full.
Pembuatan Form setting pada setting, dengan tampilan sebagai berikut:
Tampilan untuk form setting akan muncul apabila menu “Setting” diclik, berikut tampilan menu setting setelah diclick:
Tampilan ini terdapat beberapa componnent: 1. Combox
2 buah
2. Command button
6 buah
3. Label
2 buah
4. Textbox (Multiline)
1 buah
57
Yang mana fungsi-fungsi dari component tersebut yaitu: 1. Button “Connect” berfungsi untuk melakukan koneksi dengan port serial sesuai isi port dan bautrate pada combo box 2 dan 3 2. Combo Box “Com Port” berfungsi untuk memilih port yang akan digunakan. 3. Combo box “baudrate ” berfungsi untuk memilih baudrate yang digunakan. 4. Text Box berfungsi untuk isi konten dari running text 5. Button “[]” yang artinya fullscreen untuk membuat tampilan full, ini merupak settingan default pada saat program dijalakan maka button ini otomatis dieksekusi. 6. Button “[x]” yang artinya exit merupakan menu untuk keluar dari program. 7. Button “Open” berfungsi untuk mengubah data video yang ingin ditampilkan. 8. Button “Stop”
berfungsi untuk menghentikan dan men-play kembali
running text yang ada dibawah layar. 9. Button “Close/Setting” berfungsi untuk menampilkan dan menutup menu “Setting”. Pada form menu setting ada beberapa yang perlu diketahui untuk potongan scriptnya sebagai berikut:
58
Script diatas merupakan potongan script untuk men-scan port ada available, lalu melakukan koneksi secara automatis jika hanya 1 port yang terdeteksi. Untuk melakukan koneksi dilakukan oleh fungsi “port_detec(num)” Berikut scriptnya:
Script diatas merupakan fungsi untuk melakukan koneksi dengan serial port sesuai dengan data port number dan nilai baudratenya.
Pembuatan tampilan data suhu Untuk tampilan data suhu maka dirancangan tampilannya sebagai berikut:
59
Dari gambar diatas component yang diperlukan untuk menampilkan data suhu hanya 3 buah Label yang ukuran Font nya diatur sebagai berikut dengan potongan scriptnya:
Untuk melakukan pengambilan data dari arduino ke serial port computer maka digunakan component berikut:
60
MSComm Port
Berikut potongan scrip dari event MSComm_onComm sebagai fungsi menghandel data input serial.
Dari potongan diatas
MSComm1.CommEvent
dengan case comEvReceive
merupakan sintak yang bergunakan menerima data serial, lalu disimpan kedalam variable buffer, isi buffer akan diseleksi apabila isi buffer terdapat karakter Enter maka variable inPos akan bernilai lebih besar dari nol sehingga data yang ada pada
61
variable “Buffer” displit berdasarkan tanda titik dua “ : ” dan untuk data array 0 akan disimpan pada variable “ch” dan data array1 disimpan pada label3.caption , berikut format data nya: data yang diterima buffer : “1:30” maka hasil dari split sebagai berikut:
Variable “ch” bernilai “1”
Label3.caption bernilai “30”
Sehingga data tersebut ditampilkan dalam bentuk Label. Untuk nilai suhu dengan satuan Celsius tidak diperlukan proses konversi, karena data yang dikirimkan oleh arduino telah merupakan data suhu dalam bentuk celsius, yang perlu dilakukan konversi yaitu untuk mendapat suhu dalam satuan fahrenheit dan Kelvin. Berikut potongan script untuk konversi suhu dari celsius ke kelvin dan fahrenheit:
Script diatas dapat dilihat perhitungan konversi, lalu disimpan dalam variable “kelvin“ untuk suhu dengan satuan “kelvin” dan variable “far” untuk hasil suhu dengan satuan “fahrenheit”, lalu ditampilkan dengan label 7 dan label 9. Sehingga akan menghasilkan tampilan sebagai berikut:
62
Perancangan dan Pembuatan program video player Pada perancang program video player diperlukan komponen pendukung dari
visua basic, yaitu : Berikut cara menambah komponen window media player: 1. Click kanan tab “General > Components” pada samping kiri visual basic
2. Lalu akan muncul windows componen, pada tab “control” pilih “window media player” seperti gambar berikut:
3. Lalu tekan ok, maka akan muncul pada tab general icon berikut:
63
4. Click icon tersebut lalu pindah kan lah pada form, maka akan menjadi sebagai berikut:
Begitulah cara untuk menambahkan component “Window Media Player” , setelah itu tahap selanjutnya yaitu pembuatan scriptnya agar component ini dapat menjalakan video, berikut scriptnya:
Dari script diatas berfungsi untuk memainkan video sesuai Url dan mensetting playmode : repeat, yang artinya video tersebut dimainkan berulang kembali secara otomatis jika sudah habis. program video player yang difungsikan sebagai content promosi iklan yang dapat menambah nilai komersilnya, Berikut tampilan jadi nya:
64
Perancangan dan pembuatan running text: Perancangan running text sangat mudah sekali cukup meggunakan component “label” yang diberi warna background biru dan menggunakan “Timer”, lalu untuk membuat tulisan berjalan dapat menggunakan script berikut:
Script diatas melakukan pergeseran “label.caption” sesuai panjang “label” dari kanan ke kiri, sehingga akan menghasilkan text berjalan yang biasa disebut running text, sehingga running text ini juga dapat digunakan sebagai penayangan infomasi dalam bentuk tulisan dan dapat dijadikan sebagai konten promosi.
