春なので冬眠中のESP32とTFTでフォトカレンダーを作ろう

# はじめに

休眠中のTFTで何か実用的なモノをと思ったのでフォトカレンダーを作ってみた。できるだけ配線はシンプルに。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/1e9f0f79-e548-4876-a1b7-7ffd1275129e.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/f0404374-e064-4db8-926a-0321972c55b6.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/70a26ed7-1034-4562-9481-870d329133ec.png" width=40%>
<br>(※抵抗や赤黒線は無視して。今回は未使用なので。)<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/5c7fbf30-0ef3-4be2-8c4a-fed97140e4e4.png" width=40%>
<br>アクリル板で固定して完成

# ESP32
使用したESP32。
- [ESP32-DevKitC V2](https://akizukidenshi.com/catalog/g/g111819/)
- [Seeed Studio XIAO ESP32C6](https://akizukidenshi.com/catalog/g/g129481/)

# TFT
使用したTFT。
- [ILI9488 480x320 (Amazon)](https://www.amazon.co.jp/s?k=ILI9488+480x32) 2,000円ぐらい
- [ST7789 240x240 (Amazon)](https://www.amazon.co.jp/s?k=ST7789+240x240) 1,000円ぐらい
あと、「ILI9341 240x320」 と 「ST7735S 128x128」 があるので、様子をみてそのうち追加するかも。
だいぶ昔に買ったので詳細は不明。

ST7789 は小さいので、カレンダー表示はなく日付曜日のみ表示。

# 配線
シンプル配線。ブレットボードにワイヤーだらけって美しくないので。御覧のとおり、デフォルトSPIピンは無視していますので速度とかは度外視。今回の用途的に問題ないと思います。

## ILI9488 <=> ESP32-DevKitC

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/c4b9c299-26b2-4423-b18c-b680e3f8930a.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/a91fcd5a-0a5d-4b08-bf83-a81c6d91853c.png" width=40%>
<br>※VCC、RESET、LCD は 5V に繋げる。写真では見えないが、TFTの下を通っている。RESETはGPIO14に繋げた方がいいかも。

## ST7789 <=> ESP32C6
画像のようにピンヘッダを **裏付け** にすると ワイヤーレス！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/c4401776-02ff-4b79-b73c-109b7bfe0dbf.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/b8d02889-f451-4948-aac9-35b47919f4c9.png" width=40%>
<br>(※抵抗や赤黒線はバッテリ駆動用のモノ。今回は未使用なので無視。)

# 環境
- Windows10
- VSCode 1.99.3
- ArduinoIDE2 2.3.6
- PlatformIO
- GoogleDrive

## ライブラリ
- bblanchon/ArduinoJson@^7.4.1
- lovyan03/LovyanGFX@^1.2.0

# 仕様
- 描画は [LovyanGFX](https://github.com/lovyan03/LovyanGFX) を使用
- 画像データは、GoogleDrive のフォルダから取得
- 画像データは、JPGファイル 100個まで50KB/ファイル以下、幅高さの制限は無し（縮小される）
- 画像データが横長、縦長でカレンダーの配置を変更
- 画像データはランダム表示。10分おきに更新
- GoogleDriveのアクセストークンは初回起動時取得しSPIFFSへ保存
- 祝日は[ここ](https://national-holidays.jp/about.html)より取得


# GoogleDrive
適当にGoogleDriveにフォルダを作って、JPGファイルをアップロードする。
フォルダの ```folderId``` を以下の箇所に記述。URLの以下の部分。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/755ea61e-b881-4024-ad86-ff3d71148955.png" width=40%>
※JPGファイル は 100個まで。50KB以下。

## アクセス権
GoogleDriveから画像データを取得するには、アクセス権の設定が必要。以下を参照すると分かると思います。頑張って```client_id``` と ```client_secret``` を用意してください。

https://qiita.com/MypaceEngine/items/29940f509f755726e482

https://qiita.com/BlueWindows/items/d149c436ea03672a4348


```
#define FOLDER_ID "zzzzzzzzzzzzzzzz" // 画像データ FOLDER_ID
```
## 背景画像
背景画像は480x320を用意してGoogleDriveにアップしてfileIdを以下の箇所のところに記述。fileIdは、GoogleDriveで対象ファイルを右クリック＞アプリで開く＞新しいタブで開く＞で表示されたURLにある。

今回私が使った画像を置いておく。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/48dbab86-d63f-4d98-9644-51081bfb7aa9.png" width=10%>COLOR_BACKGROUND_CAL
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/25b15b31-9c04-41fe-9dad-0b9a9e5d1ed7.png" width=10%>COLOR_BACKGROUND_IMG

```cpp
#define COLOR_BACKGROUND_CAL "xxxxxxxxxxxxxxxxxxxx" // 背景画像のFILE_ID 480x320
#define COLOR_BACKGROUND_IMG "yyyyyyyyyyyyyyyyyyyy" // 背景画像のFILE_ID 480x320
```

## GoogleDriveの認証とアクセストークン
初回起動時にGoogleDriveのリフレッシュトークン＆アクセストークンを取得する。

初回起動時にシリアルモニターで以下の手順で認証をする。
1.以下のような表示になるので ```client_id```を入力する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/8601e54c-b25c-4893-abe0-8649c833c80e.png" width=40%>
2.```https://accounts.google.com/o/oauth2/auth?client_id=...```が表示されるのこのURLをコピーしてブラウザで表示する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/fcf688a4-75c8-437b-91b8-9dea62a7d255.png" width=50%>
3.ブラウザが以下のような画面になるので、自分のアカウントを選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/5cd80417-540f-4065-b68e-97ab89e31fe5.png" width=40%>
4.続行
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/b5e5eff2-c9a5-4a07-b5c1-a65693c2a13b.png" width=40%>
5.認証コードをコピーする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/e817fe1d-7839-416b-8e42-31f37925f65b.png" width=40%>
6.シリアルモニターに戻って、コピーした認証コードをペースト
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/5f7a244a-2923-4371-aa4f-f954406094e4.png" width=40%>
7.さらに```client_secret```を入力
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/99d49269-84f5-47ab-a1a1-ae43470185b0.png" width=40%>
8.以下のようになればOK
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/8314359f-6b91-4fcb-a87e-53b6f6929137.png" width=40%>

```client_id```、リフレッシュトークン などは SPIFFSに保存されるので次回以降は入力不要。

# ソース
## ArduinoIDE2
ArduinoIDE2のコンパイルは10分ぐらい掛かる。
https://github.com/nori-dev-akg/ESP32-calendar-ArduinoIDE
## PlatformIO
PlatformIO のコンパイルは1分ぐらい。
https://github.com/nori-dev-akg/ESP32-calendar

# 実用的に
ST7789の方だけ、アクリル板にネジ止め。配線はブレッドボードからジャンパーピンに変えただけ。半田は使っておらず、ESP32C6は固定せずジャンパーピンでST7789にくっついているだけ。ジャンパーピンは取れやすいのでポリミドで一応固定。写真は分かりやすいように透明のままにしておいたけど、なにかでマスクて液晶以外を隠した方がおしゃれだと思う。そのうちやる。
ILI9488の方は、アクリル板加工したら力尽きたので今度またやる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/32ab32dc-17bc-47a0-b9be-e58113a0eb93.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/3ea070ff-7d37-4190-b610-0b42a27fefdb.png" width=35%>

# おわりに
ソースはPlatformIOで開発した。配布用にArduinoIDE用.inoを作ったけど初回コンパイルに10分掛かるのでげんなりした。
ちょっとコジャレたものができたの公開した。ESP32C6は前に使ったものでバッテリ駆動用線が付いてたりするので新しいもの買おうと思います。
今回のポイントはピンヘッダを裏付けしてデフォルトSPIピンを無視して並びのいいピンを使えたことで、半田レスでできた。LI9488の方もできたら追記すること。