事件示例

包含内容

• 480 x 480 LVGL 交互屏幕，适合嵌入式显示和快速实验。
• 五个按钮示例，每个展示一种不同的 UI 响应。
• 透明度控制，Low Opacity 和 High Opacity 按钮连接到同一个图片目标。
• 文本更新示例，使用 Change Text 按钮修改标签。
• 属性变更示例，使用 Set Properties - Size 改变目标对象尺寸。
• 动画触发器，使用 Play Animation 展示事件驱动的运动或过渡。
• 事件编辑器连接预览，带可见连接线和 Clicked 触发节点。
• 检查器侧动作设置，显示源、触发器、动作、透明度值和目标字段。
• 图片目标，使用简单的青色 PicoPixel 风格图形，让状态变化容易观察。
• Doto 32 字体资源，用于画布上的点阵显示文字。

资源快照

该模板保持小巧，一眼就能理解。在资源面板中，本地库显示：

• 图片： 1，一个可复用的 500 x 500 青色图形，用作图片目标。
• 颜色： 0，颜色直接应用在设计中。
• 字体： 1，Doto 32，用于点阵标签文字。
• 控件： 0，让示例聚焦在屏幕级事件连接，而不是保存的控件资源。

图层面板显示项目是一个简单的单屏交互实验室：

• Screen 1，480 x 480 画布。
• Button 1 到 Button 5，这些是示例的可点击源。
• Image 1、Image 2 和 Image 3，这些是透明度、尺寸和动画变化的可见目标。
• Label 1，更改文字示例中使用的文本目标。

这让它非常适合学习，因为每个源和目标都在同一个屏幕中可见。

事件编辑器结构

当事件视图处于激活状态时，PicoPixel 会在 LVGL 布局上叠加交互图。截图中项目标记为 Contains Events，然后从按钮源到目标绘制连接线。

• Low Opacity 和 High Opacity 都使用 Clicked 触发器，并路由到同一个图片目标。
• Change Text 使用 Clicked 触发器，并指向点阵文字标签。
• Set Properties - Size 使用 Clicked 触发器，并指向一个用于调整尺寸的图片目标。
• Play Animation 使用 Clicked 触发器，并指向用于动画播放的图片目标。
• 右侧事件面板显示一个已选事件，包含 Source、Trigger、Action、Opacity 等数值设置以及 Destination。

这种布局是该模板的主要教学价值：它展示 PicoPixel 的可视化事件图如何把用户输入映射到 LVGL 对象变化，同时不隐藏触发器和目标之间的关系。

为什么它很适合 LVGL

LVGL 应用通常需要大量小交互：点击按钮、更新标签、改变对象状态、移动图片、切换屏幕或启动动画。这个示例让这些模式保持可见并且可复用。

• 按钮是原生 LVGL 输入对象，因此同一模式可以用于触控、编码器焦点或其他输入驱动。
• 触发器是明确的，编辑器中使用 Clicked 节点，因此很清楚每个动作由什么启动。
• 目标是普通 LVGL 对象，包括图片和标签，因此导出的 UI 仍然可以从固件中编辑。
• 透明度和属性变化很轻量，让示例适合小型嵌入式显示。
• 动画连接展示交接关系，从用户事件到可以独立运行的视觉变化。
• 项目会导出为标准 LVGL 8.x UI 代码，因此可以集成到 ESP-IDF、Arduino、PlatformIO、STM32、Zephyr 或其他 LVGL 构建中。

运行时模式

PicoPixel 可以为你生成事件连接，但这个概念会直接映射到普通 LVGL 回调。如果你需要用自定义固件逻辑扩展导出的 UI，通常的模式是：检查事件代码，然后更新目标对象。

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

把可视化编辑器用于常见连接，然后把自定义 C 回调留给依赖固件状态、传感器数据、设备设置或网络响应的行为。

自定义思路

把它作为免费的 LVGL 交互模板，然后把演示控件替换成你自己的产品 UI。

• 将五个演示按钮替换为设置开关、菜单项、仪表盘控件或硬件命令。
• 将透明度动作改成禁用/启用状态、警告状态或选中/未选中状态。
• 将文本动作用于 Connected、Saving、Armed、Charging 或 Complete 等状态消息。
• 将尺寸属性示例改成进度指示器、展开卡片、按下状态效果或通知脉冲。
• 将动画示例用于页面过渡、确认反馈、加载状态或注意力提示。
• 当单屏示例理解清楚后，添加多个 LVGL 屏幕之间的导航动作。
• 将按钮与真实固件事件配对，例如改变亮度、切换继电器、选择模式或启动校准流程。

导出到你的项目

在 PicoPixel 中打开模板，检查事件图，重命名关键源和目标，然后把项目导出为 LVGL C 代码。生成的文件可以像其他 PicoPixel 导出一样加入现有嵌入式项目。

对于 ESP32 项目，常见流程是：

1. 配置显示和输入驱动。
2. 打开这个事件模板，并调整按钮、标签、图片和动作。
3. 将 PicoPixel UI 导出为 LVGL C。
4. 将导出的文件加入你的 ESP-IDF、Arduino 或 PlatformIO 项目。
5. 在 LVGL 和显示驱动准备好后调用 ui_init()。
6. 只有在可视化事件编辑器不够用的地方，再添加自定义固件回调。

更多背景请参阅 PicoPixel 事件编辑器指南、ESP32 LVGL UI 教程 和 使用 PicoPixel 模板 指南。

适用场景

当你需要以下内容的清晰起点时，这个模板很适合：

• LVGL 事件示例
• 按钮点击交互演示
• ESP32 触控 UI 原型
• 设置屏幕和控制面板
• 智能家居仪表盘
• 可穿戴或手持设备菜单
• 动画触发示例
• 文本和图片状态变化
• 学习 PicoPixel 可视化事件如何变成 LVGL 行为