[TUTORIAL] Pemrograman GUI pada Processing (Part - 2)

Pendahuluan

Pada percobaan ini, kita akan mengontrol intensitas nyala LED pada Arduino berdasarkan input nilai Slider pada Processing. Pengguna akan mengatur posisi Slider berdasarkan GUI yang telah kita buat pada Processing. Agar lebih menarik, kita akan mengatur warna pada lingkaran yang kita gambar pada Processing. Semakin terang LED, maka warna lingkaran akan semakin merah.

Konfigurasi Hardware

Sebagai langkah awal, tempatkanlah sebuah LED pada pin 9. Kita dapat menempatkan di pin yang lain, asalkan memiliki fungsi PWM (pin 3,5,6,9,10, dan 11). Pin-in ini ditandai dengan lambang tidle ( ~ ) pada papan Arduino. Jangan lupa untuk menempatkan sebuah resistor untuk mengamankan LED dari kelebihan arus (100 – 1kOhm dirasa cukup). Amatilah Gambar 1.

[[{"fid":"384","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing-Arduino Pemasangan LED PWM","field_file_image_title_text[und][0][value]":"Processing-Arduino Pemasangan LED PWM"},"type":"media","link_text":null,"attributes":{"alt":"Matlab-Arduino Pemasangan LED PWM","title":"Matlab-Arduino Pemasangan LED PWM","height":"321","width":"287","class":"media-element file-default"}}]]

Gambar 1. Konfigurasi LED pada Arduino

Pemrograman Arduino

Arduino akan menerima data dari Processing berdasarkan posisi Slider. Pada sisi Arduino, buatlah skrip berikut:

// sedikan variabel untuk byte masuk 
int incomingByte = 0;  

void setup() {
  Serial.begin(9600);     
}

void loop() {
  // jika terjadi komunikasi secara serial:
  if (Serial.available() > 0) {
    // baca byte yang masuk
    incomingByte = Serial.read();
    // tulis nilai yang diperoleh dari Slider ke pin 9
    analogWrite(9,incomingByte);
  }
}

Data yang masuk memiliki format byte. Byte memiliki rentang nilai sebesar 8-bit, yaitu antara 0 – 255. Karena fungsi analogWrite adalah perintah untuk membangkitkan PWM  sebesar 8-bit, maka penggunaan tipe data byte adalah tepat.

Pemrograman Processing

Processing bertugas untuk menangkap data dari Slider dan mengirimkannya ke Arduino. Nilai Slider yang ditangkap juga akan digunakan untuk mengatur warna pada lingkaran. Pada sisi Processing, buatlah skrip berikut:

import g4p_controls.*;
import processing.serial.*;
Serial portSerial;
GCustomSlider sliderku;

void setup()
{
  size(600, 400);
  // atur properti Slider
  sliderku = new GCustomSlider(this, 100, 300, 400, 50, "red_yellow18px");
  sliderku.setShowDecor(false, true, true, true);
  sliderku.setNbrTicks(5);
  sliderku.setLimits(0, 0, 255);
  // sesuikan nomer COM Anda. Disini digunakan COM5
  portSerial = new Serial(this, "COM5", 9600);
}

void draw() {
  background(#E1F022);
  // atur tebal garis lingkaran
  strokeWeight(10);
  // buat warna putih pada garis lingkaran
  stroke(255);
  // atur komposisi warna merah berdasarkan nilai Slider
  fill(sliderku.getValueI(), 0, 0);
  // buat objek lingkaran
  ellipse(300, 160, 255, 255);
  // kirim nilai Slider ke Arduino
  portSerial.write(sliderku.getValueI());
  delay(100);
}

Sambil menggeser-geser Slider, amatilah perubahan intensitas pada LED Arduino dan perubahan warna lingkaran pada Processing.

[[{"fid":"627","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"GUI LED Arduino - Processing","field_file_image_title_text[und][0][value]":"GUI LED Arduino - Processing"},"type":"media","link_text":null,"attributes":{"alt":"GUI LED Arduino - Processing","title":"GUI LED Arduino - Processing","height":"439","width":"618","class":"media-element file-default"}}]]

Gambar 2. GUI pada Processing untuk Mengontrol LED pada Arduino

Demikian tutorial kali ini. Pada tutorial selanjutnya, kita akan mengotrol servo. Semoga bermanfaat ^^