M5STACK with UI FLOW ใช้งาน esp32 แบบไม่โค้ดสักกะตัว
เราอยู่ในยุคที่ทุกอย่างมีให้เราใช้ไม่ว่าจะโค้ด จะไลบรารี่
เรามีหน้าที่แค่ดึงมาใช้แล้วประกอบกับความรู้ของเรา
M5STACK คืออะไร ?
อุปกรณ์ micro controller ที่ข้างในมีชิบ esp32 (ดีกว่า 8266) แถมยังมีหน้าจอ LCD, Button และ Speakers ภายในตัว ไม่ต้องต่ออะไรเยอะมากมายเสียบสายก็พร้อมใช้งานได้เลย สาเหตุที่ชื่อ M5 ก็เพราะว่า…. ขนาดมัน 5 นิ้วยังไงละ (ตามที่ CEO ของ M5 ได้กล่าวไว้) ส่วน STACK ก็คือการนำเอาชิ้นส่วนต่างๆมาประกอบโดยการซ้อนกัน (stack) นั้นเอง
แล้วดีกว่าบอร์ดที่มีชิบ esp32 บอร์ดอื่นๆอย่างไร ?
ตัว M5STACK มีโมเดลให้เลือกเยอะปรับเปลี่ยนตามรูปแบบการใช้งาน
อย่างหนึ่งที่เด่นและผมชอบมากๆคือการแต่งเติมของ M5 หรือการ “STACK”
เช่นโมดูล “FIRE” ของ M5 คือมีแบตเตอรี่ในตัวและการติดตั้งคือแค่เอาประกบกันให้ STACK สูงขึ้นนั้นเอง และแบตเตอรี่ของมันอยู่ได้ประมาณ 30–40 นาที
แถม M5 ก็มีเซ็นเซอร์ที่สำเร็จรูป ที่เราแค่เสียบเข้ากับ M5STACK (ถ้าไม่ถูกรูก็จะเสียบไม่เข้า) และลากบล็อกอ่านค่าจากเซ็นเซอร์จบ…..
คุณไม่จำเป็นต้องความรู้ด้านการต่อวงจรมากก็สามารถใช้งาน M5 ได้
โมเดลที่โดดเด่น
- M5STACK Fire (มีแบตเตอรี่ในตัว)
- M5 CAMERA (ESP32+CAMERA คุ้มมาก !)
UI FLOW คือ ?
ถ้าใครเคยเล่น MICRO:BIT มาก่อน ก็น่าจะเคยใช้ MAKECODE ที่เอาไว้เขียน MICRO:BIT ซึ่งเจ้า UI FLOW ก็จะมีลักษณะคล้ายๆกันเลย ซึ่งก็คือ Code-Block นั้นเอง ลากบล็อกวางแล้วใช้งานได้เลย
คุณก็ไม่จำเป็นต้องมีความรู้ในการ CODE อะไรมากมาย เพียงแค่มีอัลกอริทึมก็พร้อมใช้งานเจ้า UI FLOW นี้แล้ว
แต่หน้าตาของมันจะ Dark หน่อยนะ ซึ่งอธิบายหน้าต่างได้จากรูปด้านล่าง
โดย UI FLOW ถูกพัฒนาและออกแบบโดยทีม dev ของ M5 เลยทำให้มันได้รับการสนับสนุนและอัพเดทอยู่เรื่อยๆ (http://flow.m5stack.com/)
ทำไมต้อง UI FLOW กับ M5 ?
ข้อดีแบบเห็นได้ชัดเลยคือ
“คุณไม่ต้องมีความรู้ด้าน Hard ware มากก็ต่อวงจรให้ M5 ได้”
เพราะตัวของ M5 ถ้าพอร์ตไม่พอ ก็ต่อ stack เพิ่ม แค่เอามาประกบกัน ส่วนเซ็นเซอร์ต่างๆเขาก็มีพอร์ตมีให้เสียบแบบสำเร็จรูปแล้วไม่ต้องต่ออะไรเพิ่มแล้ว
และอีกข้อคือ
“คุณไม่ต้องรู้คำสั่งมากมายเหมือนที่เขียนบน Arduino แค่เปิด M5 ต่อเน็ตแล้วเปิด UI FLOW คุณก็พร้อมใช้งาน M5 แบบไม่เขียนโค้ดเลยสักตัวก็ยังได้”
แค่ลากบล็อกวางบนหน้าจอ M5 ของคุณก็จะทำตามคำสั่งของบล็อกที่คุณวางไว้
ก่อนเริ่มต้นกัน
จะแบ่งออกเป็น 2 ส่วนก็คือ ส่วนของบอร์ด และ ส่วนของ UI FLOW เพราะค่อนข้างจะยุ่งยากนิดหนึ่ง และจะยุ่งยากมากขึ้นถ้าทำหลายๆคนในที่เดียวกัน
ซึ่งหลังจากนี้จะเป็นการอ้างอิงและประสบการณ์จากการเป็นผู้ช่วยสอนที่งาน Maker Faire Bangkok 2019 ที่ผ่านมา และต้องขอขอบคุณ ผศ.สุรพนธ์ ตุ้มนาค สำหรับประสบการณ์ครั้งนี้และบทความที่ยกมาอ้างอิงครับ
เริ่ม !
ให้ทำการเข้าไปที่เว็บไซต์ https://www.m5stack.com/ และทำการดาวโหลดซอฟต์แวร์ก่อน
ซึ่งที่เราต้องการคือ M5Burner ให้เลือก OS ตามต้องการ
เมื่อโหลดเสร็จให้แตกไฟล์ออกมาแล้วเสียบ M5 เข้ากับคอมของเราและรัน M5Burner.exe
จะมีหน้าต่างเด้งขึ้นมาให้เราเลือกพอร์ตและ Baud ของเรา และส่วน Firmware ให้เลือก M5Flow เวอร์ชั่นที่ใหม่ที่สุด
จากนั้นกด Burn แล้วก็รอ…..
โดยจะแสดงข้อความเมื่อเสร็จดังรูปข้างล่าง
ให้กดปุ่มรีเซ้ต 1 ครั้ง (ปุ่มข้างๆตัว M5) ก็จะได้หน้าตาแบบนี้ออกมา และยังมี Tutorial สอนเราใช้งานอีกด้วย (น่ารักสุดๆ 555)
ขั้นตอนต่อไปให้เราพยายามกลับมาหน้าแรกให้ได้ (กดรีเซ้ต 1 ครั้ง) และกด SETUP
จากนั้นให้เรากด Select เพื่อจะตั้งค่า Wifi ให้ M5 ของเราเกาะนั้นเอง
โดยมันจะเปลี่ยนให้ตัวเองกลายเป็น Access point โดยให้เราเชื่อมต่อกับ Wifi ที่มีชื่อเหมือนที่ปรากฏบนหน้าจอนั้นเอง
ทีนี้เมื่อเรานำอุปกรณ์อะไรก็ได้ไปเชื่อมต่อกับ Wifi ที่ M5 ปล่อยหน้าตาก็เจ้า M5 ก็จะเปลี่ยนไป โดยให้อุปกรณ์ที่เชื่อม Wifi ของเราเข้าไปที 192.168.4.1 (รูปที่ 1) จากนั้นให้เลือก Wifi ที่ต้องการเชื่อมต่อ และกรอกรหัสผ่าน (รูปที่ 2 )จากนั้นกด Configure หากเชื่อมต่อสำเร็จ ก็จะขึ้นเหมือน รูปที่ 3
ข้อควรระวัง
หากเปิดเวิร์คชอปสอนแนะนำให้เปิด Access point ทีละคน ไม่ต้องรีบ เพราะตัว M5 เหมือนจะแย่งกันเชื่อมต่อ Wifi หากหลายๆคนตั้งค่า Wifi พร้อมๆกัน
ขั้นต่อไป ให้เรากลับไปที่หน้าเลือก Wifi บนบอร์ด M5 (รีเซ้ต 1 ครั้งจากนั้นรีบกด Setup) ก็จะพบว่ามี Wifi ที่เราพึ่งตั้งค่าไปเพิ่มเข้ามา ให้เราเลือก Wifi ที่เราพึ่งเพิ่มเข้าไป และกด select เพื่อเริ่มต้นเชื่อมต่อ
เมื่อเชื่อมต่อสำเร็จตัว M5 ของเราก็จะให้ API KEY ออกมาเพื่อเอาไว้เชื่อมต่อกับ UI FLOW นั้นเอง
ในส่วนของ UI FLOW ให้เราไปที่ http://flow.m5stack.com/ ก็จะขึ้นหน้าต่างประมาณนี้
จะมีอยู่ 2 ส่วนที่ควรสนใจจากรูปข้างบน
- มุมบนขวา จะเป็นส่วนของการตั้งค่า/การอัพโหลดโค้ด และการสลับหน้าต่างจากหน้าบล็อกเป็นโค้ด หรือจากหน้าบล็อกเป็น Simulator
2. ส่วนของบล็อก คล้ายๆกับ maker code ของ micro:bit คือลากวางบนหน้าจอ ต่อจากบล็อก setup สีเหลืองนั้นเอง
จากนั้นให้เราสังเกตุมุมล่างซ้ายจะมี Api key ให้เรากรอก ให้เราคลิกเข้าไป
จะปรากฏหน้าต่างขึ้นมาให้เราใส่ API KEY ที่ปรากฏขึ้นหน้าจอของ M5 ส่วน Device ให้เลือกเป็น Core จากนั้นกด ok
มุมซ้ายล่างก็จะเปลี่ยนเป็น connected นั้นคือพร้อมใช้งานแล้วนั้นเอง
ลองเล่น
ลองเล่นกับการแสดงผลเบื้องต้นก่อน ถ้าใครซ่าส์ไม่อ่านบทความส่วนนี้แล้วลองเล่นกับการแสดงผล อาจจะมึนๆงงๆ ว่ามันแสดงผลยังไงเพราะ UI FLOW จะไม่สร้างหน้าจอการแสดงผลให้เรา หากเรายังไม่สร้างในหน้า Simulator ขึ้นมาก่อน (ไงละ)
วิธีสร้างคือไปหน้า Simulator โดยคลิกกล่องสี่เหลี่ยมที่มุมขวาบนนั้นเอง
ก็จะปรากฏ M5 บนหน้าจอโล่งๆ (เวอร์ชั่นก่อนหน้า M5 จะอยู่หน้าเดียวกันหมด แต่อันใหม่เขาแยกหน้าแล้ว ไม่รู้ทำไม…..)
ให้เราลองลาก Label ไว้บนจอ
ทีนี้ลองคลิกที่ Text บนจอดู ก็จะพบว่าเราสามารถตั้งค่าตัวอักษรบนนี้ได้เลย
หรือจะคลิกบนหน้าจอโล่งๆ ก็จะสามารถตั้งค่าสีพื้นหลังได้อีก !
ทีนี้กลับมาหน้าบล็อกอีกครั้งแล้วลองคลิกที่ UI จะพบกับ Label ที่เราพึ่งสร้างขึ้นมา
ให้เราลองลากบล็อกแสดงผลมาไว้บนหน้าจอ
จากนั้นให้กดรันเพื่อให้บล็อกที่เราลากมาไปแสดงผลบนจอ M5 ของเรานั้นเอง
ก็จะปรากฏข้อความที่เราเขียนในบล็อกไปแสดงบนหน้าจอนั้นเอง
ทีนี้ถ้าเราอยากจะรันโค้ดอีกรอบละ จะทำยังไง ?
ก็แค่กดรันอีกรอบ โค้ดก็จะไปรันบน M5 เลยไม่ต้องเชื่อมต่อใหม่อีกครั้ง
ทีนี้ถ้าเรากดรีสตาร์ท M5 โค้ดก็จะหายไปเลย !! เพราะมันแค่รันไงละ มันยังไม่ใช่การเบิร์นโค้ดลงไปในบอร์ด หากเราต้องการจะให้โค้ดนั้นอยู่กับบอร์ดไปเรื่อยๆ โดยไม่หายไปก็จะต้องทำการดาวโหลด โดยคลิกที่ปุ่มรายการ (มุมบนขวา) -> Download เพียงเท่านี้โค้ดก็จะอยู่บนตัวบอร์ดไปถาวรเลย (ถ้าเราไม่ลบมันนะ)
แต่ว่า
ถ้าเราลองกลับมาใช้ UI FLOW อีกรอบจะพบว่าอุปกรณ์ของเรามัน DISCONNECTED ไปแล้ว :(
เพราะอุปกรณ์ของเรามันตัดการเชื่อมต่อกับ UI FLOW ไปแล้ว :(
วิธีแก้คือ ให้กดรีเซ้ต 1 ครั้ง แล้วกด setup จากนั้นเลือก Wifi ใหม่อีกครั้ง เหมือนครั้งแรกที่เราทำนั้นเอง (ไม่ง่ายไม่ยาก)
และสุดท้าย สร้างบล็อกเอง
เป็นอีกหนึ่งเหตุผลที่ว่าทำไม UI FLOW น่าใช้นั้นคือ เราสามารถสร้างบล็อกขึ้นมาด้วยตัวเอง
โดยจะเป็น JS นั้นเอง (เหมือนตอนเราสร้างของ makecode หรือ kidbright)
บทสรุปส่งท้าย
หากใครกำลังมองหาอุปกรณ์ของเล่นอันใหม่ สำหรับสาย IoT หรือผู้ที่กำลังสนใจด้านนี้ก็อยากให้ลองได้มาสัมผัสเจ้า M5STACK นี้ดูก่อน เพราะตัวมันเองก็มีครบเครื่องแล้ว แถมผู้พัฒนา UI FLOW ก็คือเจ้าของ M5 ก็น่าจะไปกันได้ยาวๆ แถมยังไม่ต้องเขียนโค้ดเป็นก็สามารถที่จะใช้งานได้อีกด้วย ยังไงก็ขอฝาก M5STACK WITH UI FLOW บทความนี้ไว้ในดวงใจด้วย สำหรับวันนี้
Medium : https://medium.com/@pingloaf
Linkedin : https://www.linkedin.com/in/peerat-limkonchotiwat/
