基于TOPWAY液晶屏的水质检测仪设计

近来使用一款带电容触摸的TOPWAY7寸智能显示模块制作了一个水质检测仪，利用TOPWAY官方提供的智能LCD模块开发工具，能够类似开发C#上位机（并且可以省去C#中代码编写的部分），省去正常开发中单片机去驱动屏幕移植GUI等过程，只需添加简单的协议交互，可以快速高效的实现项目需求，节省大量的开发时间和硬件成本。

一、项目简介

1、需求分析：

1）采集数据（定时采集水体的PH值和温度，以及环境的温湿度）

2）显示在屏幕上（将采集的值实时显示在屏幕上）

3）曲线展示（以曲线的形式将一段时间内的变量显示在屏幕上）

2、项目流程：

1）屏幕内容设计（主要设计屏幕的显示内容和控件使用）

2）硬件设计（电源、传感器接口、屏幕接口）

3）软件设计（数据采集以及屏幕与单片机信息交互）

硬件：NUCLEO-G070RB及硬件扩展板、PH温度采集传感器、TOPWAY- HMT070ETD-1D

开发工具及版本：TOPWAY SGTools V9.35、STM32CuBeMx V6.4.0 、KEILMDK V5.25、PhotoShop

二、屏幕内容设计

1、界面规划

根据需求，需要设计三个界面

a)主界面：显示时间及各类传感器实时值；

b)水质曲线显示：显示PH值和水温的动态曲线；

c)温湿度曲线显示：显示环境温湿度的动态曲线。

2、设计资源整理

d)主界面：仅需要一个背景图即可，其他的都可以用屏幕设计工具设计；

e)水质曲线显示：需要两个图标和两个坐标轴；

f)温湿度曲线显示：需要两个图标和两个坐标轴。

可以在网上寻找资源或者配合公司UI人员去设计，这里我在网上找了背景图和图标，并使用PhotoShop和Word工具制作了坐标轴。

3、界面设计

a)创建工程

使用TOPWAY SGTools V9.35工具创建工程

创建工程和文件夹并选择使用的屏幕类型，这里可以根据屏幕的大小筛选可以更快选择，这里选择屏幕大小时可以根据实际情况选择0°/180°（正常显示，即1024*600）或者90°/270°（旋转90°显示即600*1024）。

b)导入素材

工程文件夹中添加两个文件夹分别存储图标和背景图（看个人习惯）

在工程资源栏中，右键背景图和图标分别添加背景和图标

c)选择字库

菜单栏中 工具-字体设置中可以选择合适的字库

其中字体配置1中都是一些固定的字库，可以直接来用。

字体配置2中可以自己去创建自定义宽高的字体，让开发有更多的选择，也十分的方便，不过需要注意，生成的字库也比较大，还是适量的添加，不然太耗屏幕本身的存储了。

d)新建页面并添加控件

按照规划，需要新建三个页面更换对应的背景，添加所需的控件。

控件使用情况：

静态字符串-用来显示一些静态的字符，比如标题，变量名称及固定符号等

日期时钟-用来显示时间

数字-显示变量

表盘-直观显示变量范围

进度条-直观显示变量范围

曲线-显示变量的动态变化过程

触摸键-人机交互（调整时间，变换不同页面等）

页面0：

页面1：

页面2：

e)调整控件

调整控件可以使用工具栏中的对齐工具，可以拯救强迫症患者

f)添加变量并绑定编辑

根据实际使用情况新建变量，这里只使用了16位数字变量和曲线变量

在对应的控件属性VP地址里绑定对应的变量的地址，同时也可以修改颜色大小等。

例如下图中这个进度条显示，可以用颜色显示直观显示出PH状况，首先需要修改方向为从上到下（默认为从左到右），然后前景色1和2选为代表PH为0时的红色和PH为14的紫色，选择合适的间隔和步进，绑定VP地址，设置最小值和最大值

其余的数字、表盘和曲线都绑定并编辑

g)添加触摸键

添加触摸键的方式有两种，一种是直接在控件上右键，选择添加触摸键，如下：

另一种是直接在控件栏添加控件，自由调整大小。

这里我使用的是自由添加的模式，如下图，主界面中时间里年月日时分秒分别添加了触摸键，用来调整时间，下边两个区域分别添加了触摸键，用来跳转到其他界面。

在时间这边，还需要每个添加一个数字键盘，并绑定变量地址，调整一下最大最小值。

这样可以通过触摸键呼叫出数字键盘，输入时间，下发到单片机，再由单片机返回设置指令到屏幕，达到设置时间的效果。

也可使用TOPWAY的屏内RTC时钟功能, 并使用"RTC键盘(PIP)”替代，让开发设计更加便捷。

跳转界面就更简单了，可以直接跳转到目标页面，在其他界面也可以添加触摸键用来返回到主界面。

三、硬件设计

原理图如下：

主要包括12V电源接口（NUCLEO板上有12V-5V-3.3V，所以就不需要再转换了）、NUCLEO扩展接口、水质传感器接口（温度+PH）、屏幕接口、温湿度AHT10、串口转232和串口转网口（使用的是亿佰特的模块），其中串口转232和串口转网口可以二选一，因为屏幕是支持232和以太网口的，可以根据不同情况来切换。

PCB实物图如下：