プログラミング

M5Dial使い方ガイド 文字選択＆送信プログラムの作り方

1. はじめに

M5Dialは、エンコーダーやタッチスクリーンを搭載したコンパクトなM5Stackシリーズのデバイスです。本記事では、M5Dialを活用して日本語の文字を選択し、シリアル通信を通じてPCに送信するプログラムの作り方を詳しく解説します。

このプログラムを使えば、M5DialをPCの入力デバイスとして利用でき、IoTアプリケーションやカスタム文字入力システムの開発に役立ちます。また、Pythonなどの他のプログラムと連携させることで、さらに高度な操作を実現することも可能です。

2. M5Dialの準備

必要なもの

  • M5Dial 本体
  • USB-C ケーブル
  • VSCode（最新バージョン）
  • PlatformIO 拡張機能
  • M5Dial 用ライブラリ

開発環境のセットアップ

1. VSCodeのインストール

公式サイト（https://code.visualstudio.com/）から最新のVSCodeをダウンロードし、インストールします。

2. PlatformIOのインストール

  • VSCodeを開き、「拡張機能」から PlatformIO IDE を検索してインストール。
  • VSCodeの左側の「PlatformIO Home」アイコンをクリック。
  • 「New Project」を選択し、以下の設定でプロジェクトを作成。
    • Board: M5Stack-Core2
    • Framework: Arduino
    • Location: 任意のフォルダ

3. ライブラリのインストール

  • platformio.ini に以下の設定を追加。
lib_deps =
    m5stack/M5Dial @ ^0.0.1
  • ターミナルで pio run を実行し、ライブラリをダウンロード。

3. プログラムの解説

コード全体

#include <Arduino.h>
#include <M5Dial.h>

void setup() {
  auto cfg = M5.config();
  M5Dial.begin(cfg, true, false);
  M5Dial.Display.fillScreen(0xFFFFFFU);
  M5Dial.Display.fillCircle(120, 120, 100, 0x151515U);
  M5Dial.Display.setTextDatum(middle_center);
  M5Dial.Display.setTextFont(&fonts::lgfxJapanGothicP_40);
  M5Dial.Display.setTextColor(0x6439FFU);
  M5Dial.Display.setTextSize(5);
  USBSerial.begin(115200);
}

long oldPos = -999;
String txt[] = {"は","が", "の", "を", "に", "へ", "と", "で","も"};
long maxCnt = sizeof(txt)/sizeof(String);
long ans = 0;

void loop() {
  M5Dial.update();
  long pos = M5Dial.Encoder.read();
  if (pos != oldPos) {
    M5Dial.Speaker.tone(8000, 20);
    M5Dial.Display.clear();
    ans = abs(pos) % maxCnt;
    M5Dial.Display.drawString(txt[ans], 120, 120);
    oldPos = pos;
  }
  if (M5Dial.BtnA.wasPressed()) {
    M5Dial.Speaker.tone(3950, 200);
    delay(200);
    M5Dial.Speaker.tone(3135, 200);
    M5Dial.Display.clear();
    M5Dial.Display.setTextColor(0xFF1483U);
    M5Dial.Display.drawString(txt[ans], 120, 120);
    USBSerial.println(txt[ans]);
  }
  if (M5Dial.BtnA.wasReleased()) {
    M5Dial.Display.setTextColor(0x6439FFU);
    M5Dial.Speaker.tone(523, 200);
  }
}

コードの詳細解説

setup()関数

  • M5Dial.begin(cfg, true, false); でデバイスを初期化。
  • M5Dial.Display.fillScreen(0xFFFFFFU); で画面の背景を白に設定。
  • M5Dial.Display.fillCircle(120, 120, 100, 0x151515U); で画面中央に円を描画。
  • M5Dial.Display.setTextDatum(middle_center); でテキストを中央揃え。
  • USBSerial.begin(115200); でシリアル通信を開始。

loop()関数

  • M5Dial.update(); でデバイスの状態を更新。
  • M5Dial.Encoder.read(); でエンコーダーの回転位置を取得。
  • M5Dial.Display.drawString(txt[ans], 120, 120); で現在の選択文字を表示。
  • M5Dial.BtnA.wasPressed() でボタンの押下を検知し、選択された文字をシリアル通信で送信。

実行結果

コードをm5dialに書き込むと以下のようになります。エンコーダーを回すことで、文字表示がコード上で登録したものに順番に変更されます。

4. 応用アイデア

Pythonとの連携

PC側で受信した文字をPythonで処理し、テキスト入力を行うことができます。

import serial
ser = serial.Serial('/dev/ttyUSB0', 115200)
while True:
    data = ser.readline().decode('utf-8').strip()
    print(f"受信: {data}")

文字セットの拡張

より多くの文字や記号を扱えるようにすることも可能です。

String txt[] = {"は", "が", "の", "を", "に", "へ", "と", "で", "も", "A", "B", "C"};

その他の応用

  • M5Dialをキーボードエミュレーションデバイスとして利用
  • 文章入力補助ツールの開発
  • 特定のコマンドを入力するショートカットデバイスの作成

5. まとめ

本記事では、M5Dialを使った文字選択とシリアル通信による送信プログラムを解説しました。M5Dialを活用すれば、オリジナルの入力デバイスを構築し、IoTアプリケーションやクリエイティブな開発に活用できます。ぜひ試してみてください！

  • この記事を書いた人
  • 最新記事

-プログラミング