《分享！！！》freeRTOS+littlevgl的综合demo

wancy2017 · 发表于 2019-9-10 16:42:13

本帖最后由 wancy2017 于 2020-4-10 09:35 编辑

之前给大家分享过移植lvgl的经验，这里就不过多的介绍littlevgl了。见帖子
http://www.firebbs.cn/forum.php?mod=viewthread&tid=23063&extra=page%3D1
http://www.firebbs.cn/forum.php?mod=viewthread&tid=23126&extra=page%3D1
说要搞事情，那就搞事情，咱不能食言。

这次仔细研究了下这个GUI，确实比较容易上手，代码易懂，而且自绘的控件都还比较美观。本来打算用rtt+lvgl来做一个demo的，奈何文件系统这块
一直不成功，于是就用了freeRTOS。这次我突然想到一个工具，对，就是cubemx，这个真的好用。就用鼠标勾选几个配置，然后就能生成一个工程文件，
编译后就能直接运行。大家可以尝试下。

littlevgl里的控件大都自绘，非贴图，算是目前见到的自绘控件里比较漂亮的。

   从想要做这个demo，到做到现在这个效果，前前后后花了我1个多月，自己去找素材，想着做哪些功能，然后怎么设计界面，学习这个GUI，学习它的
模拟器使用，开发环境的配置，相关工具的使用，耗了不少心血，最终还有些效果未实现。做GUI是真的难。
   下面就来介绍下这个demo：

    1、开机首页，做了6个模块，按钮使用的是imgbtn控件，这个控件是在5.1后的版本加的，按钮未按下需要贴一张图片，按钮按下后还需贴一张图片，
由于我未贴图片，所以按钮按下后会显示NO DATA。

2、相册应用。也是采用的imgbtn控件，对网上找到的图片做了一些裁剪，做了这样一个设计，自我感觉挺好看。三个相册，天行九歌，天涯明月刀OL，
LOL，只做了天行九歌的，找了天行九歌里所有美女的图片。这个相册应用有很大的bug，当切换两三张图片后，就会死机，我想可能是切图时没有释放内存
或者文件没有关闭导致，因为我使用了文件系统。这个还需要跟作者沟通反馈。做了个小动效，标题会从photos那个位置滑到返回键那里。

3、音乐播放器。定制了很多控件样式，也遇到了一个坑，就是控件对齐的时候，如果先是设置控件对齐，再设置控件的大小，那么控件对齐将会跟你想要
的效果不一样。解决方法有2个，先设置大小，再设置对齐。歌曲列表控件做了半透明，飞入的效果。但遗憾的是未能实现歌词的效果，GUI库里没这个控件，
得自己开发了，有兴趣的小伙伴可以开发一下。

4、灯光控制。这个GUI有个有意思的控件，就是LED控件，可以绘制一个圆形的led，然后打开这个led和关闭这个led分别有各自的效果，所以就做了
这个demo，刚好来控制板子上的RGB灯。下图一是关灯的效果，二是开灯的效果，颜色值都是随便取的。图三是RGB灯的效果。

5、设置界面。这个应用做了很多事，一一细看。这里的图标都是随便选的GUI内置的，可以自己根据需求做合适的图标字体放上去。lvgl的官网有介绍如何
添加自己的图标字体到工程里。https://docs.littlevgl.com/en/html/overview/font.html 。左侧导航栏可以按住上下滑动，做了一个上拉到底和下拉到顶的特效。

5.1、开发板状态。这里做了4个板块，SD卡存储空间，flash存储空间，内存使用，cpu使用。展示了很多控件，cont，bar，img，arc，chart等等。
当点击sdcard板块时，会弹出新的对话框，展示sd卡里的内容。这里我只做了UI效果，并未做文件系统读取的部分，需要实际使用的小伙伴可以把这部分
添上。也做了动态刷新cpu使用率的效果，但是代码部分被我注释了，小伙伴们可自己取消注释。

5.2、常规设置。这里做了几个功能的设置，分别是音量，呼吸灯开关，呼吸灯频率，屏幕亮度，语言，蜂鸣器。都只做了UI，没有跟实际硬件交互
小伙伴可自行加上这部分。本来是想做个汉化的，用它的字体生成工具生成了一个bin文件的字体，但是却未在GUI里找到解析bin文件字体的代码，所以就作
罢。因为我做的是个完整的汉字字库，所以项目里塞不下，只能做成bin文件放在sd卡。解决的方法有2个，可以只做常用的那2000多个汉字，用它那个工具
转换成C文件做到工程里；另外一种就是自己做FreeType字体的解码，参考网上的例程，比如挖坑网里有人做了，这样就不用再转化字体了。

5.3，5.4，未做
5.5、关于开发板。介绍了开发板的配置和本项目使用的一些资源。

      5.6、关闭应用

   6、时间设置。文字部分其实是个按钮，点击文字部分会弹出相应的对话框。时间文字的字体是用字体转换工具生成的60号字体，这里有点需要注意
的是，转换字体时一定要加上 --no-compress  这个参数，否则文字将不会显示。设置对话框使用了roller控件。

7、天气预报。重点来了，这个其实只是一张贴图！！！本来想做一个网络应用的，但是不知道做啥了。如果想做这个应用的小伙伴们，可以参照我之前
做的天气预报的帖子来完成这个。http://www.firebbs.cn/forum.php?mod=viewthread&tid=18644&extra=

   到此就讲完了。本来想把这个demo做完的，因为接下来还有别的事要做，就做到这个样子吧。接下来讲讲lvgl的知识点和坑。
   1、lv_win_clean，该函数清除的是窗口标题栏上的所有控件，包括标题和关闭按钮之类，我一直以为是清除窗口里的内容，直到我泪流满面。到现在我还
      没明白清除标题栏上的这些控件有什么用，因为一般标题栏上的这些控件都是不需要变动的。我需要的是点击了窗口里的某个控件，然后清除窗口里的
      内容，创建新的内容，比如显示sd卡里的文件列表时，点击其中一个文件夹，然后显示它里面的文件。
   2、style必须以static的形式声明
   3、控件没有ID，名字，当你在其他窗口获得上一个窗口的某个子控件的时候，需要把这个子控件声明成全局变量。
   4、tabview如果设置成滚动条在侧边，那么它的内容区域会出现大小错误
   5、做相册应用时，当使用文件系统切换上一张和下一张照片时，会出现bug，可能是内存没释放或者没有关闭文件导致的。使用的函数是lv_img_set_src(img, name);
   6、字体工具可以将字体生成bin文件，但如何调用这个bin文件暂未找到。
   7、图片旋转依赖画布，使用不方便。
   8、如何获得屏幕的触摸坐标？从lvgl的论坛上找到了答案。
      [mw_shl_code=c,true]void event_handler(lv_obj_t * obj, lv_event_t event)
{
if(event == LV_EVENT_PRESSING) {
      lv_indev_t * indev = lv_indev_get_act();
      printf("x:%d, y:%d\n", indev->proc.types.pointer.vect.x, indev->proc.types.pointer.vect.y);
}
}[/mw_shl_code]          本来我是想做一个“画板”的app的，但是一直不知道怎么获取屏幕坐标，后来在论坛上看到有人问这个，刚好作者也给出了解答，于是我又准备做这个app。
   但是新的坑又来了，lvgl不支持动态画线，line控件的两个坐标值必须是静态的常量。卒！

   这个demo算是量身为火哥的挑战者打造的，但是由于使用了大量的图片，而且图片都是放在SD卡的原因，再加上429不适合刷图，所以在开发板上跑的不太
流畅。其实这个gui本身还是很流畅的，尤其是我给它加了DMA2D以后。文件系统用的fatfs，作者已经做好了相应的接口，只需要移植好fatfs，然后注册一个文件
系统就行了。字体和图片是用的离线工具转换的，6.0版的工具需要安装PHP环境，按照lvgl在github上的教程来安装，感觉linux比windows要好装很多，需要花点
时间。

   这里放一段使用模拟器运行的效果视频：https://www.bilibili.com/video/av67166877/ 也是我B站第一个视频。
   最后声明，本项目无任何商业行为，仅供学习，图片素材全来源于网络，如有侵权，请联系删除。

   最最后，那就是我奋战1个多月的成果，为大家奉上。包含挑战者和模拟器两套，图片资源都放在工程里了，自己复制到sd卡。

由于文件太大，所以放到网盘
链接: https://pan.baidu.com/s/1bRo4nJXgh4YRuYZS82e3fQ 提取码: gb13

hqgboy · 发表于 2019-9-10 17:36:36

谢谢分享。。。。。。。。。。。。。。。。。

cp123456 · 发表于 2019-9-10 23:54:24

本来我是想做一个“画板”的app的，但是一直不知道怎么获取屏幕坐标，后来在论坛上看到有人问这个，刚好作者也给出了解答，于是我又准备做这个app。
但是新的坑又来了，lvgl不支持动态画线，line控件的两个坐标值必须是静态的常量。卒！

wancy2017 · 发表于 2019-9-11 10:32:35

感觉这个板块要被我霸榜了

东来东往 · 发表于 2019-9-11 16:15:16

非常感谢分享

msyeh · 发表于 2019-9-11 18:35:53

非常感谢分享

质的飞跃 · 发表于 2019-9-12 09:29:20

xxxxxxxxxxxxxxxxxxxxxxxx

郭大爷 · 发表于 2019-9-12 13:22:37

正好也想用这个gui，下载下来看看，楼主的思路

maqingyang · 发表于 2019-9-17 11:59:57

谢谢分享，学习一下

王小波 · 发表于 2019-10-24 15:37:44

12313246546

gk18965 · 发表于 2019-10-24 15:46:45

感谢分享，学习了。

超声波 · 发表于 2019-10-25 09:27:40

膜拜大佬，学习学习！

liangjn1984 · 发表于 2019-10-25 17:14:24

学习~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

apingzai · 发表于 2019-10-25 23:24:59

不错！刚好有块板。谢谢分享

dingfupeng · 发表于 2019-11-2 15:22:26

感谢分享，非常好。

andalau · 发表于 2019-11-8 17:54:11

谢谢分享，学习一下

hunyuanqi000 · 发表于 2019-11-10 14:47:43

看看，学习学习！！！！！！！！！！！！！！！！！！！！！！！！！！！！

xie402050431 · 发表于 2019-11-11 08:39:14

看看，，，，，，，，，

xudongqiang987 · 发表于 2019-11-11 10:20:36

666666666666666666666666666666

ST32_Ding · 发表于 2019-11-12 16:59:02

看看大佬的作品

阿峰 · 发表于 2019-11-13 10:53:06

感谢分享。。。。

berlin235 · 发表于 2019-12-5 17:10:11

太惊艳了

wx_ZGx4xgRU · 发表于 2019-12-9 19:32:22

gui gui gui

lazyisme · 发表于 2019-12-10 05:58:57

不错哦，很酷炫

大帅123 · 发表于 2019-12-10 23:08:34

谢谢分享！！！！

天道酬勤8988 · 发表于 2019-12-17 10:51:42

谢谢分享。。。。。。。。。。。。。。。。。

ou513 · 发表于 2019-12-17 11:44:14

这个膜拜膜拜

odeToJoy · 发表于 2019-12-19 14:20:48

谢谢分享
111111！!!!!!!

白开水与电脑 · 发表于 2019-12-22 16:29:18

你这个在stm32f469i试过吗

wancy2017 · 发表于 2019-12-24 11:59:02

白开水与电脑发表于 2019-12-22 16:29
你这个在stm32f469i试过吗

没试过，只在429上试过

hzxs533522 · 发表于 2019-12-25 09:14:22

看起来很不错哦，拿来学习学习

originalheart12 · 发表于 2019-12-26 09:55:14

6666666666666666666

布洛水 · 发表于 2019-12-29 19:11:39

楼主腻害，可以继续初好的GUI教程

caoenq · 发表于 2019-12-31 15:29:16

膜拜大佬。

Vendy · 发表于 2020-1-7 09:26:57

感谢作者无私奉献

skyate · 发表于 2020-1-16 10:13:37

感谢分享~紫薯布丁~

gentlman2006 · 发表于 2020-2-2 17:51:27

赞！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

徐满华 · 发表于 2020-2-4 01:02:22

不错，感谢！！！

徐满华 · 发表于 2020-2-4 01:02:47

非常感谢，正需要，谢谢！！

正义的伙伴 · 发表于 2020-2-6 12:47:52

一起学习littlevgl

hzwdyx · 发表于 2020-2-11 23:27:14

相当阔以，来学习，感谢分享

初晴sama · 发表于 2020-2-12 14:49:12

6666666666

fangfei19911 · 发表于 2020-2-14 17:03:34

66666666666666666666666666666666666666666666666

人生三问 · 发表于 2020-2-17 02:28:48

cp123456 发表于 2019-9-10 23:54
本来我是想做一个“画板”的app的，但是一直不知道怎么获取屏幕坐标，后来在论坛上看到有人问这个，刚好作 ...

动态曲线，可能需要自己做控件了

断小风 · 发表于 2020-2-24 15:09:13

顶顶顶顶顶顶顶顶

bog · 发表于 2020-3-2 15:08:26

学习学习，楼主辛苦了

浮华一世笑三生 · 发表于 2020-3-3 23:56:24

最近有项目要用到freertos+GUI,正在想要用那款GUI，先按搂主经验尝试一下。谢谢！！！

zy815678396 · 发表于 2020-3-4 01:46:52

真大佬，膜拜膜拜

疯小疯fxf · 发表于 2020-3-4 10:25:18

大佬大佬大佬大佬大佬大佬

呼噜噜 · 发表于 2020-3-7 09:21:46

哈哈哈121212121212121

账号		自动登录	找回密码
密码			注册

《分享！！！》freeRTOS+littlevgl的综合demo

主题推荐