36
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-02-08

IMG_8402.jpeg

LILYGO T5-4.7インチ E-Paper ディスプレイを使い、天気予報を表示する方法を紹介します。本製品には無線マイコンであるESP32-S3が搭載されているため、パソコンから直接プログラムを書き込むことができます。

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

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

IMG_8416.jpeg

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

IMG_8413.jpeg

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


1. 必要なもの

1.1 ハードウェア

  • LILYGO T5-4.7インチ E-Paper (ESP32-S3搭載)→ 千石電商で購入可能
  • USB-Cケーブル(充電専用ケーブルではなく、データ通信対応のケーブルが必要)
  • PC
  • Wi-Fi環境

1.2 ソフトウェア

  • GitHubリポジトリのダウンロード&解凍
  • VSCode + PlatformIO(ESP32開発用)
  • OpenWeatherMap APIキー

2. OpenWeatherMapのAPIキーを取得

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

OpenWeatherMapの公式サイト にアクセスし、新規登録します。

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

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

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

認証後、APIキーの管理ページ を開きます。

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


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

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

  1. リポジトリのページ を開く
  2. 「Code」ボタンをクリック
  1. 「Download ZIP」 を選択し、PCに保存
  2. ダウンロードしたZIPファイルを解凍し、デスクトップや任意のフォルダ に配置

4. VSCode(Visual Studio Code)のインストール

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

  1. VSCodeの公式サイト からインストーラーをダウンロード

  2. インストーラーを実行し、指示に従ってインストール

  3. VSCodeを起動する

  4. 左側の拡張機能(Extensions)アイコンをクリック
    japan.png

  5. 検索バーに「japan」と入力

  6. 「Japanese Language Pack for Visual Studio Code」を選択し、「インストール」をクリック

  7. VSCodeを再起動すると、日本語表示になる

5. 設定ファイルやプログラムの編集

  • VSCodeを起動し、「エクスプローラー」→「フォルダーを開く」から、先ほど解凍したLilyGo-EPD-4-7-OWM-Weather-Display-webフォルダを選択します。

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

image.png


config.json を編集

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

VSCodeでdata/config.json を開きます。
config.png

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

{
	"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 を使用して開発します。PlatformIOはESP32 などのマイコン向けにコードのビルドや書き込みができる開発環境で、後ほどインストールします。

まずはPlatformIO のプロジェクト設定ファイルであるplatformio.iniを編集します。

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

platformio.iniを開きます。

platformio.png

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

修正後(SPIを追加)

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

102行目を以下のように変更します。

setenv("TZ", "JST-9", 1); // 日本時間(JST = UTC+9)

これにより電子ペーパー上部に表示される時刻表示が日本時間になります。

145行目のwhile (!Serial); があると、PCに接続されていない場合にプログラムが停止することがあるのでコメントアウトします。以下のように// を追加すると、プログラムの実行時に、この行が無視されます。

// while (!Serial);

630行目を以下のように変更します。

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

検索バーに 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

2. PlatformIOのパスを追加

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

ターミナルで以下のコマンドを実行します。

$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にプログラムを書き込む

PlatformIOメニューのPROJECT TASKSt5-4_7-plus_V2GeneralUploadをクリックして、スケッチ(プログラム)をESP32に書き込みます。

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

terminal.png

9.ファイルシステムにファイルを転送する

PlatformIOメニューのPROJECT TASKSt5-4_7-plus_V2PlatformUpload Filesystem Imageをクリックする。

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

10.シリアルモニターで動作確認

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

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

ターミナルで以下のコマンドを実行すると、ESP32のシリアル通信の内容をリアルタイムでモニタリングできます。

platformio device monitor

エラーが出ずにプログラムが実行されれば、天気予報表示の完成です。

11.完成

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

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

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

36
25
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?