M5Paper名刺の作り方[M5Unified版]

M5Stackの電子ペーパー基板、M5PaperやM5PaperS3を使って名刺を作る方法はいろいろありますが、M5Unifiedを使った方法が見つけられなかったのでまとめておきます。

初めに注意喚起です

M5PaperS3ではQC2.0/QC3.0対応の充電器は使用しないようお願いします。 PaperS3 ソフトウェアのQC3.0/2.0プロトコルのタイミングの問題により、高電圧を供給し、デバイスを損傷し、異常な発熱や異臭が発生する可能性があります。
現在、ファームウェア等の修正で解決ができないか確認を進めています。

もし、異常な発熱や異臭を感じたら直ちに使用を停止してください。壊れてしまっている場合、初期不良として交換対応いたします。
「ご注文ありがとうございます」のメールの返信、もしくはお問い合わせフォーム（https://www.switch-science.com/pages/inquiry）よりご連絡ください。

作った環境

• M5Paper V1.1 (おそらく1.0でも同じ) と M5PaperS3
• Arduino IDE 2.x (使ったのは2.3.4)
• M5Unified 0.2.2
• Mac mini M1 / macOS Sequoia 15.2

やり方

画像の用意

960×540pixelの画像を用意します。カラーでもM5Unifiled(というかM5GFX)がいい感じに減色して白黒にしてくれますが、確実なのは自分でやっとくことなので白黒画像を用意したほうがよいでしょう。ファイルサイズも小さくなります。グレースケールではなく白黒2値画像がよいです。白と黒以外はディザがかかってザラザラになるので、そんなもんだと思いましょう。今回画像フォーマットはPNGにしましたが、JPEGでも大丈夫です。ここではPNG画像を作成して名前をnamecard.pngとしました。

今回用意した画像

画像をヘッダファイル化

画像をM5Unifiedで表示するためには何らかの方法でM5Paperに入れないといけないわけですが、より簡単な方法は?と詳しい人に聞いたところ画像をヘッダファイル化して読み込ませる事だということだったので、今回はそうすることにしました。他にはmicroSDに入れておく、SPIFFSに書き込んでおくなどがありますがこの記事では触れません(どちらの場合でもM5Unifiedで表示できるようです)。

ヘッダファイル化するにはxxdというコマンドを使います。ターミナルを開いて画像があるディレクトリに移動し、

xxd -i namecard.png > namecard.h

と入力します。最後にエンターを忘れずに。

-iを付けることによりC言語のインクルード形式になります。そのままだと標準出力(ようは画面)に出力されるので、「> ファイル名」を後に付けてファイルにリダイレクトします。

なお、このヘッダファイルの1行目にファイル名が配列の名前として入っているので、もし「namecard_png」になっていなかったら修正しておいてください。

Arduino IDEを起動

今作ったnamecard.hはおいといて、Arduino IDEを起動して[ファイル]-[新規スケッチ]を選んで空のスケッチを作り、以下のスケッチで上書きします。

#include <epdiy.h> // M5PaperS3のみ必要(M5Paperではあってもなくても問題なし)
#include <M5Unified.h>
#include "namecard.h"

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);          // ディスプレイを90°回転させる
  M5.Lcd.setRotation(1);  // 1で90度回転 // 画像描画用のバッファを用意
  M5.Lcd.startWrite();    // PNGデータを描画 (x, y座標は適宜調整してください)
  M5.Lcd.drawPng(namecard_png, sizeof(namecard_png), 0, 0);
  M5.Lcd.endWrite();
}
void loop() {
  // put your main code here, to run repeatedly:
}

loop()の中身は空で問題ないです。上書きできたら[ファイル]-[名前を付けて保存]で保存します。その後[スケッチ]-[スケッチフォルダを表示]でフォルダをFinderで開きます。

Finderでスケッチのフォルダが開いたら、そこにさっき作ったnamecard.hをコピーします。

コピーできたら、一度Arduino IDEを終了してまた起動します。なにやってんだよと思われるかもしれませんが、こうすると先ほどのnamecard.hがスケッチと一緒に開くのです。

コンパイル&書き込み

ここまできたら後はコンパイルして書き込むだけです。おつかれさまでした。

注意点

M5PaperS3は発売されたばかりでノウハウがたまっていないので、ここまで来るのに少し苦労しました。M5PaperS3 Program Compilation and Burningのページのとおりやればいいんですが、EPDiyのインストール位置を間違えていたり、esp32ボードライブラリを3.0.7で止めておくのを読み逃していて最新版を入れてコンパイルエラーになってしまったりしました。

EPDiyはArduinoのスケッチが入っているフォルダにあるlibrariesに入れればOKでした。

Windowsでヘッダファイルを作る方法

Windowsで画像をヘッダファイルに変換する方法を探してみたところ、なにもインストールしていない素のWindowsでやろうとするとPowerShellのスクリプトがいいかなと思ったので作りました。以下のスクリプトをbin2head.ps1という名前で保存してnamecard.pngも同じフォルダに置いて、powershell上で

.\bin2head.ps1 -i "namecard.png" -o "namecard.h" -a "namecard_png"

と入力すると、namecard.hが生成できます。

param(
    [string]$i = "input.bin", # 入力ファイル
    [string]$o = "output.h",  # 出力ファイル
    [string]$a = "data"       # 配列名
)

# フルパスを生成（カレントディレクトリを基準にする）
$i = if ([System.IO.Path]::IsPathRooted($i)) { $i } else { Join-Path -Path $PWD -ChildPath $i }
$o = if ([System.IO.Path]::IsPathRooted($o)) { $o } else { Join-Path -Path $PWD -ChildPath $o }

# 入力ファイルが存在するか確認
if (-Not (Test-Path $i)) {
    Write-Error "File not found: $i"
    exit
}

# バイナリデータを読み込み
$binaryData = [System.IO.File]::ReadAllBytes($i)

# 16進数データを生成し、16ワードごとに改行
$hexArray = $binaryData | ForEach-Object { "0x{0:X2}" -f $_ }
$hexData = ""
for ($index = 0; $index -lt $hexArray.Count; $index += 16) {
    $line = $hexArray[$index..([Math]::Min($index + 15, $hexArray.Count - 1))] -join ", "
    if ($index + 16 -lt $hexArray.Count) {
        $hexData += "    $line,`n"
    } else {
        $hexData += "    $line`n"
    }
}

# ヘッダーファイルの内容を生成
$output = @"
unsigned char $a[] = {
$hexData};
"@

# 出力ファイルに書き込み
$output | Set-Content -Encoding Ascii $o

Write-Host "Cヘッダファイルに変換されました: $o"

なお、ChatGPT 4o miniが使える環境なら、画像ファイルを添付してこのプロンプトでヘッダファイルが生成できることを確認しています。

このバイナリデータをC言語のヘッダファイル形式に変換してください。配列名はnamecard_pngで、変数の型はunsigned charでお願いします

最後に

以上、M5Unifiedを使ってM5Paper/PaperS3に一枚絵を出す方法の解説でした。ここでは一枚絵を出して終わりですが、M5Unifiedを使っているのでここから自分なりの表示を追加することも可能だと思います。

電子ペーパー基板はロマンのあるデバイスだと思うので、ぜひいろいろな用途で使ってみてください！