EEZ Studio を使う

このガイドでは、ビジュアルデザインツール EEZ Studio を使ってプロフェッショナルなユーザーインターフェースを設計し、LVGL コードを生成し、それを Arduino IDE 経由で Seeed の ePaper 製品にデプロイする手順を説明します。フローはサポートされているすべてのボードで同じで、異なるのはディスプレイ解像度とドライバ設定用の定数だけです。これらの違いはタブで示します。
対応ハードウェア
| reTerminal E1001 / E1002 / E1003 / E1004 | XIAO ePaper Display Board (ESP32-S3) – EE04 |
|---|---|
![]() | ![]() |
| 7.5インチ モノクロ / 7.3インチ Spectra 6 / 10.3インチ モノクロ / 13.3インチ Spectra 6 | ユニバーサルドライバ — 24ピンまたは 50ピンの Seeed ePaper スクリーンのいずれとも組み合わせ可能 |
EEZ Studio とは?
EEZ Studio は、もともと計測・測定機器や組み込み機器向けに作られた、最新のビジュアルプログラミングおよび UI デザイン環境です。ドラッグ&ドロップによる GUI デザイン、スクリプト、デバイス統合ツールを組み合わせることで、開発者、エンジニア、メイカーが、ゼロから作り直すことなくプロフェッショナルなインターフェースを素早く作成できます。
要するに、EEZ Studio はハードウェアとソフトウェアの橋渡しを行い、ユーザー体験の設計、プロトタイピング、デプロイをより効率的に行えるようにします。
EEZ Studio を使う理由
- ビジュアルインターフェース設計 — WYSIWYG エディタで複雑な UI を作成。
- 高速プロトタイピング — デザインアイデアを素早くテストして検証。
- クロスプラットフォーム — 複数の OS や組み込みターゲットで動作するアプリを構築。
- ハードウェア統合 — 計測器、IoT デバイス、カスタムボードに直接接続。
- オープンソース — コミュニティ主導のツールセットで、プレミアムサポートも選択可能。
EEZ Studio と SquareLine Studio の比較
どちらも GUI デザインツールですが、対象とするユーザー層が少し異なります:
| 項目 | EEZ Studio | SquareLine Studio |
|---|---|---|
| 主な用途 | 計測・測定機器、組み込みシステム、ハードウェア/ソフトウェア統合 | 組み込み GUI、特に LVGL を用いたもの |
| 対象ユーザー | エンジニア、プロダクト開発者、メイカー、計測器/試験機器の設計者 | 組み込み UI 開発者、ホビイスト、IoT プロダクトデザイナー |
| ハードウェア統合 | 計測器、測定デバイス、自動化機器との直接統合 | UI 生成に特化し、外部デバイス統合は少なめ |
| オープンソース | コミュニティ主導で透明性が高く拡張可能(プレミアムサポートあり) | クローズドソースの商用製品でライセンス制 |
| ワークフロー | 1つの環境でプロトタイプ作成、シミュレーション、実機制御まで実行 | 主に組み込みプロジェクトにコンパイルするための UI コードを生成 |
ステップ 1: EEZ Studio をインストールする
公式サイトから、お使いのオペレーティングシステム向けの EEZ Studio をダウンロードします。


ステップ 2: LVGL プロジェクトを作成する
EEZ Studio のインターフェース上部で CREATE をクリックします。左側で LVGL テンプレートを選択します:
- Name — プロジェクト名を付けます(この記事では
EEZ_UIを使用します)。 - LVGL Version — ドロップダウンから
9.xを選択します。 - Location — プロジェクトファイルの保存場所を選択します。

プロジェクト設定
ツールバーの ⚙️ アイコンをクリックして Project Settings を開きます。
General → Build の下で:
- LVGL include:
lvgl.hと入力し、生成されたコードがビルド時に正しく LVGL を参照できるようにします。

General → Display の下で、使用するハードウェアに合わせて解像度を設定します:
- reTerminal E1001 / E1002
- EE04 + 5.83" mono
- Display width: 800
- Display height: 480
(E1001 の 7.5インチ モノクロと E1002 の 7.3インチ Spectra 6 は、どちらも 800×480 の解像度を共有しています。)
- Display width: 648
- Display height: 480
(値は、EE04 に接続している Seeed ePaper スクリーンに合わせてください。以下の例では、5.83インチ 648×480 モノクロスクリーンを使用しています。)

ステップ 3: UI をデザインする
UI デザインはユーザー体験を直接左右します。EEZ Studio では、コンポーネントをドラッグ&ドロップしてインターフェースを素早く組み立て、Styles、Fonts、Bitmaps、Themes、Groups を使って見た目を制御できます。
おすすめのオンラインリソース:
- Coolors — カラーパレットジェネレーター
- PeisekA — カラーチャート
- iconfont — アイコンライブラリ
- Google Fonts — 無料フォント
右側のサイドバー:

- Styles — インターフェース要素を統一・再利用するための視覚属性。
- Bitmaps — 背景、アイコン、ロゴ。
- Fonts — テキスト描画と多言語対応。
- Themes — ライト/ダークなどのトップレベルスタイル。
- Groups — レイアウト用のヘルパー。
レイアウト例(Hello World + Panel + Image + Line + Label)
このチュートリアルでは、次の 5 つのコンポーネントからなるシンプルなホームページを作成します:
- Panel
- Label
- Line
- Checkbox
- Image

ステップ 1. キャンバスの背景色を変更します — キャンバスを選択し、Color を有効にして、16進カラー値を選びます。

ステップ 2. Panel をキャンバスにドラッグし、幅と高さを調整して、色を選択します。

ステップ 3. 右側の Bitmaps パネルからビットマップを追加して名前を付け、Image ウィジェットをキャンバスにドラッグして、ビットマップをバインドします。



ステップ 4. Visualiser グループから Line を追加し、その Points を設定します。

ステップ 5. Label を追加して色を選択し、右側の Fonts パネルからフォントを追加します。



ステップ 4: コードを生成する
デザインが完了したら:
- 保存 — OPEN の横にあるフロッピーディスクアイコンをクリックします。
- プレビュー — Run をクリックしてシミュレータを起動し、UI をプレビューします。
- コンパイル/ビルド — ✓ アイコンをクリックしてエラーをチェックし、その後レンチアイコンをクリックして UI コード、画像データ、フォントデータを生成します。

緑色の Build successful メッセージが表示されれば、コード生成が完了したことを示します。出力はプロジェクトの src/ui フォルダに保存されます(必要であれば src/EEZ_UI にリネームしても構いません)。
ステップ 5: Arduino IDE をセットアップする
EEZ Studio の出力を Seeed ePaper デバイスに書き込むには、ESP32 対応の Arduino IDE をセットアップします。
Arduino を初めて使用する場合は、まず Getting Started with Arduino を参照してください。
-
Arduino IDE をインストールします。
-
ESP32 ボードサポートを追加します:File → Preferences を開き、Additional Boards Manager URLs に次を追加します:
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json -
ESP32 パッケージをインストールします:Tools → Board → Boards Manager を開き、
esp32を検索して Espressif Systems パッケージをインストールします。 -
使用するハードウェアに合わせてボードを選択します:
- reTerminal E1001 / E1002
- EE04 + 5.83" mono
Tools → Board → ESP32 Arduino → XIAO_ESP32S3
Tools → Board → ESP32 Arduino → XIAO_ESP32S3_PLUS
また、Tools メニューから OPI PSRAM を有効にします。

-
デバイスを USB-C で接続し、Tools → Port から正しいシリアルポートを選択します。
ステップ 6: Seeed_GFX ライブラリをインストールする
Seeed ディスプレイデバイスを幅広くサポートする Seeed_GFX ライブラリを使用します。
-
GitHub からダウンロードします:
-
Sketch → Include Library → Add .ZIP Library を選択し、ダウンロードした ZIP ファイルを指定します。
注記以前に
TFT_eSPIをインストールしている場合は、競合を避けるために Arduino のライブラリフォルダから一時的に削除するか名前を変更してください。Seeed_GFXはTFT_eSPIをベースに、Seeed ディスプレイ向けの機能を追加したフォークです。 -
適切なサンプルスケッチを開きます:
- カラー表示の場合:File → Examples → Seeed_GFX → ePaper → Colorful → HelloWorld
- モノクロ表示の場合:File → Examples → Seeed_GFX → ePaper → Basic → HelloWorld
-
スケッチと同じフォルダに
driver.hファイルを作成します(Arduino IDE の新しいタブ矢印から作成します)。 -
Seeed GFX Configuration Tool を開き、ハードウェアを選択して生成された設定をコピーし、
driver.hに貼り付けます。内容はハードウェアごとに異なります:
- reTerminal E1001 / E1002
- EE04 + 5.83" mono
reTerminal E1001(7.5 インチ白黒、UC8179)の場合:
#define BOARD_SCREEN_COMBO 520 // reTerminal E1001 (UC8179)

reTerminal E1002(7.3 インチフルカラー、UC8179C)の場合:
#define BOARD_SCREEN_COMBO 521 // reTerminal E1002 (UC8179C)

**EE04 + 5.83 インチ モノクロ(UC8179)**の場合:
#define BOARD_SCREEN_COMBO 503 // 5.83 inch monochrome ePaper Screen (UC8179)
#define USE_XIAO_EPAPER_DISPLAY_BOARD_EE04


EE04 で別の画面サイズに交換した場合は、設定ツールから driver.h を再生成し、USE_XIAO_EPAPER_DISPLAY_BOARD_EE04 の行は残しておいてください。
誤った組み合わせを選択すると画面には何も表示されません。画面とドライバボードの組み合わせを再確認してください。
ステップ 7: EEZ Studio プロジェクトを Arduino に書き込む
EEZ Studio の出力とプラットフォームドライバのヘルパーをスケッチフォルダに追加し、アップロードします。
必要なドライバファイル(全ハードウェア共通)
次のヘルパーファイルをダウンロードし、.ino と同じ場所に配置します:
EE04 の場合は、さらに lv_conf.h と LVGL ライブラリが必要です — 下の EE04 タブを参照してください。

EEZ_UI 出力をコピーする
生成された EEZ_UI フォルダ(EEZ Studio プロジェクトの src/ 内)を Arduino のライブラリフォルダ(通常は ~/Documents/Arduino/Libraries)にコピーします。

スケッチとアップロード
- reTerminal E1001 / E1002
- EE04 + 5.83" mono
リファレンススケッチ — 3 つのボタン(KEY0/KEY1/KEY2)で 3 つのページ HOME、Workstation、Plant を順番に切り替えます。
完全なリファレンスコード: E1002-EEZStudioCode.zip
#include <TFT_eSPI.h>
#include <lvgl.h>
#include <ui.h>
#include "e1002_display.h"
const int BUTTON_KEY0 = 3;
const int BUTTON_KEY1 = 4;
const int BUTTON_KEY2 = 5;
int32_t page_index;
bool lastKey0State = HIGH;
bool lastKey1State = HIGH;
bool lastKey2State = HIGH;
e1002_driver_t e1002_driver;
void setup()
{
String LVGL_Arduino = "Automotive Dashboard Demo - LVGL ";
LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() +
"." + lv_version_patch();
Serial.begin(115200);
Serial.println(LVGL_Arduino);
Serial.println("Initializing 6-color e-paper display...");
e1002_display_init(&e1002_driver);
pinMode(BUTTON_KEY0, INPUT_PULLUP);
pinMode(BUTTON_KEY1, INPUT_PULLUP);
pinMode(BUTTON_KEY2, INPUT_PULLUP);
lastKey0State = digitalRead(BUTTON_KEY0);
lastKey1State = digitalRead(BUTTON_KEY1);
lastKey2State = digitalRead(BUTTON_KEY2);
ui_init();
page_index = SCREEN_ID_HOME;
loadScreen((ScreensEnum)page_index);
Serial.println("Boot: Main Screen");
}
void loop()
{
lv_timer_handler();
ui_tick();
delay(50);
bool currentKey0State = digitalRead(BUTTON_KEY0);
bool currentKey1State = digitalRead(BUTTON_KEY1);
bool currentKey2State = digitalRead(BUTTON_KEY2);
if (lastKey0State == HIGH && currentKey0State == LOW) {
page_index = SCREEN_ID_HOME;
loadScreen((ScreensEnum)page_index);
Serial.println("Switched to Main Screen");
delay(50);
}
if (lastKey1State == HIGH && currentKey1State == LOW) {
page_index = SCREEN_ID_WORKSTATION;
loadScreen((ScreensEnum)page_index);
Serial.println("Switched to Plant Screen");
delay(50);
}
if (lastKey2State == HIGH && currentKey2State == LOW) {
page_index = SCREEN_ID_PLANT;
loadScreen((ScreensEnum)page_index);
Serial.println("Switched to Setting Screen");
delay(50);
}
lastKey0State = currentKey0State;
lastKey1State = currentKey1State;
lastKey2State = currentKey2State;
if (e1002_display_should_refresh(&e1002_driver))
{
Serial.println("Refreshing e-paper display...");
e1002_display_refresh(&e1002_driver);
Serial.println("Display refresh complete");
}
delay(10);
}
注意事項:
e1002_display_init()は電子ペーパーディスプレイのハードウェアを初期化します。pinMode(..., INPUT_PULLUP)はボタンピンを内部プルアップ付きで設定します。ui_init()とloadScreen()は LVGL を初期化し、特定の画面を読み込みます。lv_timer_handler()は LVGL のタイマーとアニメーションを処理します。if (lastKeyXState == HIGH && currentKeyXState == LOW)ブロックは HIGH→LOW エッジをデバウンスし、ページを更新します。e1002_display_should_refresh()/e1002_display_refresh()は電子ペーパーのリフレッシュをオンデマンドで制御します。
表示される画面
| ホームページ | ワークステーションページ | フォトページ |
|---|---|---|
![]() | ![]() | ![]() |
EE04 では、次のファイルも必要です:
e1002_display.cppe1002_display.hlv_conf.h- Arduino IDE にインストールされた LVGL ライブラリ

生成された EEZ_UI フォルダを ~/Documents/Arduino/Libraries にコピーします。

リファレンススケッチ — 基板上の3つのボタン(KEY1/KEY2/KEY3 = ピン 2 / 3 / 5)で、Smart、Industry、Game の3ページを順番に切り替えます。
完全なリファレンスコード: EEZ_UI_EE04.zip
#include <TFT_eSPI.h>
#include <lvgl.h>
#include <ui.h>
#include "e1002_display.h"
const int BUTTON_KEY1 = 2;
const int BUTTON_KEY2 = 3;
const int BUTTON_KEY3 = 5;
int32_t page_index;
bool lastKey0State = HIGH;
bool lastKey1State = HIGH;
bool lastKey2State = HIGH;
unsigned long lastDebounceTime0 = 0;
unsigned long lastDebounceTime1 = 0;
unsigned long lastDebounceTime2 = 0;
const unsigned long debounceDelay = 120;
e1002_driver_t e1002_driver;
unsigned long lastFullRefreshTime = 0;
const unsigned long fullRefreshCooldown = 1500;
bool buttonPressed(int pin, bool &lastState, unsigned long &lastDebounceTime)
{
bool currentState = digitalRead(pin);
if (lastState == HIGH && currentState == LOW &&
(millis() - lastDebounceTime) > debounceDelay)
{
lastDebounceTime = millis();
lastState = currentState;
return true;
}
lastState = currentState;
return false;
}
void switchPage(ScreensEnum targetScreen, const char *pageName)
{
if (millis() - lastFullRefreshTime < fullRefreshCooldown)
{
Serial.println("[Skip] Refresh cooling down...");
return;
}
Serial.printf("Switching to %s ...\n", pageName);
e1002_driver.epd->fillScreen(TFT_WHITE);
e1002_driver.epd->update();
loadScreen(targetScreen);
e1002_display_refresh(&e1002_driver);
lastFullRefreshTime = millis();
Serial.printf("[OK] %s refreshed.\n", pageName);
}
void setup()
{
Serial.begin(115200);
String LVGL_Arduino = "Smart Home Dashboard - LVGL ";
LVGL_Arduino += String('V') + lv_version_major() + "." +
lv_version_minor() + "." + lv_version_patch();
Serial.println(LVGL_Arduino);
Serial.println("Initializing e-paper display...");
e1002_display_init(&e1002_driver);
pinMode(BUTTON_KEY1, INPUT_PULLUP);
pinMode(BUTTON_KEY2, INPUT_PULLUP);
pinMode(BUTTON_KEY3, INPUT_PULLUP);
ui_init();
page_index = SCREEN_ID_SMART;
loadScreen((ScreensEnum)page_index);
e1002_display_refresh(&e1002_driver);
Serial.println("Boot: Main Screen");
}
void loop()
{
lv_timer_handler();
ui_tick();
if (buttonPressed(BUTTON_KEY1, lastKey0State, lastDebounceTime0))
{
page_index = SCREEN_ID_SMART;
switchPage((ScreensEnum)page_index, "Main Screen");
}
if (buttonPressed(BUTTON_KEY2, lastKey1State, lastDebounceTime1))
{
page_index = SCREEN_ID_INDUSTRY;
switchPage((ScreensEnum)page_index, "Plant Screen");
}
if (buttonPressed(BUTTON_KEY3, lastKey2State, lastDebounceTime2))
{
page_index = SCREEN_ID_GAME;
switchPage((ScreensEnum)page_index, "Workstation Screen");
}
if (e1002_display_should_refresh(&e1002_driver))
{
Serial.println("Refreshing e-paper display...");
e1002_display_refresh(&e1002_driver);
Serial.println("Display refresh complete");
}
delay(10);
}
結果の画面
| Smart | Industry | Game |
|---|---|---|
![]() | ![]() | ![]() |
リファレンス & リソース
- reTerminal E1001 / E1002
- EE04 + 5.83" mono
技術サポート & 製品ディスカッション
弊社製品をお選びいただきありがとうございます。私たちは、製品をできるだけスムーズにご利用いただけるよう、さまざまなサポートを提供しています。お好みやニーズに応じてお選びいただける、複数のコミュニケーションチャネルをご用意しています。






