ตอนที่ 5 : ControlP5

ผมมีแก้ไขเนืือหาตอนที่ 4 เป็นส่วนสำคัญมากๆ 

ลองย้อนกลับไปดูครับ

---------------------------------------------------------------------------------

จากตอนที่แล้ว มีหลายอย่างที่ยังไม่ได้อธิบาย ในส่วนของ Serial เองเป็น library ที่ช่วยในการใช้ Serial port ก็จะเหมือนกับ Serial ใน Arduino ก็คือต้องระบุว่าจะเชื่อมต่อกับ COM ช่องไหน และ Baudrate  ซึ่งในโค๊ดใช้คำสั่งประกอบกัน 2 ส่วนคือ

Serial port;

เป็นการประกาศตัวแปรแบบ Serial ตั้งชื่อว่า port

ในส่วนของการเตรียมการ setup() ก็นำตัวแปรไปใช้

void setup() {

.

.

  println(Serial.list()); // แสดงรายการ COM port

  port = new Serial(this, Serial.list()[1], 9600);

  port.clear() // ล้างข้อมูลใน Buffer

  port.bufferUntil('\n'); กำหนดว่าเมื่อพบ \n ก็หยุดการล้างข้อมูล  

.

.

}

จะมีข้อที่อาจเกิดความยุ่งยากขึ้นบ้าง ถ้าบน PC มีช่อง COM หลายอัน ก็ต้องหาให้เจอว่า Arduino ต่อกับ COM ไหน ก็เอาหมายเลขของ COM นั้นมาใส่ในวงเล็บ แต่ก็คิดว่าเมื่อเขียนโปรแกรม ก็น่าจะมีการให้โปรแกรมช่วยค้นหาหมายเลขสำหรับ COM ที่ต้องการ เอาเป็นว่าใช้วิธีที่บอกไปในตอนที่แล้วไปก่อนแล้วกัน

ส่วนของ this เอง คือระบุว่าจะใช้กับ PApplet ตัวไหน ก็ให้ใส่ไว้แบบนี้ เพราะคงจะน้อยครั้งที่เราจะมี PApplet มากกว่า 1 ตัว

เมื่อกำหนดทั้งหมดแล้ว โปรแกรมก็พร้อมที่จะรับ-ส่ง ข้อมูลแล้วหละ

ที่จะพูดต่อก็คือ ในส่วนของ ControlP5

ControlP5 เป็น Library ที่ใช้ในการวาง Control ต่างๆ ได้แก่ Button, Textfield, Slider, Knob ที่เราเห็นในตัวอย่างจากตอนที่แล้ว และอีกมากมายที่เห็นในรูป

หลายคนเคยเขียน Java หรือภาษาแบบ OOP จะคุ้นกับการใช้ Class แต่ถ้าไม่คุ้นก็ค่อยติดตามไป ไม่ยากครับ

ขอเรียกทั้งหลายที่อยู่ในรูปว่าเป็น Controller การเรียกใช้งานก็ผ่านการประกาศตัวแปร เช่นถ้าต้องการจะใช้ Button ก็ตามนี้

Button button;
Textfield textfield;

ประมาณนี้ครับ

แต่ใน Processing จะมีการเพิ่ม Control ด้วยคำสั่งลักษณะที่ต้องทำความเข้าใจนิดนึง ซึ่งก่อนอื่นต้องสร้างกล่องเก็บ Control ก่อน ตามนี้

ControlP5 cp5;

ใน setup() ก็ใช้ cp5 ด้วย

cp5 = new ControlP5();

ตอนนี้ก็มีกล่องเก็บ Control แล้ว พร้อมจะเก็บ Control ทั้งหลาย สมมุติจะใช้ Button จะทำตามนี้

button = cp5.addButton("button");

ซึ่งอาจไม่ต้องเอาตัวแปร button มารับค่าก็ได้ โดยตัด button = ด้านหน้าออก ก็สามารถทำงานได้ จากตัวอย่างในตอนที่แล้ว มีการกำหนดค่าด้วย .setValue และระบุตำแหน่งด้วย .setPosition ด้วย เอาเป็นว่าใช้วิธีการเขียนตามที่แนะนำไปก่อน เดี๋ยวจะสับสน

ผมว่าอ่านโค๊ดกันก็น่าจะเข้าใจได้ไม่ยาก สำหรับการสร้าง Control ตัวอื่นๆ

ในส่วนของการรับข้อมูลจาก Serial


void serialEvent(Serial port){
  inData = port.readStringUntil('\n');
  inData = trim(inData);
}

serialEvent เป็นคำเฉพาะเพื่ออ่านข้อมูลเข้า ไม่แน่ใจว่าสามารถเขียนแบบอื่นได้หรือปล่าว ยังไม่ได้ลอง ส่วนสำคัญอีกจุดหนึ่งคือ การอ่านค่า ด้วยคำสั่ง port.readStringUtil('\n'); เป็นการอ่านข้อมูลที่เข้ามาจนพบตัว \n (new line) แล้วก็เก็บค่าไว้ในตัวแปร inData ประกาศเป็นแบบ Global ซึ่งทำให้นำเอาไปใช้ในส่วนอื่นได้

ในส่วนของ draw() ก็จะนำเอา inData ไปใช้กับทุก Control

มีอีกส่วนหนึ่งคือการใช้งาน Button


void button1(int value)
{
  println("Button pressed");
  port.write("B");
}


ข้อสังเกตุคือชื่อของฟังค์ชั่นจะเป็นตัวเดียวกับชื่อของ Control คือ button1 ตัวฟังค์ชั่นเองจะคอยรับเหตุการณ์ที่เกิดกับ button ในที่นี้ก็คือการกดปุ่ม โปรแกรมก็จะทำคำสั่งภายใน ก็คือการส่งตัวอักษร B ไปให้ Arduino นั่นคือ สั่งปิด เปิด LED นั่นเอง ส่วนของคำสั่ง println จะแสดงค่าในหน้าต่างด้านล่างของ Processing เพื่อให้สามารถ debug โปรแกรมได้

ยังไงอ่านแล้วยังไม่เข้าใจ ส่งความคิดเห็นมาได้ครับ

ตอนต่อไป จะเป็นการเตรียมเชื่อต่อกับ Android ซึ่งมีเรื่องที่ต้องทำเยอะมาก จะพยายามค่อยๆ อธิบาย คอยติดตามนะครับ

พูดคุยกับ Arduino บน PC กันก่อนดีกว่า

เตรียมการเข้าสู่ Android mode