以下で購入した M5Stack Dial を、VS Code + PlatformIO + M5Unified で扱うお試しです。まずは、Hello World的な内容をやった、というものです。
●M5Stack Dial ESP32S3 スマートロータリーノブ--販売終了 — スイッチサイエンス
https://www.switch-science.com/products/9271
自分は上記の初期ロットを買いましたが、記事執筆時点では以下の v1.1 が新たに出ています(自分が買った当初のものは、販売終了らしいです)
●M5Stack Dial ESP32-S3 スマートロータリーノブ v1.1 — スイッチサイエンス
https://www.switch-science.com/products/10302
今回の内容
今回、ざっくりとした内容を書いていきます。
試した内容のデモ動画
先に、今回試した内容のデモ動画を掲載します。今回は「ダイヤルの回転で数字のカウントアップ/カウントダウン」と「タッチ操作で数字がクリアされる(0 になる)」という内容を実装しています。
開発環境
今回用いる開発環境は、タイトルに書いていて、また自分の過去の複数の記事でも登場している「VS Code + PlatformIO + M5Unified」の組み合わせです。
プロジェクトの作成と iniファイルの書きかえ
「VS Code + PlatformIO(の拡張機能)」で新規プロジェクト作成をした際、ボードの選択肢に M5Stack Dial は出てきません。自分が購入した M5Stack Dial に搭載されているのが「M5StampS3」なので、以下の「M5Stack StampS3」を選択しました。
この時、iniファイルは以下が作成されました。
[env:m5stack-stamps3]
platform = espressif32
board = m5stack-stamps3
framework = arduino
これについて、最初の行は書きかえつつ、lib_deps のところで「m5stack/M5Dial」を追加しました。内容は以下のとおりです。
[env:m5dial]
platform = espressif32
board = m5stack-stamps3
framework = arduino
lib_deps =
m5stack/M5Dial
今回のlib_deps のところで「m5stack/M5Unified」を加えてないですが、以下を見ると「m5stack/M5Dial」が「m5stack/M5Unified」を含んだ状態になっているようです。
●M5Dial/library.json at master · m5stack/M5Dial
https://github.com/m5stack/M5Dial/blob/master/library.json
処理の実装
cppファイルに、以下を実装しました。上で書いていたように、今回は「ダイヤルの回転で数字のカウントアップ/カウントダウン」と「タッチ操作で数字がクリアされる(0 になる)」という内容を実装しています。
#include <M5Dial.h>
static long count = 0;
static long prevEnc = 0;
void draw() {
M5Dial.Display.fillScreen(BLACK);
M5Dial.Display.setTextDatum(middle_center);
M5Dial.Display.setTextFont(&fonts::Font7);
M5Dial.Display.setTextSize(1);
M5Dial.Display.drawString(String(count),
M5Dial.Display.width() / 2,
M5Dial.Display.height() / 2);
}
void setup() {
auto cfg = M5.config();
M5Dial.begin(cfg, true, false); // 引数2・3: エンコーダ有効、RFID無効
prevEnc = M5Dial.Encoder.read();
draw();
}
void loop() {
M5Dial.update();
long enc = M5Dial.Encoder.read();
if (enc != prevEnc) {
count += (enc - prevEnc);
prevEnc = enc;
draw();
}
auto t = M5Dial.Touch.getDetail();
if (t.wasPressed()) {
count = 0;
draw();
}
}
書き込み前にデバイスをダウンロードモードにする
デバイスへの書き込みを行う前には、デバイスをダウンロードモードにする必要があります。その方法について、公式の説明をメモしておきます。
●Dial
https://docs.m5stack.com/ja/core/M5Dial
以下でタカヲさんがポストされている画像が分かりやすいです。
書き込み後
あとは、デバイスへの書き込みを行うことで、冒頭に掲載していた動画のような動作をさせられます。
余談
今回の内容の続き(途中経過)
今回、まずはダイヤル操作・タッチ操作の実装を軽く試しました。
その続きとして、Dial を PC と Bluetooth)(BLE)で接続して、「YouTube の一部の操作を Dial で行う」というものを試作してみています。
過去の M5Stack Dial を使ったお試しの事例
2024年の話になりますが、M5Stack Dial を使ったお試しについては、UIFlow 2.0 との組み合わせをやったことがありました。


