M5Stackでできること 〜M5Stack Core2でタッチボタンをつかう

スポンサーリンク
お役立ち情報

M5Stack社のマイコンデバイスで、たくさんのボタンを使って操作を行いたい機会がありました。
例えば「M5Stack Basic」には3つのボタンが付いていますが、今回の用途では最大10個程度のボタンが必要です。

タクトスイッチなどの外付け部品やボタンユニットなどをつかう方法もありますが、今回はタッチパネル搭載の「M5Stack Core2」を使って、タッチボタンをつくってみようと思います。
ChatGPTに聞いてみたところ、「M5Unified」ライブラリと、その中で使われている「M5GFX」ライブラリを使う方法が簡単なようなので、その方法で試してみます。


以下のようなものをつくります。

  • ディスプレイ上に5つのボタンを配置する。
  • ボタンを押すことで変数の値を増減したりフラグのtrue/falseを切り替えたりして、その結果をディスプレイ上に表示する。

今回の方法では、「initButton()」でボタンの設定を行い「drawButton()」で描画します。今回はプログラムの実行中にボタンの描画内容を変更したりはしないので、「setup()」の中だけでこれらの処理を行います。
ボタンが押されたかどうかの判定は「loop()」内の「contains()」で行います。

つくったスケッチは以下のとおりです。

#include <M5Unified.h>

LGFX_Button btn0, btn1, btn2, btn3, btn4;

int     w, h;
int     val0 = 0; 
int     val1 = 0;
boolean sw = false;
String  onoff = "OFF";

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);

  w = M5.Display.width();
  h = M5.Display.height();
  M5.Display.setTextColor(TFT_WHITE);
  M5.Display.setTextDatum(MC_DATUM);
  M5.Display.fillScreen(TFT_BLACK);

  btn0.initButton(&M5.Display, w/8*4, h/8*6, w/2-4, h/2-4, TFT_DARKGREEN, TFT_DARKGREEN, TFT_WHITE, "SWITCH", 2);
  btn1.initButton(&M5.Display, w/8*1, h/8*5, w/4-4, h/4-4, TFT_DARKGREEN, TFT_DARKGREEN, TFT_WHITE, "UP",     2);
  btn2.initButton(&M5.Display, w/8*1, h/8*7, w/4-4, h/4-4, TFT_DARKGREEN, TFT_DARKGREEN, TFT_WHITE, "DOWN",   2);
  btn3.initButton(&M5.Display, w/8*7, h/8*5, w/4-4, h/4-4, TFT_DARKGREEN, TFT_DARKGREEN, TFT_WHITE, "UP",     2);
  btn4.initButton(&M5.Display, w/8*7, h/8*7, w/4-4, h/4-4, TFT_DARKGREEN, TFT_DARKGREEN, TFT_WHITE, "DOWN",   2);
  btn0.drawButton();
  btn1.drawButton();
  btn2.drawButton();
  btn3.drawButton();
  btn4.drawButton();

  M5.Display.drawString(onoff, w/8*4, h/8*2, 4);
  M5.Display.drawNumber(val0,  w/8*1, h/8*2, 4);
  M5.Display.drawNumber(val1,  w/8*7, h/8*2, 4);
}

void loop() {
  M5.update();
  auto t = M5.Touch.getDetail();
  if(t.wasPressed()) {
    if(btn0.contains(t.x, t.y)) sw = !sw;
    if(btn1.contains(t.x, t.y)) if(val0<7) val0++;
    if(btn2.contains(t.x, t.y)) if(val0>0) val0--;
    if(btn3.contains(t.x, t.y)) if(val1<7) val1++;
    if(btn4.contains(t.x, t.y)) if(val1>0) val1--;

    if(sw) onoff="ON"; else onoff="OFF";
    M5.Display.fillRect(0, 0, w, h/2, TFT_BLACK);
    M5.Display.drawString(onoff, w/8*4, h/8*2, 4);
    M5.Display.drawNumber(val0,  w/8*1, h/8*2, 4);
    M5.Display.drawNumber(val1,  w/8*7, h/8*2, 4);
  }
}

これを「M5Stack Core2」に書き込むと、ディスプレイに以下のように表示されます。

左側のふたつのボタン「UP」「DOWN」を押すと、左上に表示されている数字（val0）が0〜7の範囲で上下します。同じく右側のふたつのボタン「UP」「DOWN」を押すと、右上に表示されている数字（val1）が0〜7の範囲で上下します。
中央の「SWITCH」ボタンを押すと、中央上の表示内容が「OFF」↔︎「ON」と切り替わります。

今回の方法ではボタン形状のきめ細かいつくり込みなどはできないようですが、その分とても簡単にタッチボタンをつくることができました。

 

なお、私がM5Stack、M5StickCの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。


ごく基本的なところから、かなり複雑なスケッチや、ネットワーク接続など、比較的高度なものまで、つまづかずに読み進めていけるような構成になっており、大変わかりやすい本です。

スポンサーリンク