RT-Thread-基于 eRPC 的 LVGL 在线设计器RT-Thread问答社区

基于 eRPC 的 LVGL 在线设计器

10.00

发布于 2022-09-17 09:27:57 浏览：2613 订阅该版

[tocm]

## 前言

经过前边几篇枯燥的文章，我们简单讲解了 rt-thread 相关的移植过程。今天是笔者使用 eRPC 的终极目地，也是本系列文章的重头戏。

### 提出问题

工作中，我们的仪器设备多数是带界面的。嵌入式设备上开发界面程序往往很繁琐，所以我们多数喜欢用 Qt ，可以跨平台，可以在 PC 端设计运行界面无缝移植到嵌入式设备上。所以我们在使用 emWin LVGL 时，也希望有个类似 Qt Designer 的工具，帮我们设计界面，简化界面布局工作。

还有一个更让人头疼的，美工小姐姐设计的界面，在设备上显示出来以后，她总是说效果不好，颜色没达到预期效果。经过无数次改版，无数次烧写程序，无数次真机部署后，“先这样吧”，放弃挣扎了。这种情况在 RGB565 16位色显示模式下特别明显。PC 机上做出来的效果，压缩到 16 位色会失真很多。

如果有这么一套系统，可以实现在真机上实时显示效果，而且在线修改界面中空间布局，在线修改控件显示样式，可以实时修改控件颜色并看到效果，而且可以方便地逐色值调整，将极大地缩短验证时间，提高工作效率。

笔者想做这套系统很久了，但是无奈精力有限，技术不行，迟迟没有进展，一直还是一个空想。

### 架构设想

暂时这套系统划分成三部分：编辑界面，真机显示，以及两者之间的控制部分。

github 上有一个开源的 LVGL 界面编辑器 [LVGLBuilder](https://github.com/CURTLab/LVGLBuilder) ，有了它，笔者可以省去很多工作。（美中不足的是，它现在内置的 lvgl 版本还是 6.x）。

之前笔者为了入门 LVGL 使用 Qt 做了一个 LVGL 的模拟器（非 SDL，lvgl 的版本是 8.2），这次它也帮了大忙。另外，笔者手头上有两块新唐的开发板（NUC970系列和N9H30系列），可以真机运行。

剩下的两者之间的控制部分，当然是 eRPC 实现喽。

笔者设想，任何能跑起来 LVGL 的平台，都能运行一个简单的无界面的 LVGL 服务。加上 eRPC 后，我们想让它显示什么就能显示什么。

### 模拟器演示效果

最初，笔者在虚拟机里（fedora）使用 Qt 5.15.5 跑这个 LVGL 模拟器，并移植了 linux 版的 eRPC。
在物理机的 win10 系统里跑 LVGLBuilder，并移植了 win 版 eRPC。

部分演示效果如下。

#### 创建 Bar

![create_bar.gif](https://oss-club.rt-thread.org/uploads/20220917/561d9480921a972ff6b7106d0111bc92.gif "create_bar.gif")

左边是 linux 系统下跑的模拟器，右边是 win 系统下跑的 LVGLBuilder。

从 gif 图中可以看出来，两个版本的 lvgl 默认样式差别还是很大的。

#### 修改 Bar 值

![edit_bar_value](https://oss-club.rt-thread.org/uploads/20220917/89e147caaaeda667963f80e691310da3.gif "edit_bar_value")

#### 创建 Button

![create_button.gif](https://oss-club.rt-thread.org/uploads/20220917/b118a1e4510efc07a1e138f43a35de17.gif "create_button.gif")

#### 创建 Label

![create_label.gif](https://oss-club.rt-thread.org/uploads/20220917/3d2a854b0e366bef98da931e03368c8f.gif "create_label.gif")

#### 编辑 Label 文本

![edit_label.gif](https://oss-club.rt-thread.org/uploads/20220917/657255904914bca370e9bc939e7568e2.gif "edit_label.gif")

#### 创建 Image

![create_image-1.gif](https://oss-club.rt-thread.org/uploads/20220917/b333a25b07725aec4315f9a0461f6181.gif "create_image-1.gif")

问，左边怎么是空白的？因为 Image 控件需要添加图片才能显示出来，右边的编辑器以及添加过默认图片。

下面看看怎么显示图片。

#### 添加图片资源

首先，添加图片资源。

![add_image_resouce.gif](https://oss-club.rt-thread.org/uploads/20220917/4c57fbd8ae41738655acb7606de87d51.gif "add_image_resouce.gif")

#### 修改 Image 图片

然后，给 Image 控件指定一个图片资源。

![edit_image.gif](https://oss-club.rt-thread.org/uploads/20220917/777193040bbdf18918fec5d0f4f4c626.gif "edit_image.gif")

### 在 N9H30 开发板上的演示效果

[演示视频 mp4](https://club.rt-thread.org/file_download/41e6915102d9e641)

创建，拖动，改尺寸... 等等操作响应速度上还是很快的。无论是 tcp 还是 serial 通信媒介，在感官上没有速度差异。

### 完成的工作

1. 可实现创建各种控件。
2. 可改变对象位置、尺寸、以及其它基础属性。
3. 可修改控件特有属性，例如 Bar 的 value，Label 的 text，Arc 的起止角度等等。
4. 可添加新图片，并改变 Image 控件显示图片。
5. 可通过 `lv_obj_set_style_xxx` 函数簇修改对象样式。

### 遇到的问题

1. 添加字体比较困难，只能使用内置字体。如此一来，想改变字号查看效果的时候，还是躲不掉重新编译程序。
2. 未实现使用 `lv_style_set_xxx` 设置样式方式修改对象样式（理论上可行）。
3. 两个不同版本 lvgl 实现的远程端和本地显示差别太多了。升级 LVGLBuilder 使用的 lvgl 版本工作量还很大。
4. LVGLBuilder 本身有很多 bug 没解决，使用过程发现很多问题，降低了使用体验。

### 部分接口定义展示

以下列出部分 IDL 定义的函数接口。
```
interface ISDesigner
{
    isd_scr_act(void) -> pLvObject
    isd_scr_clear(void) -> void
    isd_obj_create(pLvObject obj) -> pLvObject
    isd_obj_del(pLvObject obj) -> void
    isd_obj_clean(pLvObject obj) -> void
    isd_obj_add_flag(pLvObject obj, uLvObjFlag flag) -> void
    isd_obj_clear_flag(pLvObject obj, uLvObjFlag flag) -> void
    isd_obj_add_state(pLvObject obj, uLvState state) -> void
    isd_obj_clear_state(pLvObject obj, uLvState state) -> void
    isd_obj_set_pos(pLvObject obj, iLvCoord x, iLvCoord y) -> void
    isd_obj_set_x(pLvObject obj, iLvCoord x) -> void
    isd_obj_set_y(pLvObject obj, iLvCoord y) -> void
    isd_obj_set_size(pLvObject obj, iLvCoord w, iLvCoord h) -> void
    isd_obj_set_width(pLvObject obj, iLvCoord w) -> void
    isd_obj_set_height(pLvObject obj, iLvCoord h) -> void
    isd_obj_set_align(pLvObject obj, uLvAlign align) -> void
    isd_obj_align(pLvObject obj, uLvAlign align, iLvCoord x_ofs, iLvCoord y_ofs) -> void
    isd_obj_move_to(pLvObject obj, iLvCoord x, iLvCoord y) -> void

isd_bar_create(pLvObject obj) -> pLvObject
    isd_bar_set_value(pLvObject obj, int32 value, int32 anim) -> void
    isd_bar_set_start_value(pLvObject obj, int32 start_value, int32 anim) -> void
    isd_bar_set_range(pLvObject obj, int32 min, int32 max) -> void
    isd_bar_set_mode(pLvObject obj, uLvBarMode mode) -> void
```

大多数情况，还是可以和 lvgl 函数原型保持一致的，但是也不排除某些函数特殊需要调整函数原型。

## 结束语

到目前为止，笔者当初的设想完成大多半了。虽如此，还不算完整。已实现的总那么清晰，未完成的终究是心中的痛。剩下的，除了字体的问题其余都得先升级 LVGLBuilder 才能有效解决，以后有时间再慢慢重构 LVGLBuilder 的问题。

***相关文章***

[rt-thread 移植 eRPC 系列（一） 之 简介](https://club.rt-thread.org/ask/article/3acf471c19f2595f.html)
[rt-thread 移植 eRPC 系列（二） 之 演示](https://club.rt-thread.org/ask/article/7b9ed79f35c8e568.html)
[rt-thread 移植 eRPC 系列（三） 之 Porting](https://club.rt-thread.org/ask/article/1713a66f5576e9ae.html)
[rt-thread 移植 eRPC 之 Transport （winsock2）](https://club.rt-thread.org/ask/article/150d53743636c899.html)
[rt-thread 移植 eRPC 之 Transport （lwip）](https://club.rt-thread.org/ask/article/ac4f22c4655f5581.html)
[rt-thread 移植 eRPC 之 Transport （serial）](https://club.rt-thread.org/ask/article/01c0c4f945836b9e.html)