LILYGO H716 T5-4.7inch S3 e-paper touch 電子ペーパーの使い方

![IMG_8402.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/4b5ab209-90b1-687e-55c8-454f82907c15.jpeg)

[LILYGO T5-4.7インチ E-Paper ディスプレイ](https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-6KNZ)を使い、**天気予報を表示**する方法を紹介します。本製品には無線マイコンである[ESP32-S3](https://akizukidenshi.com/catalog/g/g117256/)が搭載されているため、パソコンから直接プログラムを書き込むことができます。

960×540のタッチ対応電子ペーパーには、microSDスロットや[Raspberry Pi]()と同じ配置の40ピンコネクターを搭載しています。ただし、使用方法に関する情報が少なく、すべての機能を使いこなすのはハードルが高そうです。

また、裏面には技適のシールが貼られています。


![IMG_8416.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/683c3030-268d-e713-b985-586ae15780f9.jpeg)

本記事では公式のサンプルコードである [Xinyuan-LilyGO/LilyGo-EPD-4-7-OWM-Weather-Display](https://github.com/Xinyuan-LilyGO/LilyGo-EPD-4-7-OWM-Weather-Display/tree/web) を利用し、天気情報を取得・表示する環境を構築します。以下のように、サンプルコードとは思えないほど完成度の高い表示が作成可能です。

![IMG_8413.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/720fee07-dae5-a413-7496-a2ebc7bd52db.jpeg)

天気アイコン、気温、湿度、気圧、風速、風向が表示され、3時間ごとの天気予報も確認できます。日の出と日の入りの時刻が記載され、Wi-Fiの接続状況やバッテリー残量も表示されます。風向はコンパスで示され、気温、気圧、湿度、降水量のデータはグラフで表示されます。これらの情報は定期的に更新され、省電力モードで動作します。  

---

## 1. 必要なもの
### 1.1 ハードウェア
- LILYGO T5-4.7インチ E-Paper (ESP32-S3搭載)→ [千石電商で購入可能](https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-6KNZ)
- USB-Cケーブル（充電専用ケーブルではなく、データ通信対応のケーブルが必要）
- PC
- Wi-Fi環境

### 1.2 ソフトウェア
- [GitHubリポジトリ](https://github.com/Xinyuan-LilyGO/LilyGo-EPD-4-7-OWM-Weather-Display/tree/web)のダウンロード＆解凍
- VSCode + PlatformIO（ESP32開発用）
- OpenWeatherMap APIキー

---
## 2. OpenWeatherMapのAPIキーを取得

天気情報を取得するために、[OpenWeatherMap](https://home.openweathermap.org/users/sign_up) のAPIキーが必要です。OpenWeatherMapは世界中の天気データを提供するAPIサービスで、気温・降水量・風速などの気象情報を取得できるプラットフォームです。APIの呼び出し回数に制限があるものの、基本的な天気データを無料で利用できます。

[OpenWeatherMapの公式サイト](https://home.openweathermap.org/users/sign_up) にアクセスし、新規登録します。

必要な情報を入力し「Creat Account」ボタンをクリックすると、APIの使用目的を選択する画面が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/53cf59fc-6c00-8437-02eb-42981522f891.png" width="50%">

Company（会社）：会社名を入力する欄（個人で使う場合は空欄でもOK）
Purpose（目的）：APIをどの用途で使用するかを選択。私の場合はOther（その他）にしました。

OpenWeatherから確認メールが届くので、「Verify your email」をクリックし、メール認証を行います。

認証後、[APIキーの管理ページ](https://home.openweathermap.org/api_keys) を開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/8dd048ee-e419-adac-95ff-a604c59e4027.png" width="50%">


APIキーをコピーして保管します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/28f72a7d-e6db-58b2-37f7-ac237f1e74f7.png" width="50%">

---
## 3. GitHubリポジトリのダウンロードと解凍

天気予報を表示するためのサンプルコードを、GitHubからPCにダウンロードします。

1. [リポジトリのページ](https://github.com/Xinyuan-LilyGO/LilyGo-EPD-4-7-OWM-Weather-Display/tree/web) を開く
2. **「Code」ボタンをクリック**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/ef2c684b-98a6-a4b6-746f-347883e91cba.png" width="50%">

3. **「Download ZIP」** を選択し、PCに保存
4. ダウンロードしたZIPファイルを解凍し、**デスクトップや任意のフォルダ** に配置

## 4. VSCode（Visual Studio Code）のインストール

LILYGO T5-4.7 S3の開発には、**VSCode** を使用します。

1. [VSCodeの公式サイト](https://code.visualstudio.com/) からインストーラーをダウンロード
2. インストーラーを実行し、指示に従ってインストール
3. VSCodeを起動する
4. 左側の拡張機能（Extensions）アイコンをクリック
![japan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/9bef69cc-da6d-b3a5-7654-41b35572bd12.png)

5. 検索バーに「japan」と入力
6. 「Japanese Language Pack for Visual Studio Code」を選択し、「インストール」をクリック
7. VSCodeを再起動すると、日本語表示になる

## 5. **設定ファイルやプログラムの編集**
   - VSCodeを起動し、「エクスプローラー」→「フォルダーを開く」から、先ほど解凍した`LilyGo-EPD-4-7-OWM-Weather-Display-web`フォルダを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/8669c9dd-f5a7-78d0-41fc-c580edef360a.png" width="50%">

`LilyGo-EPD-4-7-OWM-Weather-Display-web`フォルダが開きます。ここから目的のファイルを開いて編集できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/9af8c8c2-ad5b-3a8a-6693-84e7c1a31285.png)

---
### `config.json` を編集

天気予報を取得するために、Wi-Fi情報やOpenWeatherMapのAPIキー、都市名などを設定します。

VSCodeで`data/config.json` を開きます。
![config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/7d87ea04-abfa-73bf-c5e1-0b173567d630.png)

以下の項目を変更します。

```json
{
	"WLAN": {
		"ssid": "Your wifi ssid",        // ← 使用するWi-FiのSSIDを入力
		"password": "Your wifi password" // ← 使用するWi-Fiのパスワードを入力
	},
	"OpenWeather": {
		"apikey": "Your Open Weather key", // ← OpenWeatherMapのAPIキーを入力
		"server": "api.openweathermap.org",
		"country": "JP",  // ← 国コードを "JP"（日本）に変更
		"city": "Tokyo",  // ← 表示したい都市名（例: "Tokyo"）に変更
		"hemisphere": "north",
		"units": "M"
	},
	"ntp": {
		"server": "0.asia.pool.ntp.org",
		"timezone": ""
	},
	"schedule_power": {
		"on_time": "17:42",
		"off_time": "17:42"
	}
}
```
Wi-Fi接続情報（SSIDとパスワード）を設定し、OpenWeatherMapのAPIキーを入力します。また、天気情報を取得する国コードを「JP」（日本）に変更し、都市名を変更します。

>OpenWeatherMapで利用できる都市名のリストを調べるには、https://openweathermap.org/find にアクセスして、検索バーに都市名を入力すると、その都市名が使えるかどうかがわかります。

Ctrl + S（Macの場合はCmd + S）を押して、編集したファイルの内容を保存します。

---
###  `platformio.ini` を編集
今回はVSCodeの拡張機能 [PlatformIO](https://platformio.org/) を使用して開発します。PlatformIOはESP32 などのマイコン向けにコードのビルドや書き込みができる開発環境で、後ほどインストールします。

まずはPlatformIO のプロジェクト設定ファイルである`platformio.ini`を編集します。
>`platformio.ini`には、使用するマイコンボード、ライブラリ、ビルドオプション、シリアルポートの設定などが記述されています。PlatformIO はこのファイルをもとに、プロジェクトのビルドやアップロードを行います。

`platformio.ini`を開きます。

![platformio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/4996281f-b14b-e8d0-3e18-fc9b4612fb2e.png)

20行目の `lib_deps` に `SPI` を追加します。SPIが無いと、プログラム書き込み時に必要なライブラリが不足し、エラーが発生しました。

#### **修正後**（SPIを追加）
```ini
lib_deps = Wire
           SPI
           https://github.com/Xinyuan-LilyGO/LilyGo-EPD47.git#esp32s3
           bblanchon/ArduinoJson@^6.19.4
```           
---
### `LilyGo-EPD-4-7-OWM-Weather-Display.ino` を編集
天気予報を表示するメインのプログラムである`LilyGo-EPD-4-7-OWM-Weather-Display.ino`を開きます。そのままでは正しく動作しない部分があったため、修正を加えていきます。

![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/40571245-150b-865b-5597-11c364a50ff1.png)

102行目を以下のように変更します。
```cpp
setenv("TZ", "JST-9", 1); // 日本時間（JST = UTC+9）
```
これにより電子ペーパー上部に表示される時刻表示が日本時間になります。

145行目の`while (!Serial);` があると、PCに接続されていない場合にプログラムが停止することがあるのでコメントアウトします。以下のように`//` を追加すると、プログラムの実行時に、この行が無視されます。
```cpp
// while (!Serial);
```
630行目を以下のように変更します。
```cpp
drawString(x + fwidth / 2, y + 30, String(ConvertUnixTime(WxForecast[index].Dt).substring(0, 5)), CENTER);
```
ESP32のTZをJST-9に設定したため、UTC→JSTの変換はlocaltime()に任せるのが正しく、WxConditions[0].Timezoneによる補正を無効化して0とするよう修正しました。これにより、3時間ごとの天気予報の時刻が正しく表示されます。

## 6. PlatformIOのインストール

VSCodeの拡張機能「PlatformIO」をインストールします。

VSCodeの「拡張機能」タブを開きます。

 ![platformioIDE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/d758414d-2d00-5847-397d-c32c08f28cb5.png)
 
検索バーに `PlatformIO` と入力し、**「PlatformIO IDE」** をインストールします。
>platformio.ini が存在するフォルダを開いた状態 で PlatformIO をインストール すると、自動的に platformio.ini を読み込んでプロジェクトとして認識するようになります。

インストール完了後、**VSCodeを再起動**します。

---
## 7. E-PaperをPCに接続する

LILYGO T5-4.7インチ E-PaperをPCに**USB-Cケーブルで接続**します。

接続したら、以下の手順でE-PaperをPCが認識しているかを確認します。

### **1. VSCodeでターミナルを開く**

上部メニューから **[ターミナル] → [新しいターミナル]** を選択。
![pico - 2025-02-09T052845.514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/e0bab769-f3a4-013a-3466-20976f382d68.png)

### **2. PlatformIOのパスを追加**
Windows の環境変数に PlatformIO (`pio`) のパスを追加し、ターミナルで `pio` コマンドが使えるようにします。

ターミナルで以下のコマンドを実行します。
```powershell
$env:Path += ";C:\Users\{ユーザー名}\.platformio\penv\Scripts"
```
※ {ユーザー名} の部分は、ご自身のPCのユーザー名に置き換えてください。

### 3. 接続されているポートを確認
以下のコマンドで、ESP32 がどのポート（COMポート）に接続されているか確認します。

```
pio device list
```
出力例

```
COM4
----
Hardware ID: USB VID:PID=303A:1001 SER=3C:84:XX:XX:XX:XX
Description: USB シリアル デバイス (COM4)
```
COM4 などの ポート番号（Windowsの場合） が表示されていれば接続ができています。

私の環境では、何度かケーブルをつなぎ直して`pio device list`を実行することで認識されることがありました。それでも表示されない場合は、ケーブルが充電専用のものではないかなどを確認しましょう。


## 8. ESP32にプログラムを書き込む

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/2fc35e7f-832c-3fde-05a8-fadd1797bb9f.png" width="50%">

PlatformIOメニューの`PROJECT TASKS` → `t5-4_7-plus_V2` → `General`→ `Upload`をクリックして、スケッチ（プログラム）をESP32に書き込みます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/35773203-6be7-52cc-7c0a-6720aef3c44b.png" width="50%">

ターミナルに以下の表示が出れば書き込み成功です。

![terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/9aeeeae0-5d33-24c2-8427-f7789a55f595.png)

## 9.ファイルシステムにファイルを転送する
PlatformIOメニューの`PROJECT TASKS`→ `t5-4_7-plus_V2` → `Platform` → `Upload Filesystem Image`をクリックする。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817961/b4db7958-a161-a16b-49ed-962d9805961b.png" width="50%">

"Upload Filesystem Image" を実行すると、`data/`フォルダ内のファイル がボードの Flash メモリの特定領域（ファイルシステム領域）に書き込みます。

## 10.シリアルモニターで動作確認
ESP32が正常に動作しているかを確認するため、シリアルモニターを使用します。

 E-Paperを再度PCに接続し直します。

ターミナルで以下のコマンドを実行すると、ESP32のシリアル通信の内容をリアルタイムでモニタリングできます。
```
platformio device monitor
```
エラーが出ずにプログラムが実行されれば、天気予報表示の完成です。

## 11.完成
これで、電子ペーパー天気予報表示のセットアップは完了です。電源をつなぐだけで、自動的に最新の天気情報が表示されるようになります。

プログラムは毎時00分に最新の天気データを取得し、ディスプレイを更新します。消費電力を抑えるため、午前8時から午後11時までの間のみ稼働し、それ以外の時間はスリープモードに入ります。良くできていますね。

サンプルコードでこれほどまでに完成度の高い表示が作れることに驚きました。気になった方は、ぜひお試しください。