视频控件模板 (video template)

资源预处理

考虑到视频是需要在 D12x 和 D13x 播放的，而这两个平台仅支持视频 mjpeg 编码格式，需要使用 ffmpeg 进行预处理

命令如下：

ffmpeg -i input.mp4 -ss 00:00:00 -to 00:00:05 -c:v mjpeg -q:v 2 -vf "scale=1024:600:force_original_aspect_ratio=0" -r 25 -an output.mp4

UIBuilder 设计

项目创建

这里位深与板子配置的 LVGL 的位深度要一致

1. 查看板子配置位深

   scons --menuconfig

   Application options  --->
       [*] ArtInChip LVGL demo  --->
       (32)  LVGL color depth(32/16)  # 位深 32

2. 项目配置

   
   

   

   
   

资源导入

导入图片、视频和字体资源

UI 布局设计

1. 添加自己的字体

   • 设置名称，方便后续编码

   • 设置属性

   • 选择字体，size

   
   

   

   
   

2. 添加图片

   • 设置名称

   • 设置属性标识，设置标识可点击

   • 选择图片

   
   

   

   
   

3. 添加播放器

   • 设置名称

   • 设置属性标识，设置标识可点击

   • 选择视频源

   • 设置视频自动播放和循环播放

   
   

   

   
   

4. UI 模拟

   
   

   

   
   

VSCode 初步编译

我们需要在 VSCode 编写我们的业务代码，需要验证能编译过。

1. 打开 VSCode

   
   

   

   
   

2. 在 VSCode 上配置编译器：选择 Unspecificed

   
   

   

   
   

3. 在 VSCode 上编译

   1. 点击 CMake 插件

   2. 点击 CMake 清楚缓存

   3. 点击编译

   4. 点击运行

   
   

   

   
   

Custom 代码编写

把用到的资源拉到 custom/assets 下，点击 CMake 插件，清楚缓存和编译，可以看到`assets` 下有 custom/assets 的资源，就可以进行 coding 了

然后在 custom.c 添加代码，如果需要添加自己的文件，可以在 custom 下创建自己的文件，文件会自动编译。

验证

PC 功能验证

在 VSCode 上编译

1. 点击 CMake 插件

2. 点击 CMake 清楚缓存

3. 点击编译

4. 点击运行

PC 上模拟功能没问题，然后导入到板子中

导入板子验证

这里以 d13x_demo88-nor_rt-thread_helloworld_defconfig demo 板子为例子。

1. 将 PC 上 ui_builder 完全替换到 SDK 中的 ui_builder

2. 选择 LVGL demo: LVGL Support AiUIBuider:

   Application options  --->
       [*] ArtInChip LVGL demo  --->
       (32)  LVGL color depth(32/16)

3. 检查 lv_conf_custom.h 的 LV_COLOR_DEPTH 是否与 menuconfig 的一致，保持与 menuconfig 配置一致

4. 编译烧录运行