M5stickC Plusで取得した振動データで予兆検知AIを作る#1 環境構築編

本記事にお立ち寄りいただきありがとうございます。
「M5stickC Plusで取得した振動データで予兆検知AIを作る」まずは環境構築編です。
今回はM5stickC Plusへスケッチが書き込めるようになるまでの環境構築について、
手順と自分が詰まった点を書いていこうと思います。
<br>
自分の環境について
使用機器 : M5stickC Plus
OS : Windows
IDE : Arduino IDE

# Arduino IDEの環境構築
インストーラは下記になります。
https://www.arduino.cc/en/software
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/99c1c55f-f6a4-826b-54d1-f0a84c4d2402.png)
<br>
寄付を行うかそのままダウンロードするかを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/c72e5918-5743-7c41-f591-09bdb7b3a207.png)
<br>
インストーラを起動しインストール後ソフトを立ち上げ、ファイル→基本設定より言語を日本語に変更します。また、追加のボードマネージャーのURLに下記を入力します。
https://dl.espressif.com/dl/package_esp32_index.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/cd92d131-1ce4-6090-1f53-da65a32a9f9c.png)
<br>
続いて、ツール→ボード→ボードマネージャーより
esp32 by Espressifをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/4671ec84-b4da-83d3-2317-8888d06c1b14.png)
同じくツール→ライブラリ管理より
M5StickCPlusをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/f8f0702f-f589-1ef9-18ad-9e08fd26f1a9.png)
<br>
M5StickCPlusをUSBでPCに接続後、ボードとポートの設定を確認します。
ポートについては環境によりますが、
デバイスマネージャーからどのポートを使用しているか確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622407/8f1b135f-b1ea-a808-07e1-0fa136fc19a0.png)
<br>
ここまで終えれば、M5StickCPlusにスケッチを書き込めるようになります。
試しに振動を可視化する下記のスケッチを書き込みます。
```C++:
#include <M5StickCPlus.h>

#define GRAPH_HEIGHT 80
#define GRAPH_WIDTH 160
#define SAMPLE_RATE 10  // サンプリングレート (ミリ秒単位)
#define THRESHOLD 5.0    // しきい値

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.setTextSize(1);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.println("Vibration Data");
}

void loop() {
  // 加速度データを取得
  float accX, accY, accZ;
  M5.IMU.getAccelData(&accX, &accY, &accZ);

  // 加速度の大きさを計算
  float magnitude = sqrt(accX * accX + accY * accY + accZ * accZ);

  // グラフに描画
  drawGraph(magnitude);

  // しきい値を超えたらブザーを鳴らす
  if (magnitude > THRESHOLD) {
    M5.Beep.beep();
  } else {
    M5.Beep.mute(); // しきい値以下の場合はブザーを止める
  }

  // サンプリングレートに合わせて待機
  delay(SAMPLE_RATE);
}

void drawGraph(float value) {
  static int16_t lastX = 0;
  static int16_t lastY = GRAPH_HEIGHT;
  int16_t x = lastX + 1;
  int16_t y = GRAPH_HEIGHT - (value * 10); // 値に基づいて高さを調整

  // xが画面幅を超えたらリセット
  if (x >= GRAPH_WIDTH) {
    x = 0;
    lastX = 0;
    // リセット時にグラフ全体を消去
    M5.Lcd.fillRect(0, 20, GRAPH_WIDTH, GRAPH_HEIGHT, TFT_BLACK); // グラフを消去
    // しきい値のリファレンスラインを再描画
    int16_t threshold_y = GRAPH_HEIGHT - (THRESHOLD * 10); // しきい値に基づいて高さを調整
    M5.Lcd.drawLine(0, threshold_y, GRAPH_WIDTH, threshold_y, TFT_RED); // リファレンスラインを描画
  }

  // 線を描画
  M5.Lcd.drawLine(lastX, lastY, x, y, TFT_GREEN);

  lastX = x;
  lastY = y;
}
```
:::note warn
警告
書き込み時にM5StickCPlusは書き込みモードになりますが、稀にうまくモード切替が行えない場合があります。
エラー文：「ESP32: Wrong boot mode detected (0x13)! The chip needs to be in download mode. 」
この場合はM5StickCPlusのGNDとG0をジャンパー線で繋ぐと強制的に書き込みモードで起動できます。
:::
<br>
実際に動かしている動画です。
このスケッチでは閾値以上の振動を検知するとブザー音が鳴るように設定してあります。
<iframe width="460" height="817" src="https://www.youtube.com/embed/Zw2jhGjjAD8" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
次回は取得したデータをMQTTを用いてPC上で確認し可視化するところまでを行いたいと思います。