Raspberry Pi 2 GPIO LED (Bagian 1)

Internet of Things (IoT) adalah tren kekinian dari teknologi komunikasi. Melalui IoT, internet dapat kita rasakan (dalam artian sesungguhnya). Karenanya terutama dari sisi pengguna, kita butuh perangkat keras, yang dapat kita rasakan, sebagai elemen utama IoT.

Single Board Computer (SBC) seperti Raspberry Pi dengan ukuran yang mungil tapi berkemampuan komputer, sepertinya cocok untuk dijadikan perangkat pendukung IoT. Di internet sudah mulai marak artikel bertemakan IoT dengan Raspberry Pi.

Raspi untuk dapat berkomunikasi dengan hardware lain, salah satunya adalah dengan GPIO.

Salah satu cara (sangat sederhana) untuk mempelajari GPIO pada SBC adalah dengan mengontrol LED. Saya sendiri meski senang membuat sesuatu yang dapat bekerja, tidak cukup sabar untuk melakukan pekerjaan a la insinyur elektro seperti menyolder. Pengalaman saya terakhir menyolder adalah tahun 2008, saat membuat usb extenders untuk wajanbolic, yang akhirnya gagal dan memilih membeli saja. Ihwal itu yang menyebabkan kegiatan merangkai LED dan Raspi dipilih, karena mudah, sesuai untuk saya yang tak tekun membuat rangkaian elektronik.

Pada bagian 1 ini, saya ingin membuat Raspberry Pi 2 dapat menyalakan LED.

bahan yang digunakan:

Breadboard

Breadboard

Jangan lupa patternnya breadboard.

Breadboard Pattern

Breadboard Pattern

 

Jumper Wire (Male)

Jumper Wire (Male)

  • LED, Rp400 sebuah
LED

LED

Salah satu kaki LED yang lebih panjang, namanya Anoda, disambungkan dengan arus positif.

LED Diagram

LED Diagram

 

  • Resistor, ditebus dengan 700 rupiah, dapat 10
Resistor

Resistor

Diagram rangkaian yang akan dibuat.

Diagram Rangkaian LED

Diagram Rangkaian LED

Anoda akan dihubungkan dengan pin 3,3 Volt dari GPIO Raspi, sedang katoda dengan Ground (GND). Diagram GPIO Raspi 2 sebagai panduan.

Raspberry Pi 2 GPIO

Raspberry Pi 2 GPIO

Pinjam gambar dari sini, begini layout rangkaian yang akan dibuat.

Layout Rangkaian

Layout Rangkaian

Ternyata mudah (evil grin). Dan beginilah hasilnya.

Raspberry Pi 2 + LED

Raspberry Pi 2 + LED

LED

Breadboard + LED

GPIO

Rangkaian pada GPIO

2 LED

Menggunakan 2 LED

Meski sederhana (siapa yang butuh SBC seharga 600ribu hanya untuk sekedar menyalakan 2 buah LED?) namun dari sini saya mempelajari tentang pin pada GPIO Raspi 2, juga kemudahan dari menggunakan breadboard.

Di bagian selanjutnya saya akan mempelajari bagaimana memanipulasi LED menggunakan script python.

Salam.

Lebih Lanjut:

  1. http://sourceforge.net/p/raspberry-gpio-python/wiki/install/
  2. https://projects.drogon.net/raspberry-pi/gpio-examples/tux-crossing/gpio-examples-1-a-single-led/
  3. https://www.raspberrypi.org/documentation/usage/gpio-plus-and-raspi2/
  4. https://en.wikipedia.org/wiki/Breadboard

Mainan Baru, Raspberry Pi 2

Setelah mendengar urban legend tentang raspberry sepertinya menarik, apalagi liat di yutup banyak hal menarik yang bisa dilakuin pake raspi. Karena males muter2 nyari di toko, nyarinya lewat layar aja, harganya di sekitar 590-600K.

Beli sepaket raspi 2 + adaptor + microSD 8 GB (sudah ada isi OS Rasbian) + Case = 849K. Plus 79.900 untuk wifi adapter.

raspi baru

paket + wifi adapter

Rasberry pi 2

raspi 2

raspberry pi 2

IMG_20151210_223400

raspi + case

Karena beli paketan, di dalam microSD sudah ada Raspbian, tinggal pasang power adaptor, sambungkan keyboard, mouse dan hubungkan dengan display.

raspi

Raspi

Linux? Ya. Meski katanya Raspi bisa dipasang windows 10 tapi saya pikir linux lebih menarik dan ringan (kayaknya).

Saat pertama menjalankan sistem, disarankan untuk memutakhirkan Raspbian dengan perintah di LXTerminal.
untuk update repository

upgrade sistem

Menurut di sini perintah itu sudah cukup, bahkan sudah termasuk upgrade firmware, tapi banyak di internet yang menyarankan menggunakan program buatan hexxeh untuk upgrade firmware raspi.
instalasi

update sistem

Oya, wifi adapter langsung dikenali sistem, jadi langsung bisa dipakai, bahkan bisa disetting jadi Access Point. Kesempatan selanjutnya saya tunjukkan bagaimana raspi jadi Shutter Release untuk DSLR.

Salam.

CakePHP dan jQuery Mobile

Halo, ini adalah posting pertama aing saya di rumah baru, hehehe.

Kali ini aing saya ingin berbagi menulis pengalaman menggunakan jQuery Mobile, dibantu CakePHP di sisi server.

Pura-puranya aing saya akan membuat aplikasi untuk menyimpan informasi kontak. Namun untuk kali ini aing batasi hanya R dari CRUD karena akan jadi terlalu panjang dan membosankan tulisan ini, jika lengkap empat huruf tersebut.

Bahan-bahan yang digunakan:

  1. Cakephp 2.3.0
  2. jQuery 1.9.1
  3. jQuery Mobile 1.3.0
  4. sample MySQL database dengan satu tabel bernama contacts, atau silahkan gunakan perintah SQL di bawah ini.


Aplikasi yang aing saya buat bernama jqm, aplikasi dapat diakses dari http://localhost/jqm. Kita mulai pembahasan jika http://localhost/jqm/contacts sudah menghasilkan tampilan sebagai berikut.

contacts

default contacts view

untuk menangani tampilan pada perangkat bergerak, saya aing akan menggunakan tema yang diberi nama Mobile.

  1. Buat folder Themed di app/View
  2. Buat folder Mobile di app/View/Themed
  3. Buat folder Customers, Layouts dan webroot pada folder app/Themed/Mobile
  4. Buat folder js dan css pada app/Themed/Mobile/webroot
  5. Salin berkas jquery-1.9.1.min.js dan jquery.mobile-1.3.0.min.js ke folder app/Themed/Mobile/webroot/js
  6. Salin berkas jquery.mobile-1.3.0.min.css ke folder app/Themed/Mobile/webroot/css
  7. Salin folder images dari paket jquery.mobile-1.3.0.zip ke folder app/Themed/Mobile/webroot/css
  8. Untuk meningkatkan performa pada tahapan produksi baiknya buat symlink atau salin berkas sesuai langkah 5 sampai 7 ke folder app/webroot

Jika kita coba mengakses http://localhost/jqm/contacts maka tampilan halaman tersebut masih sama seperti sebelum kita melakukan 8 langkah di atas. Untuk menggunakan tema Mobile, ubah berkas /app/Controller/ContactsController.php. tambahkan di dalam kelas

Misalnya menjadi seperti di bawah ini.

Buat berkas default.ctp pada /app/View/Themed/Mobile/Layouts


Sila buka http://localhost/jqm/contacts maka tampilan yang dihasilkan adalah sebagai berikut.

mobile contacts view

mobile contacts view

Perbedaannya hanya pada header dan footer, dan tentu tampilan yang makin acak-acakan 😀


Tidak ada yang istimewa dengan berkas default.ctp di atas, sedikit saja perbedaannya dengan berkas layout ‘bawaan’ CakePHP.

Kita perlu mendefinisikan sebagai berkas HTML5 untuk web yang dibangun menggunakan JQuery Mobile.

Viewport yang awalnya dikembangkan oleh mobile Safari adalah semacam virtual window yang digunakan untuk menampilkan halaman web. Seringnya ukuran viewport lebih besar ketimbang ukuran layar (perangkat mobile), karena itu kadang pengguna aplikasi harus melakukan zoom in ataupun zoom out saat membuka web melalui perangkat bergerak.

Seperti kita lihat, lebar viewport diseting agar sama dengan lebar perangkat. Sedangkat initial-scale menentukan zoom level saat halaman pertama kali di load.

JQuery Mobile menggunakan markup HTML seperti tag div, dan untuk ‘memberi tahu’ JQuery Mobile agar diapakan tag div tersebut, perlu didefinisikan aturan (role) menggunakan atribut data-role. Atribut data-* (dalam kasus ini kita menggunakan data-role) adalah tag yang baru ada di HTML5 yang dinamakan cutom data attributes yang dapat digunakan untuk mendefinisikan atribut apapun yang ingin ditambahkan di dalam tag HTML, dengan tetap menghasilkan dokumen HTML yang valid.

Page pada data-role berarti halaman tempat konten JQuery Mobile ditampilkan. Selain Page ada juga header, footer, content, listview, dan lain sebagainya. Selengkapnya sila ke laman ini.


Untuk menghasilkan tampilan yang rapi seperti di sini, buat berkas index.ctp pada /app/View/Themed/Mobile/Contacts.

Arahkan peramban ke http://localhost/jqm/contacts.

listview

List View

Untuk ‘memerintahkan’ JQuery Mobile menghasilkan tampilan seperti di atas, kuncinya adalah listview pada atribut data-role.

Tambahkan data-inset="true" pada tag ul seperti:

Maka akan menghasilkan tampilan seperti ini.

secondlistview

List View with Data Inset Attribute


Sila buka salah satu nama, misal Laith, maka tampilan akan seperti ini.

laith

Laith

Agar tampilan lebih rapi silahkan buat berkas view.ctp pada /app/View/Themed/Mobile/Contacts.

Hasilnya seperti ini.

viewcontact

View Contact

Yang baru adalah tag li yang diberi atribut data-role berisi list-divider, yang akan menghasilkan baris berwarna biru.

Baiklah, sepertinya cukup sampai di sini dulu tulisan ini, setelah berminggu-minggu akhirnya selesai juga xixixi.

Oya, lebih lanjut silahkan gunakan referensi ini: