M5Stack EP.1 – มาเริ่มใช้งาน LCD, Button และ Speaker กัน

 Isaranu,  18.9.2017 , 

ทุกวันนี้บอร์ด Internet of Thing ออกมาใหม่แทบทุกวันเลย เป็นความลำบากของเหล่า maker ที่ต้องหาเงินไปซื้อมาเสียบไฟ, ทำไฟกระพริบ หรือทำ hello world แล้วก็หย่อนลงโหลดองกันตามเคย 555.

ผมก็เป็นหนึ่งใน maker ที่สะสมบอร์ด IoT ครับ แต่ช่วงหลังๆมานี้ เริ่มมีความคิดที่ว่า จะทำอย่างไรให้บอร์ดในโหลดอง มันออกมาทำประโยชน์ให้สังคมบ้างนะ เอาเป็นว่าหลังจากนี้จะลองหากิจกรรมดีๆทำดูครับ

เข้าเรื่องเลย, วันนี้ได้บอร์ดใหม่มาอีกแล้วครับ แต่คราวนี้พิเศษหน่อย ตรงที่มันเป็นแบบ hardware stack. มันคล้ายๆกับ Shield board ต่างๆที่เราไปซื้อมาประกบกันล่ะครับ แต่อันนี้จะดีกว่า ตรงที่มันมาเป็น Set box เลย.
อุปกรณ์ทีจะนำมา review กันวันนี้คือ “M5Stack”.

Unboxing

“M5Stack” ย่อมาจาก “Module 5 cm Stack” ที่มีขนาดกล่องอยู่ที่ 5 x 5 เซนติเมตรนั่นเอง. เจ้า M5Stack นี้รันด้วย ESP32 WiFi chip จาก Espressif ที่กำลังฮิตกันในช่วงนี้ แต่ลักษณะที่เด่นๆของ M5Stack นี้เลยก็คือ TFT LCD ขนาด 2x2 cm ความละเอียดที่ 320 x 240 pixel, Interface button 3 ปุ่ม และมีลำโพงในตัวด้วย.
ส่วนประกอบอื่นๆ ก็ชมจาก VDO unboxing – M5Stack ด้านล่างได้เลยจ้า





Environment ที่ต้องใช้

สำหรับ EP.1 นี้, ผมจะมาอธิบายเรื่องการ setup M5Stack และ Environment ต่างๆ เพื่อเริ่มใช้งานครับ
- Arduino IDE version ล่าสุด, ในเว็บของ M5Stack เคลมว่า รองรับการใช้งาน Arduino IDE ตั้งแต่ 1.8.1 ขึ้นไปจ้า


- M5Stack.
- Computer, บทความนี้ผมใช้ MacBook ครับ

มาเริ่มเลย

1. เปิดโปรแกรม Arduino IDE, เข้าไปที่ Preferences > Additional Board Manager URLs. จากนั้นก็เพิ่ม url ของ M5Stack เข้าไปเลยจ้า. กดตรงปุ่มข้างขวา.

urls ที่เพิ่มเข้าไป 'http://www.M5stack.com/download/package_m5stack_index.json', copy ไปได้เลยจ้า.








2. ต่อไปเข้าไปที่ Tool > Boards > Board Manager. พิมพ์ M5Stack-ESP32-core เมื่อเจอแล้ว ก็ Install ได้เลยจ้า.





3. Restart Arduino IDE, กลับเข้ามาดูที่ Tool > Boards. ก็จะพบ M5Stack แล้วครับ.

ใน Get Started manual ที่ให้มาบอกว่า เท่านี้ก็จบแล้ว แต่ผมลองดูแล้วว่า แล้วไม่ต้องลง M5Stack.h หรอ ? ก็เลยลองเขียน code Hello world ตามใน manual ดู ปรากฏว่า verify code ไม่ผ่านคร้าบบ 555 ก็ว่าอยู่ ว่ามันไม่มีบอกให้ install Lib. ของ M5Stack แล้วมันจะผ่านได้ยังไง.

เอาล่ะ, ที่นี้มาควานหาใน Arduino Library manager กันดีกว่า... หาแล้ว ปรากฏว่า ไม่มีครับ. คราวนี้เลยกลับเข้าไปดูใน github ของ M5Stack ถึงได้เข้าใจ ว่าจะต้องดาวน์โหลด Lib. มา แล้วมา Save ลงใน Arduino Lib. Folder เอง.





จริงๆแล้วคิดว่าหลังจากนี้น่าจะ Search ใน Arduino Lib. เจอนะครับ ตอนนี้ทาง M5Stack อาจจะยังไม่ได้ release อย่างเป็นทางการ.

สรุปคือ ไปดาวน์โหลด M5Stack Lib. มาจาก github:M5Stack แล้วก็เอามาเก็บไว้ใน Arduino > libraries ครับ

กลับมาที่ Hello World code กันดีกว่า,

#include <M5Stack.h>

// the setup routine runs once when M5Stack starts up
void setup(){

  // Initialize the M5Stack object
  m5.begin();

  // LCD display
  m5.Lcd.printf("hello world");
}

// the loop routine runs over and over again forever
void loop() {

}

เสร็จแล้วก็ upload ลงใน M5Stack ได้เลยจ้า
ผลที่ได้จะเป็นตามนี้ครับ

Code ข้างบน ผมไม่อธิบายนะครับ แต่จะอธิบายคำสั่งการใช้งาน Button และ Speaker ใน code ด้านล่างนี้แทน.
ดูตัวอย่าง code กันก่อนครับ.

#include <M5Stack.h>

// the setup routine runs once when M5Stack starts up
void setup(){

  // initialize the M5Stack object
  M5.begin();

  // Lcd display
  M5.Lcd.printf("button test\r\n");

  // Set beep sound
  M5.Speaker.setBeep(500, 100); // freq:500Hz, duration 100ms.
}

// the loop routine runs over and over again forever
void loop() {

  if(M5.BtnA.wasPressed()) {
    M5.Lcd.printf("wasPressed A \r\n");
    Serial.printf("wasPressed A \r\n");
    M5.Speaker.tone(1000);
  }

  if(M5.BtnA.wasReleased()) {
    M5.Lcd.printf("wasReleased A \r\n");
    Serial.printf("wasReleased A \r\n");
    M5.Speaker.mute();
  }

  if(M5.BtnB.wasPressed()) {
    M5.Lcd.printf("wasPressed B \r\n");
    Serial.printf("wasPressed B \r\n");
    M5.Speaker.tone(1500);
  }

  if(M5.BtnB.wasReleased()) {
    M5.Lcd.printf("wasReleased B \r\n");
    Serial.printf("wasReleased B \r\n");
    M5.Speaker.mute();
  }

  if(M5.BtnC.wasPressed()) {
    M5.Lcd.printf("wasPressed C \r\n");
    Serial.printf("wasPressed C \r\n");
    M5.Speaker.beep();
  }

  if(M5.BtnC.wasReleased()) {
    M5.Lcd.printf("wasReleased C \r\n");
    Serial.printf("wasReleased C \r\n");
  }

  M5.update();
}


มาเริ่มกันที่ Button กันก่อน, จะเป็น event การที่ปุ่ม A, B และ C ถูกกดลงไปครับ (ปุ่ม A,B และ C เรียงลำดับจากซ้ายไปขวา)
M5.BtnA.wasPressed(); /*Event ปุ่ม A ถูกกด */
M5.BtnB.wasPressed(); /*Event ปุ่ม B ถูกกด */
M5.BtnC.wasPressed(); /*Event ปุ่ม C ถูกกด */

ส่วนด้านล่างนี้ ก็เป็น Event ที่ปล่อยมือจากปุ่มกดนะครับ
M5.BtnA.wasReleased(); /* Event ปล่อยปุ่ม A */
M5.BtnB.wasReleased(); /* Event ปล่อยปุ่ม B */
M5.BtnC.wasReleased(); /* Event ปล่อยปุ่ม C */

ต่อไปมาดู Speaker กันครับ การใช้งานทำได้ง่ายเลยทีเดียว โดยสั่ง beep ผ่านคำสั่งด้านล่างนี้ครับ
M5.Speaker.tone(int freq); /* สร้างเสียงที่ความถี่ freq, ซึ่งกรอกเป็นเลขความถี่ลงไปได้เลยครับ */
M5.Speaker.mute(); /* คำสั่งปิดเสียง */
M5.Speaker.setBeep(int freq, int time); /* คำสั่ง setting เสียงที่เราต้องการจะเล่น, โดยตั้งเป็นความถี่ และระยะเวลาที่ปล่อยเสียงได้ทันที */
M5.Speaker.beep(); /* ตั้งค่าด้วยคำสั่งด้านบนแล้ว ก็ใช้คำสั่งนี้เปล่งเสียงได้เลยครับ */


ผลที่ได้ก็จะเป็นตาม VDO ด้านล่างนี้ครับ


ลองเล่นกันดูนะครับ

EP. ถัดไป

สำหรับ EP.2 และถัดๆไป ผมจะมารีวิวการใช้งานการเชื่อมต่อ internet และรับ/ส่งค่าจาก IoTtweet. และถ้าพอมีเวลา จะเอาตัวอย่างการส่งข้อมูลขึ้น Azure IoT Hub มาฝากกันด้วยนะครับ

สำหรับ code ทั้งหมดที่อยู่ในบทความนี้ ผมเก็บไว้ที่ github:IoTtweet-M5Stack นะครับ เข้าไปดาวน์โหลดมาใช้งานกันได้เลยครับ

โดยความเห็นส่วนตัวแล้ว, M5stack ตัวนี้ น่าใช้งานเลยทีเดียว ขนาดเล็กกะทัดรัด ไม่ต้องมาต่อ shield hardware ต่างๆให้ยุ่งยาก แถมข้างใน library M5Stack.h มีคำสั่งให้ใช้งานได้เลย. แถมราคาน่าจะถูกกว่า ถ้าเทียบกับว่าจะต้องซื้อ hardware ทั้งหมดนี้มาต่อเอง.


Isaranu.