先週末のMakerFaireTokyo2020、東京に見に行くことはできませんでしたがTwitterのハッシュタグをから@motomsのお菓子配りロボットに行きつき、
qiita記事よりステッピングモーターを使っていることを見て、私もステッピングモーターを動かしてみたくなりました。
ですが、うまく回すことができず・・・

急遽方針を替え、先週スイッチサイエンスさんに再入荷したM5StickC Plus購入しました。なので今回はMQTTを利用して呼び出しに使えそうなシステムを構築していきます。

今回の記事は@1ft-seabassさんの記事を参考に作りました。ありがとうございます！

M5StackとNode-REDをMQTTで連携するメモ

M5stickcとNode-REDをMQTTで連携しました。#protoout　#M5Stack 　#NodeRED https://t.co/lW2PyHrh3t pic.twitter.com/VYx71p0elR
— Toshiki (@Hirasawa1987) October 8, 2020

プログラムは Arduino IDE を使って書きます．

使用したもの

M5StickC Plus

ESP32内蔵．Bluetooth 4.0とWi-Fi．6軸(ジャイロ・加速度)センサ. 赤色LED. 1.14 インチ 135x 240 LCDなどが付いていて2,200円で買うことができます。安い・・・

開発環境

arduino-1.8.13

ライブラリ

以下のライブラリをで躓きました、現在の最新バージョンは6.16.1になっており書き方が変わっている模様、チャレンジしてみましたが解けずにバージョンを5に下げて再度インストールしました。

ArduinoJson　5.13.5

コード

#include <M5StickCPlus.h>
#include <WiFiClient.h>
#include <PubSubClient.h>
#include <WiFi.h>
//#include <M5Stack.h>
#include <ArduinoJson.h>

// Wi-FiのSSID
char *ssid = "";
// Wi-Fiのパスワード
char *password = "";

// MQTTの接続先のIP
const char *endpoint = "";
// MQTTのポート
const int port = 1883;
// デバイスID
char *deviceID = "M5Stack";  // デバイスIDは機器ごとにユニークにします
// メッセージを知らせるトピック
char *pubTopic = "/pub/M5Stack";
// メッセージを待つトピック
char *subTopic = "/sub/M5Stack";

////////////////////////////////////////////////////////////////////////////////

WiFiClient httpsClient;
PubSubClient mqttClient(httpsClient);

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

    // Initialize the M5Stack object
    M5.begin();

    // START
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.setCursor(10, 10);
    M5.Lcd.setTextColor(WHITE);
    M5.Lcd.setTextSize(3);
    M5.Lcd.printf("START");

    // Start WiFi
    Serial.println("Connecting to ");
    Serial.print(ssid);
    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    // WiFi Connected
    Serial.println("\nWiFi Connected.");
    M5.Lcd.setCursor(10, 40);
    M5.Lcd.setTextColor(WHITE);
    M5.Lcd.setTextSize(3);
    M5.Lcd.printf("WiFi Connected.");

    mqttClient.setServer(endpoint, port);
    mqttClient.setCallback(mqttCallback);

    connectMQTT();
}

void connectMQTT() {
    while (!mqttClient.connected()) {
        if (mqttClient.connect(deviceID)) {
            Serial.println("Connected.");
            int qos = 0;
            mqttClient.subscribe(subTopic, qos);
            Serial.println("Subscribed.");
        } else {
            Serial.print("Failed. Error state=");
            Serial.print(mqttClient.state());
            // Wait 5 seconds before retrying
            delay(5000);
        }
    }
}

long messageSentAt = 0;
int count = 0;
char pubMessage[128];
int led,red,green,blue;

void mqttCallback (char* topic, byte* payload, unsigned int length) {

    String str = "";
    Serial.print("Received. topic=");
    Serial.println(topic);
    for (int i = 0; i < length; i++) {
        Serial.print((char)payload[i]);
        str += (char)payload[i];
    }
    Serial.print("\n");

//    StaticJsonDocument<200> jsonBuffer;
    StaticJsonBuffer<200> jsonBuffer;
//    deserializeJson(root, str);
    JsonObject& root = jsonBuffer.parseObject(str);

    // パースが成功したか確認。できなきゃ終了
    if (!root.success()) {
      Serial.println("parseObject() failed");
      return;
    }
    // JSONデータを割りあて
    const char* message = root["message"];
    led = root["led"];
    red = root["r"];
    green = root["g"];
    blue = root["b"];

    Serial.print("red = ");
    Serial.print(red);
    Serial.print(" green = ");
    Serial.println(green);
    Serial.print(" blue = ");
    Serial.println(blue);

    if( led == 1 ){
      // RGBカラー uint16_t に変換
      // uint16_t RGB = red << 11 | green << 5 | blue;
      uint16_t RGB = ((red>>3)<<11) | ((green>>2)<<5) | (blue>>3);
      // 背景カラー反映
      M5.Lcd.fillRect(0, 0, 320, 240, RGB);
      // テキスト反映
      M5.Lcd.setCursor(10, 120);
      M5.Lcd.setTextColor(WHITE);
      M5.Lcd.setTextSize(5);
      M5.Lcd.printf(message);
    } else {
      // 消灯
      M5.Lcd.fillScreen(BLACK);
    }

    delay(300);

}

void mqttLoop() {
    if (!mqttClient.connected()) {
        connectMQTT();
    }
    mqttClient.loop();
}

void loop() {

  // 常にチェックして切断されたら復帰できるように
  mqttLoop();

  // 5秒ごとにメッセージを飛ばす
  long now = millis();
  if (now - messageSentAt > 5000) {
      messageSentAt = now;
      sprintf(pubMessage, "{\"count\": %d}", count++);
      Serial.print("Publishing message to topic ");
      Serial.println(pubTopic);
      Serial.println(pubMessage);
      mqttClient.publish(pubTopic, pubMessage);
      Serial.println("Published.");
  }
}

M5StickCPlusのライブラリがない

#include <M5StickCPlus.h>

上記のライブラリはそのまま読み込むとエラーになります。Arduino IDEにライブラリはなくM5StickC-PlusからダウンロードしてArduino IDEのあるフォルダのarduino-1.8.13\librariesにダウンロードしたM5StickC-Plus-masterをそのまま入れることで動くようになります。

Node-REDでボタンを作る

今回はNode-REDについての説明は省きます。
こんな感じ

[{"id":"bd5d98b0.ea3798","type":"mosca in","z":"b9127b1e.46bcf8","mqtt_port":1883,"mqtt_ws_port":8080,"name":"","username":"","password":"","dburl":"","x":190,"y":200,"wires":[["2a1722bd.4c329e"]]},{"id":"c971a4cd.862768","type":"comment","z":"b9127b1e.46bcf8","name":"MQTTブローカー","info":"","x":180,"y":160,"wires":[]},{"id":"2a1722bd.4c329e","type":"debug","z":"b9127b1e.46bcf8","name":"","active":false,"console":"false","complete":"payload","x":432,"y":199,"wires":[]},{"id":"32e6c56c.7b3bfa","type":"mqtt out","z":"b9127b1e.46bcf8","name":"","topic":"/sub/M5Stack","qos":"","retain":"","broker":"4a0d61bd.b18f2","x":620,"y":260,"wires":[]},{"id":"63e877b8.8cc848","type":"ui_button","z":"b9127b1e.46bcf8","name":"","group":"56ac95d6.615a4c","order":3,"width":"6","height":"1","passthru":false,"label":"青","tooltip":"","color":"","bgcolor":"blue","icon":"","payload":"{     \"led\": 1,     \"r\": 0,     \"g\": 0,     \"b\": 255,     \"message\": \"blue\" }","payloadType":"json","topic":"","x":210,"y":260,"wires":[["32e6c56c.7b3bfa"]]},{"id":"7b4d354.3be44cc","type":"ui_button","z":"b9127b1e.46bcf8","name":"","group":"56ac95d6.615a4c","order":3,"width":0,"height":0,"passthru":false,"label":"赤","tooltip":"","color":"","bgcolor":"red","icon":"","payload":"{\"led\":1,\"r\":255,\"g\":0,\"b\":0,\"message\":\"red\"}","payloadType":"json","topic":"","x":210,"y":300,"wires":[["32e6c56c.7b3bfa"]]},{"id":"f75be591.879748","type":"ui_button","z":"b9127b1e.46bcf8","name":"","group":"56ac95d6.615a4c","order":3,"width":0,"height":0,"passthru":false,"label":"ﾐﾄﾞﾘ","tooltip":"","color":"","bgcolor":"green","icon":"","payload":"{\"led\":1,\"r\":0,\"g\":255,\"b\":0,\"message\":\"green\"}","payloadType":"json","topic":"","x":210,"y":340,"wires":[["32e6c56c.7b3bfa"]]},{"id":"c923f183.eb3c5","type":"ui_button","z":"b9127b1e.46bcf8","name":"","group":"56ac95d6.615a4c","order":3,"width":0,"height":0,"passthru":false,"label":"off","tooltip":"","color":"","bgcolor":"black","icon":"","payload":"{\"led\":0,\"r\":0,\"g\":0,\"b\":0,\"message\":\"close\"}","payloadType":"json","topic":"","x":210,"y":380,"wires":[["32e6c56c.7b3bfa"]]},{"id":"4a0d61bd.b18f2","type":"mqtt-broker","z":"","broker":"127.0.0.1","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"56ac95d6.615a4c","type":"ui_group","z":"","name":"ウィザード","tab":"e0028a22.5c7e58","disp":false,"width":"6","collapse":false},{"id":"e0028a22.5c7e58","type":"ui_tab","z":"","name":"製造二課　TP通知","icon":"dashboard","order":18,"disabled":false,"hidden":false}]

参考記事

【IoT初級者へ】M5StickC ではじめる MQTT 通信

終わりに

M5Stackシリーズはとにかく価格が安く、パーツも豊富なので、頭の中にアイデアをパパっと実現できると思います、プロトタイプを作るのにおすすめです！