บทที่ 13 – รู้จักกับ Orientation sensor

บทนี้มี 2 ตอน

ตอนที่ 1

คุณสมบัติของแอพ

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

• Roll เป็นค่ามุมเมื่อเราถืออุปกรณ์ให้เอียงเอาด้านซ้าย หรือด้านขวาขึ้น โดยหากวางราบกับพื้น ค่ามุมจะเป็นศูนย์ หากถือเอียงให้ด้านซ้าย หรือด้านขวาขึ้น ค่ามุมก็จะเปลี่ยน จนเมื่อถือตั้งฉาก ค่ามุมก็จะเป็น 90 หรือ -90 องศา ขึ้นกับว่าเอียงด้านไหนขึ้น
• Pitch เป็นค่ามุมเมื่อเราถือเครื่องให้ยกด้านบนขึ้น หรือกดด้านบนลง ตอนวางราบกับพื้น มุมนี้ก็จะเป็นศูนย์ เมื่อยกเครื่องตั้งขึ้น หรือคว่ำหัวลง ค่ามุมก็จะเป็น 90 หรือ -90 องศา
• Azimuth เป็นค่ามุมเหมือนเข็มทิศ คือ เมื่อหันเครื่องไปทางทิศเหนือ มุมก็จะเป็น 0 และเมื่อหมุนเครื่องตามเข็มนาฬิกา ค่ามุมนี้ก็จะเพิ่มขึ้น จนเมื่อหมุนครบรอบ ค่ามุมสูงสุดก็จะไม่เกิน 360 องศา

นอกจากนี้ ยังใช้ image แสดงภาพเข็มทิศ ซึ่งเมื่อเราหมุนเครื่องไปรอบตัว เข็มทิศ ก็จะหมุนตาม โดยปลายด้านสีขาว จะยังคงชี้ไปทิศเหนือเสมอ ซึ่งค่ามุมในการหมุนนั้น คือค่ามุม Azimuth นั่นเอง

คอมโพเนนต์ที่กล่าวถึง

• OrientationSensor เป็นเซ็นเซอร์ที่ตรวจจับมุมในการถือเครื่อง
• Slider ในบทนี้ จะใช้ Slider ในการแสดงค่ามุมเป็นกราฟแท่งแบบง่ายๆ โดยการซ่อนปุ่มเลื่อนไว้
• Image ในที่นี้ ใช้แสดงภาพเข็มทิศ และกำหนด rotationAngle เพื่อให้หมุนภาพเป็นมุมตามต้องการ

บล็อกที่สำคัญ

• Screen Initialize เป็นอีเวนต์แรกที่เกิดขึ้นเมื่อสกรีนเริ่มทำงาน ในบทนี้ เราใช้อีเวนต์นี้เพื่อตรวจสอบว่า ในเครื่องมีเซ็นเซอร์นี้อยู่หรือไม่ หากมี แอพจึงจะทำงานต่อ
• OrientationSensor Available เป็นบล็อกที่บอกให้รู้ว่า ในเครื่องมีเซ็นเซอร์นี้อยู่หรือไม่ หากมีจะให้ค่าเป็น true
• OrientationChanged เป็นอีเวนต์ที่เกิดขึ้นเมื่อเซ็นเซอร์ตรวจจับค่ามุมที่เปลี่ยนแปลงได้ พร้อมกับให้ค่ามุมทั้ง 3 คือ roll, pitch และ azimuth มากับอีเวนต์นี้ด้วย
• set ThumbPosition ใช้กำหนดค่า ThumbPosition ของ slider ซึ่งในบทนี้ เราสั่งให้ซ่อนปุ่มเลื่อนไว้ ดังนั้นค่า ThumbPosition ที่กำหนด ก็จะเป็นการระบุความยาวของแถบสีส้ม (colorLeft) นั่นเอง
• round เป็นบล็อกสำหรับปัดเศษทศนิยมของตัวเลขให้เป็นจำนวนเต็ม
• set rotationAngle ใช้กำหนดค่ามุมในการหมุนภาพของคอมโพเนนต์ Image

ตอนที่ 2

คุณสมบัติของแอพ

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

คอมโพเนนต์ที่กล่าวถึง

• OrientationSensor
• Canvas ในตอนนี้ เราใช้ Canvas เพื่อทำภาพเคลื่อนไหว (animation)
• ImageSprite เป็นคอมโพเนนต์ที่ใช้ร่วมกับ Canvas โดย ImageSprite คือภาพที่เราสามารถกำหนดให้เคลื่อนที่ได้ หมุนได้

Properties ที่สำคัญ

สำหรับ ImageSprite นั้น มี properties สำคัญหลายอย่าง

• Picture ใช้กำหนดภาพสำหรับ ImageSprite
• Heading เป็นค่ามุม หรือทิศทางที่ ImageSprite จะเคลื่อนที่ไป
• Interval ใช้กำหนดช่วงเวลาที่ ImageSprite จะเคลื่อนที่ในแต่ละครั้ง โดยมีหน่วยเป็น millisecond
• Speed ใช้กำหนดจำนวนพิกเซลที่ ImageSprite จะเคลื่อนที่ในแต่ละช่วง Interval

ส่วน OrientationSensor นั้น มี properties ที่ต้องเรียนรู้เพิ่มอีก 2 ค่า คือ

• Angle
• Magnitude

เพื่อให้เข้าใจ 2 ค่านี้ อยากให้คุณนึกถึง การวางลูกเหล็กบนหน้าจอมือถือ ถ้าคุณเอียงมือถือ ลูกเหล็กจะกลิ้งไปในทิศทางที่เอียงลง นั่นคือ มุม Angle ซึ่งก็คือ มุมของแรงที่กระทำกับลูกเหล็ก
และการที่คุณเอียงมากน้อย ก็จะทำให้ลูกเหล็กกลิ้งเร็วช้าต่างกัน นั่นคือ Magnitude หรือขนาดของแรงที่กระทำต่อลูกเหล็ก ซึ่งมีค่าระหว่าง 0-1

ความรู้อื่นๆ

• ระบบพิกัดของ Canvas : มีจุด origin หรือจุดที่ x=0 และ y=0 อยู่ที่มุมบนซ้าย
• ระบบมุมของ Canvas : มุม 0 องศา จะชี้ไปทางทิศตะวันออก และค่ามุมเพิ่มขึ้น เมื่อหมุนทวนเข็มนาฬิกา
• แนะนำแอพ Sensor Box for Android เพื่อใช้ตรวจสอบว่าในเครื่องของคุณมีเซ็นเซอร์อะไรบ้าง