【M5Stack_Core2】タッチライブラリ使ってみた

サンプルスケッチにいくつか処理を追加

わかったこと、タッチパネルの機能はほとんど使ってない。ジェスチャに関しては、収得ポイントを使ってライブラリで行っている。F/Wの機能は使っていない。

#include <M5Core2.h>
#include <touch.h>

#define ESP32

// 画面を上下２分割してジェスチャスタート、エンドポイントとする
TouchZone topHalf(0,0,320,120);         // 上側
TouchZone bottomHalf(0,120,320,160);    // 下側

TouchZone leftHalf(0,0,160,240);         // 上側
TouchZone rigthHalf(160,120,160,240);    // 下側

Gesture swipeDown(topHalf, bottomHalf, "Swipe Down");        // ソフトジェスチャ(↓)
Gesture swipeUp(bottomHalf, topHalf, "Swipe Up");            // ソフトジェスチャ(↑)
Gesture swipeLeft(rigthHalf, leftHalf, "Swipe Left");        // ソフトジェスチャ(←)
Gesture swipeRight( leftHalf, rigthHalf,    "Swipe Rigth");  // ソフトジェスチャ(→)

// 画面を４分割してボタンとして割り振る
TouchButton lt = TouchButton(0, 0, 160, 120, "left-top");          // 左上
TouchButton lb = TouchButton(0, 120, 160, 120, "left-bottom");     // 左下
TouchButton rt = TouchButton(160, 0, 160, 120, "right-top");       // 右上
TouchButton rb = TouchButton(160, 120, 160, 120, "right-bottom");  // 右下

void setup() {
  M5.begin();
  M5.Touch.addHandler(eventDisplay);  // イベント発生したら実行
  M5.Touch.addHandler(colorButtons, TE_BTNONLY + TE_TOUCH + TE_RELEASE);

  swipeDown.addHandler(yayWeSwiped_down);  // スタートポイントからエンドポイントに移動したら実行
  swipeUp.addHandler(yayWeSwiped_up);  //  スタートポイントからエンドポイントに移動したら実行
  swipeLeft.addHandler(yayWeSwiped_left);  //  スタートポイントからエンドポイントに移動したら実行
  swipeRight.addHandler(yayWeSwiped_right);  //  スタートポイントからエンドポイントに移動したら実行

  rt.addHandler(dblTapped, TE_DBLTAP); // 右上ゾーンイベントのダブルクリックが発生したら実行

}

void loop() {
  // ループは、アップデートのみ。つまり、タッチのコールバックに登録されたファンクションで処理が行われている。
  M5.update();
}

void eventDisplay(TouchEvent& e) {
  Serial.printf("%-12s finger%d  %-18s (%3d, %3d)", M5.Touch.eventTypeName(e), e.finger, M5.Touch.eventObjName(e),  e.from.x, e.from.y);
  if (e.type != TE_TOUCH && e.type != TE_TAP && e.type != TE_DBLTAP) {
    Serial.printf("--> (%3d, %3d)  %5d ms", e.to.x, e.to.y, e.duration);
  }
  Serial.println();
}

void colorButtons(TouchEvent& e) {
  TouchButton& b = *e.button;
  M5.Lcd.fillRect(b.x, b.y, b.w, b.h, b.isPressed() ? WHITE : BLACK);
}

void yayWeSwiped_down(TouchEvent& e) {
  Serial.println("--- SWIPE DOWN DETECTED ---");
}

void yayWeSwiped_up(TouchEvent& e) {
  Serial.println("--- SWIPE UP DETECTED ---");
}

void yayWeSwiped_right(TouchEvent& e) {
  Serial.println("--- SWIPE RIGHT DETECTED ---");
}

void yayWeSwiped_left(TouchEvent& e) {
  Serial.println("--- SWIPE LEFT DETECTED ---");
}

void dblTapped(TouchEvent& e) {
  Serial.println("--- TOP RIGHT BUTTON WAS DOUBLETAPPED ---");
}

TE_TOUCH タッチした(接触した)

TE_TOUCH     finger0  left-bottom        (110, 196)
TE_RELEASE   finger0  left-bottom        (110, 196)--> (110, 196)     13 ms
TE_TAP       finger0  left-bottom        (110, 196)
TE_TOUCH     finger0  left-bottom        ( 81, 208)
TE_RELEASE   finger0  left-bottom        ( 81, 208)--> ( 81, 208)     52 ms
TE_TAP       finger0  left-bottom        ( 81, 208)
TE_TOUCH     finger0  left-bottom        ( 51, 227)
TE_RELEASE   finger0  left-bottom        ( 51, 227)--> ( 51, 227)     26 ms
TE_TAP       finger0  left-bottom        ( 51, 227)
TE_TOUCH     finger0  left-bottom        ( 34, 220)
TE_RELEASE   finger0  left-bottom        ( 34, 220)--> ( 34, 220)     39 ms
TE_TAP       finger0  left-bottom        ( 34, 220)

パネルに接触時に発生

TE_MOVE 移動した(スワイプ)

TE_TOUCH     finger0  left-top           (  6, 107)
TE_MOVE      finger0  left-top           (  6, 107)--> ( 10, 107)     13 ms
TE_MOVE      finger0  left-top           ( 10, 107)--> ( 15, 107)     26 ms
TE_MOVE      finger0  left-top           ( 15, 107)--> ( 22, 107)     52 ms
TE_MOVE      finger0  left-top           ( 22, 107)--> ( 30, 107)     65 ms
TE_MOVE      finger0  left-top           ( 30, 107)--> ( 39, 107)     91 ms
TE_MOVE      finger0  left-top           ( 39, 107)--> ( 48, 107)    104 ms
TE_MOVE      finger0  left-top           ( 48, 107)--> ( 57, 107)    117 ms
TE_MOVE      finger0  left-top           ( 57, 107)--> ( 66, 107)    143 ms
TE_MOVE      finger0  left-top           ( 66, 107)--> ( 75, 107)    156 ms
TE_MOVE      finger0  left-top           ( 75, 107)--> ( 84, 107)    169 ms
TE_RELEASE   finger0  left-top           (  6, 107)--> ( 84, 107)    195 ms
TE_PRESSED   finger0  left-top           (  6, 107)--> ( 84, 107)    203 ms

タッチしてスワイプして離した。スワイプ中はTE_MOVEが発生

TE_RELEASE ジェスチャー後ある程度時間がたった？

ほかのイベントみればわかるがほとんど指を離したイベントで発生している。 タップとダブルタップでは発生してないので、ある程度の継続時間が必要かも。 PRESSEDでは発生している。

TE_GESTURE ジェスチャーした

TE_TOUCH     finger0  left-top           (153,  61)
TE_MOVE      finger0  left-top           (153,  61)--> (153,  70)     39 ms
TE_MOVE      finger0  left-top           (153,  70)--> (153,  85)     52 ms
TE_MOVE      finger0  left-top           (153,  85)--> (153, 106)     78 ms
TE_MOVE      finger0  left-top           (153, 106)--> (153, 137)     91 ms
TE_MOVE      finger0  left-top           (153, 137)--> (153, 157)    117 ms
TE_RELEASE   finger0  left-top           (153,  61)--> (153, 157)    130 ms
TE_GESTURE   finger0  Swipe Down         (153,  61)--> (153, 157)    130 ms
--- SWIPE DOWN DETECTED ---

上から下にスワイプした

TE_TAP シングルタップ 短く叩いた

TE_TOUCH     finger0  left-bottom        (108, 151)
TE_TAP       finger0  left-bottom        (120, 149)
TE_RELEASE   finger0  left-bottom        (108, 151)--> (108, 151)     26 ms

クリックした

TE_DBLTAP ダブルタップ 二回叩いた

TE_TOUCH     finger0  left-bottom        (135, 128)
TE_RELEASE   finger0  left-bottom        (135, 128)--> (135, 128)     26 ms
TE_DBLTAP    finger0  left-bottom        (135, 128)

ダブルクリップした

TE_DRAGGED ボタンからボタンへ移動(ドラッグ)

TE_TOUCH     finger0  left-top           ( 96,  62)
TE_MOVE      finger0  left-top           ( 96,  62)--> ( 96,  69)     13 ms
TE_MOVE      finger0  left-top           ( 96,  69)--> ( 96,  81)     39 ms
TE_MOVE      finger0  left-top           ( 96,  81)--> ( 96,  97)     52 ms
TE_MOVE      finger0  left-top           ( 96,  97)--> ( 96, 114)     65 ms
TE_MOVE      finger0  left-top           ( 96, 114)--> ( 96, 133)     91 ms
TE_RELEASE   finger0  left-top           ( 96,  62)--> ( 96, 133)    104 ms
TE_DRAGGED   finger0  left-top           ( 96,  62)--> ( 96, 133)    112 ms

スワイプなんだけど、画面四分割でボタン化しているのでその間を挟んでドラックしたイメージ

TE_PRESSED 離した(指が離れた)

TE_TOUCH     finger0  left-bottom        (108, 191)
TE_RELEASE   finger0  left-bottom        (108, 191)--> (108, 191)    585 ms
TE_PRESSED   finger0  left-bottom        (108, 191)--> (108, 191)    593 ms

クリックより遅い感じで離した

マルチタッチ

TE_TAP       finger0  right-bottom       (273, 156)
TE_TOUCH     finger0  left-top           ( 88,  57)
TE_TOUCH     finger1  left-bottom        ( 73, 191)
TE_MOVE      finger1  left-bottom        ( 73, 191)--> ( 73, 190)    178 ms
TE_MOVE      finger1  left-bottom        ( 73, 190)--> ( 73, 189)    269 ms
TE_RELEASE   finger1  left-bottom        ( 73, 191)--> ( 73, 189)    477 ms
TE_PRESSED   finger1  left-bottom        ( 73, 191)--> ( 73, 189)    485 ms
TE_RELEASE   finger0  left-top           ( 88,  57)--> ( 88,  57)    511 ms
TE_PRESSED   finger0  left-top           ( 88,  57)--> ( 88,  57)    519 ms

finger0 が、1本指目、finger1が２本指目。

TE_MOVE      finger1  left-bottom        (261, 222)--> (319, 229)    143 ms
TE_RELEASE   finger1  left-bottom        (135, 206)--> (319, 229)    156 ms
TE_GESTURE   finger1  Swipe Rigth        (135, 206)--> (319, 229)    156 ms
--- SWIPE RIGHT DETECTED ---
TE_RELEASE   finger0  left-top           (124,  57)--> (124,  57)   1417 ms
TE_PRESSED   finger0  left-top           (124,  57)--> (124,  57)   1425 ms

２本指目のイベントはほとんどできるけど、スワイプUP/DOWNは厳しい。１本目の影響がないY軸ラインにいないとできないのかも。

TE_TOUCH     finger0  left-top           (125,  56)
TE_TOUCH     finger1  left-bottom        ( 98, 175)
TE_RELEASE   finger1  left-bottom        ( 98, 175)--> ( 98, 175)     34 ms
TE_RELEASE   finger0  left-top           (125,  56)--> (125,  56)     56 ms
TE_TAP       finger1  left-bottom        ( 98, 175)
TE_TAP       finger0  left-top           (125,  56)

同時マルチタップ 。反応見る限り、下手に組み込みF/Wで判定よりソフトでジェスチャ処理したほうがよさそう？

【M5Stack_Core2】新しいタッチライブラリ

M5Core2のライブラリが更新されて、タッチパネルのライブラリが大幅に更新されました。
ざっと見た感じ、このBLOGで指摘していた感じのことがドキュメントに書かれています。 やっぱり、そうなのね。という感じです。 タッチライブラリですが、

• Arduinoスタイルのボタン対応
• タッチジェスチャー対応 ※ライブラリで対応
• マルチタッチ一部対応(垂直のみ) ※本体を90°回転してもパネルは物理的に変わらないので反応しない。
• タッチゾーン登録(あらかじめボタンエリア登録)
• wasPressed() ボタンを離した
• isPressed() ボタンを押した
• ジェスチャー、ゾーン１、２を登録して１から２に移動中にジェスチャーをして判定
• イベント関数
• TE_TOUCH タッチした(接触した)
• TE_MOVE 移動した(スワイプ)
• TE_RELEASE ジェスチャー後ある程度時間がたった？
• TE_GESTURE ジェスチャーした
• TE_TAP シングルタップ 短く叩いた
• TE_DBLTAP ダブルタップ 二回叩いた
• TE_DRAGGED ボタンからボタンへ移動(ドラッグ)
• TE_PRESSED 離した(指が離れた)

初リリースされて、まだ、数週間ですが、既にレガシーAPI呼ばわりされている。M5Core2 Factory Test等で 使用されていた、isPressed()関数とgetPressedPoint()関数、HotZonesは、一応まだ残しておくけど、今後 使わないでねって。おもっきりあちこちの雑誌とかでこう使うとか紹介されてそう。

サンプルスケッチとかがあるので使ったら使い方がわかるよと書かれているのでこれから使ってみようと思います。

【M5Stack_Core2】タッチパネル調査

タッチパネルのレジスタ仕様がm5StackのWebに公開されていたので確認したけどやりたいことがうまくいかない。 しかし、ジェスチャやその他の部分に関しては、コミュニティの掲示板の方でやり取りがあるから公式ライブラリの方にボタンファンクションは追加されるのかな。

【M5Stack_Core2】Core2_Factory_testとは？

Core2_Factory_testは、製品に出荷時に組み込まれているプログラムなのだが、どっちかというとプロモーションっぽいところがある。 工場出荷時の最終チェックプログラムと考えると、スペックをこれですべてチェック出来ているのか不安になる。 しばらくは、使い方やタッチスクリーンのプログラムの流れとかを学習するように解析をしたり、中途半端に切り捨てられた機能を 元通りにしていく感じか。なんかこれ、学習用プログラム(未完成)っぽい要素があってそういう意味でも出荷チェックプログラムじゃないよね。

【M5Stack_Core2】Core2_Factory_test解析

jpeg file

mono file

@rem jpeg バッテリーチャージ
python code2bin.py batPower.c

@rem jpeg 時間再描画
python code2bin.py clockImage.c

@rem jpeg 起動画面
python code2bin.py Core2Cover.c

@rem jpeg メイン画面
python code2bin.py Core2Main.c

@rem jpeg アプリ(IMU)メニュー画面
python code2bin.py imageMenu.c

@rem jpeg SDカード再描画
python code2bin.py sdCardImage.c

@rem jpeg SYSTEMアプリ画面
python code2bin.py SettingAppImage.c

@rem jpeg タイマーアプリ
python code2bin.py TimerAppImage.c

@rem jpeg タッチスクリーン座標再描画
python code2bin.py touchImage.c

@rem jpeg WIFIアプリ画面
python code2bin.py WifiSacn.c

@rem audio タッチ音
python code2bin.py bibisig.c

@rem audio 起動音
python code2bin.py preview_R.c


@rem 7 DisBatbuff.drawColorBitmap(31,19,27,11, batRect[sytState.batCount], 0xff9c00, 0x000000);
python code2drawColorBitmap.py batRect.c -width 27 27 27 27 27 27 27

@rem 11 DisClockbuff.drawColorBitmap(posx[0],26,24,42, DigNumber[ sytState.Rtctime.Hours / 10 ], 0xff9c00, 0x1a1100);
python code2drawColorBitmap.py digNumber.c -width 24 24 24 24 24 24 24 24 24 24 24

@rem 11 DisClockbuff.drawColorBitmap(posx[4],33,18,35, DigNumber_35px[ sytState.Rtctime.Seconds / 10 ], 0xff9c00, 0x1a1100);
python code2drawColorBitmap.py digNumber_35px.c -width 18 18 18 18 18 18 18 18 18 18 18

@rem 6  DisClockbuff.drawColorBitmap(0,0,164,17, rectptrBuff[sytState.clockCount], 0xff9c00, 0x000000);
python code2drawColorBitmap.py image.c -width 164 164 164 164 164 164

@rem 4  Disbuff.drawColorBitmapAlpha(posx,posy,53,33, (uint8_t*)ptr2, color, 0x000000);
python code2drawColorBitmap.py initImage.c -width 53 53 53 53

@rem 16 DisBatbuff.drawColorBitmap(3,20,7,10, Number_7x10px[batVoltage1], 0xff9c00, 0x000000);
@rem    DisTouchbuff.drawColorBitmap(19,15,3,10, (uint8_t*)Number_7x10px[13], 0xff9c00, 0x000000);
@rem    DisBatbuff.drawColorBitmap(3,37,60,10, Number_7x10px[14], color, 0x000000);
python code2drawColorBitmap.py Number8x7.c -width 7 7 7 7 7 7 7 7 7 7 7 7 7 3 60 7

@rem 4
@rem     DisPowerbuff.drawColorBitmap(0,65,77,37, (uint8_t*)image_External, color2, 0x000000);
@rem     DisPowerbuff.drawColorBitmap(0,0,77,37, (uint8_t*)image_Internal, color1, 0x000000);
@rem     DisPowerbuff.drawColorBitmap(0,39,77,24, (uint8_t*)image_power, 0xff9c00, 0x000000);
@rem     DisPowerbuff.drawColorBitmap(54,posy,20,31, (uint8_t*)image_PowerC, 0xae2828, 0x000000);
python code2drawColorBitmap.py power.c -width 77 77 77 20

@rem 7
@rem (未使用)
python code2drawColorBitmap.py rect_320_20.c -width 320 320 320 320 320 320 320

@rem 6
@rem   Disbuff.drawColorBitmap(122,98,76,44, TouchFishBuff[count_n], 0xff9c00, 0x000000);
python code2drawColorBitmap.py touchFish.c -width 76 76 76 76 76 76

【M5Stack_Core2】VS code環境構築

VS code環境構築を構築します。

いままで、Adruinoを使ってきましたがそろそろライブラリの中身を見な(調査し)がら開発するのに限界を感じてVS codeに再チャレンジしました。過去インストールして導入したのですが動かず。PlatformIO IDEという拡張機能を使ったんですがいろいろと設定とかライブラリの整合性とかSDKなどわからないことが多く断念した実績があります。今回は、単純にAdruino環境をそのままVS codeでつかっちゃおーという拡張機能ですので簡単に動作しました。備忘録として残しておきます。

大前提
* Arduinoでプログラムがボード(マイコン)にupdateできる環境をすでにある。
* VSCodeがインストールされている。

手順

1. 開発ディレクトリを作って、サンプルスケッチをコピーし、Arduinoでサンプルスケッチが動作することを確認する
2. 拡張機能の追加 Arduino for Visual Studio Code (Microsoft) をインストールする
3. メニューからフォルダを開くで「開発ディレクトリ」を選択。エクスプローラーが開く
4. エクスプローラーからサンプルスケッチ(.ino)を開く
5. Ctrl+Shift+PでArduino: Board Configを選択
6. Arduino Board Configウインドから開発ボードを選ぶ。Arduinoの設定と同じにする。ソースをセーブしてVS Codeを再起動
7. エクスプローラー上に.vscodeが追加されていることを確認して、「c_cpp_properties.json」を選択
8. includePathにArduinoのライブラリを追加
9. Ctrl+Shift+PでArduino: Select Serial Portを選択。Arduinoの設定と同じにする。
10. Ctrl+Shift+Pで「Arduino」と打ち込みArduino拡張機能の確認をする(どんな機能があるか見る)1. エクスプローラーでスケッチを選んで(.ino)、ソースコードウインドの右上にあるアイコンArduino: Verify(Ctrl+Alt+R) Arduinoの(レ)検証ボタンと同等
11. ソースコードウインドの右上にあるアイコンArduino: Update(Ctrl+Alt+U) Arduinoの(→)マイコンに書き込みボタンと同等
12. 出力LOG文字化け対策下記参照
13. Serial Port選択バグ対策下記参照

Arduino

VS Code

Arduino for Visual Studio Code出力の文字化け対策

元ネタ lang-ship.com

Arduino for Visual Studio Code (Microsoft)のバージョンが違うのでPATH等が違うが
"C:\Users\%username%\.vscode\extensions\vsciot-vscode.vscode-arduino-0.3.2\out\src\common\util.js" このファイルの下記の部分を丸ごとコメント化する。

        /*if (os.platform() === "win32") {
            try {
                const chcp = childProcess.execSync("chcp.com");
                codepage = chcp.toString().split(":").pop().trim();
            }
            catch (error) {
                outputChannel_1.arduinoChannel.warning(`Defaulting to code page 850 because chcp.com failed.\
                \rEnsure your path includes %SystemRoot%\\system32\r${error.message}`);
                codepage = "850";
            }
        }*/

Serial Port選択バグ

バージョンによってセレクト画面が出ないことがある。過去に修正されたがまたバグっているっぽい。
Arduino拡張機能のソース設定は、.vscodeに書き込まれるので直接arduino.jsonにport設定(追加)をする。前の行の，(カンマ)を忘れない。

{
    "board": "m5stack:esp32:m5stack-core2",
    "configuration": "PSRAM=enabled,PartitionScheme=default,CPUFreq=240,UploadSpeed=921600,DebugLevel=none",
    "sketch": "Core2_Factory_test\\Core2_Factory_test.ino",
    "port": "COM5"
}

libraryパスの追加

ソースコードで#include <M5Core2.h>‘が波線になったので.vscodeのc_cpp_properties.json`にパスの追加
"C:\Users\%username%\Documents\Arduino\libraries\M5Core2\src\M5Core2.h"がソース元なのでこのディレクトリを追加する。カンマでちゃんとつながるようにする。 %username%は、自分のLoginアカウントに合わせる(windows版の話その他は、pathを合わせる)

{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "C:\\Users\\%username%\\Documents\\Arduino\\libraries\\M5Core2\\src\\**",
                "C:\\Users\\%username%\\AppData\\Local\\Arduino15\\packages\\m5stack\\tools\\**",
                "C:\\Users\\%username%\\AppData\\Local\\Arduino15\\packages\\m5stack\\hardware\\esp32\\1.0.4\\**",
                "C:\\Users\\%username%\\Documents\\Arduino\\libraries\\**"
            ],
            "forcedInclude": [],
            "intelliSenseMode": "msvc-x64",
            "compilerPath": "C:/Program Files (x86)/Microsoft Visual Studio/2019/Community/VC/Tools/MSVC/14.26.28801/bin/Hostx64/x64/cl.exe",
            "cStandard": "c11",
            "cppStandard": "c++17"
        }
    ],
    "version": 4
}

【M5Stack_Core2】バッテリーチェック！

話題のバッテリーチェックをしたいと思います。

Core2って、2mm六角レンチがないカバー外せないんですよ。そして、前に買ったm5Stack製品に付いていた六角レンチでも開かない(サイズが違う)
ということで、ダイソーで買ってきました。これ！

なんだかなぁ

ダイソークオリティでした。あと、金属粉がすごい。手がすごい汚れる。
さっそく、開けたいと思います。

ねじの大きさが、長い短いがあるので要チェックです。

おおー。当たりでした。凹んでる。ということで、このまま使用し続け膨らんできたときに接触部分が裂けて燃える可能性があるので対策をしたいと思います。

バッテリーの裏にテープが張ってあって固定されているので剥がしにくいですが取り外します。

ツイッター等で言われているように、90°回転させてはめ込みます。その際水色の部分が重なり合うので接触しないか確認しつつバッテリーの位置調整をおこないます。あと、ねじのサイズが違うのは紫色が浅いねじ、緑色が深いねじになっているのでねじを締めるときに間違えないように。あと、リード線を噛まないように蓋をします。