M5Paper + PlatformIO + Arduino でHelloWorld
先日ひょんなことで手に入れた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 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からコピペすれば良いでしょう。
#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で接続し、画面下の→ボタンをクリックするとビルドが開始します。
SUCCESS
と表示されたことを確認します。
M5 Paperに画像が表示されました!やったね!
Discussion