Web開発
ウェザーマンがいるので、ニュースも教えてくれる
So I have a weatherman, which also tells me the news (dexteroot.net)
要約
投稿者は、夏の暑さ対策として家の温度を下げる方法を模索しており、そのために温度と湿度のデータを収集し始めました。同時に、ソーシャルメディアのアルゴリズムによるコンテンツ推薦を減らす試みも行っています。この目的のために、ESP32チップを搭載したT5 e-Paperディスプレイモジュールを再利用し、天気、AQI、Todoリスト、Hacker Newsのヘッドライン、読書進捗、日時などの情報を表示するカスタムデバイスを構築しました。Claude Codeを活用して、HTTPサーバーからJSON形式でデータを取得し、ESP32でレンダリングするシステムを開発しました。UIのレイアウト調整や、ESP32の省電力機能、エラーハンドリングなどの課題についても触れられています。
全文翻訳
私の地域では夏は非常に乾燥し、暑く、耐え難いほどです。そのため、これらすべてから逃れるために、家の温度を下げるためのいくつかの異なる対策を試したいと思いました。そのための良い出発点は、ベースラインを確立し、標準偏差を見つけることだと考えました。これを行うには、一定期間、家の温度と湿度を観測する必要があることに気づきました。同時に、ソーシャルメディア、特にYouTube、Instagram、Redditのアルゴリズムによって推薦されるコンテンツの量を減らそうとしています。アルゴリズムが比較的透明で、好きな著者のRSSフィードがあるHacker Newsは、消費するコンテンツを管理するための良い出発点だと思ったので、minifluxを設定し、それはうまくいっています。ただ、HNで定期的に登場する最先端の情報をいくつか見逃しがちです。特にAI/LLMのものです。また、望遠鏡で観測できるかどうかを判断するために、月による特定の星や惑星の食や日食などの天文現象にも興味があります。これは、家の周りの空気の質を知ることへの関心とも関連しています。これらのことを考えているうちに、部屋の隅にある電子機器のバスケットに、数年前から埃をかぶっているe-Paperディスプレイがあることに気づきました。ある晴れた日、Claude Codeを使ってついにそれを使って何かを構築し、上記の情報を提供する静的なディスプレイとして使用することにしました。数年前に、STM32/MC60で組み込みプログラミングを行うプロジェクトに取り組んでいたときに、hubtronics.inで購入しました。LILYGOのT5 e-Paperモジュールです。ESP32チップが統合されており、Wi-FiとBluetoothをサポートしています。
コンポーネント
LILYGO T5 4.7" e-Paper SoC ESP32、デュアルコアXtensa LX6 @ 240 MHz
ワイヤレス Wi-Fi 2.4 GHz (802.11 b/g/n)、Bluetooth 4.2 + BLE
メモリ 520 KB SRAM · 8 MB PSRAM · 16 MB flash
ディスプレイ 4.7" e-Paper · 960 × 540 · 16階調グレースケール (ED047TC1)
その他 USB-C、Li-Poコネクタ、RTC、約170 µAのスリープ電流
ユーザーインターフェース
次に、このデータをディスプレイにどのように投影するかという問題がありました。コンテンツの構造、形式、そして最も注意を引くべき部分は何か。
最初の試み
私は非常に構造化されていない方法で始め、すぐに不意を突かれました。レイアウトに全く注意を払わず、すべてを左揃えの単一のテキストの塊として印刷してしまいました。それは非常に醜く、写真も撮りませんでした。
2回目の試み
シンプルなデザインから始めることにしました。外部APIからすべてのフィードを収集し、HTTP経由でJSONとして提供するHTTPサーバーで構成されていました。このJSONは、固定されたスキーマ/契約でESP32によってレンダリングされます。ESP32は、サーバーへのAPI呼び出しが成功した後、定期的に画面をリフレッシュします。次に、Claudeに2x3(高さx幅)のグリッドを提案するように促したところ、すぐに十分なレンダリングを作成してくれました。その後、最も関連性の高い情報が大きく、簡潔で、注意を引きやすいように、注意を引く部分を作成するように促しました。一番上の行には天気、Todo、AQI +統計が表示されます。一番下の行にはHN、読書、日時が表示されます。これはうまくいきましたが、HNの320pxのセルはヘッドラインには窮屈すぎました。また、日時と読書は、完全なセルを正当化するには薄すぎました。そこで、右下の2つのセルを結合して、幅広のHNゾーンを作成することにしました。ToDo +読書もトップセンターのセルに統合しました。市場は右上、AQI +月は左下に配置されます。日時と日の出・日の入りは、幅広のHNゾーンの下部に配置されます。フォントも調整する必要がありました。OpenSansから始め、その後Montserratに移行し、サイズも変更しました。画像アセットからすべてのプリミティブに移行し、タイトルが大文字で下線が引かれているなどのいくつかのイディオムも追加しました。
ネットワークアーキテクチャ
UIをイテレーションしている間、ESP32ファームウェアにはUIをレンダリングするために使用される静的JSONをフラッシュしていました。今度は、Wi-Fi/Bluetooth経由でESP32を配線して、サーバーからワイヤレスでデータを取得できるようにする必要がありました。サーバーで静的JSONを提供するClojureのサーバーをClaudeに実装するように依頼しました。その後、mDNSの実験を始め、ESPmDNSを使用して解決を試みました。Claudeを使ってESPがmDNSホスト名を解決できない理由をデバッグするために何度かイテレーションしましたが、全く動作しませんでした。最終的には諦めました。この時点ではまだ正常に動作しており、ESP32はサーバーからJSONを取得してレンダリングできました。しかし、いくつかの問題がありました。ESP32をレンダリング完了後にスリープさせ、10分後に更新されたフィードを取得するためにウェイクアップするように設定すると、全くウェイクアップしませんでした。サーバーでフェッチに失敗した場合、最後の正常な値をサービスするのではなく、サービスを停止してしまいました。また、いくつかの機能を追加したいと考えていました。
センサーを使用した室内空気質
TODO/読書リストの統合
データが変更されていない場合にe-Paperの更新をスキップするための変更検出。
これらの機能については、今後のブログ記事で取り上げます。
ディスプレイは以下のようになります。
お読みいただきありがとうございます!