LVGL を使う
LVGL は、組み込みデバイス向けのオープンソースグラフィックスライブラリです。ラベル、パネル、バー、レイアウトツールなどの UI コンポーネントがあらかじめ用意されており、すべてのピクセルを手作業で描画することなく、C/C++ で構造化されたインターフェースを構築できます。
このガイドでは、PlatformIO を使ってシンプルな LVGL ePaper ステータスパネル を作成します。サンプルでは reTerminal E1001 をデフォルトターゲットとして使用し、reTerminal E1002、E1003、E1004 用には個別の PlatformIO 環境を用意しています。
このプロジェクトでは、次の要素を持つ静的なダッシュボードを描画します：
- タイトル
- デバイスステータスカード
- ネットワークステータスカード
- デモ用バッテリーカード
ePaper ディスプレイでは、表示されている情報が変化したときだけ画面をリフレッシュすればよいため、このような静的 UI のワークフローは良い出発点になります。
開発環境をセットアップする前に、プロジェクトの結果をすばやくプレビューしたり、基本的なデモファームウェアを試したい場合は、reTerminal E-Series Firmware Hub を開いてください。対応する reTerminal E シリーズデバイスを選択し、ブラウザから直接デモファームウェアを書き込むことができます。
対応ハードウェア
次の reTerminal E シリーズデバイスのいずれかを用意してください。このガイドの PlatformIO プロジェクトでは、デフォルト環境として reTerminal E1001 を使用します。
| reTerminal E1001 | reTerminal E1002 |
|---|---|
 |  |
| 7.5インチ モノクロ ePaper 800 x 480 | 7.3インチ Spectra 6 色 ePaper 800 x 480 |
| reTerminal E1003 | reTerminal E1004 |
|---|---|
 |  |
| 10.3インチ モノクロ ePaper 1872 x 1404 | 13.3インチ Spectra 6 色 ePaper 1200 x 1600 |
プロジェクトの仕組み
このサンプルは、主に次の 2 つの部分で構成されています：
- LVGL がラベル、カード、バーなどの UI オブジェクトを作成します。
- Seeed_GFX が ePaper ディスプレイを初期化し、レンダリングされたピクセルを受け取り、物理パネルをリフレッシュします。
プロジェクトでは、これら 2 つの部分を別々のファイルに分けています：
| ファイル | 目的 |
|---|---|
platformio.ini | PlatformIO のボード、ライブラリ、ビルドフラグ、およびハードウェア環境を定義します。 |
include/driver.h | アクティブなハードウェアターゲットに対して正しい Seeed_GFX ドライバファイルを選択します。 |
include/driver_e1001.h から include/driver_e1004.h まで | 各 reTerminal E シリーズモデルに対する Seeed_GFX のボードとスクリーンの組み合わせを保持します。 |
include/lv_conf.h | LVGL の機能、カラーデプス、フォントを設定します。 |
src/main.cpp | Arduino、Seeed_GFX、LVGL、ディスプレイバッファ、および ePaper のリフレッシュフローを初期化します。 |
src/ui_status_panel.cpp | LVGL ステータスパネルのレイアウトを作成します。 |
ステップ 1: PlatformIO をインストールする
このガイドでは、プロジェクトのワークフローとして PlatformIO を使用します。PlatformIO は、ボード設定、ライブラリ、ソースファイルを 1 つのフォルダにまとめて管理できるため、LVGL プロジェクトのビルドと保守が容易になります。
まだ PlatformIO をインストールしていない場合は、Work with PlatformIO の手順に従ってセットアップし、その後このガイドに戻ってください。
インストール後、Visual Studio Code を開きます。左側のアクティビティバーに PlatformIO のアイコンが表示されているはずです。
ステップ 2: サンプルプロジェクトをダウンロードする
LVGL ePaper ステータスパネルのサンプルは、公式の reTerminal E シリーズリポジトリで提供されています：
リポジトリをコンピュータにダウンロードし、次のフォルダを開きます：
OSHW-reTerminal-Series-E-D/examples/official/LVGLePaperStatusPanel
サンプルプロジェクトには、主に次のファイルが含まれています：
| ファイル | 役割 |
|---|---|
platformio.ini | E1001、E1002、E1003、E1004 用の PlatformIO 環境を定義します。 |
include/driver.h | アクティブなビルド環境に対して正しい ePaper ドライバ設定を選択します。 |
include/lv_conf.h | このデモで使用する LVGL の機能とフォントを設定します。 |
src/main.cpp | ディスプレイ、LVGL、レンダリングバッファ、および ePaper のリフレッシュフローを初期化します。 |
src/ui_status_panel.cpp | ePaper ディスプレイに表示されるステータスパネル UI を作成します。 |
ステップ 3: PlatformIO でプロジェクトを開く
ステップ 1. Visual Studio Code を開きます。
ステップ 2. 左側のアクティビティバーで PlatformIO アイコンをクリックします。
ステップ 3. PIO Home > Open をクリックします。
ステップ 4. Open Project をクリックします。
ステップ 5. LVGLePaperStatusPanel フォルダを選択します。
ステップ 6. PlatformIO がプロジェクトを読み込み、必要なライブラリをインストールするまで待ちます。
ステップ 4: ハードウェア環境を選択する
プロジェクトルートの platformio.ini を開きます。デフォルト環境は reterminal_e1001 です。
[platformio]
default_envs = reterminal_e1001
E1001 の場合は、デフォルト設定のままで構いません。その他のデバイスでは、default_envs を対応する環境に変更します：
| デバイス | PlatformIO 環境 |
|---|---|
| reTerminal E1001 | reterminal_e1001 |
| reTerminal E1002 | reterminal_e1002 |
| reTerminal E1003 | reterminal_e1003 |
| reTerminal E1004 | reterminal_e1004 |
また、default_envs を変更せずに、PlatformIO のターミナルから特定の環境をビルドすることもできます。
ステップ 5: デモをビルドして書き込む
USB ケーブルで reTerminal E シリーズデバイスをコンピュータに接続します。
デフォルトの E1001 用ファームウェアをビルドするには、次を実行します：
pio run
特定のターゲットをビルドするには、-e と環境名を追加します。例えば：
pio run -e reterminal_e1001
ファームウェアをデバイスに書き込むには、次を実行します：
pio run -e reterminal_e1001 --target upload
書き込み後、シリアルモニタを開きます：
pio device monitor -b 115200
デモが正しく起動すると、シリアルモニタには次のように表示されます：
Seeed ePaper LVGL status panel starting.
LVGL status panel rendered.
ePaper ディスプレイが 1 回リフレッシュされ、LVGL ステータスパネルが表示されます。
ステップ 6: LVGL UI をカスタマイズして学ぶ
デモが正常に動作したら、小さな LVGL 学習プロジェクトとして修正を始めることができます。最も重要なファイルは次の 2 つです：
| File | このようにしたいときはここから始める |
|---|---|
src/main.cpp | デバイスステータス、ネットワークステータス、バッテリー残量など、UI に渡す値を変更します。 |
src/ui_status_panel.cpp | 画面タイトル、カードレイアウト、フォント、色、ラベル、LVGL ウィジェットを変更します。 |
表示される値を変更する
src/main.cpp を開き、setup() 内の次の行を探します：
ui_status_panel_set_status("Ready", "Wi-Fi Standby", 76);
この関数は、画面上の 3 つの動的な値を更新します：
| Parameter | 意味 | 例 |
|---|---|---|
status | Device カードに表示されるデバイスステータスのテキスト。 | "Ready" |
network | Network カードに表示されるネットワークステータスのテキスト。 | "Wi-Fi Standby" |
battery_percent | バッテリーバーの値。この関数は 0 から 100 の範囲に収まるようにします。 | 76 |
例えば、次のように変更します：
ui_status_panel_set_status("Online", "Wi-Fi Connected", 95);
その後、もう一度プロジェクトをビルドしてアップロードします：
pio run -e reterminal_e1001 --target upload
タイトルとカード名を変更する
src/ui_status_panel.cpp を開きます。メインタイトルは ui_status_panel_create() 内で作成されています：
lv_label_set_text(title, "Seeed ePaper LVGL Panel");
タイトルテキストを変更できます：
lv_label_set_text(title, "My First LVGL Dashboard");
各カードは create_card() で作成されます。例えば：
lv_obj_t *status_card = create_card(screen, "Device", status_x, status_y, status_w, status_h, lv_palette_main(LV_PALETTE_RED));
lv_obj_t *network_card = create_card(screen, "Network", network_x, network_y, network_w, network_h, lv_palette_main(LV_PALETTE_BLUE));
lv_obj_t *battery_card = create_card(screen, "Battery Demo", battery_x, battery_y, battery_w, battery_h, lv_palette_main(LV_PALETTE_GREEN));
2 番目のパラメータはカードタイトルです。"Device"、"Network"、"Battery Demo" を自分のアプリケーションに合わせて変更できます。
色を変更する
このデモは LVGL のパレットカラーを使用しています：
lv_palette_main(LV_PALETTE_RED)
lv_palette_main(LV_PALETTE_BLUE)
lv_palette_main(LV_PALETTE_GREEN)
reTerminal E1002 や reTerminal E1004 などのカラー ePaper モデルでは、src/main.cpp が LVGL の色を ePaper のカラーパレットにマッピングします。サンプルパレットには、白、黒、赤、黄、緑、青が含まれます。
reTerminal E1001 や reTerminal E1003 などのモノクロ ePaper モデルでは、同じ UI が明るさに基づいて白黒に変換されます。暗い色は黒に、明るい色は白になります。
つまり、4 つすべてのデバイスで同じ LVGL UI コードを使用でき、ディスプレイドライバが選択されたハードウェアに合わせて最終的なピクセルを変換します。
レイアウトを変更する
このデモは、画面サイズを決定するために platformio.ini の EPAPER_LVGL_HOR_RES と EPAPER_LVGL_VER_RES を使用します。src/ui_status_panel.cpp では、これらの値は次の箇所で使用されています：
const int32_t screen_width = EPAPER_LVGL_HOR_RES;
const int32_t screen_height = EPAPER_LVGL_VER_RES;
const bool is_landscape = screen_width >= screen_height;
その後、レイアウトは、より横長の画面には横向きレイアウトを、より縦長の画面には縦向きレイアウトを選択します。このため、同じサンプルが 800 x 480 デバイスと、より大きな ePaper パネルの両方で動作します。
最初の簡単な変更として、スペーシングの値を調整してみましょう：
const int32_t margin = max_i32(32, screen_width / 20);
const int32_t gap = max_i32(20, screen_width / 40);
margin を大きくすると、画面の端の周りにより多くの余白ができます。gap を大きくすると、カード同士の間隔が広くなります。
独自のデータを追加する
このデモのバッテリー値はサンプル UI データであり、画面にはデモ値として表示されます。実際のアプリケーションデータに接続するには、UI 関数をそのままにして、自分の値を渡します：
int battery_percent = 88;
ui_status_panel_set_status("Running", "Wi-Fi Connected", battery_percent);
ePaper プロジェクトでは、実用的なワークフローは次のとおりです：
ステップ 1. アプリケーション内で最新のデータを読み取るか計算します。
ステップ 2. 新しい値を ui_status_panel_set_status() に渡します。
ステップ 3. コンテンツを変更する必要があるときに ePaper ディスプレイをリフレッシュします。
このデモは画面コンテンツが静的なため、setup() 内で 1 回だけ描画します。センサーダッシュボード、カレンダー、ステータスモニタなどのアプリケーションでは、表示されるデータが変化したときに値を更新し、パネルをリフレッシュできます。
リソース
- [Docs] LVGL ドキュメント
- [GitHub] LVGL
- [GitHub] Seeed_GFX ライブラリ
- [GitHub] LVGL ePaper ステータスパネルサンプル
- [Tool] reTerminal E-Series Firmware Hub
- [Wiki] PlatformIO を使う
技術サポート & 製品ディスカッション
弊社製品をお選びいただきありがとうございます。弊社は、製品をできるだけスムーズにご利用いただけるよう、さまざまなサポートを提供しています。お好みやニーズに合わせて選べる、複数のコミュニケーションチャネルをご用意しています。