两周前,在查找一些嵌入式GUI库的相关资料的时候,经过反复搜索,终于被我发现了一个原始控件比较美观,并且开源的库——LittlevGL。
虽然事实上,我从来没有实际使用过GUI库,但是有专门了解过一些相关的情况。最初的动机是嫌弃emWin的控件风格比较落后,可视化开发工具也不好用,过于简单,并且实际应用需要付费取得授权,想要寻找替代品。后来有了解到性能出色、风格现代化的TouchGFX、Embedded Wizard,官方给出的Demo非常漂亮,可惜一样是需要付费取得授权的。最初看到uGFX的相关介绍,曾以为μGFX是免费的,然而仔细一查,商业用途还是需要付费取得授权。

在了解过付费嵌入式GUI库的授权价格(授权价格为数千美元或者数千欧元不等)之后,一个开源的、免费的库就显得更加有吸引力。
LittlevGL已经成为了开源RTOS(实时操作系统)RT-Thread的GUI软件包之一。从目前了解到的信息来看,LittlevGL确实是一个不错的选择。

官方提供了PC模拟器,可以在电脑上看到界面实际运行的效果。尽管模拟器不能进行可视化界面开发,还是会很有帮助。我已经在Windows 10和Ubuntu18.04上成功运行了官方提供的模拟器。
官方提供的模拟器基于开源的集成开发环境Eclipse。事实上LittlevGL的官网已经提供了完整的运行模拟器的教程,在Linux环境下操作非常简单。在Windows环境下,开发环境的配置略微复杂一些,容易忽略一些操作,导致失败。
这里按照官方教程,完整描述一遍运行模拟器的过程。
1.安装Eclipse CDT(Eclipse C/C++开发工具)
Eclipse是一个基于Java的免费的集成开发环境,有多个版本,支持包括Java、Python、Android APP、C/C++、PHP在内的众多不同编程语言的应用开发。
Eclipse的安装非常简单,不依赖操作系统,甚至直接解压软件的压缩包在任意位置即可使用。Eclipse官网提供了Eclipse安装工具,可以非常简单地进行安装。
在Eclipse官网下载安装工具。



双击运行安装工具,选择Eclipse IDE for C/C++ Developer进行安装。



尝试启动Eclipse,如果无法正常启动,说明电脑缺少JRE(Java运行环境),应当在Java官方网站的下载页面下载Windows版本的JRE并安装。截止2018年9月,最新的JRE版本是jre-8u181-windows-x64.exe。

按照提示进行安装,或者更改安装路径后按照提示进行安装即可。安装完毕,再尝试运行Eclipse,应当可以成功运行。
eclipse每次启动之后,会提示选择自己的工作区域路径,如图。

2.安装MinGW
LittlevGL官方提供的PC模拟器原本是设计运行在Linux环境中的。Windows中,需要安装专门的支持,以在Windows平台使用Linux平台中常用的gcc等工具。
按照官方教程,下载MinGW(64 bit version for Windows)。按照提示下载,得到安装程序mingw-w64-install.exe。双击运行程序,如图进行设置,第一项版本选择最新版本,第二项架构选择“x86_64”架构,其他保持默认即可。

点击“Next”,选择安装路径,并按照提示完成安装。当然最好路径中不包含中文字符。安装完成之后,将安装路径下的bin文件夹的完整路径添加到环境变量“PATH”,并重启电脑。例如,我的路径是
D:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin
重启电脑之后,在命令行输入指令“gcc -v”,正确显示gcc版本号,证明安装成功。
3.安装SDL 2
SDL 2是一个用来在PC上模拟TFT屏和触摸板实际运行情况的跨平台的库。按照官方的要求操作即可。下载SDL 2(SDL2-devel-2.0.8-VC.zip SDL2-devel-2.0.9-mingw.tar.gz)。进行以下操作:
- 解压压缩包
- 复制文件夹…_mingw32/include/SDL2到…/MinGW/…/x86_64-w64-mingw32/include
- 复制文件夹…_mingw32/lib/内的全部文件到 …MinGW/…/x86_64-w64-mingw32/lib文件夹
4.下载、配置、运行模拟器
将压缩包解压到自己选择的{eclipse的工作区域路径}下。
复制文件…_mingw32/bin/SDL2.dll到{eclipse的工作区域路径}/pc_simulator/Debug/。
启动Eclipse,选择自己的{eclipse的工作区域路径},File -> Open Projecs from File System -> 选中pc_simulator文件夹,导入porject。
此时点击编译器顶部的锤子图标尝试进行编译的话,会提示错误,还需要进行配置。
按照顺序project -> Project properties -> C/C++ Build -> Settings -> Libraries -> Add … 进行操作,在SDLmain和SDL之前添加一项mingw32,如图。

按照顺序project -> Project properties -> C/C++ Build -> Tool Chain Editor进行操作,设置工具链为MinGW GCC,设置builder为CDT Internal Builder,如图。
按照顺序project -> Project properties -> C/C++ Build -> Tool Chain Editor进行操作,设置工具链为MinGW GCC,设置builder为CDT Internal Builder,如图。

按照顺序project -> Project properties -> C/C++ General -> Paths and Symbols -> include -> GNU C -> Add …,进行操作,添加一个路径,${MINGW_HOME}/include,这一步官方教程中没有说明,会导致报错找不到文件SDL2/SDL.h,如图。

点击右下角的Apply and Close按钮,应用设置并关闭窗口。
点击锤头图标进行编译,无错误,点击箭头图标运行,成功显示Demo界面。如图。

5.在Ubuntu上运行模拟器
在Linux环境运行该模拟器比在Windows环境要简单很多。使用以下命令配置运行环境:
- 查询SDL2库的最新版本号:
apt-cache search libsdl2
- 安装最新版本的SDL2库:
sudo apt-get install libsdl2-2.0-0
- 安装SDL2开发包:
sudo apt-get install libsdl2-dev
- 如果没有的话需要安装:
sudo apt-get install build-essential
结束语
写这篇教程写得实在是有点艰难,一来工具不是很熟悉,边写边摸索,索性没犯什么严重的错误;二来教程内容几经修改,差点写入过多不相关的内容。以后应该会做得更好一些。
将LittlevGL运行在单片机上,目前有点想法,但是手头没有合适的物料,可能要往后推了。
继续推一下自己的微信公众号。
