メインコンテンツまでスキップ

EEZ Studio を使う

このガイドでは、ビジュアルデザインツール EEZ Studio を使ってプロフェッショナルなユーザーインターフェースを設計し、LVGL コードを生成し、それを Arduino IDE 経由で Seeed の ePaper 製品にデプロイする手順を説明します。フローはサポートされているすべてのボードで同じで、異なるのはディスプレイ解像度とドライバ設定用の定数だけです。これらの違いはタブで示します。

対応ハードウェア​

reTerminal E1001 / E1002 / E1003 / E1004XIAO 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 StudioSquareLine 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 の下で、使用するハードウェアに合わせて解像度を設定します：

  • Display width: 800
  • Display height: 480

(E1001 の 7.5インチ モノクロと E1002 の 7.3インチ Spectra 6 は、どちらも 800×480 の解像度を共有しています。)

ステップ 3: UI をデザインする​

UI デザインはユーザー体験を直接左右します。EEZ Studio では、コンポーネントをドラッグ＆ドロップしてインターフェースを素早く組み立て、Styles、Fonts、Bitmaps、Themes、Groups を使って見た目を制御できます。

おすすめのオンラインリソース：

右側のサイドバー：

  • 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: コードを生成する​

デザインが完了したら：

  1. 保存 — OPEN の横にあるフロッピーディスクアイコンをクリックします。
  2. プレビュー — Run をクリックしてシミュレータを起動し、UI をプレビューします。
  3. コンパイル／ビルド — ✓ アイコンをクリックしてエラーをチェックし、その後レンチアイコンをクリックして UI コード、画像データ、フォントデータを生成します。

緑色の Build successful メッセージが表示されれば、コード生成が完了したことを示します。出力はプロジェクトの src/ui フォルダに保存されます（必要であれば src/EEZ_UI にリネームしても構いません）。

ステップ 5: Arduino IDE をセットアップする​

EEZ Studio の出力を Seeed ePaper デバイスに書き込むには、ESP32 対応の Arduino IDE をセットアップします。

ヒント

Arduino を初めて使用する場合は、まず Getting Started with Arduino を参照してください。

  1. Arduino IDE をインストールします。

    Arduino IDE をダウンロード

  2. ESP32 ボードサポートを追加します：File → Preferences を開き、Additional Boards Manager URLs に次を追加します：

    https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

  3. ESP32 パッケージをインストールします：Tools → Board → Boards Manager を開き、esp32 を検索して Espressif Systems パッケージをインストールします。

  4. 使用するハードウェアに合わせてボードを選択します：

    Tools → Board → ESP32 Arduino → XIAO_ESP32S3

  5. デバイスを USB-C で接続し、Tools → Port から正しいシリアルポートを選択します。

ステップ 6: Seeed_GFX ライブラリをインストールする​

Seeed ディスプレイデバイスを幅広くサポートする Seeed_GFX ライブラリを使用します。

  1. GitHub からダウンロードします：

    ライブラリをダウンロード

  2. Sketch → Include Library → Add .ZIP Library を選択し、ダウンロードした ZIP ファイルを指定します。

    注記

    以前に TFT_eSPI をインストールしている場合は、競合を避けるために Arduino のライブラリフォルダから一時的に削除するか名前を変更してください。Seeed_GFX は TFT_eSPI をベースに、Seeed ディスプレイ向けの機能を追加したフォークです。

  3. 適切なサンプルスケッチを開きます：

    • カラー表示の場合：File → Examples → Seeed_GFX → ePaper → Colorful → HelloWorld
    • モノクロ表示の場合：File → Examples → Seeed_GFX → ePaper → Basic → HelloWorld

  4. スケッチと同じフォルダに driver.h ファイルを作成します（Arduino IDE の新しいタブ矢印から作成します）。

  5. Seeed GFX Configuration Tool を開き、ハードウェアを選択して生成された設定をコピーし、driver.h に貼り付けます。内容はハードウェアごとに異なります：

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)

ステップ 7: EEZ Studio プロジェクトを Arduino に書き込む​

EEZ Studio の出力とプラットフォームドライバのヘルパーをスケッチフォルダに追加し、アップロードします。

必要なドライバファイル（全ハードウェア共通）​

次のヘルパーファイルをダウンロードし、.ino と同じ場所に配置します：

EE04 の場合は、さらに lv_conf.h と LVGL ライブラリが必要です — 下の EE04 タブを参照してください。

EEZ_UI 出力をコピーする​

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

スケッチとアップロード​

リファレンススケッチ — 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() は電子ペーパーのリフレッシュをオンデマンドで制御します。

表示される画面​

ホームページワークステーションページフォトページ

リファレンス & リソース​

技術サポート & 製品ディスカッション​

弊社製品をお選びいただきありがとうございます。私たちは、製品をできるだけスムーズにご利用いただけるよう、さまざまなサポートを提供しています。お好みやニーズに応じてお選びいただける、複数のコミュニケーションチャネルをご用意しています。

Loading Comments...