Lab AI12 การใช้งานชุดคำสั่ง UI

จุดประสงค์การเรียนรู้

- เพื่อให้มีความรู้ความเข้าใจในการใช้งานกลุ่มกล่องUIในPlatform CiRA CORE

วัสดุอุปกรณ์

- เครื่องคอมพิวเตอร์

- Platform CiRA CORE

คำอธิบาย

UI (User interface) จะเป็นส่วนที่ใช้ในการตอบโต้กับผู้ใช้งานให้เข้าใจง่ายขึ้นหรือเพิ่มความสวยงามในPlatform ซึ่งจะมีกล่องการใช้งานกลุ่มUIทั้งหมด 4 กล่อง (อ้างอิงจากเวอร์ชัน 1.4.5) ดังนี้

1.กล่องButton

2.กล่องImage

3.กล่องLED

4.กล่องText

การใช้งานกล่อง UI

1.การใช้งานกล่อง Button

การใช้งานกล่องนี้เปรียบเสมือนเมื่อมีการกดปุ่มButton ข้อมูลจะถูกส่งไปตามตัวแปรที่เราระบุในFlow data จะเกิดการไหลของโปรแกรมแบบไร้สาย ตามภาพด้านล่าง เมื่อกดปุ่มButton (run) ตัวโปรแกรมจะไหลไปที่กล่องsetเพื่อรับFlow data a หลังจากนั้นโปรแกรมจะไหลผ่านมาที่กล่องPayload Combineซึ่งกล่องนี้จะรับInput2ที่ คือinputที่มาจากกล่องGet และกล่องImage Sub เพื่อทำการวนรอบภาพให้เป็นภาพเคลื่อนไหว หลังจากนั้นข้อมูลจะถูกส่งไปแสดงผลออกทางกล่องDebug ตามภาพและวีดีโอข้างล่าง

2.การใช้งานกล่อง Image

สำหรับการใช้งานผ่านกล่องImageนี้เปรียบเสมือนกับการนำรูปภาพมาแสดงผลแบบไร้สายผ่าน Flow data ซึ่งต้องกำหนดตัวแปรเดียวกัน ซึ่งในตัวอย่างนี้จะเป็นตัวอย่างที่ใช้งานการส่งรูปภาพจากกล่องSet โดยใช้ตัวแปรaจะเป็นตัวส่งข้อมูลแบบไร้สายมาที่กล่องImage โดยเราสามารถเซ็ตค่ากล่องImageที่รูปฟันเฟืองที่ตัวแปรaเพื่อรับข้อมูลที่ส่งมาจากกล่องSetมาแสดงผลที่กล่องImage ดังภาพและวีดีโอข้างล่าง

3.การใช้งานกล่อง LED

สำหรับการใช้งานผ่านกล่องLEDนี้ เราสามารถเขียนโค้ด Javascriptเพื่อกำหนดสีของหลอดLedของ UIได้ ซึ่งตัวโปรแกรมจะไหลตามFlow Dataแบบไร้สายตามตัวแปรที่ได้กำหนดไว้ ตามตัวอย่างนี้ จะกำหนดให้เมื่อกดปุ่มButtonแล้วledจะเปลี่ยนสีตามที่เขียนโค้ดหลังกดปุ่มbutton สามารถลากกล่องแล้วทำตามตัวอย่างดังภาพและวิดีโอข้างล่าง

4.การใช้งานText

สำหรับการใช้งานกล่องText จะเป็นการใช้งานที่แสดงผลเป็นข้อความ แบบไร้สายผ่านFlow data ตามตัวแปรที่กำหนดไว้(ต้องเป็นตัวแปรFlow dataเดียวกัน) ในตัวอย่างนี้จะกำหนดให้เมื่อกดปุ่มbuttonที่กล่องTextจะแสดงข้อความตามที่กำหนดไว้ในScript ตามภาพและวิดีโอข้างล่าง