LilyGo T-Wristband にQRコードを表示してみる

前回の記事の続きです。

Hello world 表示させるだけで終わってしまうのは勿体ないと感じたので Twitter と GitHub の QR コードを表示してみました。

勉強会に参加すると名刺交換することがあると思いますが、僕は不必要に名刺をバラ撒きたくない人なので、腕に表示した QR コードを共有して名刺代わりに使いたいと思い制作しました。

自分のポートフォリオがある人はそのサイトへの QR コードを表示してみると見てもらえる機会が増えるかもしれません。

ではさっそく作り方の解説をしていきます。

T-wristband に画像を表示する方法

まず画面(LCD)に画像を表示させる方法を調べます。

T-wristbandに使用されているのは ST7735 という TFT LCD です。これは TFT_eSPI というライブラリを使用することで簡単に画像を表示できます。

TFT_eSPI には pushImage 関数があり、この関数の第5引数に画像のHEX値の配列を渡すと、任意の画像を表示させることができます。

/***************************************************************************************
** Function name:           pushImage
** Description:             plot 16 bit colour sprite or image onto TFT
***************************************************************************************/
void TFT_eSPI::pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data) {
...

画像の表示方法が分かったので、次に画面の解像度を調べます。 TFT_eSPI の width と height を実行すると、横幅 80px、縦幅 160px であることが確認できます。

TFT_eSPI tft = TFT_eSPI();
tft.width(); // 80px
tft.height(); // 160px

正方形の画像を画面に2つ表示させたいときは、サイズが80×80の画像を2つ用意すればよいことが分かります。

16bitカラー画像のpixel配列を作る

pushImage 関数の第5引数が uint16_t のポインタになっているため、16bitカラー画像のpixel配列を用意します。

大抵の画像は 16bit (65,536色)以上の色で表現されているため、一度減色してからpixel配列に変換します。僕は LCD Image Converter というソフトウェアを使って変換しました。

変換手順

LCD Image Converter を起動して、Image > Import で変換したい画像を選択します。
Options > Conversion > Imageタブを選択して、設定を Preset: Color R5G6B5、Block size: 16bit に変更します。
Show Preview を選択すると 16bitカラー画像のpixel配列が表示されます。