M5Stack Basic整合式ESP32開發板，快速上手！

之前傑森已經介紹過M5StickC，大家反應還不錯，所以再加碼，介紹系出同門、更為強大的版本：M5Stack Basic。M5Stack Basic採用推疊式的設計，原廠提供許多可擴充的模組，只要疊在一起就立刻可以使用該模組，不需要接一堆線，不管是用在學習或是實務上，都很有吸引力。

另外它還擁有2吋的全彩TFT LCD，內建Micro SD卡槽、3個可自訂義的按鍵、Grove接頭，基本的底座還附有鋰電池，再加上ESP32原本的WIFI和藍牙，算是包山包海了！

左側紅色按鍵為電源鍵，按一下是Reset，USB線拔掉後，連按兩下為關閉電源。

購買M5Stack Basic：
https://www.jmaker.com.tw/products/m5stack-basic

M5Stack Basic特色：

5V 直流電源
USB Type-C
基於 ESP32 開發
揚聲器，按鍵x3，LCD屏幕（320 * 240），電源/復位按鍵x1
2.4G天線：Proant 440
TF卡插槽（最大可拓展16GB）
電池總線母座和110 mAh鋰電池
可拓展的引腳與接口
Grove 接口
M-Bus總線母座 & 引腳
開發平台 UIFlow, MicroPython, Arduino
產品尺寸：58.2mm x 54.2mm x 17.9mm
產品重量：47.2g

M5Stick Basic是一款整合式的ESP32開發板，所以要先幫Arduino IDE設定好ESP32的環境，可以參考傑森之前寫的教學：
如何在Arduino IDE中，新增ESP32系列開發板

接著再安裝M5Stack函式庫。

開發板請選擇「M5Stack-Core-ESP32」。

和M5StickC一樣，M5Stack的官方函式庫寫得非常好，所以用起來真的很簡單！傑森一樣是測試一下控制LCD，顯示文字和圖檔。然後再接上DHT11，把讀到的資料顯示到LCD上。以下是我們的範例程式：

#include <M5Stack.h>        
#include "DHT.h"  //DHT函式庫
#define DHTPIN G26  //DHT資料接腳
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  M5.begin();               // 初始化M5Stack
  M5.Power.begin();         // 如果要用底板的電池，加這一行
  dht.begin();  //初始化DHT
  
  M5.Lcd.fillScreen(TFT_BLACK); // 螢幕全黑
  M5.Lcd.setBrightness(200);    // 螢幕亮度
  M5.Lcd.drawJpgFile(SD, "/img1.jpg");  //從SD卡上讀取img1並顯示
  delay(1000);
  //M5.Lcd.fillScreen(BLACK);
  
  //顯示圖片，如果沒有清除畫面，文字就會壓在之前的圖片上
  M5.Lcd.setFreeFont(&FreeSerifBold24pt7b);  //設定字型，請參考Adafruit GFX函式庫的資料
                                             //https://learn.adafruit.com/adafruit-gfx-graphics-library/using-fonts
  M5.Lcd.setCursor(20, 60);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(1);
  M5.Lcd.printf("JMaker");
  M5.Lcd.setFreeFont(&FreeSerifBold12pt7b);
  M5.Lcd.setCursor(22, 85);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(1);
  M5.Lcd.printf("jmaker.com.tw");
  delay(1500);
  //M5.Lcd.fillScreen(TFT_BLACK);

  //顯示DHT的溫濕度到LCD上
  M5.Lcd.setFreeFont(&FreeSerifBold18pt7b);
  float h = dht.readHumidity();   //取得濕度
  float t = dht.readTemperature();  //取得溫度C
  M5.Lcd.drawJpgFile(SD, "/img1.jpg"); //從SD卡上讀取img1並顯示
  M5.Lcd.setCursor(20, 50);
  M5.Lcd.printf("RH    : %g %%", h);
  M5.Lcd.setCursor(20, 90);
  M5.Lcd.printf("Temp: %g *C", t);
}

void loop() {
  M5.update();
  //當使用者按下並放開ButtonA，顯示img2圖片；按下ButtonB，蜂鳴器逼一聲
  if(M5.BtnA.wasReleased()){
    M5.Lcd.drawJpgFile(SD, "/img2.jpg"); //從SD卡上讀取img2並顯示
  }
  if(M5.BtnB.wasPressed()){
    M5.Speaker.beep(); //逼一聲
  }
}

有關DHT11的使用，請參考傑森的另一篇文章：

DHT11入門+結合1602 LCD，Arduino簡易溫濕度計

既然M5Stack有內建Micro SD卡槽，而且使用起來超簡單，那我們就要充份利用它，先存2張JPG圖檔到SD中，都是320x240的解析度。

顯示圖檔主要是以下這行：

M5.Lcd.drawJpgFile(SD, "/img1.jpg");

實在是太簡單了，對吧！

至於文字的顯示，M5StickC已經整合得很好，而且還能使用Adafruit GFX函式庫所提供的字型，蠻方便的。

https://learn.adafruit.com/adafruit-gfx-graphics-library/using-fonts

以下是主要顯示文字的語法，很容易懂。

M5.Lcd.setFreeFont(&FreeSerifBold24pt7b); 
M5.Lcd.setCursor(0, 40);
M5.Lcd.setTextColor(WHITE);
M5.Lcd.setTextSize(1);
M5.Lcd.printf("JMaker");

至於按鍵的使用，由左至右為ButtonA、ButtonB、ButtonC，我們讓ButtonA按下並放開，可以改變畫面的圖檔；按下ButtonB，蜂鳴器逼一聲。

if(M5.BtnA.wasReleased()){
  M5.Lcd.drawJpgFile(SD, "/img2.jpg"); //從SD卡上讀取img2並顯示
}
if(M5.BtnB.wasPressed()){
  M5.Speaker.beep(); //逼一聲
}

到這裡大家對於M5Stack的使用已經有了基本的認識了，接下來大家可以參考M5Stack函式庫提供的範例，相信一定可以很快就上手的哦！

購買M5Stack Basic：
https://www.jmaker.com.tw/products/m5stack-basic