電子ペーパー名札をつくってみた

# 電子ペーパー名札をつくってみた

はじめまして、ねたか (netaka) です。この記事は[mohikanz Advent Calendar 2018](https://adventar.org/calendars/2950)の13日目です。12日目は、[azukinohiroki](https://adventar.org/users/19725)さんの[AndroidでP2PやるならNearbyを使おう - Qiita](https://qiita.com/hiroki-chi/items/5ee301697ac7da3e6903)でした。あした14日目は[godan09](https://adventar.org/calendars/2950#list-2018-12-14)さんです。

## TL;DR

こんな感じの電子ペーパーの名札をつくりました。
<blockquote class="twitter-tweet" data-lang="en"><p lang="und" dir="ltr"><a href="https://twitter.com/hashtag/%E9%9B%BB%E5%AD%90%E3%83%9A%E3%83%BC%E3%83%91%E3%83%BC%E5%90%8D%E6%9C%AD?src=hash&amp;ref_src=twsrc%5Etfw">#電子ペーパー名札</a> <a href="https://t.co/ySWcB9PHhv">pic.twitter.com/ySWcB9PHhv</a></p>&mdash; ねたか (@netaka) <a href="https://twitter.com/netaka/status/1072884314486886400?ref_src=twsrc%5Etfw">December 12, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


- 解像度は400x300です。
- 黒だけじゃなく赤も表示可能です。
- Raspberry Pi Zero Wで動いてます。
- ちゃんと首掛けできます。
- おもさは130gぐらい。
- 綺麗な字の名札が作れます[^5]。

![使用例](https://qiita-image-store.s3.amazonaws.com/0/58012/e4704469-4c79-8c27-2e92-086fe584dc3f.jpeg)

[^5]: この電子ペーパー名札を作成したきっかけは手書きが超汚かったため。

## どんな電子ペーパー?

購入したのはWaveshareというブランドの4.2inchの電子ペーパーです。解像度は400×300で、赤黒白と3色表示ができます。
[400×300, 4.2inch E-Ink raw display, three-color, SPI interface, without PCB | WFT0420CZ15](https://www.waveshare.com/product/4.2inch-e-paper-b.htm)

リンク先は電子ペーパーディスプレイのモジュールだけです。Raspberry Pi Zero Wと接続したかったので、追加でe-Paper HAT[^3]も必要でした。
[Universal e-Paper Driver HAT, supports various Waveshare SPI e-Paper raw panels](https://www.waveshare.com/e-Paper-Driver-HAT.htm)

[^3]: Hardware Attached on Topのアクロニム。Raspberry Piのピンと適合する基板っぽいもの:thinking:？

注文してみるとディスプレイ、HAT、送料込みで$40.48でした。2018/2/6に支払いをして、2/14には届きました[^1]。
<img width="626" alt="明細" src="https://qiita-image-store.s3.amazonaws.com/0/58012/63f304cd-a10c-ecb0-1a2d-9230e312590d.png">

[^1]: シンガポール発送だったからそんなに時間がかからなかったのかも。

## デモを動かす

### ソフトウェアの準備

このディスプレイモジュールのWikiがあるのでさらっと一読しておきます。デモコードがあるので、さっそく動かしてみます。
[4.2inch e-Paper Module (B) – Waveshare Wiki](https://www.waveshare.com/wiki/4.2inch_e-Paper_Module_(B))

Pythonでディスプレイを制御したかったので、まずPython用に必要なライブラリをいれます。詳細はWikiに記載されています。
https://www.waveshare.com/wiki/Pioneer600#Install_Python_Library

あと忘れずにデモコードもダウンロードしておきましょう。
https://www.waveshare.com/wiki/File:4.2inch-e-paper-module-b-code.7z

### ハードウェアの準備

e-Paper HATはRaspberry Piのピンとぴったし接続できるようになってます。その他、ディスプレイとHATをフラットケーブルで接続します。Raspberry Pi Zero Wへの給電も忘れずに。
<img width="340" alt="Raspberry Pi Zero Wとe-Paper HAT" src="https://qiita-image-store.s3.amazonaws.com/0/58012/2e10ef36-01f3-5bdd-750d-fa858567cff1.jpeg">

### 動作確認

動かしてみましょう。デモコードの7zファイルを展開すると`main.py`ファイルが見つかると思います。

```
pi@raspberrypi:~/demo/RaspberryPi/python2 $ sudo python main.py
```

うまくいくとこんな感じです。Waveshareのロゴが出てきます。
<img width="340" alt="デモ" src="https://qiita-image-store.s3.amazonaws.com/0/58012/af32a046-dd6f-d32a-658e-fb6bc7fe7548.png">



もし、「フォントがない」と怒られたら、適当なものに変えてみてください。
**参考**: [RaspberryPiによる電子ペーパーの制御 – Isaax Camp](https://camp.isaax.io/ja/tips-ja/raspberry-pi/raspberrypi-e-paper)

```
font = ImageFont.truetype('/opt/vc/src/hello_pi/hello_font/Vera.ttf', 24)
```

## 名札っぽくしよう

デモも動いたので名札っぽく自分の名前を表示してみましょう。せっかくの3色の電子ペーパーなので、黒色だけでなく赤色も用意します。黒色用と赤色用の2枚のBitmapファイルを用意します。今回は自分の名前と普段使ってるアイコンを組み合わせます。

- 黒色用Bitmap
![black.bmp](https://qiita-image-store.s3.amazonaws.com/0/58012/cdf3e65d-3b75-70e0-a11c-72ec22984be1.png)
- 赤色用Bitmap
![red.bmp](https://qiita-image-store.s3.amazonaws.com/0/58012/ed1475a8-b69a-0f26-3487-91cf12726eff.png)

**赤色**用画像だけど、黒白のモノクロBitmapファイルを用意してください。
> Because this module can only display two gray level (Only black and white), we need to convert picture to monochrome bitmap before converting it to array. That is, File --> BMP picture --> Monochrome Bitmap.

市販の名札ケースへ逆さに入れると、こんな感じになります。これだけで名前だけでなくアイコンも表示できてオフ会とかで便利[^2]そうです。
![実際にオフ会でつかったとき](https://qiita-image-store.s3.amazonaws.com/0/58012/bf0a0e2f-2cab-c58c-4abb-267a0015fceb.jpeg)

[^2]: 名前よりもアイコンで覚えられがちなイメージ

## 携帯性をよくする

上の写真はモバイルバッテリーでRaspberry Piへ給電してたりしたのでUSBケーブルが見えてます。Raspberry Pi Zero Wへの取り付けもマスキングテープを裏で貼っつけてたりしているので外れやすいし見栄えも良くないです。
![名札の裏側](https://qiita-image-store.s3.amazonaws.com/0/58012/2cbae084-f31e-d1f0-c540-ba85916dab98.jpeg)


9V形の乾電池で給電できるようにします[^4]。あと逸般の誤家庭にある~~買ってから埃かぶってた~~3Dプリンターで適当なケースを適当に作ります。あとはこのケースとディスプレイモジュールをうまい具合に固定します。
![case.jpeg](https://qiita-image-store.s3.amazonaws.com/0/58012/8a9d038d-14a4-b309-58be-a171331e6dbe.jpeg)

[^4]: ちいさいモバイルバッテリーがあるなら、そっちのほうがいいかも。

そして、完成したのがTL;DRの動画です。[はじめにもどる](https://qiita.com/netaka/items/ee45b5afa526f00976e5#tldr)

## おまけ:thinking: 

### 書き換わるのが遅くない？

そういうものらしいです。黒白2色なら4秒っぽいです。
> Note: The refresh rate of this module is slow, and it will flicker for several times during refreshing (about 15s). Please be patient.

### どこかでみたことある？

後で知ったんですが、なんか[似たようなことをしている方](https://blog.builderscon.io/entry/2018/08/09/100000)がいました！たーのしー！

### 海外通販はちょっと

[千石電商オンラインショップ](https://www.sengoku.co.jp/mod/sgk_cart/search.php?maker=WaveShare)で取り扱ってるようです！