🗒

M5Paper + PlatformIO + Arduino でHelloWorld

2021/04/03に公開

Arduino

m5paper

PlatformIO

tech

先日ひょんなことで手に入れた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を起動します。

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

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

PlatformIO プロジェクトの作成

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

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

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

Name: （任意の名前）
Board: M5Stack Fire
Framework: Arduino

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

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

ライブラリの追加

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

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

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

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からコピペします。
まずは、コピペ元のソースを開きます。

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

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()
{

}

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

ビルド

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

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

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

デプロイ

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

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