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

Pendahuluan

Mari kita kembangkan percobaan kita. Pada percobaan ini, kita akan mengatur arah putar sudut servo berdasarkan input nilai Slider. Agar lebih menarik, kita akan buatkan animasi perputaran sudut servo.

Konfigurasi Hardware

Tempatkanlah sebuah mikro servo di pin 4 pada Arduino. Amatilah Gambar 1. Ingat, kita akan menggunakan mikroservo, yaitu servo berukuran kecil yang tidak memerlukan banyak arus dalam pengoperasiannya. Untuk servo yang lebih besar, kita harus menggunakan driver.

[[{"fid":"629","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"servo arduino","field_file_image_title_text[und][0][value]":"servo arduino"},"type":"media","link_text":null,"attributes":{"alt":"servo arduino","title":"servo arduino","height":"291","width":"379","class":"media-element file-default"}}]]

Gambar 1. Pemsangan Mikroservo pada Pin Digital 4

Pemrograman Arduino

Arduino akan menerima data dari Processing berdasarkan posisi Slider. Untuk dapat mengontrol servo, kita akan menambahkan pustaka Servo.h di awal pemrograman Arduino kita. Pada program Arduino ini, objek untuk servo diberi nama servoku. Ingat bahwa servo dapat bergerak dari 0-180 derajat. Nilai inilah yang akan digunakan untuk mengontrol servo melalui fungsi servoku.write(). Sebagai contoh, jika ingin memutar servo 125 derajat, maka kita akan menulis servoku.write(125). Berikut skrip selengkapnya:

// sertakan pustaka untuk servo
#include <Servo.h>

// buat objek untuk servo
Servo servoku;
// sediakan variabel untuk byte masuk
int incomingByte = 0;

void setup() {
  Serial.begin(9600);
  // tempatkan servo di pin 4
  servoku.attach(4);
}

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

Pemrograman Processing

Processing bertugas untuk menangkap data dari Slider dan mengirimkannya ke Arduino. Nilai Slider yang ditangkap juga akan digunakan untuk mengatur animasi putaran servo. Karena input servo memiliki nilai antara 0 sampai 180 derajat, maka kita harus mengubah nilai minimum dan maksimum Slider masing-masing menjadi 0 dan 180. Penjelasan dari beberapa baris program telah disajikan dalam bentuk komentar pada skrip program.
Pada sisi Processing, buatlah skrip berikut:

//import semua pustaka yang diperlukan
import g4p_controls.*;
import processing.serial.*;

// pergunakan objek pada pustaka
Serial portSerial;
GCustomSlider sliderku;

// kalimat untuk ditampilkan pada GUI
String kalimat = "Sudut Servo = ";

void setup(){
 // ukuran layar
 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);
 // untuk servo: min = 0, maks = 180
 sliderku.setLimits(0, 0, 180);
 
 // sesuikan nomer COM Anda. Disini digunakan COM5
 portSerial = new Serial(this, "COM5", 9600);
}

void draw(){  
  background(#AFF50F);
 
  // ambil nilai slider
  int nilaiSlider = sliderku.getValueI();
 
  // buat lingkaran untuk badan servo
  stroke(0);
  strokeWeight(8);
  fill(#A83EF5);
  ellipse(width/2, height/2, 100, 100);
 
  // tulis nilai Slider ke Arduino
  portSerial.write(nilaiSlider);  
 
  // tambahkan teks untuk mengetahui posisi servo
  fill(0);
  textSize(20);    
  text(kalimat+nilaiSlider, 10, 30);
 
  //putar servo  
  servo(nilaiSlider);
  delay(100);
}

void servo(float sudut){
  // ini adalah fungsi untuk animasi servo
  translate(width/2, height/2);
  stroke(0);
  strokeWeight(30);
  pushMatrix();
  rotate(radians(sudut-90));
  line(0, 0, 0, -120);
  popMatrix();
 
  // translate kembali agar slider tidak ikut digeser
  translate(-width/2, -height/2);
}

Geser-geserlah slider dan amati perubahan posisi servo. GUI dan animasi servo diperlihatkan pada Gambar 2.

[[{"fid":"630","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Servo Arduino Processing","field_file_image_title_text[und][0][value]":"Servo Arduino Processing"},"type":"media","link_text":null,"attributes":{"alt":"Servo Arduino Processing","title":"Servo Arduino Processing","height":"438","width":"617","class":"media-element file-default"}}]]

Gambar 2. GUI dan Animasi untuk Mengontrol Servo

Demikian tutorial kali ini. Semoga bermanfaat.... ^^