今回扱うアイテムは「M5Stack Dial ESP32S3 スマートロータリーノブ（以下、M5 Dial）」。国内では2023年10月11日に発売されました。フルカラーのタッチパネルを囲む回転ノブが最大の特徴で、回転の位置や方向を正確に記録するロータリーエンコーダーとしての役割を果たしています。

M5 Dialに触れて印象に残ったのは、何といっても回転ノブの存在感。最新の技術が搭載されながらも、どこか懐かしさを感じるフォルムに魅力を感じました。そこで、ノブの愛らしさと鮮やかな液晶を組み合わせて、こんな作品を作ってみました。

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

京島共同凸工所(@kyojima.totsu)がシェアした投稿

ここからは作り方を紹介していきます。まずはM5Stackシリーズ共通の開発環境から。Arduino IDEをインストールし、基本設定の「追加のボードマネージャのURL」欄に「https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json」を記入。続いて、ボードマネージャから「M5Stack」をインストールしてください。

書き込み先を指定するため「ツール → ボード → M5Stack」と選んでいくと、その中に「M5 Dial」は存在しませんが心配ご無用。M5 DialにはM5Stackシリーズの「M5Stamp S3」が搭載されているため、それを選択してプログラムを書き込んでいけばOKです。

続いて、M5 Dialに固有の機能を利用するため、ライブラリマネージャーから「M5Dial」を追加しましょう。「M5GFX」「M5Unified」も一緒にインストールしてください。

#include "M5Dial.h"

void setup() {
    auto cfg = M5.config();
    M5Dial.begin(cfg, true, false);
}

long oldPosition = -999;

void loop() {
    M5Dial.update();
    long newPosition = M5Dial.Encoder.read();
    if (newPosition != oldPosition) {
        oldPosition = newPosition;
        Serial.println(newPosition);
    }
    if (M5Dial.BtnA.wasPressed()) {
        M5Dial.Encoder.readAndReset();
    }
}

M5Dialサンプルスケッチ「encoder.ino」 より一部抜粋。

long newPosition = M5Dial.Encoder.read() とありますが、ここでロータリーエンコーダーの値を整数で読み取っているようです。自前でセンサーを用意するときに必要なキャリブレーション用の計算が不要なのはうれしいですね。

また、M5Dial.BtnA.wasPressed() で、物理ボタンが押されたかを判定しているようです。M5Dial.Encoder.readAndReset() を用いて数値をリセットすると、その角度を0としてまたノブの値が変わり始めます。

#include <M5Dial.h>

void setup(void) {
    auto cfg = M5.config();
    M5Dial.begin(cfg, false, false);   
}

int prev_x = -1;
int prev_y = -1;

static m5::touch_state_t prev_state;

void loop(void) {
  M5Dial.update();
  auto t = M5Dial.Touch.getDetail();
  if (prev_state != t.state) {
    prev_state = t.state;
    static constexpr const char* state_name[16] = {
      "none", "touch", "touch_end", "touch_begin",
      "___", "hold", "hold_end", "hold_begin",
      "___", "flick", "flick_end", "flick_begin",
      "___", "drag", "drag_end", "drag_begin"
    };
    M5_LOGI("%s", state_name[t.state]);
    M5Dial.Display.drawString(state_name[t.state],
                              M5Dial.Display.width() / 2,
                              M5Dial.Display.height() / 2 - 30);
  }
}

M5Dialサンプルスケッチ「touch.ino」 より一部抜粋。

タッチパネルの状態については、上記プログラムのstatic constexpr const char* state_name[16] に続く16種類の情報が取得できます。触れているか否かはもちろん、タッチやフリック、ドラッグの開始と終了まで判別してくれるため、操作の選択肢が広がりますね。

続いて、他のハードウェアとの連携を進めていきましょう。

多くのM5Stack製品と同様、M5 DialもGROVE規格のモジュールと簡単に接続できるGrove端子を備えています。M5 Dial本体で取得したロータリーエンコーダーや液晶の状態を元に、「M5Stack用NeoPixel互換 LEDテープ」を光らせるコードを書いてみました。

電子工作においてパーツを固定するには工夫が必要ですが、M5 Dialではそんな悩みも無用。オレンジ色のリングを回せば簡単に取れるので、あとは適当なサイズの穴を開けた素材に本体を通し、再度挟み込むようにして締め直せばしっかり固定できるのです。

一通りの機能が完成したので、パッケージに収めて仕上げます。レトロフューチャーな仕上がりにしたいので、ChatGPTに相談していくつかデザイン案を出してもらいましょう。「テレビリモコンのように長い形をしたコントローラー。手元の方に液晶付きの丸いダイヤルがあって、そこから中心を通って先端に向かって光の道筋ができているような感じです。昭和っぽいデザインで」とお願いしてみました。