M5Paper + PlatformIO + Arduino でHelloWorld

5 min read読了の目安(約4900字

先日ひょんなことで手に入れたM5Paper
e-inkで電池もよく持ちそうなので家の温度とかを表示したい。
開発環境を整えるだけでものすごい大変だったのでHelloWorldできるまでをまとめました。

環境

  • Macbook Air (M1, 2020)
  • macOS Big Sur 11.2.3
  • Visual Studio Code 1.55.0 Darwin arm64
  • M5Paper

手順

ドライバのインストール

作成したプログラムをM5Paperに送るため、ドライバが必要になります。

M5Stack のページに移動します。
CP2104 Driverの「Download」をクリックするとプラットフォームが選べるので、動かしている環境を選択し、ドライバをダウンロードします。

ダウンロードしたドライバを実行し、インストールを実施します。

PlatformIOのインストール

Arduinoの開発環境として、近年よく使われるPlatformIOをインストールします。

公式サイトによると、PlatformIOは以下の特徴があります。

  • クロスプラットフォーム
  • 多くの異なるソフトウェア開発キット(SDK)またはフレームワークをサポート
  • 高度なデバッグ(Debugging)
  • 単体テスト(Debugging)
  • 自動コード分析(静的コード分析)
  • リモート管理(リモート開発)

PlatformIOはVisual Studio Codeのプラグインとして提供されています。

早速インストールしましょう。まずはVisual Codeを起動します。

m5_01.png

  1. 左側四角のアイコン「Extensions」を選択
  2. 検索バーから「platformio」で検索
  3. 「PlatformIO IDE」を選択
  4. 「Install」を選択

これでPlatformIO IDEのインストールは完了です。

PlatformIO プロジェクトの作成

まずはPlatformIOのプロジェクトを作成します。

image.png

下にある家のアイコンを選択すると、PIO Homeの画面が開きます。Quick Accessの「New Project」を選択し、新しいプロジェクトを作成します。

Project Wizard が開くので、以下のように設定します。

image.png

  • Name: (任意の名前)
  • Board: M5Stack Fire
  • Framework: Arduino

問題なければ「Finish」を押します。

プロジェクトが作成され、platformio.ini の編集画面が表示されました。

image.png

ライブラリの追加

M5Paperの画面表示に必要なライブラリを追加します。

image.png

  1. 下にある家のアイコンを選択し、PIO Homeを開く
  2. 「Libraries」を選択し、ライブラリ画面を開く
  3. Registryの検索バーから「M5EPD」で検索
  4. 検索結果から「M5EPD」を選択

image.png

M5EPDのライブラリの情報が表示されるので、「Add to Project」でプロジェクトに追加します。

image.png

Add project dependency画面が表示されるので、先ほど作成したプロジェクトを選択し、「Add」を選択します。

platform.ioのlib_depsに m5stack/M5EPD が追加されたことを確認します。

platformio.ini
; PlatformIO Project Configuration File
;
;   Build options: build flags, source filter
;   Upload options: custom upload port, speed and extra flags
;   Library options: dependencies, extra library storages
;   Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; https://docs.platformio.org/page/projectconf.html

[env:m5stack-fire]
platform = espressif32
board = m5stack-fire
framework = arduino
lib_deps = m5stack/M5EPD@^0.1.1

.pio/libdeps/m5stack-fire 配下に M5EPDのディレクトリが追加されていました。

$ tree -d .pio -L 4
.pio
├── build
│   └── m5stack-fire
└── libdeps
    └── m5stack-fire
        └── M5EPD
            ├── examples
            ├── src
            └── tools

ソースコードの修正

ひとまず、HelloWorldを表示できるコードをexampleからコピペします。
まずは、コピペ元のソースを開きます。

image.png

  1. 下にある家のアイコンを選択し、PIO Homeを開く
  2. 「Libraries」を選択し、ライブラリ画面を開く
  3. 「Installed」を選択肢、インストールしたライブラリ一蘭を表示
  4. 一覧から「M5EPD」を選択

image.png

Examplesタブにサンプルコードが表示されるので、検索バーから「HelloWorld」で検索し、ソースをコピーします。
コピーしたコードはsrc/main.cppに貼り付けます。

GUIの画面遷移が面倒だったらGitHubからコピペすれば良いでしょう。

src/main.cpp
#include <M5EPD.h>

M5EPD_Canvas canvas(&M5.EPD);

void setup()
{
    M5.begin();
    M5.EPD.SetRotation(90);
    M5.EPD.Clear(true);
    M5.RTC.begin();
    canvas.createCanvas(540, 960);
    canvas.setTextSize(3);
    canvas.drawString("Hello World", 45, 350);
    canvas.pushCanvas(0,0,UPDATE_MODE_DU4);
}

void loop()
{

}

image.png

ライブラリが読み込まれなく、エラーとなっている場合はVisual Studio Codeを再起動します。(多分もっといい方法があると思うので、誰か教えてください)

ビルド

コードも書いたのでようやくビルドです。

画面下のチェックボタンをクリックするとビルドが開始します。

SUCCESS と表示されたことを確認します。

デプロイ

ようやくデプロイですね。

M5 PaperをUSBで接続し、画面下の→ボタンをクリックするとビルドが開始します。

SUCCESS と表示されたことを確認します。

M5 Paperに画像が表示されました!やったね!