Arduino & Processing Serial Control

.

Arduino & Processing Serial Control

สุธี โสมาเกตุ

งบประมาณ 400 บาท

 

                บทความนี้จะนำเสนอเทคนิคการสร้างส่วนติดต่อผู้ใช้ GUI (Graphical user interface ) ด้วย Processing เพื่อควบคุม Arduino Digital output ผ่าน serial port

 

Processing

Processing (https://processing.org/) เป็นซอฟต์แวร์ open source ฟรีดาวน์โหลด Processing เป็นโปรแกรมออกแบบมา ที่เน้นด้านการวาดภาพและการแสดงผลในรูปแบบ 2D, และ 3D ด้วยการเขียนคำสั่งควบคุมด้วยภาษาทางคอมพิวเตอร์Processing สามารถติดตั้งได้ทั้งบน GNU/Linux, Mac OS X, และ Windows รวมทั้ง Processing ยังมี libraries ให้ใช้งานอีกมากมาย

จุดเด่นของ Processing คือการแสดงผลในรูปแบบของการวาดภาพ และ Processing ยังสามารถนำมาประยุกต์ใช้ด้านการแสดงผลร่วมกับ Arduino ได้ด้วย ด้วยการสื่อสารผ่าน “serial port” หรือผ่านสาย USB ของ Arduino ได้เลย Processing จึงเป็นอีกทางเลือกหนึ่งสำหรับการทำ GUI ได้เป็นอย่างดีเลยทีเดียว

G4P GUI Builder

G4P GUI Builder เป็น Tools เสริม สำหรับ Processing ที่สร้างโดย Peter Lager สร้างมาเพื่อช่วยการออกแบบปุ่มกดต่างๆ แบบ 2D GUI controls ผลหลังจากติดตั้ง G4P GUI Builder คือช่วยให้การออกแบบหน้าจอ interface ได้สะดวกขึ้น การติดตั้ง G4P GUI Builder ทำได้โดยไปที่เมนู Tools ->ADD Tools จากนั้นให้พิมพ์ G4P GUI Builder ในช่อง Filter และทำการ Install ดังแสดงในรูปที่ 1

รูปที่ 1

รูปที่ 1 ทำการ Install G4P GUI Builder

เมื่อ Installed เสร็จสิ้นให้กลับไปที่แถบ Tools จะพบ แถบ G4P GUI Builderเพิ่มเข้ามาให้ทำการเปิด G4P GUI Builderเพื่อทำการออกแบบหน้าตา GUI.ดังแสดงในรูปที่ 2 และเพื่อไม่เป็นการเสียเวลาให้เริ่มออกแบบหน้าตา GUIโดยการใช้ปุ่ม Bottom (ลากปุ่ม OK ลงมาวาง) ทั้งหมด 16 Bottom พร้อมกับแก้ไขชื่อปุ่มที่ Default จะเป็น Face text เปลี่ยนเป็นชื่อปุ่มของเรา เช่น ON, OFF เป็นต้น แก้ไขโดยไปที่แถบ PROPERTIES ด้านซ้ายดังรูปที่ 3

รูปที่ 2

รูปที่ 2 G4P GUI Builder

รูปที่ 3

รูปที่ 3 ออกแบบ GUI ด้วย G4P GUI Builder

เมื่อออกแบบหน้าตา GUIเป็นที่พอใจแล้ว ให้กลับมาที่ Processing โดย Processing จะสร้างหน้าต่าง code editor ให้ 2 หน้าต่างคือ หน้าต่าง Sketch_xxxxxxa และหน้าต่าง gui ซึ่งหน้าต่าง Sketch นั้นสามารถ Save แล้วเปลี่ยนเป็นชื่ออื่นได้ แต่หน้าต่าง gui ห้ามเปลี่ยนชื่อเนื่องจากจะทำให้ไฟล์ทั้ง 2 link กันไม่ได้ ดังจะเห็นได้จากรูปที่ 4 ผู้เขียนได้เปลี่ยนชื่อไฟล์ Sketch _xxxxxxa เป็น Arduino_Processing_Serial_Control_G4P_8OUTPUT แล้ว

รูปที่ 4

รูปที่ 4 หน้าต่าง Sketch _xxxxxxa และหน้าต่าง gui

Processing Code

หลังจากเราได้ออกแบบ GUI ด้วย G4P GUI Builder แล้ว G4P GUI Builder จะสร้าง Code ให้เราไว้บางส่วนแล้ว ในส่วนนี้เราจะทำการแทรก Code ลงใน Processing เพื่อให้ Processing สามารถสื่อสารกับ Arduino ได้

การแทรก Processing Code เพื่อติดต่อ Arduino ผ่าน Serial

ให้มาที่หน้าต่าง Sketch ด้านซ้ายจากนั้นแทรก Code ดังนี้


แทรกส่วน import 

  • import processing.serial.*;

  • import cc.arduino.*;

แทรกส่วนประกาศตัวแปร

  • Serial myPort;

แทรกส่วน public void setup()

  • println(Serial.list());

  • String portName = Serial.list()[0];

  • myPort = new Serial(this, portName, 9600);


รูปที่ 5

รูปที่ 5 การแทรก Processing Code ส่วนติดต่อ Arduino ผ่าน Serial 

การแทรก Processing Code ส่วนควบคุม Output

เราจะทำการส่งคำสั่งออกผ่าน Serial หรือ MyPort.write(); เพื่อควบคุม led หรือเรียก led ว่า Output ก็ได้ การควบคุม Output ทำได้โดย การส่งคำสั่งเป็นตัวอักษร (char) เช่น 1, 2, 3, 4, 5, 6, 7, 8,a, b, c, d, e, f, g เพื่อไปที่ฝั่ง Arduino จากนั้นเมื่อ Arduino ได้รับคำสั่งจะทำการแปรผลและทำการสั่ง led Output ต่อไป การทำงานของแต่ละคำสั่ง ต่อผลลัพธ์ของ led ดังแสดงในตาราง 1 ท่านผู้อ่านสามารถกำหนดตัวอักษรคำสั่งได้ใหม่ ไม่จำเป็นต้องตามตารางที่กำหนดมาก็ได้

1

ตารางที่ 1 การส่งคำสั่งออกไปควบคุม Output

การแทรก Code ในส่วนbutton1 – button16(ปุ่มกด1-16) เพื่อควบคุม Output ให้มาที่หน้าต่าง gui ด้านขวา จากนั้นแทรกโค้ด MyPort.write(); โดยใส่ตัวอักษรคำสั่งที่กำหนดไว้ตามตารางที่ 1 ลงใน () จะเห็นว่า MyPort.write(); เป็นการส่งตัวอักษร (Char) ออกไปทาง Serial port นั่นเอง


ใต้ function

  • public void button1_click1(GButton source, GEvent event) {

  • println(“button1 – GButton >> GEvent.” + event + ” @ ” + millis());

แทรก Code เพื่อเปิด led1 เมื่อกด button1

  • myPort.write(’1′);

ใต้ function

  • public void button2_click1(GButton source, GEvent event) {

  • println(“button2 – GButton >> GEvent.” + event + ” @ ” + millis());

 

และทำการแทรก Code เพื่อปิด led1 เมื่อกด button2

  • myPort.write(‘a’);

 

 


 

จากนั้นทำการแทรก Code ให้กับ button3, button4, button5ไปจนครบ 16 button ดังรูปที่ 6

รูปที่ 6

รูปที่ 6 การแทรก Processing Code ส่วนควบคุม LED Output

Arduino Code

ที่ฝั่ง Arduino ทำการเซต digital pin : {13,12,11,10,9,8,7,6} ทั้งหมด 8 pin ให้เป็น Output ท่านผู้อ่านสามารถเพิ่มลด จำนวน Output ได้เองตามความเหมาะสม โดยต้องทำการแก้ไข Code เล็กน้อย

2

ตารางที่ 2 ซอร์สโค้ดของ Arduino 


ดาวน์โหลดซอร์สโค้ด   https://www.dropbox.com/s/f11ujpwat3qohpf/Arduino%20%2B%20Processing%20Serial%20Control.zip?dl=0


การต่อวงจร

การต่อวงจรเพื่อทดลอง ให้ต่อขา Digital Out{13,12,11,10,9,8,7,6} เข้า led ผ่าน Resistors ค่า 220 ohms ถึง 470 ohms ขนาดใดก็ได้ตามสะดวก Arduino Digital Output HIGH ให้แรงดันที่ระดับ 5V และ LOW ที่ 0V เพื่อการขับ LED เราสามารถดัดแปลงให้ Output ต่อกับ Optocoupler, เช่นออปโต้คัปเปลอร์ PC817 เพื่อขับ Relay ก็ได้

รูปที่ 7

รูปที่ 7 การเชื่อมต่อวงจร

รูปที่ 8

รูปที่ 8 การต่อวงจรโดยใช้ R-Pack 470 โอห์ม

GUI และการแสดงผล led

ที่ Processing เราสามารถ Export Application โดยไปที่ File Export Application เพื่อนำไปใช้งานแบบ Software หรือจดกดปุ่ม Run ที่ Processing เลยก็ได้ หน้าต่าง GUI หรือ Software ของเราก็จะแสดงขึ้นมา เมื่อเราทำการ Upload Code ที่ฝั่ง Arduino เรียบร้อยแล้ว เราสามารถควบคุม output ด้วย GUI ที่ออกแบบใน Processing ได้แล้ว

รูปที่ 9

รูปที่ 9 GUI ที่ออกแบบใน Processing

รูปที่ 10

รูปที่ 10Arduino + Processing Serial Control

รูปที่ 11

รูปที่ 11G4P GUI BuilderTools (Knob, Stick, Slider)

จะเห็นว่า Processing นั้นก็มีประโยชน์ช่วยให้เราทำ GUI ไว้ใช้ในแบบฉบับของเราเอง อีกทั้งยังเป็น open source นอกจากนี้ G4P GUI Builder ยังมี Tools ที่น่าสนใจเช่น Knob, Stick, Slider ที่สามารถนำมาพัฒนาเป็นปุ่มควบคุม Hardware ต่างๆ เช่นการควบคุม Servo, Stepping motor ร่วมกับ Arduino ได้ หรือจะพัฒนาร่วมกับ ไมโครคอนโทรเลอร์ตระกูลอื่นๆ ก็ได้เช่นกัน ไม่จำกัดแต่เพียง Arduino

รายการอุปกรณ์

ตัวต้านทาน 330 โอห์ม         8              ตัว

แอลอีดีสีแดงขนาด 5 มม.     8              ตัว

บอร์ด Arduino UNO R3       1              ตัว

หมายเหตุ ซอร์สโค้ดที่ใช้งานร่วมกับโครงงานทั้งหมดสามารถดาวน์โหลดได้ที่เว็บไซต์ http://electronics.se-ed.com/download หรือ https://www.dropbox.com/s/f11ujpwat3qohpf/Arduino%20%2B%20Processing%20Serial%20Control.zip?dl=0

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>