16.กราฟ 2 เส้น

เป็นตัวอย่างการใช้บอร์ด Arduino อ่านสัญญาณอนาลอก 2 ช่อง แล้วส่งออกทางพอร์ทอนุกรม มาให้โปรแกรม Processing รับมาแสดงผลเป็นกราฟ 2 เส้นแยกอิสระต่อกัน เมื่อประปรับค่า R (Potentiometer) ทั้ง 2 ตัว กราฟแต่ละเส้นก็จะเปลี่ยนแปลง ระบบประกอบด้วย บอร์ด Arduino และ PC ตามรูป หัวข้อนี้พัฒนาต่อมาจากหัวข้อ serial to graph 1 2 และ 3

เทคนิค

การสื่อสารด้วยคำสั้ง อ่านข้อมูลเป็น String จากพอร์ทอนุกรม

คำสั่งนี้ myString = myPort.readStringUntil(lf); จะอ่านค่าจาก string มาจนจบ 1 บรรทัด

แล้วจะรู้ได้อย่าไรว่า vals1และ val2 ยาวกี่ตัวอักษร จะได้เก็บไม่พร็อตถูก

วิธีการคือ

ด้านตัวส่ง

สมมุติว่าค่าจาก sensor แต่ละตัว ที่ Arduibo อ่านได้มีค่าได้ตั้งแต่ 0 - 999 ซึ่งถ้าเอาค่าจำนวนเต็มนี้ส่งออกทางพอร์ทอนุกรมเลย

จะได้ string ที่มีความยาวตั้งแต่ 1 ตัว ถึง 3 ตัว (คือ '0' ถึง "999") ซึ่งไม่แน่นอน processing ฝั่งรับ ก็จะไม่รู้ความยาวที่แน่นแน แต่ถ้าเอาค่า sensor แต่ละตัว (ให้เป็น s1 และ s2) มาบวกด้วย 1000 เช่น

s1 = 25 และ s2 = 850 พอแต่ละตัวบวกด้วย 1000 จะเป็น s1 = 1025 และ s2 = 1850

พอเอาแต่ละตัวมาแปลงเป็น string ด้วยคำสั่ง String myString1 = String(s1); String myString2 = String(s2);

จะได้ความยาวตัวละ 4 ตัวอักษร พอเอาทั้ง 2 ตัวมาเชื่อมเข้าด้วยกัน

string_all = myString1+myString2

จะได้ความยาวเป็น 8 ตัวอักษร คือ "10251850"

ทำแบบนี้เวลาส่งออกทางพอร์ทอนุกรม ในแต่ละบรรทัดจะมีความยาวที่แน่นอนตลอดคือ 8 ตัวอักษร

ด้านตัวรับ Processing เมื่อรับมาได้ในแต่ละบรรทัด ก็นำมาแบ่งและเปลี่ยนเป็นตัวเลขพร้อมกับลบด้วย 1000 ก็จะได้ค่าเดิมทั้ง 2 จำนวน

while (myPort.available() > 0)

{ myString = myPort.readStringUntil(lf); //อ่านข้อมูลจากพอร์ทอนุกรม

if (myString != null)

{

String ss1 = myString.substring(0, 4);

String ss2 = myString.substring(4, 8);

float n1 = (float(ss1)-1000.0);

float n2 = (float(ss2)-1000.0);

vals1[vals1.length-1] = n1;

vals2[vals2.length-1] = n2;

}

}

การสร้างแนวแกน x , y กำกับกราฟอย่างไร

ก็เขียนกราฟเส้นตรงธรรมดา ส่วนสเกลก็อยู่ที่เราจะออกแบบ ว่าหน้าจอแสดงผลก้วางยาวเท่าไร จะให้แทนค่าเท่าไรถึงเท่าไร

เช่น ใช้จอ size(800,300); และต้องการให้แสดงค่าได้ จอกว้าง 800 จุด สูง 300 จุด

sensor มีค่าตั้งแต่ 0 - 999 ก็ต้องไปเขียนสมการ แปลง จาก 0 - 999 เป็น 0 - 300

แบบนี้ก็ได้ scale แกน Y แล้ว

ส่วนแกน x เป็น 800 ถ้าใช้ 1 จุด ต่อ 1 ค่า ก็สามารถแสดงได้ 800 ค่าในหนึ่งหน้าจอ

ยังไม่เฉลย

โปรแกรม Processing

เดี่ยวจะเฉลย