ทำความรู้จัก “Physical Computing” ฟิสซิเคิลคอมพิวติง การเชื่อมโยงคอมพิวเตอร์กับสิ่งรอบตัว

cover

ทำความรู้จัก “Physical Computing” ฟิสซิเคิลคอมพิวติง การเชื่อมโยงคอมพิวเตอร์กับสิ่งรอบตัว

เยาวชนรุ่นใหม่ในปัจจุบันให้ความสำคัญกับการศึกษาองค์ความรู้ทางด้านคอมพิวเตอร์ และเทคโนโลยี น้อยลงอย่างต่อเนื่อง ซึ่งสวนทางกับยอดขายมือถือและการใช้งานอินเตอร์เน็ตที่มากขึ้นอย่างรวดเร็ว (ติดเฟสบุค ติดเกมส์) ปัญหานี้เกิดขึ้นทั่วโลกทั้งประเทศที่พัฒนาแล้ว หรือในประเทศกำลังพัฒนา อย่างประเทศไทยของเรา

กล่าวถึงทั่วโลก หลากหลายหน่วยงาน องค์กร หรือภาครัฐ เข้ามาให้ความสำคัญในเรื่องนี้กันมากขึ้น การเรียนการสอนด้านคอมพิวเตอร์ และเทคโนโลยีให้กับเยาวชน ที่เราเห็นกันอยู่ ก็จะมีการสอนความรู้พื้นฐานทางด้านคอมพิวเตอร์ และการเขียนพื้นฐานการโปรแกรม (computer programming) มีการสอดแทรกกิจกรรมที่น่าสนใจอื่น เช่น การสร้างโรบอต สร้างกราฟิก แอนิเมชั่น จากการเขียนโปรแกรม และอื่นๆ

“Physical Computing” ฟิสซิเคิล คอมพิวติง คืออะไร? นำมาใช้ในการศึกษาอย่างไร?

ถ้าแปลตรงตัวจะหมายความว่าระบบคอมพิวเตอร์ทางกายภาพ (งงเด้ๆ) ดังนั้นเรามาแปลแบบอ้อมๆดูบ้าง Physical Computing จะหมายถึงการศึกษาการใช้ระบบคอมพิวเตอร์ หรืออาศัยการประมวลผลของคอมพิวเตอร์ เพื่อเชื่อมโยง สร้างปฏิสัมพันธ์กับมนุษย์ หรือสิ่งต่างๆที่อยู่รอบตัวเรา เบื้องต้นเราศึกษาวิธีการที่จะควบคุมระบบคอมพิวเตอร์ด้วยการเคลื่อนไหวอวัยวะต่างๆของร่างกายเรา เพื่อให้คอมพิวเตอร์ทำงานอย่างที่เราต้องการ เช่นการสร้างอุปกรณ์อินพุต (Input) ใช้คีย์บอร์ดพิมพ์ตัวอักษร การใช้มือเคลื่อนที่เมาส์และนิ้วกดปุ่มสั่งงานคอมพิวเตอร์ อีกทั้งเรายังสร้างอุปกรณ์เอาท์พุต (output) เพื่อให้เราติดต่อและเข้าใจคอมพิวเตอร์มากขึ้น เช่นมองเห็นจากจอภาพแสดงผล ได้ยินเสียงจากลำโพง

ปัจจุบันเราขยายขอบเขตการสร้างปฏิสัมพันธ์ของ Physical Computing ไปยังสิ่งต่างๆรอบตัวเรา สร้างระบบนิเวศในการเชื่อมต่อ ทำให้มนุษย์รับรู้ ควบคุมถึงสิ่งต่างๆรอบตัว หรือกำหนดให้คอมพิวเตอร์ควบคุมสั่งงานการทำงานของตนเองได้โดยไม่ต้องอาศัยมนุษย์อยู่ตลอดเวลา เช่นควบคุมระบบขับเคลื่อนยานยนต์อัตโนมัติ ระบบควบคุมการปิดเปิดประตูระบายน้ำตามระดับความสูงของน้ำ ระบบฟาร์มอัจฉริยะ (Smart farm) เป็นต้น

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

Physical_computing.svg

https://en.wikipedia.org/wiki/Physical_computing

จากภาพจะเห็นว่า Physical computing จะเป็นระบบที่สามารถโต้ตอบ (Interactive System) กับสิ่งต่างๆที่อยู่รอบตัวเรา (Real world) รับข้อมูลผ่านทางเซนเซอร์ (Sensors) และสร้างปฏิสัมพันธ์ที่เป็นผลลัพธ์ทางด้านกายภาพผ่านทางตัวกระตุ้น (Actuators) ที่มีหน้าที่ตอบสนองและปรับเปลี่ยนรูปร่าง ตำแหน่ง ความถี่ธรรมชาติ หรือลักษณะเฉพาะทางกลอื่นๆ

ประยุกต์ใช้ Physical Computing ในด้านใดได้บ้าง

  • ระบบการศึกษา (Education): ใช้ในการเรียนการสอนคอมพิวเตอร์เบื้องต้น ให้ผู้เรียนเข้าใจถึงการทำงานของระบบคอมพิวเตอร์ที่เป็นรูปธรรมและเข้าใจอย่างแท้จริง เช่นเขียนโปรแกรมเพื่อบอกให้คอมพิวเตอร์สั่งเปิดสวิตช์ไฟเมื่อไม่มีแสงสว่าง หรือเราใช้ Physical Computing เพื่อจำลองปรากฎการณ์บางอย่างให้นักเรียนเข้าใจบทเรียนง่ายขึ้น โดยให้ผู้เรียนมีส่วนร่วมในการสร้างปฏิสัมพันธ์นั้นๆด้วย เช่นโบกมือไปที่เซนเซอร์เพื่อช่วยให้กังหันลมหมุนให้เร็วขึ้นและเห็นผลลัพธ์ของกำลังไฟฟ้าที่เพิ่มขึ้นจากกราฟิกแสดงผล หรือความสว่างของหลอดไฟ
  • ศิลปะ (Arts): ศิลปินรุ่นใหม่ได้มีการประยุกต์ใช้ Physical Computing กับศิลปะมากขึ้น เช่นให้ผู้ที่ชมศิลปะสร้างปฏิสัมพันธ์กับเซนเซอร์เพื่อมีส่วนร่วมกับงานศิลปะ (Interactive Media Arts) หรือ การสร้างศิลปะจากข้อมูลที่ดึงมาจากฐานข้อมูลต่างๆทั่วโลก (Data Visualization)
  • การออกแบบผลิตภัณฑ์ (Production Design): Physical Computing สามารถนำมาใช้ในการสร้างต้นแบบของผลิตภัณฑ์ Prototype ได้เพื่อประหยัดเวลา และต้นทุน
  • เชิงพาณิชย์ (Commercial Applications): ไม่เพียงเราสามารถนำ Physical Computing มาสร้างต้นแบบแล้ว เรายังสามารถนำมาพัฒนางานเพื่อใช้ในเชิงพาณิชย์ได้เช่นกัน เนื่องจาก Physical Computing ก็มีความสมารถเพียงพอและเหมาะสมในหลายๆงาน เช่น Sony Eyetoy, Smart switch, Desktop 3D printer, Media hub, Game
  • ด้านวิทยาศาสตร์ (Scientific Applications): Physical Computing สามารถนำมาประยุกต์สร้างเป็นเครื่องมือทางวิทยาศาสตร์ที่ช่วยให้นักวิทยาศาสตร์ใช้เก็บข้อมูล วิเคราะห์ ประมวลผลข้อมูล หรือทำนายผล จากข้อมูลเซนเซอร์ รูปภาพ หรือ แหล่งข้อมูลจากฐานข้อมูล

ในส่วนของบทความนี้เราจะเน้นการนำเสนอข้อมูลของการนำ Physical Computing มาใช้ในการจัดการเรียนการสอนกันครับ

Physical Computing for Education ใช้ในการจัดการเรียนการสอน

Physical Computing ได้ถูกพัฒนาและนำมาใช้ในการเรียนการสอนตั้งแต่ปี 1990 เริ่มต้นโดยใช้ไมโครคอนโทรลเลอร์ Microcontroller-based (ระบบสมองกลฝังตัว) เป็นวงจรรวมที่เราเรียกว่าไอซี ICs ที่บรรจุคำสั่งต่างๆให้เราสามารถเขียนโปรแกรมสั่งงานได้ เทคโนโลยีนี้ส่วนใหญ่จะมีการสอนในระดับมหาวิทยาลัยในหัวข้อทางด้าน หุ่นยนต์ Robotic environmental sensing, scientific experimentation, and interactive art.

pic1DEC24

Z80 Microcontroller Kit

ถ้ากล่าวถึงการพัฒนาเทคโนโลยีนี้ที่ให้ความสำคัญกับเยาวชนนั้น ในปี 1960 นักวิจัยได้ศึกษาและนำภาษา Logo http://www.calormen.com/jslogo/ มาใช้ในการเรียนการสอนสำหรับเด็กประถมศึกษาและมัธยมศึกษา เป็นการเขียนโปรแกรมง่ายๆเพื่อให้กราฟิกรูปเต่าลากเส้นเป็นรูปแบบต่างๆ ผู้เรียนจะสามารถพัฒนาทักษะการคิดอย่างมีระบบ Logical thinking และพื้นฐานทางคอมพิวเตอร์ แต่ลักษณะแบบนี้จะเป็นการเน้นการเรียนการสอนเน้นทางด้าน Digital ยังไม่ถูกปรับเปลี่ยนมาทางด้าน Physical มากนัก ทาง MIT Media Lab https://www.media.mit.edu/  จึงได้ทำการศึกษาและพัฒนานวัตกรรมการศึกษาทางด้าน Physical Computing ขึ้น

การพัฒนาเครื่องมือที่สามารถนำมาใช้ในการเรียนการสอนทางด้านคอมพิวเตอร์และการเขียนโปรแกรมที่สามารถให้ผู้เรียนเห็นภาพและสามารถเชื่อมต่อกับสิ่งต่างๆได้นั้น สามารถแบ่งได้เป็น 4 เจนเนอเรชั่น ดังนี้

ในยุคแรก Tangible Physical Computing คอมพิวเตอร์ที่จับต้องได้ เริ่มจาก LEGO/Logo ถูกพัฒนาในราวๆปี 1980-1990 ช่วงเวลาเดียวกันนั้นนักวิจัยที่ MIT Media Lab ได้ทำการพัฒนาโดยใช้ชื่อ Programmable Brick (ก้อนอิฐที่ใช้เขียนโปรแกรมได้ สงสัยจะตั้งชื่อตามลักษณะรูปร่างเป็นก้อนๆสี่เหลี่ยม) เด็กๆสามารถเขียนโปรแกรมควบคุมการทำงานของก้อนอิฐนี้ด้วยภาษา Logo

Figure-1-Progression-of-Programmable-Bricks-Counter-clockwise-from-upper-left-MIT-Logo

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

RCX-ConnectionsLEGO_Plotter

รูป LEGO/Logo platform ที่มีการเพิ่มเซนเซอร์ต่างๆเข้าไป

ในยุคที่สาม ช่วงปี 2001 Physical Computing ขยายความสามารถให้มีความเหมาะสมสำหรับผู้ใช้งานมากขึ้น เช่นเด็กเล็ก เด็กในกลุ่มประเทศด้อย/กำลังพัฒนา อีกทั้งได้มีการออกแบบที่สามารถนำมาเพิ่มประสิทธิภาพในการเรียนการสอนด้านคณิตศาสตร์ และวิทยาศาสตร์ อีกด้วย

ตัวอย่างเช่นโปรเจค curlybot เป็นของเล่นที่สร้างเพื่อพัฒนาทักษะการเรียนรู้ของเด็กวัยสี่ขวบขึ้นไป มีลักษณะเป็นทรงกลมมีล้อทำให้เคลื่อนที่ได้อยู่ด้านล่าง เด็กสามารถกำหนด(โปรแกรม) ให้หุ่นยนต์จดจำการเคลื่อนที่โดยการลากเลื่อนไปมา หลังจากนั้นสามารถกดปุ่มให้หุ่นยนต์นี้เคลื่อนที่ตามที่เรากำหนดไว้ก่อนหน้านี้ได้ งานวิจัยนี้พบว่าผู้เรียนสามารถเข้าใจหลักการของคณิตศาสตร์โดยการเล่นกับหุ่นยนต์นี้  เช่นการให้ผู้เรียนสร้างรูปทรงเรขาคณิตจากการเคลื่อนที่ซ้ำ การเรียนรู้จากการสร้างเงื่อนไขในการเคลื่อนที่ เรียนรู้จากการสร้างเรื่องราว Story telling จากการกำหนดการเคลื่อนไหวของหุ่นยนต์

Capture

รูป curlybot

ในยุคที่สี่ (ถึงปัจจุบัน) ได้มีการพัฒนาอย่างก้าวกระโดด ทั้งในด้านรูปร่าง โครงสร้าง สถาปัตยกรรม ออกแบบเพื่อเป็นอุตสาหกรรมที่ชัดเจนมากขึ้น  เราสามารถแบ่งได้สามกลุ่มใหญ่ดังนี้

LEGO_31313_box5_in_v24_1488

  • กลุ่มที่หนึ่ง Lego Mindstorms https://en.wikipedia.org/wiki/Lego_Mindstorms ชุดเลโก้ต่อประกอบเป็นหุ่นยนต์ เด็กๆสามารถเขียนโปรแกรมควบคุมได้โดยต้องผ่านคอมพิวเตอร์ หรือแอพบนแทปเล็ท ผลิตภัณฑ์นี้ถือได้ว่ามี DNA ของ Physical Computing ในยุคแรกๆมากที่สุด หัวใจสำคัญของระบบอยู่ที่กล่องควบคุม (Brick) ซึ่งจริงๆแล้วก็เป็น Microcontroller ARM7 ที่อยู่ด้านในนั้นเอง (Lego Mindstormes Teardown : https://youtu.be/jqTpRHEfmic)

howitworks

http://mindstormsnxt.blogspot.co.uk/2006/08/whats-inside-nxt-brick.html

  • กลุ่มที่สอง จะเป็นแบบ breakout board ที่มีลักษณะเป็นแผงวงจรอิเล็กทรอนิกส์ เช่น Basic Stamp, Arduino, Raspberry Pi, Arduino, ESP8266, Micro:bit, Crumble

Capture2

http://redfernelectronics.co.uk/crumble/

1471260835673cover

https://www.raspberrypi.org/learning/physical-computing-with-python/

microbit

http://microbit.org/start/

lilyPadSimple_a

https://www.arduino.cc/en/Main/ArduinoBoardLilyPad

  • กลุ่มที่สาม จะเป็นประเภทที่ไม่จำเป็นต้องต้องเชื่อมกับคอมพิวเตอร์เพื่อทำการโปรแกรม เราสามารถโปรแกรมสั่งงานได้ในตัวของอุปกรณ์ ซึ่งการสร้างโปรแกรมบนตัวอุปกรณ์มีความแตกต่าง หลากหลาย ไม่เหมือนกับสองกลุ่มที่กล่าวมา (เข้มข้นฉีกความจำเจ) อุปกรณ์ในกลุ่มนี้ถือว่าเป็นการสร้างกระบวนทัศใหม่ของ Physical Computing ตัวอย่างเช่น

Topobo http://www.topobo.com/ เป็นอุปกรณ์ที่เราสามารถนำชิ้นส่วนต่างๆมาประกอบกัน แล้วทำการบิดหมุน เพื่อโปรแกรมการเคลื่อนไหว (kinetic memory) เช่นเรานำมาต่อเป็นสัตว์ (ประหลาด) แล้วทำการขยับชิ้นส่วนที่ส่วนขาไปมาเพื่อให้ส่วนควบคุมจดจำลักษณะการเคลื่อนไหว หลังจากนั้นสัตว์ของเราก็จะเดินอย่างที่เราโปรแกรมไว้

งานชิ้นนี้เป็นงานวิจัยของ MIT Media Lab http://tangible.media.mit.edu/project/topobo/ โดยปัจจุบันได้พัฒนาเป็นผลิตภัณฑ์เชิงพาณิชย์แล้ว http://secure.topobo.com/

17-67-thickboxtopobo-2

รูป Topobo http://www.topobo.com/

Cubelets http://www.modrobotics.com/cubelets/ เป็นนวัตกรรมการพัฒนา Physical Computing ทางด้านกายภาพ Form factor ที่สามารถให้เด็กๆสามารถนำก้อนสี่เหลี่ยมแม่เหล็กทรงลูกบาศก์มาต่อเป็นหุ่นยนต์ Modular Robot ทำงานเป็นแขนกล เคลื่อนไหวได้ โดยแต่ละก้อนจะมีความสามารถที่แตกต่างกันไป เช่น แบตเตอรี่ ลำโพง เซนเซอร์ มอเตอร์ ล้อเคลื่อนที่ ฯลฯ

                      8020319_robotics-for-kids-with-cubelets--imagination_t24b5dcb0ab3-headercubelets-6

ข้อดีในการนำ Physical Computing มาใช้ในการเรียนการสอน

  • ผู้เรียนสามารถเข้าใจหลักการทำงานและการสื่อสารระหว่างมนุษย์กับคอมพิวเตอร์ หรือระหว่างคอมพิวเตอร์กับสิ่งต่างๆรอบตัวเรา
  • สร้างประสบการณ์การเรียนรู้ของผู้เรียน Designing learning experience และพัฒนาทักษะทางด้าน ซอฟสกิล Soft skills หรือทักษะในการแก้ปัญหา การสื่อสาร การบริหารจัดการ การทำงานร่วมกัน โดยทักษะเหล่านี้จะเกิดได้จากการที่เราให้ผู้เรียนได้ช่วยกันคิด ประดิษฐ์และแก้ไขโจทย์ปัญหาร่วมกันโดยใช้ Physical Computing เป็นเครื่องมือ
  • การให้พื้นที่ในการเรียนรู้ด้วยตนเอง Student-centred ผู้เรียนสามารถทำงานร่วมกันและสามารถสร้างสรรค์ผลงานได้ด้วยตนเองร่วมกับเพื่อน ทำให้ผู้เรียนมีความสุขในการเรียนมากกว่า การที่ครูผู้สอนเป็นคนกำหนดทิศทางในการเรียน Teacher centred approach โดยจะสอดคล้องที่เน้นผู้เรียนเป็นศูนย์กลาง
  • สนับสนุนการจัดเรียนรู้ และหลักสูตรแบบบูรณาการ Integrated management & curriculum ผู้สอนสามารถจัดประสบการณ์การเรียนรู้ของผู้เรียนได้ตามความสนใจ โดยสามารถเชื่อมโยงเนื้อหาสาระของศาสตร์ หรือหลักสูตรต่างๆที่เกี่ยวข้องสัมพันธ์กันให้ผู้เรียน

ต่อไปเราจะมาดูกันว่า เราสามารถที่จะส่งเสริมการเรียนรู้ทางด้านเทคโนโลยีของเยาวชนได้อย่างไรให้เกิดประสิทธิภาพสูงสุด

  • ออกแบบเทคโนโลยีแฟชั่น ชิกๆคูลๆ (Wearable computing)

Lilypad เป็นเครื่องมือที่ถูกนำมาใช้ในการเรียนการสอนในการออกแบบแฟชั่นอิเล็กทรอนิกส์ที่ได้รับความนิยมสูง เนื่องจากมีราคาไม่แพง เรียนรู้ง่าย สามารถโปรแกรมได้โดยใช้พื้นฐานภาษา C ผ่าน Arduino IDE

1

Capture1

https://learn.adafruit.com/chameleon-scarf?view=all

เราลองมาดูตัวอย่างหลักสูตรเวิร์คชอป 5 วันกับการสอนเด็กอายุ7-9ขวบ ประกอบไปด้วย 4 บทเรียน แต่ละบทเรียนมีงานย่อยให้ทำเพื่อประเมินความเข้าใจในการเรียนรู้ของผู้เรียน (อ้างอิงจากงานวิจัยของ Lau, W. W., Ngai, G., Chan, S. C., & Cheung, J. C. (2009, March))

บทเรียน

ชื่อบทเรียน กิจกรรม

ผลสัมฤทธิ์

1

ความรู้พื้นฐานด้านวงจรอิเล็กทรอนิกส์ Electronic Circuit Theory สร้างวงจรแบบง่ายด้วยสายไฟและหลอดไฟ LED ผู้เรียนเข้าใจพื้นฐานอิเล็กทรอนิกส์ เช่น แรงดัน และกระแสไฟฟ้า ความต้านทาน ตัวนำไฟฟ้า

2

ออกแบบวงจรสำหรับเสื้อยืด T-Shirt Circuit Design ออกแบบและสร้างวงจรที่ซับซ้อนขึ้นกับหลอดไฟ LED หลายๆหลอดบนเสื้อยืด ผู้เรียนเข้าใจการสร้างวงจรพื้นฐาน และการใช้งานเบรดบอร์ด breadboard

3

ความรู้พื้นฐานของวงจรรวม ICs เชื่อมต่ออุปกรณ์อิเล็กทรอนิกส์กับ ICs ได้ ผู้เรียนเข้าใจการทำงานของ ICs และผลลัพธ์

4

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

ผลการวิจัยในการนำหลักสูตรนี้ไปทดลองกับเด็กนักเรียน ปรากฏว่าผู้เรียนมีแรงจูงใจ (Motivation) ในการเรียนทางด้านวิทยาศาสตร์ และคอมพิวเตอร์สูงขึ้น อย่างไรก็ตามนักเรียนรู้สึกว่าการเขียนโปรแกรมควบคุมไมโครคอนโทรเลอร์มีความซับซ้อน และต้องใช้ความพยายาม แต่สุดท้ายก็สามารถทำได้สำเร็จ นอกเหนือจากนั้นนักวิจัยเห็นว่า การสอนดังกล่าวสามารถเปิดโอกาสให้ผู้เรียนได้ฝึกฝนใช้ความคิดสร้างสรรค์ ควบคู่กับการเรียนการสอนด้านเทคโนโลยี และการเขียนโปรแกรมเบื้องต้น

  • ดีเจ แร๊ปโย่วๆๆ (Digital Music Creation)

การสร้างเสียงดนตรีก็สามารถนำมาประยุกต์เพื่อพัฒนาการเรียนการสอนได้ สามารถทำให้ผู้เรียนเพลิดเพลินกับเสียงดนตรีควบคู่กับทักษะในการคิด การทำงานร่วมกัน และทักษะในการเขียนโปรแกรม

sonic pi

Sonic Pi Lessons https://www.raspberrypi.org/learning/sonic-pi-lessons/

โปรแกรม Sinic Pi ที่สามารถติดตั้งบนระบบปฏิบัติการบน Raspberry Pi หรือ PC ทั่วไป ได้ถูกนำมาใช้ในการพัฒนาทักษะทางการเขียนโปรแกรมคอมพิวเตอร์ของเด็กนักเรียนในประเทศอังกฤษ ผ่านทางการประพันธ์ทำนองดนตรี สร้างเสียงเพลง ด้วยการเขียนโค้ด โปรแกรม Sonic Pi ถูกพัฒนโดย Sam Aaron ที่คอมพิวเตอร์แล็ปที่มหาวิทยาลัยเคมบริดจ์ อังกฤษ  ผลจากงานวิจัยพบว่าผู้เรียนมีความสนใจเพิ่มขึ้นมากในการเรียนทางด้านวิทยาการคอมพิวเตอร์ ผู้เรียนเห็นความสำคัญของดนตรีกับชีวิตประจำวัน และมีความสนุกในการประพันธ์ดนตรีด้วยตนเอง และมองเห็นการเขียนโปรแกรมเป็นสิ่งที่สนุกไม่เหมือนการเขียนโปรแกรมด้วยเครื่องมืออื่นๆ หรือการต่อบล็อกของโปรแกรม Scratch

sonic-pi-summer-4

https://www.raspberrypi.org/blog/sonic-pi-live-summer-school/

 

สรุป

เราจะเห็นได้ว่าปัจจุบันเราได้มองคอมพิวเตอร์ในมุมมองที่แตกต่างออกไปจากเดิมที่ใช้พิมพ์งาน และมีขนาดใหญ่ การนำ Physical Computing มาใช้งานและนำมาพัฒนาการเรียนรู้ของเยาวชนเป็นอีกหนึ่งทางเลือกสอดคล้องกับความต้องการของตลาดแรงงานในอนาคตและพฤติกรรมของผู้เรียนในปัจจุบัน

image_39561493919803

สิ่งที่เราต้องศึกษาวิจัยกันต่อไปไม่เพียงแค่การสร้างนวัตกรรมการเรียนรู้โดยการขาดการศึกษาพฤติกรรมของผู้เรียน การเปิดโอกาศให้ผู้เรียนได้ใช้ความคิดสร้างสรรค์ ได้ลงมือทำในสิ่งที่เค้าเองมีส่วนร่วมและคิดค้น จะทำให้เกิดการเรียนรู้อย่างมีความสุขและยั่งยืน Physical Computing จะนำพาผู้เรียนกลับไปสู่ช่วงเวลาแห่งการสร้างสรรค์และเรียนรู้อย่างสนุกสนาน

อ้างอิง

Advertisements

Back to the basic: connect ESP8266 and web page through cloud MQTT เชื่อมต่อ และควบคุม ESP8266 กับเว็บเพจ ผ่านคลาวน์ MQTT

Back to the basic: connect ESP8266 and web page through cloudMQTT
เชื่อมต่อ และควบคุม ESP8266 กับเว็บเพจ ผ่านคลาวน์ MQTT

คราวนี้เรากลับมาทำโปรเจคพื้นฐานโดยควบคุมไฟกระพริบ เช็คค่าอุณหภูมิ จากบอร์ด ESP8266 ด้วยเว็บเพจ โดยเว็บเพจจะแสดงค่าอุณหภูมิทุกครั้งที่เรากดปุ่มที่บอร์ด และมีปุ่มให้เรากดควบคุมไฟLEDจากเว็บเพจ

ก่อนอื่นต้องทำการสมัครสมาชิกและสร้าง CloudMQTT Instance ขึ้นมาก่อน หลังจากนั้นให้เข้าไปดูข้อมูลต่างๆเพื่อนำไปใช้ยืนยันความปลอดภัย และการเข้าถึงระบบคลาวน์

Setup cloudMQTT account and get your user, password, port and Websockets Port which we aim to use them in Arduino script.09-11-2016-20-58-22

Click on WebSocket UI to open WebSocket window terminal where we will see all activities between ESP8266 and web page.09-11-2016-21-03-26

โปรเจคนี้ผมใช้บอร์ดของ SparkFun ซื้อมาเล่นนานแล้วไม่ค่อยใช้งาน เลยปัดฝุ่นนำกลับมาอีกครั้งบอร์ดนี้มีเซนเซอร์อยู่ในตัวเองครับ ส่วนท่านมีบอร์ดอื่นที่เป็น ESP8266 ก็ใช้ได้เช่นเดียวกัน แต่ท่านอาจจะต้องต่อ LED และต่อเซนเซอร์อุณหภูมิ ความชื้นเอง ซึ่งสามารถหาข้อมูลได้ง่ายมีอยู่ทั่วไปครับ

In this project, I use ESP8266 on the SparkFun Blynk Board which it already has onboard temperature/humidity sensor and NeoPixel.13794-04a

ใช้โปรแกรม Arduino IDE เพื่อเขียนโปรแกรม โดยนำโค้ดด้านล่างไปปรับแต่งดูครับ

Apply the following source code in your Arduino IDE to fit with your ESP8266 module.

/*
MQTT publish/subscriber example https://www.cloudmqtt.com/

- connects to an MQTT server
- publishes to the topic "showTemp"
- subscribes to the topic "showTemp"

Modified by SpidyHero
*/

#include <ESP8266WiFi.h>
#include <PubSubClient.h> //using CloudMQTT lib
#include <BlynkSimpleEsp8266.h> //using Blynkboard lib
#include <Adafruit_Si7021.h> //using temperature&Humidity sensor on board
#include <Adafruit_NeoPixel.h> //using Adafruit_NeoPixel on board
#include <Wire.h>

#define WS2812_PIN 4 // Pin connected to WS2812 LED
Adafruit_Si7021 tempSensor = Adafruit_Si7021(); //using Si7021 (temperature&Humidity sensor on board)
Adafruit_NeoPixel rgb = Adafruit_NeoPixel(1, WS2812_PIN, NEO_GRB + NEO_KHZ800); //using Adafruit_NeoPixel on board

// constants won't change. They're used here to
// set pin numbers:
const int buttonPin = 0; // NodeMCU pushbutton pin
const int ledPin = 5; // LED pin on NodeMCU

// variables will change:
int buttonState = 0; // variable for reading the pushbutton status

//-------------------------------//

const char *ssid = "xxxxxxx"; // your WiFi network name
const char *pass = "xxxxxxx"; //your WiFi network password

// Update these with values suitable for your network.
IPAddress server(54,75,121,168); // CloudMQTT Server IP, ping m20.cloudmqtt.com to get this IP

WiFiClient wclient;
PubSubClient client(wclient,"m20.cloudmqtt.com", 15346); //your MQTT Port number

// use this function to receive message from CloundMQTT subscribes topic (showTemp)
void callback(const MQTT::Publish& pub) {
Serial.print(pub.topic());
Serial.print(" => ");
Serial.println(pub.payload_string());

//check if there is message "555" is sent to this topic, then blink LED
if (pub.payload_string()== "555"){//check if there is message "555" is sent to this topic, then blink LED
Serial.println("Blinking LED");
blink(10);
}
}

// setup
void setup()
{
tempSensor.begin(); //setup temp&humid sensor
rgb.begin(); // setup Neo Pixel LED
rgb.show(); //// Initialize all pixels to 'off'

// Setup console
Serial.begin(115200);
delay(10);
Serial.println();
Serial.println();

// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT);

client.set_callback(callback);

//----setup WiFi connection----//
WiFi.begin(ssid, pass);

int retries = 0;
while ((WiFi.status() != WL_CONNECTED) && (retries < 10)) {
retries++;
delay(500);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("");
Serial.println("WiFi connected");
}

//----MQTT validate connection ----//
//char* user = "afdwjnnv"; // your MQTT user
//char* pass = "wY1CUsaq5jn2"; // your MQTT password

if (client.connect(MQTT::Connect("ESP8266Client")
.set_auth("afdwjnnv", "wY1CUsaq5jn2"))) {
Serial.println();
Serial.println("Publish success.");
client.publish("showTemp","ESP8266connected"); //Publish/send message to clound on showTemp

Serial.println("Subscribe success.");
client.subscribe("showTemp"); //Subscribes topic to receive message from cloud and print on serial monitor

}
}

void loop()
{

client.loop();

//---press button to turn on/off LED and display temperature

// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);

// check if the pushbutton is pressed.
// if it is, the buttonState is HIGH:
if (buttonState == HIGH) {
// turn LED off:
digitalWrite(ledPin, LOW);
}
else {
// turn LED on:
// send message to your topic (showTemp) when release button
digitalWrite(ledPin, HIGH);
client.publish("showTemp",String (tempSensor.readTemperature())) ; // send message to "showTemp" when release button
Serial.print("button is pushed");
Serial.println();
delay(300);
}

}
void blink(int a) {
for (int i=0; i <= a; i++){
digitalWrite(ledPin, HIGH); // turn the LED on (HIGH is the voltage level)
rgb.setPixelColor(0, 254); //set Neo Pixel color
rgb.show();//display Neo Pixel color
delay(100); // wait for a second
digitalWrite(ledPin, LOW); // turn the LED off by making the voltage LOW
rgb.setPixelColor(0, 0); //turn off
rgb.show();

delay(100); // wait for a second
}

}

จุดสังเกตุ
บรรทัดที่22 23 ให้ระบุ Login และ Password ของ WiFi ที่เราใช้เชื่อมต่ออินเทอร์เน็ต
บรรทัดที่ 26 ให้ระบุที่อยู่ของคลาวน์เซอเวอร์ ถ้าไม่ทราบเลขให้ทำการ ping ดูครับ
บรรทัดที่29 ให้ระบุพอร์ทของคลาวน์เซอเวอร์
บรรทัดที่83 ให้ระบุ User และ Password ของคลาวน์เซอเวอร์

Creating web page
Now, we need to create a web page to display and control LED on the ESP8266 board through cloudMQTT.

ในส่วนของการพัฒนาเว็บเพจ เราอ้างอิงจากตัวอย่างนี้ cloudmqtt websocket แล้วทำการเพิ่มเติมปุ่ม และส่วนแสดงผลอุณหภูมิ

Please apply the following script and try to test it. For example, when you hit a button on the Blynk board,


<!DOCTYPE html>
<html>
			<link async href="http://fonts.googleapis.com/css?family=Fredoka%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>

<style>
.long-shadow {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
bottom: 0;
padding: 25px;
border: none;
font: normal 30px/2 "Fredoka One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: #93c47d;
text-shadow: 3px 3px 0 #0199d9 , 4px 4px 0 #0199d9 , 5px 5px 0 #0199d9 , 6px 6px 0 #0199d9 , 7px 7px 0 #0199d9 , 8px 8px 0 #0199d9 , 9px 9px 0 #0199d9 , 10px 10px 0 #0199d9 , 11px 11px 0 #0199d9 , 12px 12px 0 #0199d9 , 13px 13px 0 #0199d9 , 14px 14px 0 #0199d9 , 15px 15px 0 #0199d9 , 16px 16px 0 #0199d9 , 17px 17px 0 #0199d9 , 18px 18px 0 #0199d9 , 19px 19px 0 #0199d9 , 20px 20px 0 #0199d9 ;
}
.enjoy-css {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin: 0.5em;
padding: 0 1.5em;
border: 1px solid rgba(211,211,211,1);
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
font: normal normal bold 1em/2em Arial, Helvetica, sans-serif;
color: rgba(114,114,114,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: nowrap;
background: rgba(234,234,234,1);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) , 0 1px 0 0 rgba(0,0,0,0.298039) ;
box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) , 0 1px 0 0 rgba(0,0,0,0.298039) ;
text-shadow: 0 1px 0 rgba(255,255,255,0.8) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.enjoy-css:hover {
cursor: pointer;
border: 1px solid rgba(178,178,178,1);
color: rgba(76,76,76,1);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) inset, 0 1px 0 0 rgba(0,0,0,0.298039) ;
box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) inset, 0 1px 0 0 rgba(0,0,0,0.298039) ;
}

</style>

<body>
<div class="long-shadow">

Temperature (°C) = <temp></temp>
<div class="enjoy-css" onclick="blink()">Blink LED</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script type="text/javascript">

 // Create a client instance
 //client = new Paho.MQTT.Client("host", Websockets Port,"client_id");
 client = new Paho.MQTT.Client("m20.cloudmqtt.com", 35346, "web_" + parseInt(Math.random() * 100, 10)); 

 // set callback handlers
 client.onConnectionLost = onConnectionLost;
 client.onMessageArrived = onMessageArrived;
 var options = {
 useSSL: true,
 userName: "afdwjnnv",
 password: "wY1CUsaq5jn2",
 onSuccess:onConnect,
 onFailure:doFail
 }

 // connect the client
 client.connect(options);

 // called when the client connects
 function onConnect() {
 // Once a connection has been made, make a subscription and send a message.
 console.log("onConnect");
 client.subscribe("showTemp");
 message = new Paho.MQTT.Message("Connected!!! Hello from web page");
 message.destinationName = "showTemp";
 client.send(message);
 }

 function doFail(e){
 console.log(e);
 }

 // called when the client loses its connection
 function onConnectionLost(responseObject) {
 if (responseObject.errorCode !== 0) {
 console.log("onConnectionLost:"+responseObject.errorMessage);
 }
 }

 // called when a message arrives
 function onMessageArrived(message) {
 console.log("onMessageArrived:"+message.payloadString);
 document.querySelector('temp').innerHTML = message.payloadString;
 }

 function blink() {
 // Once a connection has been made, make a subscription and send a message.

 message = new Paho.MQTT.Message("555");
 message.destinationName = "showTemp";
 client.send(message);
 }
 </script>

</body>
</html>

เสร็จแล้วทำการทดสอบเลยครับ เมื่อเปิดหน้าเว็บขึ้นมา เว็บจะทำการลงทะเบียนในหัวข้อที่เราตั้งขึ้นมาชื่อ showTemp และจะส่งข้อความ Hello… ไปที่Cloud และเว็บก็จะรับข้อความนั้นมาโชว์บนหน้าเว็บเพจ หลังจากนั้น เมื่อเรากดปุ่มที่บอร์ด ESP8266 บอร์ด ESP8266 จะส่งข้อมูลอุณหภูมิไปที่หัวข้อ showTemp และเว็บเพจก็จะนำค่านั้นมาแสดงผล เมื่อเรากดปุ่มที่เว็บเพจ เว็บเพจจะส่งข้อความ 555 ไปที่Cloud บอร์ดESP8266เช็คข้อความว่ามี 555 เข้ามาแล้วก็จะทำการกระพริบไฟ LED

11-11-2016-15-08-42

NodeMCU control Web Animation through Cloud MQTT ควบคุม เว็บแอนิเมชั่น ด้วย NodeMCU ผ่านคลาวด์เซอร์วิซ CloudMQTT

NodeMCU control Web Animation through Cloud MQTT
ควบคุม เว็บแอนิเมชั่น ด้วย NodeMCU ผ่านคลาวด์เซอร์วิซ CloudMQTT

สวัสดีครับหลังจากที่ผมได้ลองทดลองทำคลิปโพสบน Youtube ไปซักพักก็มีเพื่อนถามมาว่าทำอย่างไร นิ่งไปนานเพราะจำไม่ได้ว่าทำอะไรลงไปบ้าง ฮา…. วันนี้มีเวลาเลยค้นไฟล์รวบรวมมาเขียนสรุปอีกครั้งครับ (ก่อนจะลืมแบบถาวร T^T)

Scenario สถานการณ์

สถานการณ์นี้เราอยากจะสั่งงานโดยการกดปุ่ม สวิตช์ หรือรับค่ามาจากเซนเซอร์จับการเคลื่อนไหว ที่ต่อด้วยกับ NodeMCU หรือใช้ ESP8266 ก็ได้ เมื่อกดปุ่มแล้ว เราจะส่งข้อความไปที่ Cloud Broker ซึ่งอีกฝั่งเป็น Web app animation ที่เราสร้างขึ้นมาให้เชื่อมต่อ (subscribes) กับ Cloud Broker ไว้คอยเช็คว่ามีข้อความเข้ามาหรือไม่ ถ้ามีข้อความเข้ามา(สวิตช์ถูกกด) แอนิเมชั่นของเราจะทำการเล่น

nodeMCU

 

อุปกรณ์ฮาร์ดแวร์ Hardware

  1. NodeMCU หรือ ESP8266

ซอฟต์แวร์ Software

  1. Arduino IDE
  2. CloudMQTT
  3. Adobe Edge Animate CC

ขั้นการสมัครใช้ฟรี Cloud Service (CloudMQTT)

  1. เริ่มเข้าไปสมัครกันเลยครับที่เว็บ https://www.cloudmqtt.com/

26-03-2016 11-23-10

2. หลังจากสมัครเสร็จเรียบร้อยแล้ว ให้เข้าไปที่ Control Panel

 

26-03-2016 11-23-56

3. ที่ CloudMQTT Console ให้สังเกตุที่หน้า Overview จะมีข้อมูลที่ต้องจดจำคือ Server, User, Password และ Port

26-03-2016 14-47-54

ขั้นตอนการเขียนโปรแกรมสำหรับ NodeMCU หรือ ESP8266

  1. เขียนโปรแกรมตามตัวอย่างเลยครับ หรือ สามารถโหลดได้ที่ https://github.com/spidyhero/NodeMCU_MQTT/blob/master/MQTT_HelloMama_example.ino

26-03-2016 15-07-30

/*
 MQTT publish/subscriber example https://www.cloudmqtt.com/

  - connects to an MQTT server
  - publishes to the topic "outTopic"
  - subscribes to the topic "outTopic"

  Modified by SpidyHero
*/

#include &amp;lt;ESP8266WiFi.h&amp;gt;
#include &amp;lt;PubSubClient.h&amp;gt;

// constants won't change. They're used here to
// set pin numbers:
const int buttonPin = 0;     // NodeMCU pushbutton pin
const int ledPin =  16;      // LED pin on NodeMCU

// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

//-------------------------------//

const char *ssid =  "xxxxx";   // your WiFi network name
const char *pass =  "xxxxx";   //your WiFi network password

// Update these with values suitable for your network.
IPAddress server(xx,xx,xxx,xxx); // CloudMQTT Server IP, ping m11.cloudmqtt.com to get IP

WiFiClient wclient;
PubSubClient client(wclient,"m11.cloudmqtt.com", 18940); //your MQTT Port number

// use this function to receive message from CloundMQTT subscribes topic
void callback(const MQTT::Publish&amp;amp; pub) {
  Serial.print(pub.topic());
  Serial.print(" =&amp;gt; ");
  Serial.println(pub.payload_string());
}

// setup
void setup()
{
  // Setup console
  Serial.begin(115200);
  delay(10);
  Serial.println();
  Serial.println();

  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);

  client.set_callback(callback);

  WiFi.begin(ssid, pass);

  int retries = 0;
  while ((WiFi.status() != WL_CONNECTED) &amp;amp;&amp;amp; (retries &amp;lt; 10)) {
    retries++;
    delay(500);
    Serial.print(".");
  }
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("");
    Serial.println("WiFi connected");
  }

//----MQTT validate connection ----//

  if (client.connect(MQTT::Connect("NodeMCU")
                    .set_auth("CloudMQTTusername", "CloudMQTTpassword"))) {
    Serial.println();
    Serial.println("Publish success.");
    client.publish("outTopic","NodeMCUconnected"); //Publish/send message to clound on outTopic

    Serial.println("Subscribe success.");
    client.subscribe("outTopic"); //Subscribes topic to receive message from cloud and print on monitor

               }
}

void loop()
{
  client.loop();

  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // turn LED on:
    digitalWrite(ledPin, HIGH);
  }
  else {
    // turn LED off:
    // send message to your topic when release button
    digitalWrite(ledPin, LOW);
    client.publish("outTopic","button is pushed"); // send message to "outTopic" when release button
    Serial.print("button is pushed");
    Serial.println();
    delay(300);
  }

}

บรรทัดที่ 24 ให้ระบุชื่อ WiFi ที่เราจะทำการเชื่อมต่อ
บรรทัดที่ 25 ให้ระบุ Password ของ WiFi ที่เราจะทำการเชื่อมต่อ
บรรทัดที่ 28 ให้ระบุ IP Server CloudMQTT เลขนี้ได้มาด้วยการ ping m11.cloudmqtt.com ใน Console

27-03-2016 10-59-57

บรรทัด 72 ให้ระบุ CloudMQTT username และ password
เสร็จแล้วเราก็ลองอัพโหลดเข้าNodeMCU หรือ ESP8266 กันเลยครับ….

ขั้นตอนการสร้าง Web Animation

26-03-2016 15-22-34

เริ่มต้นเรามาสร้างไฟล์งานใน Adobe Edge กันเลยครับ ในที่นี้ผมจะยกตัวอย่างไม่ซับซ้อนก่อนครับ

  1. ขั้นแรกให้เราสร้าง stage กำหนดขนาด และสี ของพื้นที่แสดงผลก่อน

27-03-2016 15-35-23

2. สร้างพื้นที่แสดงข้อความที่เรารับมาจาก CloudMQTT

27-03-2016 15-39-23

3. สร้าง Text ข้อความเพื่อแสดงข้อความ ตั้งชื่อว่า message

27-03-2016 15-42-11

4. สร้าง icon แสดงสถานะการเชื่อมต่อกับ CloudMQTT เมื่อเชื่อมต่อได้แสดงไอคอนสีเขียว ถ้าเชื่อมต่อไม่ได้ให้แสดงสีแดง และสร้างวัตถุอื่นๆไว้รอได้เลยครับ ผมใช้ Adobe Illustrator CC ในการสร้างVectorต่างๆไว้

27-03-2016 16-31-50

5. เราสามารถ Copy จาก AI และ Paste ลงใน AE ได้ดดยตรงเลย ไฟล์ที่นำเข้ามาจะเป็น SVG

27-03-2016 16-36-18

6. ตั้งชื่อให้กับ Vector ที่เรานำเข้ามา โดยตอนนี้เราจะมี ไฟล์ cloudON สีเขียว และ cloudOFF ที่เป็นสีแดง
7. จัดตำแหน่งไว้ โดยเราจะนำมาซ้อนกันดังรูป เราสามารถกดเครื่องหมายรูปดวงตาเพื่อแสดง/ซ่อนการแสดงผล

27-03-2016 16-58-07

27-03-2016 17-00-00

8. กดรูปตาเปิดการแสดงผลให้กับ CloudON (สีเขียว) แลัวให้เราตั้งStyleการแสดงผลด้านซ้ายมือ จาก Always On เป็น Off เพราะเราจะเขียนScript ให้เปลี่ยนเป็น On เพื่อแสดงการเชื่อมต่อภายหลัง ตอนนี้จะเห็นสีแดงแสดงผลอย่างเดียว

27-03-2016 17-02-08

9. นำตัวละคร และ กล่องข้อความที่สร้างไว้ใน AI เข้ามาและตั้งชื่อว่า character และ textBox

27-03-2016 17-10-56

10.ตั้งชื่อSymbol ว่า animation และยกเลิกการเล่นอัตโนมัติ

 

27-03-2016 17-29-45

11. เราสามารถแก้ไข Symbol ได้โดยดับเบิ้ลคลิ๊กที่ไอคอนSymbol ชื่อ Animation

27-03-2016 17-32-09

12. สร้างตัวอักษรตามต้องการดังภาพ

27-03-2016 17-43-52

13.ทำการ Group text และ textBox เข้าด้วยกันโดย Shift select คลิ๊กขวาและเลือกGroup (Ctrl+g)

27-03-2016 19-58-34

14.เปลี่ยนชื่อเป็น messageBox

27-03-2016 20-00-07

15. เราจะมาทำการแอนิเมท Character ก่อน โดยเลือกที่character และกด Pin ไอคอนแล้วลากเพื่อกำหนดเวลาในการเคลื่อนที่บนTimeline

27-03-2016 20-03-04.jpg

16. ใช้เมาส์คลิ๊กลากcharacter ลงมาด้านล่างให้พ้นกรอบของ Symbol

27-03-2016 20-05-35.jpg

17.กำหนดรูปแบบของแอนิเมชั่น Easing  แบบ Ease Out >Back ดังภาพ

27-03-2016 20-06-39

18. ทดสอบแอนิเมชั่นโดยการกดปุ่ม Enter หรือลาก Play head ที่ Timeline ดู จะเห็นว่าตัว character เราจะเด้งขึ้นมาเมื่อเล่นแอนิเมชั่น
19. ชุดตัวอักษร messageBox ให้ทำเช่นเดียวกันแต่อาจกำหนดเวลาให้ช้ากว่าเล็กน้อย ดูTimelineในภาพด้านล่าง เมื่อทดลองเล่นแอนิเมชั่นแล้ว จะเห็นว่าตัว character จะเด้งขึ้นมาก่อนและตัวอักษรจะเด้งขึ้นตามมา

27-03-2016 21-20-11.jpg

27-03-2016 21-57-16.jpg

27-03-2016 22-00-38.jpg

https://www.cloudmqtt.com/docs-websocket.html

…..เดี๋ยวกลับมาเขียนต่อครับ…..to be continuous…

โค้ดทั้งหมดของ Adobe Edge Animate


//CloudMQTT WebSockets
  client = new Paho.MQTT.Client("m11.cloudmqtt.com", 38940, "web_" + parseInt(Math.random() * 100, 10)); 

  // set callback handlers
  client.onConnectionLost = onConnectionLost;
  client.onMessageArrived = onMessageArrived;
  var options = {
    useSSL: true,
    userName: "xxxxxxx", //CloudMQTT username
    password: "xxxxxxx", //CloudMQTT password
    onSuccess:onConnect,
    onFailure:doFail
  }

  // connect the client
  client.connect(options);

  // called when the client connects
  function onConnect() {
    // Once a connection has been made, make a subscription and send a message.
    console.log("CloudMQTT Connected");
	 sym.$("cloudON").show();

    client.subscribe("outTopic");
    message = new Paho.MQTT.Message("Hello CloudMQTT");
    message.destinationName = "outTopic";
    client.send(message);
  }

  function doFail(e){
    console.log(e);
  }

  // called when the client loses its connection
  function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }

  // called when a message arrives
function onMessageArrived(message) {

   //get date time
   var d = new Date();

   console.log("Message from cloud: "+message.payloadString);

	sym.$("message").html("Cloud Message: "+message.payloadString+"
"+"Time: "+d);

	setTimeout(function() {sym.getSymbol("animation").stop(0);},2500);
   sym.getSymbol("animation").play(0);

  }

 

 

 

…..เดี๋ยวกลับมาเขียนต่อครับ…..to be continuous…

https://github.com/spidyhero/NodeMCU_MQTT