電子ペーパー掲示板 - Puppeteer と Sharp 編
電子ペーパーに表示するには画像を準備すればいいということがわかりました。
画像の作り方についての一案です。
画像の準備
どうする？
天気予報の画像をどうやって作成するか？
HTML で画面を作れそうだけどそれを画像に変換できる？
Puppeteer という Node のパッケージでできそうです。
Puppeteer | Puppeteer
※注記
以降の作業は別ホストの Docker 上で行いました。
Raspberry PI 上で行うのとは異なるかもしれません。
スクリーンショット取得
Puppeteer でやることをざっくり説明します。
Puppeteer をインストールすると Chromium ブラウザもインストールされます。
Chromium を使って内部的にページを表示します。
div などの各要素を id や class を使って指定します。
そして指定した要素のスクリーンショットが取れます。
その前に Requirements
実行してみるとうまくいきません。
実は必要なライブラリが大量にあります。
System requirements | Puppeteer
僕は、node:lts-bookworm という Docker イメージをベースにしていました。
上記のページからたどった以下のページの Debian 12 (Bookworm) にあるライブラリを全部入れました。
dist_package_versions.json
インストール用に書き写さなくてもいいように dockerfile を置いておきます。参考まで。
ついでに、後で必要になるフォントもインストールしています。
FROM node:lts-bookworm
# 必要なライブラリをインストール
RUN apt update && apt install -y \
libasound2 \
libatk-bridge2.0-0 \
libatk1.0-0 \
libatspi2.0-0 \
libc6 \
libcairo2 \
libcups2 \
libdbus-1-3 \
libdrm2 \
libexpat1 \
libgbm1 \
libglib2.0-0 \
libnspr4 \
libnss3 \
libpango-1.0-0 \
libpangocairo-1.0-0 \
libstdc++6 \
libudev1 \
libuuid1 \
libx11-6 \
libx11-xcb1 \
libxcb-dri3-0 \
libxcb1 \
libxcomposite1 \
libxcursor1 \
libxdamage1 \
libxext6 \
libxfixes3 \
libxi6 \
libxkbcommon0 \
libxrandr2 \
libxrender1 \
libxshmfence1 \
libxss1 \
libxtst6 \
fonts-noto-cjk \
&& apt clean && rm -rf /var/lib/apt/lists/*
# 作業ディレクトリ
WORKDIR /app
# puppeteerとsharpをインストール
RUN npm install puppeteer sharp
COPY . .
取得画像の調整
puppeteer で画像自体は作成できました。
電子ペーパーに表示するのに少し調整が必要です。
調整は sharp パッケージを使って行います。
High performance Node.js image processing | sharp
await sharp('original.png')
.threshold(200)
.resize(400, 300, {
fit: 'contain',
background: { r: 255, g: 255, b: 255, alpha: 1 }
})
.toFile('display.png');
以下のような調整を行っています。
- 画像の二値化（必要なら）
- 電子ペーパーの画面サイズが 400 x 300 なので縦横比を保持したままリサイズ
peppeteer で作成した original.png という画像を sharp で処理して display.png というファイルに出力しています。
display.png ファイルを python スクリプトで電子ペーパーに書き込みます。 （参考：電子ペーパー掲示板 - 電子ペーパー 編）
最後に
一連の処理を cron で更新するようにしました。
電子ペーパー表示は面白かったので、次は絵画表示なんかを目論んでいます。
どんな仕組みにしようかと妄想するだけであっという間に１日が終わっています。
以下の記事もどうぞ。