Skip to main content

使用 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-pin 或 50-pin 的 Seeed ePaper 屏幕使用
立即获取 🖱️
立即获取 🖱️

什么是 EEZ Studio？​

EEZ Studio 是一个现代化的可视化编程和 UI 设计环境，最初是为测试与测量仪器以及嵌入式设备打造的。它将拖拽式 GUI 设计、脚本编写和设备集成工具结合在一起，使开发者、工程师和创客能够在不必从零开始的情况下快速创建专业界面。

简而言之，EEZ Studio 充当了硬件与软件之间的桥梁，让你可以更高效地设计、原型验证并部署用户体验。

为什么要使用 EEZ Studio？​

  • 可视化界面设计——使用所见即所得编辑器创建复杂 UI。
  • 快速原型开发——快速测试和验证设计想法。
  • 跨平台——构建可在多个操作系统和嵌入式目标上运行的应用。
  • 硬件集成——可直接连接实验室仪器、物联网设备和自定义开发板。
  • 开源——由社区驱动的工具集，可选付费高级支持。

EEZ Studio 与 SquareLine Studio 的对比​

两者都是 GUI 设计工具，但面向的用户群体略有不同：

方面EEZ StudioSquareLine Studio
主要用途测试与测量仪器、嵌入式系统、软硬件集成嵌入式 GUI，尤其是基于 LVGL 的界面
目标用户工程师、产品开发者、创客、实验/测试仪器设计者嵌入式 UI 开发者、爱好者、物联网产品设计者
硬件集成可直接集成仪器、测量设备和自动化系统以 UI 生成为主，对外部设备集成较少
开源情况社区驱动、透明且可扩展（提供高级付费支持）闭源商业产品，需要授权许可
工作流程在同一环境中完成原型设计、仿真并控制真实设备主要用于生成 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——背景、图标、Logo。
  • Fonts——文本渲染和多语言支持。
  • Themes——浅色/深色等顶层样式。
  • Groups——布局辅助工具。

示例布局（Hello World + Panel + Image + Line + Label）​

在本教程中，我们将用五个组件构建一个简单的主页：

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

步骤 1. 更改画布背景颜色——选中画布，勾选 Color，并选择一个十六进制颜色值。

步骤 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 设备，需要先为 Arduino IDE 配置 ESP32 支持。

tip

如果你是第一次使用 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_GFX 库，它为 Seeed 显示设备提供了全面支持。

  1. 从 GitHub 下载：

    下载库文件

  2. 在 Arduino 中选择 Sketch → Include Library → Add .ZIP Library，然后选择刚下载的 ZIP 文件。

    note

    如果你之前安装过 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 的 libraries 文件夹中（通常为 ~/Documents/Arduino/Libraries）。

编写草图并上传​

参考草图——三个按键（KEY0/KEY1/KEY2）循环切换三个页面：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...