M5StickC Plus を使ってみる

今回はM5StickC Plusを使って遊んでいきます。

特に今のところ大きな目的はありませんが、使い方や公式のExampleなどを見てどのようなことが出来るのか試していきたいと思います。

使い方

ほぼ公式が載せている手順にしたがって行うだけでした。

以下にURL載せておきます。

docs.m5stack.com

サイトがすべて英語だったので大まかな流れを追っていきます。

M5StickC PLUSの場合は最初のドライバのインストールは無視して良いみたいなのでスキップしました。

ArduinoIDEも事前にインストール済みだったのでスキップしましたが、出来てない方はサイトの通りにダウンロードを行いましょう。ダウンロードサイトに行って各自のPC環境に合ったモノをダウンロードすれば良いだけです。

今回はArduino IDEの使い方の細かい説明は省きます。

次にボード情報を取得するためにウィンドウ左上の

File > Preferences > Additional Board Manager URLs に以下のURLを追記して”OK”を押す

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

次にウィンドウ左上の

Tools > Boards > Boards Manager で M5stackと検索して出てくるM5StackをInstallを押して”Close”を押す

Tools > Board > M5Stack Arduino > M5Stick-C-Plusを選択

これで大体は問題なく終わりです。

動作確認のために簡単なLチカを行っていきます。

void setup() {
  pinMode(10, OUTPUT);
}

void loop() {
  digitalWrite(10, HIGH);
  delay(1000);
  digitalWrite(10, LOW);
  delay(1000);
}

オンボードのLEDが10番ピンに割り当てられているのでコードを書き込んであげればすぐ試せます。

他にもブザーや赤外線LEDなどもオンボードで搭載されているようですね。

IMUもついているので加速度から速度を出してモニターに表示とかもすぐにできるし、バッテリー内臓なのでUSBを引っこ抜いて振り回して速度を見るのもすぐできます。M5系なら割と当たり前にできることですが小さいのは良いことです。

公式Exampelのゲーム

Files > Examples > M5StickCPlus > Games の中にゲームが2種類入っています。

FlappyBird
Dices

FlappyBirdはM5Stack系でもExamplesに入っているので定番のようですね。 StackではTetrisなどが入っていますがStickではその代わりにDicesが入っているみたいです。

それぞれ書き込んで実際に遊んでみた画像

プログラムは案の定長いですが、よくできています。

Dicesに関してはかなりプログラムも短く、分かりやすい内容になっていました。

スピーカー、モニタを使ってみる

以下の公式サイトを見れば詳しく書いてありますが、英語なので参考にしながら軽くまとめておきます。

https://docs.m5stack.com/en/api/stickc/lcd_m5stickc

またサイトではM5StackCPlusとしての説明はなくM5StackCと同様にメソッドは使えるためライブラリをインクルードする際に

#include <M5StickC.h>

ではなく

#include <M5StickCPlus.h>

となるようにしましょう。

LCDモニター

まずLCDモニターを触っていきます。

LCDを使うAPIはM5系でほぼ共通化されているようなので（未検証）別のLCDがついたM5系でもある程度コードを再利用できると思います。（その場合インポートするライブラリはM5系の名前と合わせる必要があります。）

なので逆に、公式でStick系のAPIリファレンスに載っていないスプライト関係のAPIも使えるので興味がある方はそちらを試すとより面白いと思います。

LCDの項で最後に載っているコードを試すのが手っ取り早いのでM5StackC Plusでも使えるようにしたものが以下になります。

#include <M5StickCPlus.h>

void setup() {
  M5.begin();

  M5.Lcd.fillScreen(WHITE); // set the default background color
  M5.Lcd.drawLine(0, 0, 100, 100, GREEN);
  M5.Lcd.drawTriangle(22, 22, 69, 98, 51, 22, RED);
  M5.Lcd.fillTriangle(22, 22, 69, 98, 51, 22, RED);
  M5.Lcd.drawRect(50, 100, 30, 10, BLUE);
  M5.Lcd.fillRect(50, 100, 30, 10, BLUE);
  M5.Lcd.drawRoundRect(40, 70, 20, 10, 4, BLUE);
  M5.Lcd.fillRoundRect(40, 70, 20, 10, 4, BLUE);
  M5.Lcd.print("print text");
}
void loop() {}

実行するとこうなります。

M5.begin();
これはM5系の十八番ですね。
M5系を扱うときの最初に呼ぶ関数です。

M5.Lcd
LCDを扱うためのクラスです。以降で取り上げるLCDのメソッドでは表記を省略します。

fillScreen(WHITE);
スクリーン全体を引数で指定した色に塗りつぶす。

drawLine(0, 0, 100, 100, GREEN); 2つの点に挟まれた直線（線分）を書く int16_t = 16ビットの符号付き整数引数
1. 1点目のx座標(int16_t)
2. 1点目のy座標(int16_t)
3. 2点目のx座標(int16_t)
4. 2点目のy座標(int16_t)
5. 色（任意 *指定しない場合は背景色が適用される）

drawTriangle(22, 22, 69, 98, 51, 22, RED); 三角形（3つの線分）を書く（線のみ）
- 引数
  1. 1点目のx座標
  2. 1点目のy座標
  3. 2点目のx座標
  4. 2点目のy座標
  5. 3点目のx座標
  6. 3点目のy座標
  7. 色

fillTriangle(22, 22, 69, 98, 51, 22, RED); 三角形の内側を塗りつぶした図形を書く
- 引数
  - drawTriangleと同じ

drawRect(50, 100, 30, 10, BLUE); 四角形（4つの線分）を書く（線のみ）
- 引数
  1. 左上の点x座標
  2. 左上の点y座標
  3. 幅
  4. 高さ
  5. 色

fillRect(50, 100, 30, 10, BLUE); 四角形の内側を塗りつぶした図形を書く
- 引数
  - drawRectと同じ

drawRoundRect(40, 70, 20, 10, 4, BLUE); 四角形の角を面取りした図形の外側の線のみ書く
- 引数
  1. 左上の点x座標
  2. 左上の点y座標
  3. 幅
  4. 高さ
  5. 面取り半径
  6. 色

fillRoundRect(40, 70, 20, 10, 4, BLUE); 四角形の角を面取りした図形を指定した色で塗りつぶした図形を書く
- 引数
  - drawRoundRectと同じ

print("print text"); 文字表示

他にも

setRotation(1); 画面を引数×90度回転（M5の刻印が読める縦の状態が0）
setTextColor(TFT_BLACK); 引数の色に文字色を指定
setTextSize(3); 文字サイズ指定
setCursor(10, 30); 文字を表示するときの位置変更

等があります。

スピーカー

Stick C PlusのスピーカーはCore系のライブラリとは違って、M5.Speakerとは書かずM5.Beepとして使うようなので注意する必要があります。

検証していませんがメソッドはほぼ同じようだったので使って行きます。

M5stick系のAPI一覧にはスピーカーに関しての項目がない代わりに、Core系で説明がされているのでそちらを参考にします。以下にリンクを載せておきます。

docs.m5stack.com

クラス名がSpeakerとなっている所をBeepと読み替えればある程度扱えます。

しかし、setVolumeメソッドを試したましたが音量に変化がありませんでした。

まずは動かせるコードをお見せします。

公式リファレンスに少々手を加えたものになります。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint8_t i = 0;
void setup(){
  M5.begin();
  M5.Beep.begin();
  M5.Beep.setVolume(i);
}

void loop(){
  M5.update();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  if(M5.BtnA.wasPressed()) {
    M5.Beep.tone(661, 200);
  }else if(M5.BtnB.wasPressed()){
    i++;
    // M5.Beep.setVolume(i);
  }
  M5.Lcd.print(i);
  delay(100);
}

先ほども説明したようにsetVolumeメソッドはうまく動作しないため、19行目のsetVolumeメソッド部分をコメントアウトしているのでボタンBを押すとカウントアップされた数字がLCD左上に数字が表示されるだけになっています。

Bボタンで周波数を変えたい場合は少しいじって以下のようにするとBボタンを押すたびに10Hzずつ増やしていくようになります。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint16_t i = 0;
void setup(){
  M5.begin();
  M5.Beep.begin();
  M5.Beep.setVolume(i);
}

void loop(){
  M5.update();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  if(M5.BtnA.wasPressed()) {
    M5.Beep.tone(i, 200);
  }else if(M5.BtnB.wasPressed()){
    i += 10;
  }
  M5.Lcd.print(i);
  delay(100);
}

動作確認が取れなかったメソッドもありますが音を出すだけなら、使い方はとても簡単です。

M5.Speaker.begin() 又は M5.begin() これをsetup関数内で実行してあげればスピーカを使い始めることが出来る。 M5.beginに関しては使えるすべての機能を初期化しているようなのでスピーカー以外使いたくないといった場合はM5.Speaker.beginを使うと良いでしょう。特にこだわりがない方はLCDでも使っていたM5.beginで良いと思うます。

M5.Speaker.update() 又は M5.update() これは状態の更新をするために用意されています。M5.update()とすることでスピーカーを含む状態の更新しているので、わざわざM5.Speaker.updateを使って個別で更新する場合を除いてM5.updateを使うと良いでしょう。

M5.Speaker.tone(661, 200); スピーカーを初期化したらこれで音を鳴らすことが出来ます。
- 引数
  1. 周波数 (int16_t)
  2. 音を鳴らす（ミリ指定）秒数 (int16_t)
    - 任意で指定可能

以上がスピーカーの使い方になります。

おまけ（別で調査したこと）

M5Stick C Plus本体の背面を見てみるとGPIOのピン割り当てがシールとして貼られています。

赤枠で囲んだG36/G25となっている箇所の使い方がいまいち直感的にわからなかったため確かめてみました。

Switch Scienceには

G36/G25は同じポートを利用しています。片方のピンを利用しているとき、もう片方のピンはフローティング入力（プルアップもプルダウンもしない状態）にしておいてください。例えば、G36ピンをADCの入力として使っている場合、G25ピンはフローティングにしてください。

setup()
{
   M5.begin();
   pinMode(36, INPUT);
   gpio_pulldown_dis(GPIO_NUM_25);
   gpio_pullup_dis(GPIO_NUM_25);
}

と書かれています。

36番を使いたいときは以上のように記述する必要があるようです。

しかし、25番ピンの使い方に関しては特になかったので普通に扱えるか戸惑ってしまいました。

qiita.com

調べたところ、上記の記事に25ピンの使い方が載っていました。

デジタルとアナログの入出力は可能ですが、内臓の6軸センサと併用はできないようです。

25番ピンを使う場合は36番ピンとは排他的なのは当たり前で、普通のピンを扱うときと同じような記述の仕方で問題ないようです。

例えばこんな感じ。。。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint16_t i = 0;
void setup(){
  M5.begin();
  pinMode(25, OUTPUT);
}

void loop(){
  digitalWrite(25, HIGH);
  delay(1000);
  digitalWrite(25, LOW);
  delay(1000);
}

逆に36番ピンは以下のサイトにもあるようにデジタル・アナログの入力のみに対応しているようです。

それ以外の用途には使えないようなので注意が必要です。

lang-ship.com

まとめ

GPIOとして出ているピンが少ないので外部の回路と組み合わせるのは限度がありそう。
LCDが無印の時と違って大きくなったため、何かを表示させることの利点が高まった。

HaLake Magazine

このブログを検索