乐趣区

关于gui:OneOS下的图形组件配置学习

jiezi

学习小计

不积跬步无以至千里，不积小流无以成江海。此篇文章，次要对本人应用 OneOS 下的一个图形组件，对于配置的一些感触，欢送斧正。

性能

轻量级 GUI 框架基于 LVGL 移植开发，针对图形化开发工具的设计，以模块化的形式，解决物联网操作系统在微控制器下图形界面资源占用过大、源码不可见、图形界面库不对立、应用难度较大的痛点。

次要性能如下：

  1. 核心部件，如：按钮、图表、滑杆、图片、复选框、下拉列表、标签、滚轮、开关、线、文本框、弧、进度条等。
  2. 对象类型的根本属性：地位、尺寸、家长、款式、事件处理程序等等
  3. 触发事件机制：当被点击、滚动、数值扭转、从新绘制等时，
  4. 动态创建和删除对象
  5. 色彩模块：解决所有与色彩相干的性能，如色彩深度、色彩深度之间的转换、混合色彩等
  6. 图层用于多个对象之间的显示层级关系
  7. 执行动画的创立、删除、播放、暂停、进行等，治理动画的轨迹、速度、工夫等。
  8. 具备抗锯齿、不透明度、平滑滚动的高级图形
  9. 具备相似 CSS 款式的齐全可定制的图形元素
  10. 反对 bmp/png/jpg 图片格式
  11. 反对应用点阵及 TTF 矢量字库
  12. 反对多国语言，自带中英文
  13. 多输出设施反对（如触摸板、鼠标、键盘、编码器等）
  14. 反对本地模仿仿真

配置

此份阐明文档次要说明如何高效应用 menuconfig 对轻量级框架进行疾速应用和配置。

(Top) → Components→ GUI
(lcd) GUI display dev name
(touch) GUI input dev name
[*] Enable LVGL  --->

touch和 lcd 是GUI的输入输出设施，选中 Enable LVGL 即可使能 LVGL，目前反对的版本为LVGL7.9 和LVGL8.2。

    LVGL (Enable lvgl 8.2)  --->
    LVGL basic menu  --->
    Widget usage  --->
    Extra Widgets  --->
    Themes  --->
    Layouts  --->
    Text Settings  --->
    Font usage  --->
    LVGL FileSystem  --->
    LVGL Log  --->
    LVGL Asserts  --->
    Third party Lib  --->
    Extra  --->
[ ] Enable LVGL examples  ----
[*] Enable LVGL Demo  --->

以上是适配反对的 LVGL 次要 menuconfig 配置。从上到下一一解释。

  1. LVGL basic menu是 LVGL 最根本的配置，也是最重要的配置
  2. Widget usage是对根底控件的反对与使能
  3. Extra Widgets是对额定的高级控件的反对与使能
  4. Themes是自带的一些主题
  5. Layouts布局
  6. Text Settings文本编码设置
  7. Font usage字体抉择
  8. LVGL FileSystem文件系统反对
  9. LVGL Log信息打印辅助开发
  10. LVGL Asserts断言
  11. Third party Lib第三方库
  12. Extra其它性能
  13. Enable LVGL examples一些简略的示例
  14. Enable LVGL Demo一些简单的示例

LVGL basic menu

(120) LVGL buff lines
(20) LVGL display refresh period(ms)
(30) Input device read period(ms)
(10) GUI task priority
(4096) GUI task stack size
(5) GUI task msleep
[ ] Enable LVGL two buff
[ ] Enable CPU usage and FPS count Show
[ ] Show the used memory and the memory fragmentation
[ ] LVGL minimal configuration.
[*] Enable graphics acceleration
[*] Enable complex draw engine
  1. LVGL的单绘制缓冲区的行数
  2. 默认显示刷新周期，LVGL将在此期间从新绘制更改的区域
  3. 输出设施读取周期
  4. GUI工作的优先级设置
  5. GUI工作的栈大小设置
  6. GUI工作的默认睡眠工夫
  7. 使能 LVGL 双绘制缓冲区
  8. 显示 CPU 使用率和 FPS 计数显示
  9. 显示已用内存和内存碎片
  10. LVGL最小化配置，个别用于硬件资源很小的状况
  11. 使能硬件加速
  12. 使能简单绘图引擎

widget usage

反对了很多控件，能够本人抉择是否须要，默认全副选中

extra widgets

反对了很多高级控件，能够本人抉择是否须要，默认全副选中

theme

反对的主题，是对象的默认款式。创建对象时，将主动利用来自主题的款式。

layouts

[*] A layout similar to Flexbox in CSS.
[*] A layout similar to Grid in CSS

反对 flex 弹性布局和 grid 网格布局。

text settings

(X) UTF8
() ASCII

为字符串抉择字符编码。IDE或编辑器应具备雷同的字符编码。

font usage

抉择反对的字体。

filesystem

-*- LVGL using filesystem
        Select mount device (SD/TF Card)  --->

通过此配置，关联组件中的文件系统。

log

( ) TRACE
( ) INFO
(X) WARNING
( ) ERROR
( ) USER LOG
() NO LOG

LVGL的 log 日志，反对以上 6 个级别，级别越高，打印信息更多。

asserts

[*] Check if the parameter is NULL. (fast)
[*] Checks if the memory is successfully allocated or no. (fast)
[] Check if the styles are properly initialized. (fast)
[] Check the integrity of `lv_mem` after critical operations. (Slow)
[] Check NULL, the object's type and existence. (Slow).

断言机制，别离在于：

  1. 查看参数是否为NULL
  2. 查看内存是否已胜利调配
  3. 查看款式是否正确初始化
  4. 要害操作后查看 lv_mem 的完整性
  5. 查看NULL，对象的类型和存在性

third party lib

[ ] Enable LVGL GIF
[ ] Enable LVGL PNG
[ ] Enable LVGL JPG
[ ] Enable LVGL BMP
[] Enable LVGL QRCODE

反对的第三方库

examples and demo

选中后，抉择对应的示例，供开发者运行体验。

demo选中后，编译运行后将间接运行该 demo。example 选中后，将会增加到 shell 命令中去，须要开发者，本人在 shell 中调用该命令，example命令以 ex_ 结尾。

注意事项

应用 LV_CONF_MINIMAL 作为 LVGL 最小化配置时，须要留神首先勾销使能LVGL，而后保留配置后，再次使能 LVGL，而后再选中LVGL minimal configuration。

(lcd) GUI display dev name
(touch) GUI input dev name
[] Enable LVGL  --->
Components → GUI→ Enable LVGL→ LVGL basic menu
(20) LVGL display refresh period(ms)
(30) Input device read period(ms)
(10) GUI task priority
(4096) GUI task stack size
(5) GUI task msleep
[ ] Enable LVGL two buff
[ ] Enable CPU usage and FPS count Show
[ ] Show the used memory and the memory fragmentation
[*] LVGL minimal configuration.

在应用 stm32f469-st-disco 来测试 benchmark 测试帧率时，通过配置选中该demo：

Components → GU→ Enable LVGL→ Enable LVGL Demo
(1) Enable LVGL demo benchmark
(0) Enable LVGL demo music
(0) Enable LVGL demo keypad and encoder
(0) Enable LVGL demo stress
(0) Enable LVGL demo widgets

须要留神的是：

(120) LVGL buff lines
(20) LVGL display refresh period(ms)
(30) Input device read period(ms)
(10) GUI task priority
(4096) GUI task stack size
(5) GUI task msleep
[ ] Enable LVGL two buff
[ ] Enable CPU usage and FPS count Show
[ ] Show the used memory and the memory fragmentation
[ ] LVGL minimal configuration.
[*] Enable graphics acceleration
[*] Enable complex draw engine
  1. 使能图形减速Enable graphics acceleration，该 MCU 具备专门解决图形图像的硬件，比方 stm32 的 DMA2D。
  2. LVGL display refresh period，刷新周期抉择20ms
  3. 绘制缓冲区大小，抉择 120 行，不抉择双缓冲区，这是在无限条件下的折中
  4. 不要抉择Enable CPU usage and FPS count Show、Show the used memory and the memory fragmentation、LVGL minimal configuration
  5. 优化级别抉择-O2
退出移动版