4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

以下で購入した M5Stack Dial を、VS Code + PlatformIO + M5Unified で扱うお試しです。まずは、Hello World的な内容をやった、というものです。

●M5Stack Dial ESP32S3 スマートロータリーノブ--販売終了 — スイッチサイエンス
 https://www.switch-science.com/products/9271

2026-08-02_20-20-06.jpg

自分は上記の初期ロットを買いましたが、記事執筆時点では以下の 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」を選択しました。

2026-08-02_20-40-56.jpg

この時、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

2026-08-02_23-10-25.jpg

以下でタカヲさんがポストされている画像が分かりやすいです。

書き込み後

あとは、デバイスへの書き込みを行うことで、冒頭に掲載していた動画のような動作をさせられます。

余談

今回の内容の続き(途中経過)

今回、まずはダイヤル操作・タッチ操作の実装を軽く試しました。

その続きとして、Dial を PC と Bluetooth)(BLE)で接続して、「YouTube の一部の操作を Dial で行う」というものを試作してみています。

過去の M5Stack Dial を使ったお試しの事例

2024年の話になりますが、M5Stack Dial を使ったお試しについては、UIFlow 2.0 との組み合わせをやったことがありました。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?