M5Stack

【M5Stack】本体に実装されているボタンの使い方を分かりやすく解説!

m5stack-button.png

<この記事について>

  • 「M5Stackの本体ボタンを使う方法がよく分からない…」と悩んでいる人のために書きました。
  • この記事を読むことで、M5Stackの本体ボタンを制御する方法が分かります。
  • 結論としては、特に何かを設定する必要はないですが、プログラム内にupdate()とボタンを制御する関数を入れることが不可欠となります。

こんにちは!こんばんは!

ちゃとらです(・ω・)/

M5Stackのボタンを使う方法は書籍などに載っていますが、一応簡単に解説しておきます。記事稼ぎじゃないぞ!!

ボタン制御はM5Stackにおける基本というかほぼメインなので、この記事が参考になったらいいなと思います。

ちゃとら

M5Stackの本体ボタンを制御する方法について分かりやすく解説していきます!

今回扱うM5Stack

M5Stackの種類M5Stack FIRE(V2.6)
値段49.90ドル(税別)
(販売価格は7700円程 投稿日現在)
生産国中国
サイズ5.4 x 5.4 x 3.05 cm

今ぐらいの時期にM5Stack FIREを通販で購入すると、7700円程かかります。

ボタンが実装されているM5StackはFIRE以外にもBasicやGray、M5GOがありますが、タッチスクリーン式であるCore2には実装されていないことに注意です!

余談ですがM5Stackの派生品であるM5StickやAtomなどには、実装されているボタン数が異なっていたり、そもそもボタンが実装されていない機器がほとんどです。

ボタンについて

ボタンの位置における名前やボタンを制御するための関数について解説していきます。

ボタンの位置・名前

ボタンの位置・名前

図を見てもらえれば分かりますが、左から順にA,B,Cボタンとなっています。

ものすごいシンプルで分かりやすい配置ですね!

ボタンを制御する関数

ボタンを制御する関数はいくつかありますが、ここでは代表的な関数のみを紹介していきます。

ボタン制御関数説明
M5.BtnA.isPressed();Aボタンが押され続けていたら1、押されていなければ0を返却。
M5.BtnA.wasPressed();Aボタンが押されたことがあったら1、押されたことがなかったら0を返却。
M5.BtnA.pressedFor(1000);Aボタンが1000ms間(1秒間)押され続けていたら1、そうでなければ0を返却。
M5.BtnA.read();Aボタンの状態を読み込んで返却(1か0を返却)。

BtnAのAの部分をBやCに変更することでB,Cボタンの制御にすることが可能です。

他にもisReleased()やwasReleased()といったボタンが押されていない時の関数などがありますが、メインとして使う関数は表にある4つですね。

サンプルコード

スケッチ例にボタンのサンプルコードがありますが、それではつまらないので、自分なりにプログラムを作成しました!

何かインストールしたり、特別な設定は必要ないです。

ここでは、M5Stackのセットアップ(Arduino IDE)は完了していること前提で解説していきます。

ちゃとら

M5Stackのセットアップ(Arduino IDE)がまだ完了していない人は以下の記事を参考にしてください!

m5stack-setup-arduino.png
【M5Stack】M5Stackのセットアップ(Arduino)を分かりやすく解説!【Arduino IDE】この記事では、M5Stackのセットアップ(Arduino IDE)について解説しています。手順としては、「USBドライバをインストール」→「ボードマネージャをインストール」→「ライブラリをインストール」→「プログラムを書いて実行」となっています。...

サンプルコード

以下のプログラムをM5Stackに書き込んで動作させます。

ボタンを制御する関数としては、wasPressed(),pressedFor(),read()を使っています。

#include <M5Stack.h>

void setup() 
{
  M5.begin();

  M5.Lcd.setTextSize(3);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 60);
  M5.Lcd.print("Select a button and press!");

  M5.Lcd.setTextSize(7);
  M5.Lcd.setCursor(50, 180);
  M5.Lcd.print("A");
  M5.Lcd.setCursor(145, 180);
  M5.Lcd.print("B");
  M5.Lcd.setCursor(235, 180);
  M5.Lcd.print("C");
}

void loop() 
{
  // 各ボタンの状態を更新
  M5.update();
  // Aボタンが押された時の処理
  if(M5.BtnA.wasPressed())
  {
    M5.Lcd.fillScreen(RED);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("A-button pressed");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 100);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 150);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 150);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 150);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
  // Aボタンが1秒間押された時の処理
  if(M5.BtnA.pressedFor(1000))
  {
    M5.Lcd.fillScreen(PINK);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("A-button pressed for 1 second");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 120);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 170);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 170);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 170);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
  // Bボタンが押された時の処理
  if(M5.BtnB.wasPressed())
  {
    M5.Lcd.fillScreen(BLUE);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("B-button pressed");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 100);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 150);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 150);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 150);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
  // Bボタンが1秒間押された時の処理
  if(M5.BtnB.pressedFor(1000))
  {
    M5.Lcd.fillScreen(CYAN);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("B-button pressed for 1 second");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 120);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 170);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 170);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 170);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
  // Cボタンが押された時の処理
  if(M5.BtnC.wasPressed())
  {
    M5.Lcd.fillScreen(GREEN);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("C-button pressed");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 100);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 150);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 150);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 150);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
  // Cボタンが1秒間押された時の処理
  if(M5.BtnC.pressedFor(1000))
  {
    M5.Lcd.fillScreen(GREENYELLOW);
    M5.Lcd.setCursor(0, 60);
    M5.Lcd.setTextSize(3);
    M5.Lcd.print("C-button pressed for 1 second");

    // 各ボタンの状態を表示
    M5.Lcd.setCursor(0, 120);
    M5.Lcd.print("State of each button");
    M5.Lcd.setCursor(0, 170);
    M5.Lcd.printf("A:%u", M5.BtnA.read());
    M5.Lcd.setCursor(100, 170);
    M5.Lcd.printf("B:%u", M5.BtnB.read());
    M5.Lcd.setCursor(200, 170);
    M5.Lcd.printf("C:%u", M5.BtnC.read());
  }
}

24行目のupdate()ではループが始まる度に各ボタンの状態を更新しています。この処理が無いとwasPressed()やpressedFor()などの関数が使えないので、必須の処理となります。

プログラムを作成できたら、シリアルポートとボードの設定を忘れずに行いましょう。

「ツール」→「シリアルポート」でM5Stackが接続されているポート番号を選び、
「ツール」→「ボード」→「ESP32 Arduino」で「M5Stack-Core-ESP32」を選びましょう。

それぞれ設定ができたら、M5Stackにプログラムを書き込みます。

Aボタンを押した時の表示
↑Aボタンを押した時
Aボタンを1秒間押した時の表示
↑Aボタンを1秒間押した時
Bボタンを押した時の表示
↑Bボタンを押した時
Bボタンを1秒間押した時の表示
↑Bボタンを1秒間押した時

こんな感じで表示されます。

やってみると分かるのですが、どれかのボタンを1秒間押し続けた時に表示される値は通常なら0です。しかし、たまに押し続けたボタンの値が1になることがあります。

これはおそらく、ボタンを1秒,2秒,3秒…とジャストのタイミングでボタンを離せば1になると考えられます。

つまり、1秒や2秒ジャストでボタンを離せば1になり1.323秒や2.545秒などの半端な時間でボタンを離すと0になるとの推測です。

ちゃとら

まぁ、ボタンを押し続けた時の値はあんまり気にしないで!

一応表示させてあるだけだから!

まとめ

M5Stackの本体ボタンについて

  1. 左から順にA,B,Cボタンという配置になっている。ボタンを制御する主な関数としては、wasPressed()やpressedFor()などがある。
  2. 何かをインストールしたり、特別な設定は必要ないが、プログラム内にupdate()を入れてボタンの状態を更新する必要がある。
ちゃとら

M5Stackにおいてボタンは重要!

今回はここまでです。

ちゃとら(・ω・)/