M5Paperの簡単なリモコン実装に最適。グリッド対応のタッチエリアを実装する

素敵なM5Paperライフを楽しんでいらっしゃいますでしょうか？

処理の実装は上々、手軽に自由に綺麗にタッチコマンドを表示したい。という方にはおすすめの、
「M5Paperで5x9(9x5)のグリッドですっきりまとめられるボタン」を作りました。

色は都合によりダークになっていますが、好みで変えられます。
縦型・横型にも対応しております。

この場でこちらの実装方法を解説させていただきます。

導入の前に

ご興味頂く前に、M5Paperの画面実装は基本的には以下のソースをFork・または参考にして開発して頂く方が幸せになれる場合が多いです。（むしろそちらが推奨です）
「そこまで本格的でなくても」とか「グリッドでデザインしたい」という方は引き続きご参照ください

Githubソース

導入ガイド

導入例は M5PaperTouchArea/M5PaperTouchArea.ino に記載されております。
inoファイル以外は変更せずに同フォルダに配置して頂ければ動作します。

タッチエリア：inoファイルの修正

宣言部（setupやloopより外）

# include "M5PaperTouchArea.h"
// Module (Grid & TouchArea)
M5PaperTouchAreas _m5pta;

setup(){

  _m5pta.current_canvas = &canvas;
  _m5pta.e_touch.func = bTouch;

  _m5pta.getGutil()->setVertical(true);

↑　canvas は任意に作ったキャンバスを設定
bTouch bRelease はタッチ（指を離）した場合の処理関数を後で記述して、その名前をセットしてください。（後述します）
setVertical の記述は元々デフォルト横型の設定を縦型にしたい場合にセットします。横型の場合は必要ないです。

ボタンを足す（上記宣言のスコープ内ならどこでも可能）

  _m5pta.add_grid(1,1,1,1,"B1","b1");
  _m5pta.draw();
  canvas.pushCanvas(0,0,UPDATE_MODE_GC16);

↑　5x9(9x5) のグリッドの1から数えて (x,y,横幅,高さ,ボタン名,押された時に流れる任意コード名) を設定すれば描画されます。ピンタレストの様なタイルスタイルの方が簡単に実装できて良いのですが、自由に敷き詰めたい という気持があったので、上記の様なグリッドシステムとなりました。

drawコマンドは一括描画なので、add_gridを複数実施した最後に1回だけ設定＆キャンバスのプッシュをするとまとめて描画されます。プッシュのオプションはお好みで

loop(){部

void loop() {
  _m5pta.loop();
}

↑　ループ部に1行足してください。

関数（任意に追記します）

// Touch Event
void bTouch(M5PTAEventContext& ct) {
  Serial.println("T:"+ct.code);
}

↑　最後にイベントを足せば出来上がりです。この関数にボタンがタッチされた場合の処理を書きます。
ct.codeにタッチされたコードが代入されています。

その他の設定は以下のものがあります。

setup(){

  // Change Default Setting
  _m5pta.default_font_size = 48;
  _m5pta.default_radius = 15;
  _m5pta.default_font_linepos = 6;
  _m5pta.default_bc = {13,0,0};

設定名	説明
default_font_size	フォントサイズ
default_radius	ボタンの角のまるみ
default_font_linepos	文字上下位置調整（位置がずれるときがあるので、調整の為）
default_bc	文字色設定（背景、枠色、文字色 (0～15の濃さです））

こちらはデフォルト設定ですが、ボタン描画するごとに個別にも設定することが出来ます。

最後に、削除したい場合は

_m5pta.clear();

で一括削除となります。

グリッド機能のみ：inoファイルの修正

グリッド機能だけを利用したい（x,y,w,hを指定すれば、実際のx,y,w,hを返す単純なものです）
場合は以下の通り。（Githubのサンプルは両方実装されています。）

宣言部（setupやloopより外）

# include "GridUtil.h"
// Module (Grid Only)
GridUtil _gu;

TouchAreaと両方使うのであれば#include宣言は必要ないです。

setup(){

  _gu.setVertical(true);

setVertical の記述は元々デフォルト横型の設定を縦型にしたい場合にセットします。横型の場合は必要ないです。

描画（スコープ内ならどこでも）

  GURect g = _gu.convert(3,5,3,2);
  canvas.fillRect(g.x, g.y, g.w, g.h, 0);