Bluetooth ตอนที่ 4 ทดสอบการรับส่งข้อมูลของบลูทูธ

ทดสอบการทำงานของบลูทูธ ระหว่างโทรศัพท์มือถือแอนดรอยด์ที่พัฒนาโปรแกรมด้วย AppInventor ส่งข้อมูลไปยังคอมพิวเตอร์ผ่านทางบลูทูธ และ โดยจะใช้โปรแกรม Hyper Terminal ชื่อว่า Parallax-Serial-Terminal เป็นตัวแสดงผลข้อมูลที่ถูกส่งมาจากโทรศัพท์มือถือ สามารถดาวน์โหลดโปรแกรมใช้งานฟรีได้ที่ http://www.parallax.com/Portals/0/Downloads/sw/propeller/Parallax-Serial-Terminal.zip

ก่อนอื่นเริ่มต้นออกแบบหน้าตาโปรแกรมให้มีปุ่มกดเพิ่มเติมเพื่อทดสอบการส่งข้อมูลดังภาพ

แก้ไขปรับแต่ง Properties Text , Font Size ในตัวอย่างปรับค่าเพื่อให้มองเห็นชัดเจนขึ้นเท่านั้น โดยผู้ใช้สามารถปรับแต่งเพิ่มเติมในส่วน Properties อื่นๆได้ตามต้องการ

ออกแบบหน้าตาให้สวยงามขึ้น ตามแต่ผู้ใช้ต้องการ แต่จะประกอบด้วยปุ่มต่างๆ คือ ปุ่มเชื่อมต่อ ปุ่มยกเลิกการเชื่อมต่อ และปุ่มสำหรับส่งข้อมูล A-D

เปิดโปรแกรม AppInventor EditorBlocks ขึ้นมาเพื่อทำการเขียนโค๊ดคำสั่งการทำงานดังภาพ

เปิดโปรแกรมประเภท Terminal ในตัวอย่างจะใช้เป็น Parallax Serial Terminal  โดยตัวโปรแกรมสามารถดาวน์โหลดและใช้งานได้ฟรีที่  www.parallax.com 

หน้าตาโปรแกรม Parallax Serial Terminal  ที่ปุ่มด้านล่างขวามือให้ทำการคลิกปุ่ม Enable เพื่อเปิดใช้งานซีเรียลพอร์ต

จากนั้นเปิดโปรแกรมที่ได้พัฒนาขึ้นจาก AppInventor ขึ้นมา จะแสดงหน้าตาดังรูป

ทดสอบด้วยการกดปุ่มต่างๆ ABCD ของโทรศัพท์มือถือ  ถ้ามีข้อความขึ้นที่หน้าต่าง Hyper Timinal แสดงว่าการรับส่งข้อมูลสามารถทำได้สำเร็จเรียบร้อย

Bluetooth ตอนที่ 3 ขั้นตอนการจับคู่อุปกรณ์บลูทูธ ระหว่างโทรศัพท์มือถือกับคอมพิวเตอร์ notebook

ก่อนอื่นให้ทำการเปิดบลูทูธของคอมพิวเตอร์ก่อน สังเกตว่าจะมีสัญลักษณ์รูปบลูทูธเกิดขึ้นบริเวณทากบาร์ขวามือด้านล่าง

คลิกขวาที่รูปสัญลักษณ์บลูทูธ จากนั้นเลือกที่ Open Settings

คลิกถูกที่ Allow Bluetooth devices to find this computer เพื่อกำหนดให้อุปกรณ์บลูทูธอื่นๆ สามารถมองเห็นคอมพิเตอร์เครื่องนี้ได้

หลังจากนั้นคลิกไปที่แถบ COM Ports

หน้าต่างแสดงตำแหน่งพอร์ตที่ใช้สำหรับเชื่อมต่อบลูทูธ 

คลิกขวาที่สัญลักษณ์บลูทูธ  จากนั้นให้คลิกที่ Add a  Device เพื่อจะเริ่มทำการเชื่อมต่อกับอุปกรณ์บลูทูธ

จากนั้นจะแสดงรายชื่ออุปกรณ์บลูทูธที่เปิดอยู่และพร้อมจะทำการจับคู่

คลิกเลือกอุปกรณ์ที่จะเชื่อมต่อจากนั้นคลิกที่ Next

จะแสดงรหัสรักษาความปลอดภัย ให้กับการเชื่อมต่อบลูทูธ  ซึ่งจำเป็นต้องใช้รหัสที่เหมือนกันในการเชื่อมต่อ  จากนั้นคลิกที่ Next ไป

ที่โทรศัพท์มือถือจะแสดงการขอจับคู่บลูทูธ เข้ากับคอมพิวเตอร์ ให้คลิกเลือกที่ปุ่มกดแสดงข้อความ  “กำหนดค่าอุปกรณ์ให้ตรงกัน”  

คำขอตรวจสอบสิทธ์การเข้าใช้งานอุปกรณ์บลูทูธบนโทรศัพท์มือถือ คลิกที่ปุ่ม ยอมรับ ถือเป็นอันเสร็จเรียบร้อย

ในเมนูเครื่องมือ Device and Printers จะแสดงให้เห็นอุปกรณ์บลูทูธที่ได้ทำการจับคู่ไว้แล้ว

Bluetooth ตอนที่ 2 การเชื่อมต่ออุปกรณ์บลูทูธ

Bluetooth ตอนที่ 2 การเชื่อมต่ออุปกรณ์บลูทูธ

บทความนี้จะพูดถึงเรื่องการเชื่อมต่อบลูทูธของโทรศัพท์มือถือกับอุปกรณ์บลูทูธชื่อว่า BlueStick ด้วยโปรแกรม app inventor


โดยก่อนอื่นให้ทำการสร้างโปรเจ็คใหม่ขึ้นมาก่อน ในตัวอย่างผมต้้งชื่อว่า bluetooth

หลังจากนั้นให้เลือกเครื่องมือดังนี้คือ  ListPicker  Button  BluetoothClient  โดยตัวอย่างผมทำการเปลี่ยนรูปภาพให้กับเครื่องมือ ListPicker กับ Button 

จากนั้นเขียนคำสั่งการทำงานของโปรแกรมดังภาพ 

ทำการเชื่อมต่อโปรแกรม app inventor editor blocks เข้ากับมือถือ connect to device เพื่อทดสอบการทำงานก่อนติดตั้งโปรแกรม

ทดสอบการทำงานของโปรแกรมโดยการคลิกที่ปุ่มด้านบน ซึ่งจะแสดงรายการชื่ออุปกรณ์บลูทูธต่างๆที่เราได้ทำการจับคู่ไว้แล้ว  ก่อนทำการเชื่อมต่อให้เราทำการจับคู่อุปกรณ์ให้เรียบร้อยก่อน  และสังเกตไฟที่ โมดูลบลูทูธที่ตัวหุ่นยนต์จะกระพริบอยู่ตลอดเวลา  แต่เมื่อไรที่ชื่อมต่อได้ไฟที่ตัวโมดูลบลูทูธ bluestick จะติดค้าง ถ้ากดที่ปุ่มล่างจะยกเลิกการเชื่อมต่อ ไฟที่ bluestick จะกระพริบตลอดเวลาเหมือนเดิม

Bluetooth ตอนที่ 1 แสดงรายชื่ออุปกรณ์บลูทูธ

เริ่มต้นที่  appinventor.mit.edu   ทดสอบโดยการสร้างโปรเจ็คใหม่ขึ้นมาใหม่  ที่หน้าต่างการออกแบบของ app inventor สร้าง Button1 และ Label อย่างละ 1 ปุ่ม โดยเมื่อคลิกที่ปุ่ม Button1 หลักการทำงานของโปรแกรมคือ จะแสดงรายชื่อและหมายเลขประจำตัวของอุปกรณ์บลูทูธที่เราได้ทำการจับคู่ไว้แล้ว

ปรับแต่งหน้าตานิดหน่อย  แก้ไขข้อความ Button1 ให้ดูเข้าใจง่ายขึ้น  ลบข้อความ properties text ของ Label1 ออก เพื่อให้เห็นเป็นพื้นที่ว่าง   เพิ่มคอมโพเน้น BluetoothClient1  และ BluetoothServer1 ลงไป

เปิดโปรแกรม Blocks  Editor ขึ้นมา

เขียนโค๊ดคำสั่งดังภาพ

ทำการเชื่่อมต่อกับอุปกรณ์แอนดรอยด์หลังจากนั้นให้ทดลงโดยการกดที่ปุ่ม Button1  จะแสดงรายชื่่อและหมายเลขประจำตัวของอุปกรณ์บลูทูธต่างๆที่เราเคยทำการจับคู่ไว้แล้ว

เริ่มต้นกับ Hello World

เริ่มต้นการเขียนโปรแกรม  Hello World  เสร็จแล้วทดสอบการทำงานด้วย Emulator

ก่อนอื่นให้เราทำการสร้างโปรเจ็คขึ้นมาใหม่ แล้วตั้งชื่อตามต้องการ แต่ต้องถูกหลักของการตั้งชื่อด้วย เช่นพวกสัญลักษณ์พิเศษใช้ไม่ได้    ในตัวอย่างนี้ผมขอตั้งชื่อง่ายๆว่า   HelloWorld

นำส่วนประกอบต่างๆ ชนิดประเภทของเครื่องมือที่ต้องการ  ประกอบด้วย Label สำหรับใช้แสดงผลข้อความ , Button สำหรับสร้าเหตุการณ์ในการคลิกเกิดขึ้น  ให้เราลากแล้ววางบนพื้นที่ว่าง

ที่มุมมองด้านขวามือ ให้ทำการคลิกที่ Open Blocks Editor เพื่อเปิดโปรแกรม blocks editor สำหรับเขียนโค๊ดคำสั่ง

จะปรากฏไฟล์ขึ้นมา  จำเป็นต้องดาวน์โหลดมาไว้ในเครื่องคอมพิวเตอร์ก่อน โดยชื่อของไฟล์ที่ได้นั้นคือ AppInventorForAndroid.jnlp  หลังจากนั้นให้คลิกที่ปุ่ม Keep  เพื่อเก็บไฟล์ที่ได้ลงบนคอมพิวเตอร์

คลิกไปยังตำแหน่งของไฟล์เพื่อเรียกใช้โปรแกรม blocks editor ขึ้นมา สำหรับเขียนโค๊ดคำสั่ง

เริ่มต้นการเขียนโปรแกรมด้วย Block Editor  ให้เราทำการลากบล็อก Button.Click  ที่อยู่ในกลุ่มของเครื่องมือ Button มาวางบริเวณพื้นที่ว่าง

หลังจากลากมาวางเรียบร้อยแล้วจะปรากฏดังภาพ

คลิกลากเครื่องมือ Label1.Text ไปไว้ในบล็อก Button1.Click

คลิกเลือกเครื่องมือ Text วางต่อท้าย Label1.Text

แก้ไขข้อความตามที่ต้องการในที่นี้ตั้งชื่อว่า HelloWorld

เปิดการจำลองการทำงานของโปรแกรมขึ้นมาโดยคลิกที่ New emulator

 หน้าตาของ emulator

คลิกเพื่อทำการเชื่อมต่อโปรแกรมกับ emulator

หน้าตาโปรแกรม ที่แสดงผลบน emulator

คลิกที่ Button1  ข้อความของ Label1 จะเปลี่ยนไปเป็นข้อความตามที่เราตั้งไว้ ในที่นี้คือ Hello World

เริ่มต้นใช้งาน label และกำหนดค่า properties

เริ่มต้นใช้งาน Label และกำหนดค่า Properties


เริ่มต้นด้วยการสร้างโปรเจ็คขึ้นมาใหม่ ไปที่ New จะปรากฏหน้าต่างโปรแกรมสำหรับตั้งชื่อโปรเจ็ค ให้เราตั้งชื่อตามที่ต้องการในที่นี้ผมตั้งว่า HelloCat หลังจากตั้งชื่อเสร็จแล้วคลิกที่ OK

     จะเข้าสู่หน้าต่าง Design ของโปรแกรม AppInventor ทันที่หลังจากที่เราตั้งชื่อโปรเจ็คเสร็จเรียบร้อย  ซึ่งหน้าต่างนี้จะใช้เป็นหน้าต่างสำหรับออกแบบและตั้งค่าต่างๆ ให้กับโปรแกรมของเรา

คลิกเลือกที่  Label ซึ่งอยู่ในส่วนของเครื่องมือ ทางด้านซ้ายมือ ในหมวดหมู่ เครื่องมือพื้นฐาน Basic คลิกลากแล้วนำไปวาง (drag & drop)ไว้ที่หน้าจอ Screen 1 เพื่อสร้างหน้าตาของโปรแกรม ที่จะแสดงผลเช่นเดียวกันกับหน้าจอมือถือนั่นเอง

เราสามารถแก้ไขข้อความได้โดยไปที่ Properties 

ที่อยู่ขวามือแล้วเลือกที่หัวข้อ Text ดังภาพ เพื่อทำการแก้ไขข้อความที่จะแสดงบนหน้าจอ 

หลังจากที่ทำการปรับเปลี่ยนข้อความเสร็จเรียบร้อยก็จะได้ข้อความปรากฏขึ้นที่หน้าจอแสดงผล

BackgroundColor  ใช้สำหรับปรับแต่งสีพื้นหลังให้กับข้อความที่เราสร้างขึ้น

สีต่างๆที่โปรแกรมมีไว้ให้

FontBold  ใช้สำหรับปรับแต่งขนาดของข้อความให้เป็นตัวหนาขึ้น

Fontltalic  ใช้สำหรับปรับแต่งข้อความให้เป็นตัวเอียง

FontSize ใช้สำหรับปรับขนาดตัวอักษร

FontTypeface ใช้สำหรับเลือกรูปแบบของตัวอักษร

 รูปแบบตัวอักษรที่สามารถใช้งานได้