使用LVGL提升交互效率：基于启明智显Model3A方案的7寸智能屏用户界面(UI)设计介绍_lvgl ui设计

项目概述：

【启明智显】，作为一家专注于HMI和AIoT解决方案的公司，我们致力于为用户提供创新、可靠且高效的产品和解决方案。近日我们推出了高性能及高性价比的HMI芯片——Model3A。芯片搭载了强大的2D图形加速引擎，能够提供高达720P分辨率下的60FPS刷新率，确保流畅的动态画面表现。此外，它内置了8MB的psram，为复杂的图形处理提供了充足的缓冲空间。

随着这款芯片的推出，启明智显还搭配发布了一款7寸1024*600分辨率的一体黑高清触控智能屏。支持多种接口CAN/RS485/TTL等，工业级品质，智能触控新体验！

为了最大化利用Model3A芯片的性能优势，同时考虑到开发效率和成本效益，启明智显开源了基于LVGL的屏幕驱动，选择LVGL进行用户界面的开发主要是LVGL是一个流行的开源图形库，它以轻量级著称，特别适合嵌入式系统。它可以使得用户界面运行更加流畅，且不会对系统性能产生较大负担。

选择LVGL的另一个重要因素是其开源生态系统。拥有一个活跃的社区和广泛的文档支持，开发者可以迅速上手学习并掌握LVGL的使用。这不仅可以加快开发进度，还能促进知识的交流和技术的创新。

LVGL库简介：

LVGL是一款最受欢迎的免费开源的嵌入式图形库，用于为任何MCU、MPU和显示器创建漂亮的用户界面。它得到了业界领先的供应商和项目的支持，如Arm、STM32、NXP、Espressif、Nuvoton、Arduino、RT-Thread、Zephyr、NuttX、Adafruit等。

LVGL的架构非常灵活和可配置。它采用了模块化设计，可以根据需求通过添加或删除功能模块来定制库的大小。LVGL内置了丰富的组件，包括按钮、标签、列表、滑动条等，还支持动画、图像、字体、颜色等各种属性的自定义。

LVGL可以与各种嵌入式系统、MCU和显示器一起使用，如NXP、ESP32及启明智显的Model3A系列等。它提供了针对不同平台的适配层和驱动程序，可以与各种显示器技术（如TFT、OLED、LCD等）和操作系统（如FREERTOS、RT-Thread）无缝集成。

烧录到7寸触控屏(ZX7D00CM21S)的真实效果呈现

LVGL因其丰富的功能和灵活性而成为嵌入式系统开发的理想选择,它能够帮助开发者在不牺牲性能的前提下创造出具有吸引力的用户界面，同时降低开发难度和加快市场上市时间。

烧录到3.5寸触控屏（SC01PLUS）的真实效果呈现

LVGL功能特点：

1. 跨平台支持：

•    LVGL设计上考虑了跨平台兼容性，它支持各种操作系统和硬件架构。这意味着开发者可以在多个不同的嵌入式平台上使用相同的代码基和UI设计理念，从而节省时间和资源。例如，在ESP32微控制器或启明智显的Model3A系列等不同硬件上，LVGL都可以无缝集成。

2. 美观的用户界面：

•    LVGL提供了一系列的预定义组件如按钮、滑块、列表和图表等，以及多种内置主题风格。这些开箱即用的元素使得创建专业和吸引人的用户界面变得简单快捷。同时，它还支持位图字体和矢量字体，允许开发者根据项目需求灵活地调整UI外观。

3. 低内存占用：

•    由于其轻量级的设计，LVGL特别适合那些内存资源有限的嵌入式设备。核心库的大小可以小至几十千字节，同时它支持动态内存管理，可以根据应用程序的实际需求进行内存分配和释放。

4. 高性能绘制：

•    LVGL针对绘图性能进行了高度优化，如它可以利用Model3A这颗MCU的2D加速功能来提高渲染速度，并确保即使在更新率较高的场合下也能保持流畅的用户体验。

5. 易于定制和扩展：

•    LVGL的模块化架构使得它可以非常容易地进行定制和扩展。开发者可以通过创建自己的样式表来改变现有组件的外观，或者通过添加新的对象和功能来扩展库的功能。这种灵活性意味着LVGL可以适应任何特定项目的需要，从简单的仪表盘到复杂的多功能触控屏界面。

应用领域：

LVGL（Light and Versatile Graphics Library）由于其轻量级、高性能和易于使用的特点，在各种嵌入式系统中有着广泛的应用。

1. 工业控制：

•    在工业自动化中，LVGL可以用于创建高效且直观的触摸屏界面，帮助操作人员轻松控制和监视机器状态，实现更好的人机交互体验。

2.家用电器：

•    对于智能家电产品，LVGL能够提供美观且用户友好的界面，如在智能音箱上显示信息，或在智能家居中控控制面板上提供触控操作界面。

3. 医疗设备：

•    在医疗领域，LVGL可以用于设计医疗器械的用户界面，使设备易于操作并确保患者数据清晰展示，例如在内窥镜、监护仪和血压计等设备上的应用。

4. 汽车嵌入式系统：

•    随着车载技术的不断发展，LVGL适用于开发汽车信息娱乐系统和车载导航系统的用户界面，提供响应迅速且视觉吸引的驾驶体验。

5. 物联网设备：

•    物联网设备的多样性要求用户界面既小巧又功能强大，LVGL可以轻松集成到如智能手表、智能门锁等设备中，提供简洁而直观的操作界面。

6. 智能家居设备：

•    在智能家居系统中，LVGL可以帮助构建集中控制各个家居子系统（照明、安防、温控等）的统一界面，提升用户操作便利性和居家舒适度。

7. 两轮车仪表、中控屏、机车仪表设备：

•    对于摩托车和电动自行车等两轮车辆，LVGL可以应用于仪表盘和中控屏的图形界面设计，提供速度、电池电量和其他关键信息的实时显示，同时优化驾驶者的操作体验。

M3A方案的7寸触摸智能屏UI开发LVGL使用说明及DEMO：

使能LVGL库：

在 ZX-RTT根目录下执行 scons --menuconfig，进入 menuconfig 的功能配置界面，配置如下：

Application options  --->
    *** Filesystem related ***
    [*] Using File System Image 0  --->
        --- Using File System Image 0
        Select File System Type (FATFS)  --->
        (application/os/custdemo/assets/fatfs/) Data Directory
        (app.fatfs) Image Name
        [*] auto calcuate image size
    [*] Using File System Image 1  ----
        Select File System Type (LittleFS)  --->
        (application/os/custdemo/assets/littlefs/) Data Directory
        (data.lfs) Image Name
        (4096) Erase block size
        (256) Page size
    [ ] ZX lvgl benchmark demo  ----
    [ ] ZX freetype demo  ----
    [ ] ZX 3D95 demo  ----
    [ ] ZX CUST demo  ----
    [*] ZX lvgl widgets demo  ----

目前LVGL demo提供了多个示例，只能多选一：

1. lvgl benchmark demo和lvgl widgets demo为LVGL官方demo，主要用作性能测试;

2. freetype demo为字库文件取模演示，当选中的时候，需要修改Using File System Image 0中的图片资源文件路径为： application/os/freetype/res/font;

3. 3D95 demo为86盒演示demo，需要修改Using File System Image 0中的图片资源文件路径为： application/os/ZX3D95/assets;

4. CUST demo为用作demo替换，简化UI移植过程

根目录下有四个挂载点

/ram        --ramfs文件系统，对应Using File System Image 0中Data Directory中的资源文件
/data       --挂载nor/nand文件系统，对应Using File System Image 1中Data Directory中的资源文件文件
/sdcard     --挂载SD卡
/udisk      --挂载U盘

调试指南

资源文件路径

lvgl demo可以通过设置宏定义来修改读取文件的目录

#define LVGL_DATA_PATH "L:/data/"       // 从/data目录读取资源图片
#define LVGL_DATA_PATH "L:/sdcard/"     // 从/sdcard目录读取资源图片
#define LVGL_DATA_PATH "L:/udisk/"      // 从/udisk目录读取资源图片

缓存图片张数

图片缓存, 通过宏定义CACHE_IMG_NUM配置, 配置定义于 zx-rtt-sdk/packages/third-party/lvgl/Kconfig, 也可在zx-rtt-sdk/packages/third-party/lvgl/lvgl-8.3.10/zx/zx_gui.c文件中修改

#define CACHE_IMG_NUM 15
 
lv_init();
zx_port_disp_init();
zx_port_indev_init();
lv_img_cache_set_size(CACHE_IMG_NUM);
aic_dec_create();

测试指南

测试环境

硬件

• 带屏的设备

• USB Type-C数据线，用于设备供电，以及烧写固件

• 调试串口

软件

• PC端串口终端软件，用于串口通信

• PanelLanDownloader烧写工具，用于烧写固件

软件配置

VE 驱动

请见 VE 参数配置

MPP 中间件

请见 MPP 参数配置

DE 驱动

请见 DE 参数配置 

运行测试DEMO

• 配置编译任意一个lvgl demo(使能LVGL库和LVGL demo)

• 在zx-rtt/application/os/$app/main.c中会调用INIT_APP_EXPORT开机自动运行