LVGL项目实战之UI规划

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框架大纲：