LVGL项目实战之UI规划
**
实物购买：TB 南山府嵌入式
**
我们在在做项目之前，先需要确定项目的需求以及可能实现的功能，我们只有确定这些才能够对整体的框架进行把握。
本小结就说一下我们这个项目的一个整体的框架结构以及功能。
1-硬件构成
首先我们这是一个报警主机:
在我们的开发板上主要有以下组成：
| 涂鸦WiFi | 433接收模块 | eeprom |
|---|---|---|
| 音频播放单元 | LCD | 按键 |
| 串口 | STM32主控 | LED |
| 程序下载口 |
通过上面的功能构成了我们整个报警主机系统。
这些单元主要实现以下功能：
| 模块单元 | 功能 |
|---|---|
| 涂鸦WiFi | 作用功能：提供联网通信（对接涂鸦平台，使手机端对接联网） |
| 433接收 | 作用功能：接收从设备（门磁、遥控）信号 |
| eeprom | 作用功能：存储433接收到的数据（主要包括设备码、名称、类型等） |
| 音频播放 | 作用功能：模拟人声播放提示音（报警音、布放、撤防等） |
| LCD | 作用功能：显示图形界面内容数据（人机界面交互） |
| 按键 | 作用功能：页面、菜单切换等状态 |
| 主控STM32F103 | 作用功能：主控制单元 |
| 串口 | 作用功能：显示调试信息 |
| LED灯 | 作为状态指示灯 |
总体框架图如下：
2-软件UI构成
在上一结我们把硬件的总体框架进行了说明。这一节我们对UI的整体框架进行说明。
本项目有两个版本：一个是不带UI库的纯裸屏（界面有点丑）；一个是使用UI库的LVGL（界面好看许多）
我们这里主要对LVGL界面进行说明，非UI库的这里不在说明。同时那个也有对应的视频大家可以去看一下。这里也不再讲述涂鸦WiFi的移植，只对LVGL的实现进行讲解，后面都是一样的。
首先在实现UI之前我们要知道，我们要实现什么样的UI，怎么实现，解决这两个就行了。
在这里呢，我们这个项目就涉及到两块，一个是桌面的设计，一个是系统设置的设计。接下来我们就来说说这些。
2.1 桌面UI
首先开始的是桌面上的显示和设计。在我们这个项目中，桌面显示一些主要的信息。
我们首先想一想，我们这个项目是一个报警主机，既然是报警主机，那么要有报警主机的状态显示。同时我们也有WiFi，WiFi的连接状态也要进行显示。还有你需要判断接收到的433信号是遥控还是门磁的这么一个状态。
这些基本的有了，那么我们需不需要在显示一些其他的内容呢？比如时间？天气？等等。
当然，因为我们这个屏幕较小且内存较小无法显示更多的东西，所以我们只要显示时间就可以了。当然我只是告诉你们一种思路。
也可以显示一些其他的，比如说开机动画、厂商logo等，大家可以顺着这个思路进行。这里我并没有实现，原因呢还是内存的问题，因为这个项目的初衷就是为了让大家有一个对项目的基本了解，这个项目也是一个剪切版本。实际的功能比这稍微复杂一点。
要点：
桌面的功能就这些，那么报警有几种功能呢？这个在设计之初就已经确立。四种嘛。
所以桌面总体功能如下：
2.2 设置页面UI
设置里面其实也简单，根据我们开发板上面的单元。首先我们各个单元功能你要知道是干啥的。
知道这些之后才好设计。
我们有433接收单元，这个主要就是对从机进行配对的，既然是配对，那么我们是不是需要一个设备配对的菜单项。有配对，那么你添加设备要知道你添加的设备是遥控设备还是门磁设备呢？如果添加失败呢？这个你是不是要进行设计。
所有就有下面的图结构：
既然我们已经添加设备了，那需不需要把整个设备都给他列举出来，列出的目的是什么，首先我们能第一个想到的，就是查看设备信息，比如设备名称、设备码等。然后就是我这个设备不要了，那么久把这个设备进行删除。当然也需要编辑之类的，主要是修改设备类型（其实这个不要也行，因为我们的遥控码和我们的门磁码按键值是不一样的）。
所以就有如下图示：
然后我们有一个WiFi。你有WiFi的总要联网，你不可能拿着WiFi放那他自己就联网了。我们想一下，我们这个WiFi主要是做什么同时怎么去连接的，连接我们怎么去实现呢？要如何去实现。所以在这里我们的WiFi要实现联网状态的显示。
如下图所示：
我们在想想，你平时买手机如果弄的比较乱是不是想恢复以下出厂。对不，恢复到原厂的设置。这个实现比较简单。
还有就是主机厂商等的信息，这个要有吧，你作为一个厂家，你不希望把你的东西有你的名字。我是希望我的东西有我的名字，就像小学生，新书发下来，先把名字写上，代表这就是我们东西了。
3-总体软件框架
通过上面的分析呢，我们知道了我们整个UI界面框架的搭建。这样更利于大家分析。
这里提供一个整体的软件UI框架大纲：
