M5stack basicで気温、湿度、気圧を取得してみた。

# 初めに
普段ラズパイを使っています。M5stackで同じものを作り、使いやすさを比較してみました。

# 環境
OS: windows 10.0
Arduino IDE：2.0.0
M5stack: basic V2.6
M5Stack用温湿度気圧センサユニット Ver.3（ENV Ⅲ）[link](https://www.switch-science.com/products/7254)

# 初期設定
下記サイトを参考に初期設定を行いました。M5stack basicは、coreを使用しているので、ボードは、```ESP32```、ライブラリは``M5Stack```をインストールし、設定をしています。
[M5StackシリーズのためのArduino IDEのインストール方法と初期設定、使い方紹介](https://logikara.blog/arduino_ide/)
[Arduino IDEの設定 (M5Stackシリーズ)](https://qiita.com/penguinprogrammer/items/774d4b719464e41cdcf3)

# プログラム
起動時に画像ファイルを表示後、気温、湿度、気圧を表示するようにしました。文字は、自分の好みの好みの色を設定し、最初に出力するようにしています。真ん中のボタンを押すと、文字は、白色に切り替わります。右のボタンでは、画面を青色にするようにしました。今後、複数のセンサを用い、ボタンを切り替えることで、各センサーの情報を出力できるようにしたいです。

```test.cc
#include <M5Stack.h>  // ----A
#include "M5_ENV.h"

TFT_eSprite sprite = TFT_eSprite(&M5.Lcd);

extern uint8_t m5_logo[];

SHT3X sht30;
QMP6988 qmp6988;

float tmp      = 0.0;
float hum      = 0.0;
float pressure = 0.0;
int   meas_btm = 1; 

void setup() {
    M5.begin();
    M5.Lcd.setBrightness(10);
    M5.Lcd.setRotation(1); 
    M5.Lcd.setTextSize(2);
    M5.Lcd.fillScreen(BLACK);
    // Output logo on the display.
    M5.Lcd.drawJpg(m5_logo,6374,60, 20);
    M5.update();// update button state  
    delay(4 * 1000);

    Wire.begin();               //  // Wire init, adding the I2C bus.
    qmp6988.init();

    sprite.setColorDepth(8);
    sprite.setTextSize(2);
    sprite.fillScreen(BLACK);
    sprite.createSprite(M5.lcd.width(), M5.lcd.height());
}

void loop() {
    M5.update();// update button state
    sprite.pushSprite( 0, 0);

    if(M5.BtnA.wasPressed() == 1 ){
      meas_btm   = 1;
    }

    if(M5.BtnB.wasPressed() == 1 ){
      meas_btm   = 2;
    }

    if(M5.BtnC.wasPressed() == 1 ){
      meas_btm   = 0;
      sprite.fillScreen(BLUE);
    }

    pressure = qmp6988.calcPressure()* 0.01;
    if (sht30.get() == 0) {  // Obtain the data of shT30.  
      tmp = sht30.cTemp;   // Store the temperature obtained from shT30.
      hum = sht30.humidity;  // Store the humidity obtained from the SHT30.
    } else {
        tmp = 0, hum = 0;
    }

    if(meas_btm == 1){
      sprite.fillScreen(BLACK);     
      // print for temperture
      sprite.setTextColor(WHITE);
      sprite.setCursor(10, 10, 1); 
      sprite.printf("temperature");
      sprite.setTextColor(ORANGE); 
      sprite.setCursor(80, 30, 4);
      sprite.printf("%4.1f", tmp);
      sprite.setTextColor(ORANGE);     
      sprite.setCursor(240, 40, 2);  
      sprite.printf("deg C");
      // print for humidity
      sprite.setTextColor(WHITE);
      sprite.setCursor(10, 80, 1); 
      sprite.printf("humidity");
      sprite.setTextColor(BLUE);
      sprite.setCursor(80, 110, 4);     
      sprite.printf("%4.1f", hum);
      sprite.setTextColor(BLUE);
      sprite.setCursor(240, 120, 2);  
      sprite.printf("%%");

      // print for pressure
      sprite.setTextColor(WHITE);
      sprite.setCursor(10, 160, 2);
      sprite.printf("pressure");
      sprite.setTextColor(TFT_MAROON);       
      sprite.setCursor(80, 190, 4);     
      sprite.printf("%4.1f", pressure);
      sprite.setTextColor(TFT_MAROON); 
      sprite.setCursor(240, 200, 2);  
      sprite.printf("hPa");
    }

    if(meas_btm == 2){
      sprite.fillScreen(BLACK);     
      // print for temperture
      sprite.setTextColor(WHITE);
      sprite.setCursor(10, 10, 1); 
      sprite.printf("temperture");
      sprite.setCursor(80, 30, 4);
      sprite.printf("%4.1f", tmp);
      sprite.setCursor(240, 40, 2);  
      sprite.printf("deg");
      
      // print for humidity
      sprite.setCursor(10, 80, 1); 
      sprite.printf("humidity");
      sprite.setCursor(80, 110, 4);     
      sprite.printf("%4.1f", hum);
      sprite.setCursor(240, 120, 2);  
      sprite.printf("%%");

      // print for pressure
      sprite.setCursor(10, 160, 2);
      sprite.printf("pressure");
      sprite.setCursor(80, 190, 4);     
      sprite.printf("%4.1f", pressure);
      sprite.setCursor(240, 200, 2);  
      sprite.printf("hPa");
    }
      delay(2 * 1000);
}
```

## 画像形式の変換
M5stackは、C++で動作するため、jpegファイルからディスプレイに表示するための形式に変更する必要があります。下記リンク先のスクリプトを使って変換をしました。

[M5StackのLCDで画像を表示させる](https://blog.hikaru.run/2021/12/31/display-images-on-m5stack.html)

変換したファイルは、実行ファイルと同じディレクトリに配置します。```extern uint8_t```で変換した画像ファイルが読み込まれます。

### ラズパイとの比較
私は、[ラズパイでも、気温、湿度、気圧を取得できるプログラム])https://qiita.com/yutaka_m/items/ccd65146eda6eb95668b)を作っています。
自分なりに使った感想を比較すると、下記のようになります。学びやすさとしては、ラズパイは、Linuxの環境に慣れるところから始まる反面、M5stackは、Arduino IDEのみで完結できるので、使いやすい印象です。また、センサについてもケーブルに接続すればよいだけなので、非常に便利です。
| 項目 | ラズパイ | M5stack |
| :-- | :-: | :-: |
|学びやすさ|△|〇|
|センサーとの接続|△|〇|

### 参考リンク
今回のプログラムを作成するにあたって、下記リンクを参考にさせていただきました。ありがとうございました。
[LCD 画面表示](https://github.com/m5stack/m5-docs/blob/master/docs/ja/api/lcd.md#lcd-%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A4%BA)
[M5Stack 本体ボタンの使い方、ボタン操作関数一覧](https://logikara.blog/prog_btn/)