BAB III PERENCANAAN SISTEM DAN PERANCANGAN ALAT

Transkripsi

1 BAB III PERENCANAAN SISTEM DAN PERANCANGAN ALAT 3.1. Gambaran Umum Sistem Sistem pada alat ini menggunakan sebuah aplikasi android untuk mengirimkan data berupa karakter huruf dan angka melalui komunikasi Bluetooth HC-05. Sebelumnya bluetooth pada smartphone android harus melakukan pairing terhadap Bluetooth HC-05 dan memasukan password untuk mendapatkan koneksi yang baik dan alamat Bluetooth HC-05 dapat tersimpan di smartphone android. Data yang dikirim dari smartphone android akan diterima oleh Bluetooth HC-05 yang telah terhubung pin RX pada arduino. Data karakter yang dikirim oleh android ke Bluetooth HC-05 akan dilanjutkan ke arduino, dimana arduino akan memproses data karakter yang masuk dan memberi data pada Panel P10 RGB Indoor untuk menampilkan karakter yang dikirim oleh smartphone android. Dapat dilihat pada gambar

2 23 Gambar 3.1 Diagram Block 3.2. Perancangan Mekanik Dalam perancangan mekanik Running Text ini menggunakan akrilik sebagai rangka mekanik dari papan Running Text ini. Akrilik yang digunakan mempunyai dimensi 1000mm x 1000mm x 3mm. Pada bagian ini akrilik dipotong dengan ukuran 700mm x 350mm x 3mm sebanyak 2 buah sebagai rangka dasar. Gambar 3.2 Sketsa Rangka Dasar

3 Perancangan Elektrik Perancangan elektrik pada Running Text yang sedang dirancang tidak rumit, karena pada perancangan secara keseluruhan menggunakan komponen kit seperti Arduino, Bluetooth HC-05 dan Panel P10 RGB Indoor. Secara keseluruhan rangkaian elektronik yang digunakan pada perancangan ini meliputi : a. Arduino Mega2560 b. Bluetooth HC-05 c. Panel P10 RGB Indoor d. Power Supply Model Dell Penyambungan Panel P10 RGB Indoor Dengan Arduino Arduino mega2560 terdapat 54 pin digital dan 16 pin analog yang dapat digunakan sebagai input dan output. Pada perancangan alat ini digunakan Panel P10 RGB Indoor yang mengkonsumsi daya 25W per Panel P10 RGB Indoor. Gambar 3.3 Penyambungan Pin Arduino dengan Panel P10 RGB Indoor

4 25 Pin yang digunakan pada arduino dan Panel P10 RGB Indoor yaitu : a. Pin 24 dan 27 sebagai pembacaan data warna merah (R0 dan R1 pada Panel P10 Indoor). b. Pin 25 dan 28 sebagai pembacaan data warna hijau (G0 dan G1 pada Panel P10 Indoor). c. Pin 26 dan 29 sebagai pembacaan data warna biru (B0 dan B1 pada Panel P10 Indoor). d. Pin 9 sebagai led driver Output Eneble (OE pada Panel P10 Indoor). e. Pin 10 sebagai led driver Latch (LAT pada Panel P10 Indoor). f. Pin 11 sebagai led driver Clock (CLK pada Panel P10 Indoor) g. Pin A0 sebagai demux input (A pada Panel P10 Indoor) h. Pin A1 sebagai demux input (B pada Panel P10 Indoor) i. Pin A2 sebagai demux input (C pada Panel P10 Indoor) j. Pin A3 sebagai demux input (D pada Panel P10 Indoor) Penyambungan Bluetooth HC-05 dengan Arduino Bluetooth HC-05 Adalah sebuah modul Bluetooth SPP (Serial Port Protocol) yang mudah digunakan untuk komunikasi serial wireless (nirkabel) yang mengkonversi port serial ke Bluetooth. HC-05 menggunakan modulasi bluetooth V2.0 + EDR

5 26 (Enchanced Data Rate) 3 Mbps dengan memanfaatkan gelombang radio berfrekuensi 2,4 GHz. Pada perancangan alat ini Bluetooth HC-05 digunakan untuk mengirim data berupa huruf dan angka dengan komunikasi serial wireless. Gambar 3.4 Penyambungan Pin Adruino dengan Bluetooth HC-05 Pin yang digunakan pada arduino dan Panel P10 RGB Indoor yaitu : a. Pin 0 (TX) pada arduino dihubungkan dengan pin (RX) pada Bluetooth HC-05. b. Pin 1 (RX) pada arduino dihubungkan dengan pin (TX) pada Bluetooth HC Wiring Diagram Berikut adalah wiring diagram secara keseluruhan, dimana semua komponen telah terhubung kearduino mega 2560 sesuai dengan fungsi pinnya masing-masing.

6 27 Gambar 3.5 Wiring Diagram 3.4. Perancangan Aplikasi Dengan App Inventor App Inventor adalah aplikasi yang pada dasarnya disediakan oleh google dan sekarang di-maintenance oleh Massachusetts Institute of Technology (MIT). App Inventor memungkinkan semua orang untuk membuat software aplikasi untuk sistem operasi android. Pengguna dapat menggunakan tampilan grafis GUI dan fitur drag and drop visual object untuk membuat sebuah aplikasi dapat berjalan pada sistem operasi android. Pada perancangan aplikasi dengan App Inventor tidak rumit, karena untuk pemrograman pada App Inventor tidak menggunakan coding seperti pada arduino. Pemrograman yang digunakan pada App Invetor adalah berupa block-block diagram seperti puzzle yang disusun. App Inventor yang digunakan pada perancangan aplikasi android ini menggunakan jaringan internet (online). Untuk membuat aplikasi android dengan App Inventor ini melakukan Login pada akun google. Berikut adalah tahap perancangan aplikasi dengan App Inventor, yaitu : a. Langkah awal pada App Inventor. b. Perancangan desain tampilan.

7 28 c. Perancangan program kode block pada App Inventor Langkah Awal Pada App Inventor Adapun langkah-langkah awal untuk menggunakan App Inventor sebagai berikut : 1. Login akun Gmail pada 2. Membuka ke website maka akan ditampilkan jendela Projects dari App Inventor. Gambar 3.6 Jendela Project Pada App Inventor 3. Langkah selanjutnya membuat Projetct baru. Gambar 3.7 Tombol Start New Project

8 29 4. Langkah selanjutnya mengisikan nama Project. Gambar 3.8 Membuat Project Baru 5. App Inventor akan menampilkan Project yang baru dibuat. Seperti pada gambar berikut. Gambar 3.9 Jendela Project Baru 6. Project dari App Inventor siap untuk digunakan. Project yang dibuat secara otomatis akan tersimpan kedalam akun Google Perancangan Desain Tampilan Setelah melakukan langkah awal, langkah selanjutnya yaitu membuat desain tampilan antarmuka untuk aplikasi Running Text yaitu :

9 30 1. Mengambil komponen ListPicker dari Palette. Komponen ListPicker berfungsi untuk memilih jaringan Bluetooth yang akan digunakan yang sebelumnya telah dipairing terlebih dahulu. Gambar 3.10 Komponen ListPicker pada Palette 2. Mengdrag komponen ListPicker1 kebagian Viewer. Gambar 3.11 Komponen ListPicker pada Viewer

10 31 3. Mengapus Text pada Properties komponen ListPicker. Gambar 3.12 Properties Text Pada Komponen ListPicker 4. Pada langkah selanjutnya memberi gambar pada komponen ListPicker. (a) (b) Gambar 3.13 (a) List Media, (b) Upload File 5. Memilih gambar yang akan di-upload. Seperti pada gambar dibawah.

11 32 Gambar 3.14 Jendela File Upload 6. Setelah proses upload selesai, menyesuaikan ukuran gambar pada komponen ListPicker pada bagian Properties, maka tampilan komponen ListPicker akan tampak seperti logo Bluetooth. (a) (b) Gambar 3.15 (a) Properties Untuk Merubah Ukuran, (b) File Gambar Telah Berhasil di-upload

12 33 7. Selanjutnya mengambil komponen Label dari Palette. Komponen Label berfungsi untuk menampilkan status koneksi Bluetooth. (a) (b) Gambar 3.16 (a) Komponen Label pada Palette, (b) Komponen Label pada Viewer 8. Selanjutnya mengambil komponen HorizontalArrangement dari Palette. Komponen HorizontalArrangement berfungsi untuk menggabungkan 2 buah komponen secara horizontal.

13 34 (a) (b) Gambar 3.17 (a) Komponen HorizontalArrangement pada Palette, (b) Komponen HorizontalArrangement pada Viewer 9. Selanjutnya mengubah posisi komponen ListPicker dan Label ke dalam bagian HorizontalArrangement1. Gambar 3.18 Komponen ListPicker dan Label didalam bagian HorizontalArrangement

14 Selanjutnya mengambil komponen TextBox dan Button dari Palette. Komponen TextBox berfungsi sebagai tempat untuk menulis karakter. Sedangkan komponen Button berfungsi sebagai tombol untuk mengirim karakter yang terdapat pada komponen TextBox. (a) (b) Gambar 3.19 (a) Komponen TextBox1 dan Button1 pada Palette, (b) Komponen TextBox dan Button pada Viewer 11. Menghapus Text pada Properties komponen Button. Gambar 3.20 Properties Text pada komponen Button

15 Selanjutnya memberi gambar pada komponen Button. (a) (b) Gambar 3.21 (a) List Media, (b) Upload File 13. Memiilih gambar yang akan di-upload. Seperti pada gambar dibawah. Gambar 3.22 Jendela File Upload 14. Setelah proses upload selesai, mengatur ukuran gambar pada komponen Button pada bagian Properties, maka tampilan komponen Button akan tampak seperti gambar dibawah.

16 37 Gambar 3.23 File Gambar Berhasil di-upload 15. Selanjutnya mengambil komponen HorizontalArrangement kembali dari Palette. 16. Selanjutnya mengubah posisi komponen TextBox dan Button ke dalam bagian HorizontalArrangement. Gambar 3.24 Komponen TextBox dan Button didalam bagian HorizontalArrangement

17 Selanjutnya mengambil komponen TableArrangement sebanyak 2 buah dari Palette. Komponen TableArrangement berfungsi untuk menggabungkan 4 buah komponen secara tabel. 18. Selanjutnya mengambil komponen Button dari Palette sebanyak 8 buah. Komponen Button sebanyak 8 buah berfungsi untuk mengirim karakter secara personal yang mana masing-masing Button memiliki karakter yang berbedabeda yang digunakan untuk tombol warna. Gambar Buah Komponen Button didalam bagian TableArrangement 19. Menghapus Text pada Properties komponen Button dan mengatur Background Color pada 8 buah Button.

18 39 (a) (b) Gambar 3.26 (a) Properties Background Color Pada Komponen Button, (b) Hasil Background Color Pada Komponen Button 20. Selanjutnya mengambil komponen HorizontalArrangement dari Palette. 21. Mengubah posisi 2 buah komponen TableArrangement ke dalam bagian HorizontalArrangement. Gambar Buah Komponen TableArrangement didalam Bagian HorizontalArrangement

19 Langkah selanjutnya memilih gambar pada Properties yang akan di jadikan Icon. Gambar 3.28 List Media 23. Memilih gambar pada Properties yang akan di jadikan Background. untuk hal ini file yang akan digunakan bernama Icon.png. (a) (b) Gambar 3.29 (a) List Media, (b) Tampilan Background Display Berhasil

20 Selanjutnya mengambil komponen Bluetooth Client dan Clock. Gambar 3.30 Komponen Bluetooth Client dan Clock pada bagian Viewer Perancangan Program Kode Block Pada App Inventor Setelah melakukan perancangan desain tampilan, langkah selanjutnya yaitu membuat program kode block pada App Inventor, yaitu : 1. Mengklik tombol Blocks untuk memprogram aplikasi. Gambar 3.31 Menu Blocks Editor 2. Mengklik Screen1 pada bagian Blocks untuk mengambil komponen When Screen1 Backpressed.

21 42 Gambar 3.32 Komponen When Screen1 Backpressed pada bagian Blocks 3. Mengklik BluetootClient1 pada bagian Blocks untuk mengambil komponen Call BluetoothClient1 Disconnect. Gambar 3.33 Komponen Call BluetoothClient1 Disconnect Pada Bagian Blocks 4. Mengklik Control pada bagian Blocks untuk mengambil komponen Close Application.

22 43 Gambar 3.34 Komponen Close Application Pada Bagian Blocks 5. Menyatukan komponen When Screen1 Backpressed, BluetoothClient1 dan Application seperti gambar dibawah. Ini adalah program jika tombol Back ditekan menutup aplikasi dan memutuskan koneksi Bluetooth. Gambar 3.35 Program Block Menutup Aplikasi 6. Mengklik ListPicker1 pada bagian Blocks untuk mengambil komponen When ListPicker1 BeforePicking dan set ListPicker1.Elements to.

23 44 (a) (b) Gambar 3.36 (a) Komponen When Listpicker1 Beforepicking Pada Bagian Blocks, (b) Komponen Set Listpicker1.Elements to Pada Bagian Blocks 7. Mengklik BluetootClient1 pada bagian Blocks untuk mengambil komponen BluetoothClient1.AddressAndName. Gambar 3.7 Komponen Bluetoothclient1.Addressandname Pada Bagian Blocks

24 45 8. Menyatukan komponen When ListPicker1 BeforePicking, set ListPicker1.Elements to dan BluetoothClient. AddressAndNames. Ini adalah program untuk pairing Bluetooth. Gambar 3.38 Program Pairing Bluetooth 9. Mengklik ListPicker1 pada bagian Blocks untuk mengambil komponen When ListPicker1 AfterPicking, ListPicker1.Selection dan set ListPicker1.Elements to. Gambar 3.39 Komponen Listpicker1.Selection Pada Bagian Blocks 10. Mengklik BluetootClient1 pada bagian Blocks untuk mengambil komponen Call BluetoothClient1.Connect Address dan BluetoothClient1. AddressAndNames.

25 46 (a) (b) Gambar 3.40 (a) Komponen Call Bluetoothclient1.Connect Address Pada Bagian Blocks, (b) Komponen Bluetoothclient1. Addressandnames Pada Bagian Blocks 11. Mengklik Control pada bagian Blocks untuk mengambil komponen if then. Gambar 3.41 Komponen If Then Pada Bagian Blocks 12. Menyatukan komponen When ListPicker1 AfterPicking, if then, set ListPicker1.Elements to, ListPicker1.Selection, Call BluetoothClient1.Connect Address dan

26 47 BluetoothClient1.AddressAndNames. Ini adalah program untuk memilih jaringan Bluetooth yang telah dipairing. Gambar 3.42 Program Untuk Memilih Jaringan Bluetooth 13. Mengklik Clock1 pada bagian Blocks untuk mengambil komponen When Clock1.Timer. Gambar 3.43 Komponen When Clock1.Timer Pada Bagian Blocks 14. Mengklik BluetootClient1 pada bagian Blocks untuk mengambil komponen BluetoothClient1.IsConnected.

27 48 Gambar 3.44 Komponen Bluetoothclient1.Disconnected Pada Bagian Blocks 15. Mengklik Label1 pada bagian Blocks untuk mengambil komponen set Label1.Text to sebanyak 2 buah dan set Label1.TextColor to sebanyak 2 buah. Gambar 3.45 Komponen Set Label1.Text to Dan Set Label1.Textcolor to Pada Bagian Blocks

28 Mengklik Control pada bagian Blocks untuk mengambil komponen if then else. Gambar 3.46 Komponen If Then Else Pada Bagian Blocks 17. Mengklik Text pada bagian Blocks untuk mengambil komponen Text dan tulis Text dengan Connected dan Not Connected. Gambar 3.47 Komponen Text Pada Bagian Blocks

29 Menyatukan komponen When Clock1.Timer, if then else, BluetoothClient1.IsConnected, set Label1.Text to, et Label1.TextColor to, Text Connected dan Text Not. Ini adalah program untuk pemberitahuan Label koneksi dari Bluetooth. Gambar 3.48 Label Koneksi Bluetooth 19. Mengklik Button2 pada bagian Blocks untuk mengambil komponen When Button2.Click. Gambar 3.49 Komponen When Button2.Click Pada Bagian Blocks 20. Mengklik BluetootClient1 pada bagian Blocks untuk mengambil komponen Call BluetoothClient1.SendText Text.

30 51 Gambar 3.50 Komponen Call Bluetoothclient1.Sendtext Text Pada Bagian Blocks 21. Mengklik Text pada bagian Blocks untuk mengambil komponen Text, seperti pada nomor Menyatukan komponen When Button.Click, Call BluetoothClient1.SendText Text, dan Text. Ini adalah program tombol untuk warna. Gambar 3.51 Program Tombol Warna

31 Programing Secara garis besar alat ini akan bekerja sesuai dengan data yang dikirim oleh smartphone android melalui media komunikasi Bluetooth HC- 05. Dari data tersebut akan diolah menjadi output pada Panel P10 RGB Indoor sebagai display. Program yang digunakan untuk komunikasi Bluetooth HC-05 ini adalah program HC-05 test yang sudah terdapat pada libraries arduino IDE (Integrated Development Environment). Gambar 3.52 Program HC-05 pada libraries arduino IDE

32 53 Pada langkah selanjutnya masukan program komunikasi SerialEvent yang juga sudah terdapat pada libraries arduino IDE (Integrated Development Environment). Sehingga dapat diprogram menyesuaikan terhadap program HC-05 test pada program komunikasi SerialEvent.. SerialEvent akan dipanggil jika data datang atau diterima (berlaku seperti interupsi serial). Gambar 3.53 Program SerialEvent pada libraries arduino IDE Pada langkah selanjutnya masukan program ScrollText yang juga sudah terdapat pada libraries arduino IDE (Integrated Development Environment). Sehingga dapat diprogram menyesuaikan terhadap masukan dari program HC-05 test dan keluaran yang sesuai perintah dari program HC-05 test pada komunikasi Bluetooth HC-05.

33 54 Gambar 3.54 ScrollText pada libraries arduino IDE Pada program ScrollText ini menggunakan include dari program Adafruit_GFX.h yang berfungsi sebagai Core Graphics Library dan include dari program RGBmatrixPanel.h yang berfungsi sebagai Hardware-Specific Library.

34 55 Gambar 3.55 Flow Chart