X3DOM/XML/JavaScript Example (Seat visualization)
Case: The Question of Love 2011 Theater (@B4101 – Wittayapat Room)
Suranaree University of Technology

เกริ่น
ความคิดที่เริ่มเอา X3DOM มาเชื่อมกับ XML มันเกิดจาก Topic หนึ่งใน Stackoverflow ในเรื่องการเปรียบเทียบความสามารถในด้านต่างๆของ Flash, HTML, Silverlight, X3D และ Unity 3D ในหัวข้อที่ชื่อว่า Comparing Flash, HTML, Silverlight, X3D and Unity 3d แล้วผมไปเห็นการเปรียบเทียบดังรูปข้างล่างนี้

connection to DB, SOA and web services -> Easy to do with HTML, Flash and Silverlight. Harder with Unity3D, and hardest with X3D.

ซึ่งมันทำให้เปิดประเด็นเรื่อง X3D – XML ในใจขึ้นทันที ซึ่งผมอยากจะทำให้เห็นว่ามันทำได้ และไม่ยากเลย เลยจัดการเอา X3DOM มาเล่นกับ JavaScript เชื่อมกับ XML ซะเลย

ในตัวอย่างที่ผมเอามานี้ เป็นตัวอย่างของการจองที่นั่งเข้าชมละครเวทีที่สาขาผมจัดชื่อ “The Question of Love – ภวังค์รักปริศนา” (โฆษณาให้เพื่อนสักหน่อย สำหรับ Poster อยู่ ที่นี่ ครับ ไปซื้อบัตรเข้าชมกันได้เลยครับ คิคิ) ประจวบเหมาะกับวันศุกร์ช่วงบ่ายที่แล้วผมนั่งรอใครบางคนอย่างสิ้นหวัง ดื้อ และซุกซน(ฮา) แต่ก็รักมาก(ฮิ้ว!) เริ่มเกรียนล่ะ ฮ่าๆ เลยนั่งเขียนตัวอย่างนี้ขึ้นมาเล่นๆ ชื่อ files ที่ผมตั้งจึงไม่แปลกว่าทำไมเป็น “qoflove” ขึ้น เพราะมันย่อมาจาก “The Question of Love” นั่นแหละครับ

เข้าเรื่อง(สักที)
File ที่เราต้องการหลักๆคือ

1. x3dom.js
มันคือ X3DOM API ซึ่งจะสามารถไปสอยมาได้จาก x3dom.org ซึ่งผมยกหน้านั้นมาให้ท่านแล้ว ที่นี่เลย! หลังจากทำการสอยมาแล้ว จะด้วยการใช้ wget หรือวิธีใดก็ตามแต่ท่านจะสะดวก ผมแนะนำให้เอา Version ที่ Stable แล้วนะครับ ปัจจุบัน (ณ วันที่เขียนโพสนี้) คือ Version 1.1 ถ้าเอาที่เป็น Dev Channel มันอาจจะงอแงครับ ผมเจอบ่อย ง้อลำบากมากครับ บางทีง้อไม่ได้ผลต้องเอา Version อื่นมาซั่มแทน

2. qoflove_seat.html
เป็น File ที่เอามาใช้อ้างถึง (URL) และแสดงหน้า Web3D อย่างโจ๋งครึ่ม

3. qoflove_seat.js
เป็น File ทำงานหลักซึ่งจะอ่านข้อมูลจาก qoflove_seat.xml มาทำงานครับ

และสุดท้าย
4. qoflove_seat.xml
เป็น File ที่เก็บเลขที่นั่ง (Number) และ Status ของที่นั่งนั้นว่า Available หรือ Not Available

รวมทั้งหมด 4 files เท่านั้นเอง!!

Files and Folder

qoflove_seat.js and x3dom.js | in js folder

รองท้องเบาๆกับ qoflove_seat.js กันครับ ซึ่งแค่รองท้องก็แทบจะอิ่มแล้วแหละครับ เพราะการทำงานมันอยู่ที่ file นี้แหละครับ

qoflove_seat.js
เริ่มแรกประกาศตัวแปรที่เซ็ทค่าพื้นที่เริ่มแรกให้เป็น 0 ให้หมดครับ เดี้ยวจะเกิดอาการงอแงเรื่องไม่มีค่าในตัวแปร หากเราไม่ตั้งค่า default ไว้ก่อนครับ ซึ่ง x_pos, y_pos, z_pos เราจะเอาไว้เป็นค่าที่จะทำให้ตำแหน่งของเก้าอี้เลื่อนครับ

Set values

Function: initialize
สำหรับ function นี้เป็นการเชื่อมกับ xml ครับ ซึ่งจะวน loop ตามค่าที่อยู่ใน qoflove_seat.xml ซึ่งเราจะอ่านค่าเข้ามาแล้วส่งค่านั้นไปยัง function ที่มีนามว่า seat โดยจะส่งค่า s และ stat ไป ซึ่ง s ในที่นี่ผมตั้งให้มันเป็น ชื่อที่นั่งนะครับ เช่น 1 2 3 … และ stat คือ ที่นั่งนั้น มีคนสอยไปแล้วหรือยังโสดอยู่ code ก็ตามข้างล่างนี้เลย

Function: initialize | in qoflove_seat.js

Function: seat
สำหรับ function นามว่า seat นี้จะรับค่า initialization มาซั่ม เริ่มขี้เกียจอธิบายยาวดูตาม code ได้ครับ มี comment ไว้อ่านคิดว่าพอเข้าใจ ไม่เข้าใจก็ comment ถามเอาแล้วกัน หึหึ

Function: seat | in qoflove_seat.js

Function: seat_obj
ส่วน seat_obj นี้ไม่มีิอะไรครับ เป็น Object ของรูปสี่เหลี่ยมครับ ซึ่งของจริงมันจะพัฒนาเป็นรูปเก้าอี้ครับ อันนี้ตัวอย่าง ผมกั๊ก! ซึ่ง function นี้จะรับค่า color จาก seat มาแล้วเอามาสร้างกล่องเป็นสีๆ ครับ ซึ่งจะแสดงว่าที่นั่งนั้นว่างไหม

Function: seat_obj | in qoflove_seat.js

qoflove_seat.html
มาถึงหน้าที่เราเอาไว้แสดงผล Web3D อันเกรียนๆของเรา(หรือของผมคนเดียว) คือ qoflove_seat.html นั่นเอง!!
สำหรับส่วน head ก็แค่เชื่อม js ที่น่ารักทั้ง 2 ของเราเข้าไป และส่วน body ก็ตาม code นั่นแหละครับ เชิญจัดการซั่มมันตามสบายครับ file นี้มันมีแค่นั้นจริงๆ
Head
ส่วนของ tag head

Call Script: qoflove_seat.js and x3dom.js | in qoflove_seat.html

Body
ส่วนของ tag body

X3DOM | in qoflove_seat.html

ผลจากความเกรียนทั้งหมดทั้งมวล จะเป็นแบบนี้แหละครับ!

The Question of Love Theater - Seat