M5Stack の M5StickS3 でシリアル通信による読み書き（それぞれを別に実装）： VS Code ＋ PlatformIO ＋ M5Unified での開発

はじめに

以下の記事を書いた時にもやっていた、M5StickS3 の開発を「VS Code ＋ PlatformIO ＋ M5Unified」で行う話です。

●M5Stack の M5StickS3 を公式情報をもとに試す： VS Code ＋ PlatformIO ＋ M5Unified での開発 - Qiita
　https://qiita.com/youtoy/items/815c10243d912763b7f6

上記の記事では、「ボタン押下で画面の色を変える」という内容と「目・口のような表示を PC操作で変化させる」ということをやっていました。

今回の内容

今回は、M5StickS3 を使ったシリアル通信での書き込み・読み取りを行います。それらの内容を、それぞれシンプルに実装して試します。

シリアル通信での書き込みを試す

まずは、シリアル通信での書き込みを試します。

コードの内容

実装する処理は、以下のとおりです。

#include <M5Unified.h>

void showText(const char* text) {
  M5.Display.fillScreen(TFT_CYAN);
  M5.Display.setCursor(10, 30);
  M5.Display.setTextColor(TFT_BLACK, TFT_CYAN);
  M5.Display.setTextSize(3);
  M5.Display.println(text);
}

void setup() {
  M5.begin();
  Serial.begin(115200);

  M5.Display.fillScreen(TFT_CYAN);
}

void loop() {
  M5.update();

  if (M5.BtnA.wasPressed()) {
    Serial.println("test");
    showText("test");
  }

  if (M5.BtnB.wasPressed()) {
    Serial.println("123");
    showText("123");
  }
}

実装した処理は以下のとおりです。

• ボタンを押したときに、シリアル通信で文字列を送り、送った文字列を画面上に表示する
  • ボタンA を押した時には文字列「test」を送る
  • ボタンB を押した時には文字列「123」を送る
• デバイスを起動した時に、画面の色を水色にする

iniファイルの内容は、上で掲載していた過去記事の内容を用います。

シリアル通信の受信側の準備

あとは PC による受信を試します。具体的には、受信側として以下の記事に書いていた Webサイト（Web Serial API を扱えるサイト）を使います。

●Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用） - Qiita
　https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33

具体的に用いるサイトは、以下です。

●googlechromelabs.github.io/serial-terminal/
　https://googlechromelabs.github.io/serial-terminal/

受信結果

画面左上の「Connect」ボタンを押し、PC と M5StickS3 との接続を行います。その後、M5StickS3 の Aボタン・Bボタンをそれぞれ何回か押してみます。

その後の状態は、以下の通りです。

問題なく文字列を受信できていることを確認できました。

シリアル通信での読み取りを試す

今度は、シリアル通信での読み取りを試します。

コードの内容： シリアル通信での読み取り

シリアル通信での通信内容の読み取りを行うためのコードは、以下のように実装しました。

#include <M5Unified.h>

String serialBuffer;
unsigned long lastSerialReadAt = 0;

void showText(const String& text) {
  M5.Display.fillScreen(TFT_CYAN);
  M5.Display.setCursor(10, 30);
  M5.Display.setTextColor(TFT_BLACK, TFT_CYAN);
  M5.Display.setTextSize(3);
  M5.Display.println(text);
}

void handleSerialInput() {
  while (Serial.available() > 0) {
    char c = Serial.read();
    lastSerialReadAt = millis();

    if (c == '\n' || c == '\r') {
      if (serialBuffer.length() > 0) {
        showText(serialBuffer);
        serialBuffer = "";
      }
      continue;
    }

    serialBuffer += c;
  }

  if (serialBuffer.length() > 0 && millis() - lastSerialReadAt > 50) {
    showText(serialBuffer);
    serialBuffer = "";
  }
}

void setup() {
  M5.begin();
  Serial.begin(115200);

  M5.Display.fillScreen(TFT_CYAN);
}

void loop() {
  M5.update();
  handleSerialInput();
}

先ほどの実装と同じように、起動時の画面の色を水色にします。その後は、常にシリアル通信を待ち受けます。

文字列を受信した際には、水色背景のまま画面に受信した文字列の内容を表示します。その際、改行ありの送信でも、改行なしの送信でも表示されるようにしています。

シリアル通信の送信側の準備

シリアル通信の送信側を準備します。用いるのは、先ほどのサイトです。

　
「Flush on enter」を有効にし、画面上の黒い部分にフォーカスをあてて文字を入力します。

シリアル通信の読み取りの結果

そして、先ほどと同様に PC と M5StickS3 との接続を行います。そして「aabbcc」という文字列を送ってみました。

そうすると、M5StickS3 の画面上に以下のように文字列が表示された状態になるを確認できました。