Edit online

aic_demo 例程介绍

/package/artinchip/lvgl-ui/aic_demo/
例程名称主要功能相关技术和控件
base_demo集成了仪表盘、菜谱、音乐界面、视频播放界面矢量字体、视频播放、tabview 控件、图片控件
dashboard_demo仪表盘 demoarc 控件、图片控件
slide_demo界面滑动效果tabview
elevator_demo电梯屏 demo串口线程和 LVGL 交互
gif_demogif动画 demogif 动画
launcher_demo实现了简单的 launcher 界面界面切换、摄像头、tabview
simple_player_demo实现了简单的播放器功能视频播放
multi_lang_demo实现了多国语言文件读取、链表、dropdown
demo_hub集成了音视频播放、咖啡机、相框等音视频、界面切换、图片切换、homekey

加载图片

C 数组的方式加载图片的方法:

  1. 使用转换工具将图片转换成.c 文件 https://lvgl.io/tools/imageconverter
  2. 将.c 文件放入项目文件夹。
  3. 调用图片加载函数:
    circle_0 = lv_img_create(img_bg);
    lv_img_set_src(circle_0, &bg0_mix);

资源文件加载图片的方法:
  1. 将资源文件放到工程目录下。
  2. 确认 rodata 分区指向的路径包含资源文件。
  3. 调用图片加载函数:
    lv_obj_t *img_info = lv_img_create(main_tab0);
    lv_img_set_src(img_info, LVGL_PATH(meter_info.png));
    #define LVGL_PATH(y) CONN(LVGL_DIR, y)
    #define CONN(x, y) x#y
    #define LVGL_DIR "L:"LVGL_STORAGE_PATH"/"
    #define LVGL_STORAGE_PATH "/rodata/lvgl_data"
    LVGL_PATH(meter_info.png)==>"L:/rodata/lvgl_data/meter_info.png"
    

1. 两种图片加载方法对比
图片加载方法优点缺点适用场景
.c 数组图片加载速度快flash 和内存空间占用大图标、小图片
资源文件占用空间少加载速度略慢大图片,多图片

矢量字体

  1. menuconfig 勾选第三方包中的 freetype:

    local packages options-->third-party packages options-->freetype

  2. 使能 lvgl freetype 的宏定义:

    packages\artinchip\lvgl-ui\lvgl_v9\lv_conf.h

    #define LV_USE_FREETYPE 1
  3. 将字体文件放入资源文件中,并参考 base_demo 的使用方法。
注意:
  • 不要反复初始化,如果没有及时释放,会造成内存泄露。
  • 反复初始化还会造成内存碎片化,所以尽量只全局初始化一次。
  • b.字体和动画控件不要重叠,距离尽量大于 16 像素。
  • c.留意部分矢量字体需要调大 LVGL 的栈空间,否则会出现 crash。
  • d.使用 D13,如果有多款字体,导致 sys heap 不够,可以在 psram 开辟一段空间给矢量字体使用。

弹窗效果

  1. LVGL 图层叠加:

    System layer:

    Top layer:

    Active Screen:


    layer1

  2. 基于 Top_layer 创建控件:


    注: 有些共用的控件放到 Top layer,可以在任何界面调用,不需在每个界面创建同样控件。

多国语言

  1. 定义字符串数组的方法:
  2. 配置 ini 文件的方法(参考multi_lang_demo):
    注:

    注意使用的字体文件要包含对应语言的文字。

音视频播放

参考代码:

demo_hub/app/aic_audio
demo_hub/app/aic_video
simple_player_demo
注:

MP4,MKV,AVI 是封装格式,H264,MJPEG 是编码格式。

D13,D12 只支持 MJPEG 编码格式的视频,D21 可以支持 MJPEG,H264 编码格式的视频。

视频循环播放的方法:

线程交互

在 serial_com_demo 中演示了串口通信的实现:
  1. 创建了一个 uart 线程,用来接收串口信息。
  2. 在 LVGL 的主线程的定时器中会接收到 uart 的信息。
  3. 两个线程之间通过消息队列进行信息传递。
注:

多线程通信要做好消息队列的加锁保护。

参数存储

参数存储在 data 分区:
  1. 确认 data 分区正确配置:




  2. 创建参数文件,文件路径,举例:/data/xxxcfg.bin
  3. 对参数文件进行读写操作。

    文件操作参考代码:/bsp/examples/test-filesystem/test_filesystem.c

注:

线程安全和异常处理问题要留意。

参数存储在 RTC SYS_BAK :

D13/D21 包含128 bits SYS_BAK寄存器,用于系统数据备份,例如掉电重点保护数据。

RTC 供电不掉,数据就不会消失.

当前 SDK 需要更新 1 个补丁:

/bsp/examples/test-rtc/test_rtc.c/test_rtc_sys_bak 函数

rtc_sys_bak read 0x01

rtc_sys_bak write 0x01 0x45

界面切换

切换场景一:创建的对象是屏幕对象,通过 lv_src_load_anim 切换。

切换场景二:所有对象都是创建在某一个屏幕对象的,使用隐藏显示的方法切换。
注:

这种切换页面的方法效率会高一些,但是消耗的内存比较大。

界面切换时的注意事项:
  1. 在屏幕切换的时候,需要对定时器或者相关挂钩的硬件进行停止或者删除操作。
  2. 一次性初始化所有界面的方式可能会引起 APP 加载慢和内存消耗大的问题。
  3. 推荐使用 lv_src_load_anim 切换界面,参考 demo_hub/app_entrance.c/app_entrance