速度表设计示例

包含内容

• 480 x 480 仪表盘屏幕，适合方形画布，也容易适配圆形显示。
• LVGL Arc 仪表，使用 Arc 控件作为主速度环，因此指示器可以从代码更新。
• 大号数字速度标签，预览中显示为 135，形成强烈的仪表盘视觉焦点。
• 单位标签，当前为 km/h，可改为 mph、%、RPM、W 或任何其他测量单位。
• 里程组，显示为 9138 km，可用于里程、单次行程距离、运行时间、电池续航或其他辅助指标。
• PRND 挡位标签，其中 D 通过圆形状态指示器高亮。
• 深色嵌入式仪表盘风格，使用高对比度白色排版和红/粉色仪表强调色。
• 无图片依赖，因此 UI 作为 LVGL 对象保持轻量且可编辑。
• 三种内置字体样式，匹配截图中的 Plus Jakarta Sans 文本层级。
• 一个可复用控件资源，在模板本地库中可见，可快速复用到其他 PicoPixel 项目中。

资源概览

该模板刻意精简。在资源面板中，本地库显示：

• 图片： 0，仪表不是静态截图。
• 颜色： 0，当前配色直接应用在设计中。
• 字体： 3，使用多个字号的 Plus Jakarta Sans。
• 控件： 1，一个可复用的速度表控件预览，可以拖入其他项目。

内置字体集按仪表中的视觉层级设置：

• PlusJakartaSans ExtraLight 16，用于里程后缀等小型辅助文本。
• PlusJakartaSans Light 20，用于 km/h 和挡位文字等辅助标签。
• PlusJakartaSans SemiBold 110，用于中央的大号速度值。

这意味着 LVGL 导出可以专注于可编辑基础元素：标签、容器、Arc 控件和字体，而不携带不必要的图片资源。

面向 LVGL 的结构

截图展示的是小型、适合导出的层级，而不是依赖大量位图的设计稿。设计围绕一个屏幕、用于分组的容器、多个标签、里程组和主 Arc 控件 构建。

• Screen 1 是 480 x 480 画布。
• 根容器保存仪表布局，并让仪表盘保持居中。
• 里程文本被分组，因此数字和 km 后缀可以一起移动。
• 中央速度值是一个大标签，因此可以在运行时直接通过 lv_label_set_text 或 lv_label_set_text_fmt 更新。
• 主仪表是 LVGL Arc，因此仪表可以通过 lv_arc_set_value 驱动。
• PRND 行由标签构成，当前挡位通过一个小圆形容器强调。

这正是 LVGL 速度表模板需要的结构：表盘可以编辑、文字可以实时更新，导出的代码也采用标准 LVGL 调用。

为什么它很适合 LVGL

这个示例不只是漂亮截图。它围绕 LVGL 在嵌入式硬件上擅长渲染的内容设计。

• Arc 渲染是 LVGL 原生能力，因此速度环不需要大型透明图片。
• 标签更新成本低，非常适合变化的速度、距离、电池续航或模式文字。
• 各项显示状态相互独立，因此固件可以独立更新 Arc 数值、中央标签、里程和挡位指示。
• 设计很紧凑，没有导入图片资源，只包含仪表盘外观所需字体。
• 它会导出为标准 LVGL 8.x UI 代码，因此可以集成到 ESP-IDF、Arduino、PlatformIO、STM32、Zephyr 或其他 LVGL 项目。

自定义思路

把它作为免费的 LVGL 仪表起点，然后为你自己的产品或演示调整细节。

• 将速度范围从道路速度刻度改为 0-100、0-240、0-8000 RPM、电池百分比、油门位置或温度。
• 调整 Arc 的粗细、起始角、结束角和颜色，以匹配显示屏形状。
• 将红/粉色强调色替换为品牌色、警告色或基于区间的颜色。
• 将 km/h 替换为 mph、RPM、%、W、V、A、C 或 F。
• 将里程行用于单次行程距离、运行时间、剩余续航、圈数或总能量。
• 将 PRND 替换为 ECO、SPORT、PARK、AUTO 或 MANUAL 等自定义模式。
• 添加小图标、电池条、警告指示器、转向灯状态，或第二个用于显示转速的 Arc 仪表。
• 使用 LVGL 定时器或动画回调让数值平滑变化，而不是让标签瞬间跳变。

连接实时数据

从 PicoPixel 导出后，把生成的 UI 文件保留在项目中，并从固件循环、事件处理器或 LVGL 定时器更新已命名对象。具体对象名称取决于你在导出前如何命名控件，但运行时模式如下：

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

如果速度来自 GPS、CAN、UART、BLE、电机控制器或模拟数据，请把硬件相关解析留在 UI 代码之外。让 UI 函数接收解析好的数值，并只负责 LVGL 更新。

导出到你的项目

在 PicoPixel 中打开模板，按需调整显示尺寸，重命名关键控件，然后把项目导出为 LVGL C 代码。生成的文件可以像其他 LVGL UI 一样加入现有嵌入式项目。

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

1. 配置显示和触控/输入驱动。
2. 将 PicoPixel UI 导出为 LVGL C。
3. 将导出的文件加入你的 ESP-IDF、Arduino 或 PlatformIO 项目。
4. 在 LVGL 和显示驱动准备好后调用 ui_init()。
5. 从遥测循环、事件队列或 lv_timer 更新速度表数值。

更完整的步骤请参阅 ESP32 LVGL UI 教程 和 使用 PicoPixel 模板 指南。

适用场景

这个模板适合用于以下项目：

• LVGL 速度表演示
• ESP32 仪表盘原型
• 圆形显示车辆仪表
• 电动自行车、滑板车、卡丁车或遥控模型的遥测屏幕
• 工业仪表面板
• 模拟器仪表盘
• 电机速度或 RPM 显示
• 电池续航和驾驶模式界面

如果你想先看看如何用普通控件构建 LVGL 仪表，再开始制作更复杂的仪表盘，它也是一个实用的学习示例。