🎶

OSCでM5Stickの情報をElectronに送信する for Mac

2024/02/28に公開

Electron

osc

m5stick

tech

先日参加した体験型コンテンツ勉強会で感化され、
M5Stickの情報をElectronにOSCで送信してみました。
やったこと・はまったことまとめます。

リポジトリはこちら💁‍

環境

Mac OS 11.3.1
Arduino IDE 2.3.2
M5StickC Plus
Electron 28.2.0
Node.js 20.11.0

手順

Arduino IDEをインストール

Homebrewでarduino-ideをインストール。

brew install arduino-ide --cask

USB Driverをインストール

ドキュメントをみてFTDI driverの該当OSのものをインストール。

Arduino クイックスタートをみる

ドキュメント通りにboard managerに追加してM5Stackをインストール。
書き込み先を今回使用するM5StickCPlusで選択。

Hello Worldしてみる

試しにHello Worldしてみる。
内容とは関係ないので読み飛ばしてもらってOK。
※コードはChatGPTにお願い

#include <M5StickCPlus.h>

void setup() {
  M5.begin();
  M5.Lcd.fillScreen(BLACK); // 画面を黒でクリアする

  M5.Lcd.setCursor(0, 0); // テキストの表示位置を設定する
  M5.Lcd.setTextColor(WHITE); // テキストの色を白に設定する
  M5.Lcd.setTextSize(2); // テキストのサイズを2倍に設定する
  M5.Lcd.println("Hello, M5Stick!"); // テキストを表示する
}

void loop() {
  // ここに何か別の処理を追加する場合はここにコードを追加します
}

アップロードしようとしたらエラー😱

fatal error: M5StickCPlus.h: No such file or directory
 #include <M5StickCPlus.h>

M5StickCPlusはGitHubから直接DLしてインストールするっぽい。参考

ここから直接インクルードすればいけた！
地味に「Upload」ボタン押さないとM5Stick側に反映されないのに気付くの時間かかったのは内緒...
WebフロントエンドのHMR環境に甘えた弊害😂

OSCを送信してみる

#include <M5StickCPlus.h>
#include <WiFi.h>
#include <OSCMessage.h>
#include <WiFiUdp.h>

const char *ssid = "ssid"; // wifiのssid
const char *password = "password"; // wifiのパスワード
IPAddress destinationIP(0, 0, 0, 0); // 送信先のIPアドレス
const unsigned int destinationPort = 10000; // 送信先のポート
float gyroX, gyroY, gyroZ;

WiFiUDP Udp;

void sendOSC(const char *route, int message) {
  OSCMessage msg(route);
  msg.add(message); // 任意のデータを追加
  Udp.beginPacket(destinationIP, destinationPort);
  msg.send(Udp);
  Udp.endPacket();
  msg.empty();
}

void sendGyroOSC(const char *route, float x, float y, float z) {
  OSCMessage msg(route);
  msg.add(x);
  msg.add(y);
  msg.add(z);
  Udp.beginPacket(destinationIP, destinationPort);
  msg.send(Udp);
  Udp.endPacket();
  msg.empty();
}


void setup() {
  // put your setup code here, to run once:
  M5.begin();
  M5.Lcd.setRotation(1);
  int x = M5.IMU.Init(); //return 0 is ok, return -1 is unknow
  Serial.println(x);

  M5.Lcd.fillScreen(BLACK); // 画面を黒でクリアする

  Serial.begin(115200);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.println("Connecting to WiFi...");
  }

  Serial.println("");
  Serial.println("WiFi connected");

  Udp.begin(WiFi.localIP(), destinationPort);
}

void loop() {
  // ボタンイベントを反映したい場合はupdateが必要
  M5.update();

  M5.IMU.getGyroData(&gyroX, &gyroY, &gyroZ);

  if (M5.BtnA.isPressed()) {
    sendOSC("/m5stick/pressed", 1);
  } else {
    sendOSC("/m5stick/pressed", 0);
  }

  sendGyroOSC("/m5stick/gyro", gyroX, gyroY, gyroZ);

  delay(200);
}

OSCMessageがなくてアップロードエラー。
Adrian FreedさんのOSCライブラリをインストール。

アップロード成功！

ボタンイベント周りのドキュメント

ジャイロ周りのドキュメント

受ける側（Electron）のコードはリポジトリを参考にしてください。
OSC楽しい。

メモ

platformioでConfigファイル作ればスケッチに対してpackages.json的なことができそう
M5Stick（M5Stack）のWifiは2.4Ghz帯のみ？参考
ボタンイベントを取得しようと思ったら M5.update(); をloopで実行する必要あり
aratiusさんのOSCサンプルリポジトリ参考になる
送受信を考えるとArduinoOSCの方が使いやすそう？

参考

インターネットに感謝🙏

環境

手順

Arduino IDEをインストール

USB Driverをインストール

Arduino クイックスタート をみる

Hello Worldしてみる

OSCを送信してみる

メモ

参考

Discussion

Arduino クイックスタートをみる