M5Stackをタイムラプスモニターにしました

はじめに

ワイヤレスタイムラプスカメラをXIAO ESP32-S3で作った(SDカード無し)で作ったカメラの画角を確認するのが結構面倒だったので、以前elchika様よりいただいたM5Stackをモニターにする事にしました。

仕様

やっている事はラズベリーパイからMQTT-pubで送られた画像データを　M5StackはMQTT-subでデータを受け取り画面表示しています。
　概念図

ポイント

ArduinoIDEで使うPubSubcluentの128バイト制限をclient.setBufferSize()を使い20kバイトに増やしています。
ラズベリーパイにMQTTをセットアップする方法はラズベリーパイにMQTTブローカーの設定して　pub/subを試してみる。に書いてみましたのでそちらを参考にしてくださると助かります。
convertという画像変換コマンドをラズベリーパイで使うのでaptを使ってインストールします。


$ sudo apt update
$ sudo apt upgrade
$ sudo apt install imagemagick

M5stackでラズパイのブローカーが稼働しているホストを指定するにはIPアドレスが必要ですラズパイでifconfigを実行すればわかります。

環境依存部分の設定

M5Stack側
　WifiのSSID　＝”　　　　”　パスワード　=”　　　　”
　MQTTブローカーを運用するラズベリーパイのIPアドレス　=”192.168.＊.＊"とホスト名”　　.local”
　MQTTのユーザー名　=”　　　　　”　パスワード　=”　　　　”　トピック名　=”jpeg/raw”
ラズベリーパイ側
　ワイヤレスタイムラプスカメラをXIAO ESP32-S3で作った(SDカード無し) で使ったシェルスクリプトを変更しますのでフォルダ等の名前は同じにしてください

M5Stackのプログラム

M5Stackのボードマネージャーは最新版(2025−7−28時点）を使うとコンパイルエラー出たので低いバージョンにして使っています。
ArduinoIDEは2.3.6(最新版)です
M5Stackのボードマネージャーは2.1.4を使っています。
M5Stackのライブラリマネージャーは0.4.6(最新版)を使っています。
pubsubclientのライブラリマネージャーは2.8(最新版)です


M5stack-moniter.ino
#include <WiFi.h>
#include <PubSubClient.h>
#include <M5Stack.h>

// WiFi 設定
const char* ssid = "指定してね";
const char* password = "指定してね";
//WiFi設定

//MQTT設定
const char* mqttServer = "192.168.指定してね";//名前解決できないのでこれを使う
const int mqtt_port = 1883;
const char mqttUserName[] = "指定してね";   // name→設定した名前に書き換える
const char mqttPass[] = "指定してね"; // pass→設定されたmqttパスに書き換える
const char clientID[] = "M5StickC-1";

WiFiClient espClient;
PubSubClient client(espClient);
//"/var/log/mosquitto/mosquitto.log"で確認できる
//MQTT設定

void callback(char* topic, byte* payload, unsigned int length) {
if (String(topic) == "jpeg/raw") {
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.drawJpg(payload, length);//JPEG画像を表示する関数があった
  }
}

void setup() {
  M5.begin();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setRotation(1);
  M5.Lcd.setTextSize(2);
  M5.Lcd.setCursor(10, 10);
  M5.Lcd.print("Run!\n");
delay(100);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  client.setBufferSize(20240);  // JPEGのサイズに合わせて拡張しています
  client.setServer(mqttServer, 1883);
  client.setCallback(callback);
  while (!client.connected()) {
  client.connect(clientID,mqttUserName,mqttPass);
  }
  client.subscribe("jpeg/raw");
}

void loop() {
  client.loop();
  }

ラズベリーパイのプログラム(シェルスクリプト)

mosquiito-MQTTでブローカーとパブリッシャーの機能を使います。
imagemagickに含まれるconvertを使って画像サイズ変換しています。

シェルスクリプトは以下の通りです

check-photo.sh

#!/bin/bash WATCH_DIR="/home/test-cam" FILENAME="directfb.jpg" inotifywait -m -e close_write --format "%f" "$WATCH_DIR" |while read FILE do if [ "$FILE" = "$FILENAME" ]; then TIMESTAMP=$(date +"%Y-%m-%d-%H-%M") NEW_NAME="cam$TIMESTAMP.jpg" mv "$WATCH_DIR/$FILENAME" "$WATCH_DIR/$NEW_NAME" echo "Renamed $FILENAME to $NEW_NAME" convert -geometry 320x240 "$NEW_NAME" M5photo.jpg mosquitto_pub -h "ブローカーのホスト名は　xxxx.localで記入可能です" -u "指定してね" -P "指定してね" -t jpeg/raw -f M5photo.jpg fi done

シェルスクリプトなのでchmod 755等をしてコマンドラインで実行すれば動作します。
自動起動するなら/etc/rc.local等に記述するのが良いと思います。

ご注意

エラー処理はしていないのです、たとえば受信失敗しても再送信リクエストしていません。
chatgptに聞いたり、ネットから集めたプログラムで作成したのでライセンスは未指定です。
client.setBufferSize()はむやみに大きくしない方が良いとchatgptが言っておりました
M5Stackの進捗状況はルーターのログでwifi接続　ブローカーのログでMQTTの接続状況がわかるのでそれを手掛かりにするとよかったです