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

EEZ Studio を使う

このガイドでは、ビジュアルデザインツール EEZ Studio を使ってプロフェッショナルなユーザーインターフェースを設計し、LVGL コードを生成し、それを PlatformIO で 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ユニバーサルドライバ — Seeed の 24 ピンまたは 50 ピン 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.5.0 を選択します。
  • Location — プロジェクトファイルの保存場所を選択します。

プロジェクト設定​

ツールバーの ⚙️ アイコンをクリックして Project Settings を開きます。

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. 保存 — Control + S を押して保存します。macOS の場合は Command + S を押して保存します。
  2. プレビュー — Run をクリックしてシミュレータを起動し、UI をプレビューします。
  1. コンパイル／ビルド — ✓ アイコンをクリックしてエラーをチェックし、その後レンチアイコンをクリックして UI コード、画像データ、フォントデータを生成します。

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

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

PlatformIO を使って EEZ Studio の出力をデプロイします。PlatformIO は、Seeed ePaper 製品に必要なプロジェクト構造、ボード環境、ライブラリ依存関係、およびビルド設定を提供します。

Seeed ePaper 製品で PlatformIO を初めて使用する場合は、以下のセットアップガイドに従って開発環境を構成してください。

PlatformIO セットアップガイド

ヒント

PlatformIO セットアップガイドでは、ボード定義、ライブラリ依存関係、ビルド構成について説明しています。完了したら、このページに戻って作業を続けてください。

ステップ 6: EEZ Studio PlatformIO テンプレートをダウンロードする​

reTerminal E シリーズ Firmware Hub を開きます：

Firmware Hub を開く

Firmware Hub ページで、次の操作を行います：

  1. Official Platforms の下から EEZ Studio カードを見つけ、クリックして展開します。
  1. 使用するデバイス — E1001、E1002、E1003、または E1004 — を選択します。
  1. ページにはテンプレートのステップバイステップの使用ガイドが表示されます。Download project template ボタンをクリックして、PlatformIO プロジェクトの ZIP を取得します。

ステップ 7: EEZ Studio プロジェクトをデプロイする​

テンプレートをダウンロードしたら、テンプレートの UI を EEZ Studio で生成したファイルに置き換えます。

  1. ダウンロードしたテンプレートを解凍します。
  2. PlatformIO 拡張機能がインストールされた VS Code で、解凍したプロジェクトフォルダを開きます。
  3. テンプレートプロジェクト内の src/ui ディレクトリに移動します。
  4. src/ui 内のすべてのファイルを、ステップ 4 で EEZ Studio からエクスポートしたファイルに置き換えます。
  1. PlatformIO ツールバーで、使用するボードに対応した正しい environment を選択します。
  1. Build をクリックしてコンパイルし、その後 Upload をクリックして、ファームウェアをデバイスに書き込みます。
ヒント

テンプレートには、デバイスに必要なすべてのドライバと LVGL 設定がすでに含まれています。UI ファイルを置き換えるだけで構いません。

生成される画面​

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

参考情報 & リソース​

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

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

Loading Comments...