Arduino-ESP32:LVGL项目系列(第一篇) – 整体架构

前言

毕设拿LVGL做了一个GUI,用的就是arduino编译器和ESP32板子,整体上虽然不复杂,但是也挺多的,这里把整个项目的LVGL部分记录一下。代码有需要的话可以邮箱找我要。

概述

在ESP32上的部分都是基于前面几篇博客循序渐进来的,首先是搭建环境arduino-esp32:开发环境搭建,然后是把触摸显示屏驱动起来arduino-esp32:基于TFT-eSPI库实现触摸显示屏,然后引入LVGLarduino-esp32:使用LVGL以及其中文字库arduino-esp32:LVGL中文字库(通用),接下来就可以通过观察在模拟器中各个API的效果arduino-esp32:LVGL的VS2019模拟器来在arduino里编写需要的组件和代码了。
这是一个当时录制的演示视频。

smartCarVideo

整体框架

整体上分成了五个模块:

  • 控制模块
  • 数据显示模块
  • 参数调整模块
  • 网络连接模块
  • 网络数据收发模块
  • 每个模块都整合了一类的功能,每个模块的GUI部分使用LVGL提供的API来绘制,数据和逻辑部分使用NRF来和底层交互。
    由于arduino这个编译器提供的编辑器的局限性,所以这里使用的是外部编辑器sublime。虽然把所有的代码都写在一个文件夹并不是一个好的习惯,但是这里还是由于arduino的特殊性,这部分的代码都整合在了同一个ino工程文件里,代码总量是1900多行,其中GUI部分大概占了60%,剩下的就是数据处理部分了。

    控制模块

    控制模块用于控制小车的前后左右转向。GUI如下。主要就是左边的控制器部分,长按后会出现特效,然后开始下发指令,松手即停。

    数据显示模块

    数据显示模块用于显示小车上传的数据,GUI如下。一共三种数据显示的类型,第一种就是上图右边部分的赛道显示,其实就是一个简单的小车边线识别的结果,第二个是速度数据,图像循环右移,每0.5秒刷新一次,第三种绘制摄像头帧图像的灰度分布图,x轴188列,对应图像的宽度,y轴256行,对应灰度值,后两种数据类型每1秒刷新一次。


    数据调整模块

    数据调整模块用于下发对小车的模式切换和模式参数,GUI如下。上电会弹出一个操作阻塞的弹窗,用于下发自动或手动模式的选择结果,配置界面存在四个跳转按钮,跳转后可以进入主配置界面,运行模式可以在这里继续切换,速度通过滑动框选择,上一个模块的数据显示部分可以在这里来进行切换。


    网络连接模块

    网络连接模块提供了一个类似于手机和平板的交互式连接WIFI的功能,GUI如下。点击开启开关后,将会扫描WIFI热点,扫描结束会列举至多12个热点,可以手动的选择一个,输入密码即可开启连接过程,并提示过程和结果。





    网络数据收发模块

    网络数据收发模块提供与云服务器的MQTT连接过程,以及对主题的订阅和发布,该模块只有连接了WIFI成功后才会出现,其GUI如下(当时没拍照,在视频里截了几张)。打开开关后就会开始连接云服务器,连接成功会提示,数据的上传下发都会在屏幕上显示,开启网络服务后速度数据会实时上传到云服务器对应的主题上,并订阅相应的主题。


    其他模块

    还存在一个对系统的配置,用于调整屏幕的亮度,其GUI如下。滑动滑块即可在0%到100%之间调整屏幕的亮度。

    小结

    整体的GUI框架就是这些,其中还包括对背景颜色、布局设计以及右上角图片的引入,留在之后代码部分再说。

    物联沃分享整理
    物联沃-IOTWORD物联网 » Arduino-ESP32:LVGL项目系列(第一篇) – 整体架构

    发表评论