Arduino, Keypad, dan Processing

Yak, setelah kemarin bermain dengan keypad, hari ini saya mencoba untuk menghubungkan keypad tersebut ke program yang berjalan ke komputer. Idenya sih dengan menggunkan komunikasi serial pada Arduino, kemudian data dari serial tersebut diolah oleh suatu program. 

Awalnya saya ingin membuat program tersebut dengan bahasa pemrograman Java seperti pada contoh di arduino.cc. Akan tetapi, sayang sekali karena saya malas untuk menginstall file .dll yang diperlukan, selain itu juga kebetulan saya tidak dapat mengakses rxtx.qbang.org untuk mengunduh file .dll yang diperlukan agar dapat menghubungkan java dengan serial.

Singkat kata, saya googling-googling lagi, saya menemukan suatu bahasa pemrograman yang ternyata cukup banyak digunakan oleh orang-orang yang bermain dengan Arduino, bahasa pemrograman tersebut adalah processing. Nah ternyata processing ini dibuat dengan basis Java, namun ada suatu kalimat di websitenya yang membuat saya tertarik untuk mencoba, yaitu

Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers.

Wah ada bahasa pemrograman yang sepertinya user friendly dan sangat powerful untuk membuat program dengan interface nih. Tanpa basa basi, saya langsung googling lagi mencari tutorial untuk menggunakan processing. Ditemukanlah di tautan berikut playground.arduino.cc. Saya pun langsung mengikuti instruksi di website tersebut.

Intinya, yang saya lakukan berdasarkan website tersebut adalah:

1. unduh program processing tentunya...
2. unduh library untuk menghubungkan arduino dan processing
3. upload program firmata yang terdapat di file->examples pada IDE Arduino ke board Arduino Uno
4. jalankan program contoh di processing

Nah saya sudah membuat rangkaian seperti pada gambar 1 (hanya memasang LED di pin 13) :D

Gambar 1 - rangkaian yang saya buat untuk mencoba processing

Saya menjalankan program pada processing dengan kode seperti dibawah ini

import processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int ledPin = 13;

void setup()
{
  //println(Arduino.list());
  arduino = new Arduino(this, Arduino.list()[3], 57600);
  arduino.pinMode(ledPin, Arduino.OUTPUT);
}

void draw()
{
  arduino.digitalWrite(ledPin, Arduino.HIGH);
  delay(1000);
  arduino.digitalWrite(ledPin, Arduino.LOW);
  delay(1000);
}

Hasilnya seperti pada video dibawah ini.

Oke, jadi sekarang saya sudah cukup mengerti processing(sok ngerti, padahal cuman copas). Sekarang saya mau menghubungkan Arduino, keypad, dan program yang akan saya buat dengan processing.

Eh tapi ternyata, setelah saya pikir-pikir ada yang aneh dengan percobaan yang baru saya lakukan. Arduinonya di install program tertentu(firmata) dan menggunakan processing untuk mengoperasikannya, disini saya melihat bahwa semua perintah ditentukan oleh program dari processing, sedangkan Arduino nya sendiri hanya berfungsi untuk menjankan perintah itu. Karena ini hanya bergantung pada satu program saja, maka saya coba cara lain untuk menghubungkan Arduino dan program yang dibuat dengan processing.

Setelah saya googling, saya mendapatkan link yang cukup menarik yaitu dari learn.sparkfun.com/ yang menjelaskan cara untuk menyambungkan Arduino dengan program processing, cara yang dilakukan beda dan sesuai dengan yang saya inginkan.

Berbekal dengan pengetahuan yang baru saya dapatkan dan juga dokumentasi dari www.processing.org saya akan coba membuat GUI untuk program yang akan menampilkan tombol yang saya tekan di keypad.

Setelah saya lihat dokumentasi nya processing, saya menyimpulkan akan ada beberapa fungsi yang saya gunakan, yaitu setup(), draw(), noLoop(), serialEvent(), redraw(), createFont() dan textFont(). Fungsi-fungsi ini yang menjadi perhatian utama saya, kemudian saya mencoba membuat kode program di Processing, awalnya saya tidak menggunakan redraw(), draw(), dan font, saya mencoba menampilkan tombol yang saya tekan di console IDE processing.

Kode untuk processing yang saya gunakan adalah

import processing.serial.*; //import library untuk menghubungkan processing dengan serial

Serial port; //variabel serial dengan nama port
String key; //variabel string untuk menyimpan tombol yang ditekan

void setup(){
  port = new Serial(this, "COM35", 9600);//deklarasi bahwa variabel port adalah koneksi serial dengan port COM35 dan baud rate 9600
  port.bufferUntil('\n'); //melakukan buffer hingga karakter '\n' ditemukan
}

void draw(){//fungsi untuk GUI (menggambar ke layar)
}

//fungsi ketika ada pesan yang melalui koneksi serial
void serialEvent(Serial port){
  if(port.available() > 0){
    key = port.readStringUntil('\n');//variabel key di isi dengan string yang terbaca hingga karakter '\n'
    print(key);//cetak key ke console
  }
}

sedangkan kode untuk board Arduinonya tidak jauh berbeda dengan postingan saya sebelumnya, kode nya adalah

/*
menampilkan tombol pada keypad yang ditekan pada serial monitor
*/
const int numRows = 4; //jumlah baris pada keypad
const int numCols = 4; //jumlah kolom pada keypad
const int debounceTime = 20; //waktu dalam mili detik untuk menunggu tombol ke kondisi stabil
//keymap menentukan char apa yang muncul apabila suatu tombol ditekan
const char keymap[numRows][numCols] = {
                                      { '1', '2', '3', 'A' } ,
                                      { '4', '5', '6', 'B' } ,
                                      { '7', '8', '9', 'C' } ,
                                      { '*', '0', '#', 'D' }
                                      };
                                      
//array ini menetukan pin yang akan digunakan untuk baris dan kolom pada keypad
const int rowPins[numRows] = { 9, 8, 7, 6 }; //baris 0 sampai 3
const int colPins[numCols] = { 5, 4, 3, 2 }; //kolom 0 sampai 3

void setup(){
  Serial.begin(9600);
  for (int row = 0; row < numRows; row++){
    pinMode(rowPins[row], INPUT); //set baris sebagai input
    digitalWrite(rowPins[row], HIGH); //buat semua baris tidak aktif
  }
  for (int column = 0; column < numCols; column++){
  pinMode(colPins[column],OUTPUT); //set kolom sebagai input
  digitalWrite(colPins[column], HIGH); //buat semua kolom menjadi tidak aktif
  }
}

void loop()
{
  char key = getKey();
  if( key != 0) { //jika key tidak 0,
                  //maka ada tombol yang ditekan
    Serial.println(key);
  }
}

//mengembalikan tombol yang ditekan, 0 bila tidak ada yang ditekan
char getKey()
{
  char key = 0; //0 menunjukkan tidak ada tombol yang ditekan
  for(int column = 0; column < numCols; column++){
    digitalWrite(colPins[column],LOW); //aktifkan kolom sekarang
    for(int row = 0; row < numRows; row++){ //scan semua baris apakah
                                            // ada tombol yang ditekan
      if(digitalRead(rowPins[row]) == LOW) //jika tombol ditekan
      {
        delay(debounceTime); //debounce
        while(digitalRead(rowPins[row]) == LOW)
        ; //menunggu hingga tombol tidak dalam kondisi ditekan
        key = keymap[row][column]; //mengingat tombol apa yang ditekan
        }
   }
    digitalWrite(colPins[column],HIGH); //membuat kolom sekarang menjadi tidak aktif
  }
  
  return key; //mengembalikan tombol yang ditekan, 0 jika tidak ada yang ditekan
}

Hasil yang saya dapatkan dapat dilihat pada video berikut

Karena saya kurang puas dengan hanya melakukan print karakter ke console, dan rasa ingin untuk membuktikan quote yang ada di website http://processing.org; bahwa processing merupakan bahasa pemrograman yang dapat digunakan dengan mudah untuk membuat GUI, maka saya melakukan editing pada kode program sebelumnya, dengan menambahkan fungsi draw(), redraw(), noLoop(), serta fungsi-fungsi untuk membuat font.

Kode akhirnya adalah sebagai berikut

import processing.serial.*; //import library untuk menghubungkan processing dengan serial

Serial port; //variabel serial dengan nama port
String key; //variabel string untuk menyimpan tombol yang ditekan
PFont font;

void setup(){
  port = new Serial(this, "COM35", 9600);//deklarasi bahwa variabel port adalah koneksi serial dengan port COM35 dan baud rate 9600
  port.bufferUntil('\n');//melakukan buffer hingga karakter '\n' ditemukan
  
  size(800, 600);//ukuran frame
  font = createFont("Arial", 16, true);
  noLoop();//perintah agar fungsi draw() tidak melakukan loop
}

void draw(){//fungsi untuk GUI (menggambar ke layar)
  background(255, 255, 255); //deklarasikan warna background putih
  textFont(font, 120); //font yang digunakan adalah variabel font dengan ukuran 120
  fill(0);
  try{
  text(key, 400, 300);//text yang ditampilkan adalah string yang terdapat dalam variabel key, dengan posisi x,y 400,300
  }
  catch(Exception e){
  }
}

//fungsi ketika ada pesan yang melalui koneksi serial
void serialEvent(Serial port){
  if(port.available() > 0){
    key = port.readStringUntil('\n');//variabel key di isi dengan string yang terbaca hingga karakter '\n'
    print(key);//cetak key ke console
    redraw();//perintah untuk menjalan fungsi draw()
  }
}

Hasil yang saya dapatkan dapat dilihat di video berikut 

Sebelum ngoprek, saya membaca dan memahami dokumentasi dari bahasa pemrograman processing yang terdapat di www.processing.org, sehingga percobaan pertama saya dengan menggunakan bahasa processing langsung berjalan dengan mulus.

Postingan ini merupakan pertama kalinya saya mencoba bahasa processing dan perlu diakui, bahasa ini lebih mudah untuk membuat GUI daripada bahasa lain yang pernah saya gunakan (Java, C, C++, python), namun hal ini hanya kesan pertama saja, masih bisa berubah dikemudian hari... Sekian saja postingan saya kali ini, tunggu postingan berikutnya dengan oprekan yang lebih menarik!