September 2016 ~ Elektronika Kita

Sabtu, 17 September 2016

Membuat GUI dengan processing untuk Arduino pada Protheus

Selamat datang kembali!

Alhamdulillah, penulis telah menyelesaikan studi S1 dan inshaa Allah akan mengaktifkan blog ini dengan posting-postingan yang bermanfaat, dan lebih intens.

Pada pembahasan kali ini, kita akan belajar membuat sebuah GUI (Graphic User Interface) menggunakan software Processing untuk mengendalikan sebuah LED menggunakan Arduino, namun bukan dengan Arduino sungguhan, tapi virtual dengan bantuan software Protheus. Jadi kalian gak harus beli Arduinonya.

Hmmm.... menarik kan? Baca sampai habis ya.

Okay, sebelumnya kalian harus mengerti terlebih dahulu fungsi dari masing-masing software yang kita gunakan yakni Protheus, Processing, dan Arduino IDE.

Software yang dibutuhkan :

LabCenters Proteus software yang telah dipasang library Arduino
Virtual Serial Port Emulator
Processing
Arduino IDE

Okeh kita mulai

1. Virtual Serial Port Emulator

Virtual Serial Port Emulator digunakan untuk membuat komunikasi secara virtual, sehingga kita dapat menghubungkan Arduino (virtual) yang ada di Protheus dengan Processing.

download dan install VSPE di web berikut
http://www.eterlogic.com/Products.VSPE.html

2. Membuat sebuah COM PORT baru
- Buka software VSPE

- Pada device type pilih Pair

- Klik Finish

- Okeh sekarang, kita berhasil membuat serta mengaktifkan dua COM Port terminal baru, yakni COM1 dan COM2

3. Membuat sebuah projek di Protheus
Buka software protheus atau isis. Lalu siapkan komponen yang dibutuhkan :
- Arduino Uno
- LED-RED
- COMPIM
- Resistor 220 Ohm

Buatlah rangkaian seperti gambar di bawah ini.

4. Mengatur komunikasi COMPIM pada Protheus

Klik 2 kali pada COMPIM, lalu atur setiap parameternya seperti pada gambar di bawah ini. Ingat! karena tadi kita mengatur terminal COM PORT pada VSPE di COM1, maka kita harus menyesuaikannya di software protheus, yakni COM1 pada Physical port.

5. Buat Program Arduino
Berikutnya adalah membuat sketch Arduino pada IDE, perhatikan source code berikut.

/* 
 *  Kontrol Lampu LED secara Virtual
 *  dengan Processing dan Protheus
 *  Made By Rian Glori Suseno
 *  Katro 12 UNJ
 */

int input=0;  // Variabel untuk menampung data dari processing

void setup()
{
  Serial.begin(9600); // Atur Baudrate sesuai dengan protheus
  pinMode(13,OUTPUT);
}

 void loop()
{
  if(Serial.available()>0)
  {
    input =Serial.parseInt(); // Baca data serial hanya tipe data integer
  }
  digitalWrite(13,input);
}

kemudian compile dan copy direktori file hex-nya. Seperti gambar di bawah ini

Lalu, buka kembali software protheus, klik dua kali pada board Arduino lalu paste pada Program File

6. Membuat GUI dengan Processing
Buka processing, lalu perhatikan source code berikut. Perlu diperhatikan, karena Device type yang kita gunakan adalah Pair pada VSPE, maka atur COM Port serial di processing pada COM2.

/*
* GUI Untuk Kontrol LED dengan Arduino
* Pada Protheus
* Made By Rian Glori Suseno
* Katro 12
*/


import controlP5.*;  // Library untuk membuat gui
import processing.serial.*;  // Library untuk komunikasi serial

// Membuat Objek
ControlP5 cp5;
Serial arduinoGue;

int LED=0;

void setup()
{
  size(300,100);
  cp5= new ControlP5 (this);
  arduinoGue=new Serial (this,"COM2",9600);
  noStroke();
  
  // Buat sebuah tombol toggle
  cp5.addToggle("LED")
     .setPosition(20,20)
     .setSize(20,50)
     ;
}

void draw()
{
  background(128,128,0);
  if(LED==1)  // Jika ditekan maka lingkaran merah
  {
    fill(255,0,0); 
    ellipse(100,50,50,50);
  }
  
  else   // jika tidak maka putih
  {
    fill(255);
    ellipse(100,50,50,50);
  }
  
  // Kirim data 
  arduinoGue.write(LED+"\n");
}