标签：多端 SquareLine 单色编译文件夹 ui LVGL 移植

说明：

端午在家宅，进行了LVGL的多端移植测试。

目标是使用Squreline绘图生成的同一段代码，实现在PC端、安卓端、彩屏单片机端、单色屏单片机端四端显示。最终目标我是想实现在任意一端操作界面，其他几端都能实现同步变化。
目前已经实现了四端的简单显示：
安卓手机端、墨水屏手机、单片机彩屏端、单片机单色黑白屏端：
Windows端：
我手头上也有几款能用于移植演示的linux开发板，但由于我的老电脑坏掉了，新的电脑环境配置还没装，所以嵌入式Linux就还没弄。但是想来也是一样的效果。

简单教程

1. 硬件和环境说明

目前使用的硬件如下：

安卓：使用了一款电子墨水屏手机，一款普通手机，开发环境为AndroidStudio
单片机彩屏开发板，是ArtinChip基于D133CBS的昆仑派开发板,分辨率480*272，带触摸
单片机单色屏开发板，是我自己画的板子，可以放单色电子墨水屏和一款鱼鹰光电的2.9寸类墨水屏高反TFT单色屏，图上的是鱼鹰光电的屏。电子墨水的屏之前驱动没问题，电路板其实还有几块，但是懒得装了，就没放上去测试。目前的单片机是STM32F401，后续会换成HC32F460芯片（板子也画好了，程序也调过，但是可能我买了假的芯片，烧写几次就报废烧不进去了，所以懒得焊接了，已经放在一边好久了，上班都没心情焊板子，更别说下班了，哈哈）。
桌面端使用Code::Blokcs的LVGL模拟器环境

2. 使用SquareLine创建一个简单的页面

在[SquareLine]页面下载并安装的最新软件。
它有30天的免费试用期。
然后，首先创建一个新的工程，保存到你能找到的文件地址中，然后设置分辨率，我设置的是480*320，这个可以自行根据需要来，毕竟是测试。界面如图：
中文的导入方式：
- 首先，在电脑中搜索.ttf格式的字库文件，选一个你要用的中文字库，将它复制到上面保存的文件地址中的assets文件夹下
- 然后在界面上点击右侧的font界面，此时可以刷新出刚刚复制的字体库，然后在Symbols文本框中输入你需要的中文字体
此处我还没搞清楚怎么样支持外部flash的字库，后续我会根据需要搞一下。因为我最终是想实现一个文本阅读器的，不可能只显示极个别的中文。
- 然后就可以使用中文了：
- 点击Export来导出文件,第一次需要选择保存点，此处我们创建一个ui文件夹，用于放导出的文件。这个文件夹就是后面我们需要用到的文件。
  
  注意：直接复制ui文件的话，有些地方需要改路径，比如 #include "lvgl/lvgl.h"会报错，改为 #include "lvgl.h" 即可。具体的请自行根据实际情况判断处理。

3. PC客户端移植

使用LVGL官方教程，有一个 Code::Blocks的模拟器教程：从 [Simulator on PC] 页面跳转到 [code::blocks]页面，根据教程一步一步来，先下载codeBlocks，然后下载当前git，再下载lvgl包，解压到对应文件夹，再使用codeBlocks打开工程，然后一步步直到编译通过。
但是官网的是最新的9.1版本的LVGL，所以内部只有一个lvgl文件夹，不需要像这个教程一样下载多个。
以上环境搭建好，并且能够编译执行，正常跳出LVGL界面后，说明环境搭建完成。此时其实运行后会显示一个命令行的黑框，在 [build->select target]中选择Release版本就没有了。但是新的环境选择release版本会报错，我以前在公司的环境解决过，好久没弄，忘记怎么弄了，家里面的环境还是报错。先不管它了。
然后将SquareLine生成的ui文件夹复制到codeblocks工程文件所在目录，然后在codeBlocks中对工程下的文件夹右击，选择 Add files recursively 来快速导入ui下所有的文件:

然后将ui/ui.c中的 ui_init() 替换掉之前main函数中的的LVGL的相关函数，然后包含相关的头文件，再次编译，修改代码直到编译成功即可运行看效果。

注意，SquareLine只能选择8.6或是8.11版本的LVGL，而codeblocks下载的LVGL大概率是最新版V9.0的，所以内部有些函数是不兼容的，主要报错例如：
error: unknown type name 'lv_scr_load_anim_t'; did you mean 'lv_screen_load_anim_t'?|
则是由于新的函数命名不同，可以按照后面的提示，改为 lv_screen_load_anim_t 即可（其他还有 lv_screen_load_anim 等也类似处理）。

还有一个报错是：undefined reference to `lv_mem_free'，改为 lv_free 即可。
其他的错误自行处理。

如果报错位置类似于：

#if LV_COLOR_DEPTH != 16
    #error "LV_COLOR_DEPTH should be 16bit to match SquareLine Studio's settings"
#endif

可以直接屏蔽掉中间的 #error 预编译指令，或者自行更改对应程序的LVGL配置。

一切无误后，点击运行则会实现与SquareLine中绘制的同样的界面（如果不是的话，可能是配置中的界面大小不同，找一下配置一下即可）。

本来想移植为与SquareLine同样版本的LVGL的，但是移植了半天，还是没成功，直接替换LVGL文件夹的话，最后有个.cbp的工程文件需要处理，没时间搞明白它了，就先放着。

4. 安卓端

安卓端我是参考的 [LVGL-在安卓上的移植].

- 首先安装[AndroidStudio],搭建好必要的环境后，它会自行安装一些环境包。（写安卓我是业余的，虽然很久之前就开始用AndroidStudio写过安卓程序了，还学过写小游戏，但是一直没做过项目，都是自己玩，所以很水，时间长了就忘了，页面只会用原生的拖拽控件实现，也没学控件美化，很丑，所以想看看移植LVGL后效果怎么样，如果还可以的话就多用LVGL写界面）。
前期我是移植编译不通过，然后胡乱按了一下 Ctrl+F5 还是 Ctrl+F9来着，它自己就把一些包下载好了。前期还会一个版本的错误，直接在 build.gradle 中将 minSdkVersion 由19改为21 就能用了

一切编译通过后，插上手机，正确识别后（多数手机现在都需要打开开发者模式，允许USB调试。魅族手机是需要在 [设置 -> 我的手机 ]中连续点击系统版本 5次，然后就可以在设置的附中功能中找到开发者选项，并打开USB调试。海信手机是在[设置->关于手机]中连续点击内核版本号，就能打开开发者模式。其他手机自行查找）即可点击运行调试。一切顺利后就能运行其编写的测试程序了。
运行成功后，即可移植我们自己的ui程序。
将ui文件夹直接复制到安卓工程所在文件夹下的 lvgl-android\app\src\main\cpp 文件夹下，与LVGL放在同一文件夹下（其他文件夹也行，自行处理），然后用 ui_init() 替换之前的代码，包含头文件，一切正确后即可编译通过，然后用虚拟机或是实际手机就可以查看效果了，触摸也能用。
由于手机分辨率高，480*272屏幕下绘制的各种控件看起来很大，但是放到手机中就非常小了，所以分辨率的适配还是一项很繁杂的功能，因为SquareLine生成的代码都是绝对地址，而且是像素级别的，所以如果想适配屏幕，要么重新用SquareLine绘制对应屏幕大小的控件，要么自己手动更改每一个控件的值。

5. MCU端

　　硬件使用的是ArtinChip的基于D133的昆仑派。这个芯片速度是480MHz，但是实际上跑LVGL跑分结果普遍在60-70FPS，而同样速度的STM32H750，同样的480*272的屏幕，我记得跑速普遍在180FPS（具体记不清了，以前在公司买的开发板上跑过），不知道是它没优化好还是真的就那么大差距。

它的资料都在 [ArtinChip]，按照教程下载文件包和下载工具后就能用了，环境都包含好了。里面也有各种开发教程。
将ui文件夹复制到packages的lvgl-ui文件夹下。由于使用的是RTT的scons编译环境，所以需要构建编译链，用的是SConscript脚本。
直接复制lvgl-ui下的SConscript文件到 ui 文件夹下，将if GetDepend 下面的 src += Glob('xxx)部分修改，增加ui文件夹下的所有.c文件的路径，然后就能编译通过了。将aic_ui.c中的demo部分的函数直接替换为ui_init() 并包含ui.h头文件，即可完成修改。编译后下载就能看到效果图，触摸也能用。
单色屏则需要首先实现单色屏的画点、刷屏函数。由于使用的单色屏它的刷新很慢，如果直接将画点函数和局刷函数移植到LVGL对应的接口上，效果很不好，会频繁的局刷，整屏显示要刷好久。所以将对应的函数绑定到向缓冲区画点，然后使用判断是否完成缓冲区的画点，完成后使用信号量来通知将缓冲区填充到屏幕，即可实现较为流畅的刷屏了。
另外由于是单色屏，所以需要根据颜色范围判断需要画黑点还是白点，以是否大于0x8FFF(使用16位色绘图时)来判断，就可以实现有效区分（实际上，绘图时只用了0xffff和0两种颜色，但是LVGL渲染字体时，部分像素会变浅，所以不能用0或0xFFFF来判断）
这个单色屏设备是我当时想做一款电子单词卡的项目，当时刚毕业没多久，软硬件功底都很一般，摸索着完成了。当时纯用裸机和手写界面，完成了菜单、TF卡文本阅读、单词卡展示切换等比较完善的功能。但是当时代码写的比较LOW，界面也是纯手绘，很LOW，硬件走线也很一般，本来一直想开源的，后面想想还是制作好一点再开源吧。结果这一拖就是好几年，专利没交钱也过期了。现在满大街都是电子单词卡，当年我做完了市场上都是没有的。
现在想着，用LVGL做一个多端同步的设备，可以做很多好玩的东西，就不单单是一个电子阅读器了。
另外，单色屏分辨率是 168*384，使用ui中的文件它会显示中间部分，所以图上控件放到中间单色屏上才能显示。
这款屏幕其实很奇怪，当时我买来时，它只有一个全屏刷图的例子，图片的分辨率很低。画点只能画一个矩形块！！经过我的尝试，才发现，它一个像素，前六位表示6个像素点，还是交叉排列的，后面两位是没用的！！就很奇葩的设计。估计他们的工程师也没调出来单个像素的画点，后面我搞定了。它清晰度是比同为2.9寸的电子墨水屏要高一些（电子墨水屏的分辨率是128*296的），但是反光效果不太好，有点像镜子，导致强光下灯珠都能看到，暗光下啥都看不到，所以需要找到角度才能看到，墨水屏在这方面会稍微强一点。二者刷新率都差不多，这个屏会快一些，但是会有很明显的卷帘现象，问了厂家也解决不了（可能是他们不上心），我也懒得看手册，先这么用吧。

结尾

首先得感谢上面我参考的一些文章作者。
对于多屏幕的快速适配我还需要多花点时间研究研究LVGL，比如安卓的分辨率较高，效果就不好，而且不同分辨率的屏幕显示大小也不同。而且安卓不是全屏，有框和提示，后面有时间我需要优化一下，争取多端都做到无边框。
还有就是PC端由于是9.0的LVGL版本，所以程序不是完全兼容，后面需要降级优化一下。

这次程序就不放了，因为分类太多，而且代码也没有几行需要自己写的，按照教程自行体验即可。

后面想做不少东西，顺便看看能不能用来挣点钱。马上要离职了，年纪也不小了，整天就玩玩板子写程序，拿着点工资，老婆都找不着，唉，得多考虑搞钱了，有钱才能找老婆，没钱只能打光棍。

本文水平有限，内容很多词语由于知识水平问题不严谨或很离谱，但主要作为记录作用，能理解就好了，希望以后的自己和路过的大神对必要的错误提出批评与指点，对可笑的错误不要嘲笑，指出来我会改正的。

另外，转载使用请注明作者和出处，不要删除文档中的关于作者的注释。

随梦，随心，随愿，恒执念，为梦执战，执战苍天！ ------------------执念执战

标签：多端,SquareLine,单色,编译,文件夹,ui,LVGL,移植
From： https://www.cnblogs.com/zhinianzhizhan/p/18240833

LVGL多端移植测试

说明：