近來使用一款帶電容觸摸的TOPWAY7寸智能顯示模塊制作了一個(gè)水質(zhì)檢測(cè)儀，利用TOPWAY官方提供的智能LCD模塊開發(fā)工具，能夠類似開發(fā)C#上位機(jī)（并且可以省去C#中代碼編寫的部分），省去正常開發(fā)中單片機(jī)去驅(qū)動(dòng)屏幕移植GUI等過程，只需添加簡(jiǎn)單的協(xié)議交互，可以快速高效的實(shí)現(xiàn)項(xiàng)目需求，節(jié)省大量的開發(fā)時(shí)間和硬件成本。

一、項(xiàng)目簡(jiǎn)介

1、需求分析：

1）采集數(shù)據(jù)（定時(shí)采集水體的PH值和溫度，以及環(huán)境的溫濕度）

2）顯示在屏幕上（將采集的值實(shí)時(shí)顯示在屏幕上）

3）曲線展示（以曲線的形式將一段時(shí)間內(nèi)的變量顯示在屏幕上）

2、項(xiàng)目流程：

1）屏幕內(nèi)容設(shè)計(jì)（主要設(shè)計(jì)屏幕的顯示內(nèi)容和控件使用）

2）硬件設(shè)計(jì)（電源、傳感器接口、屏幕接口）

3）軟件設(shè)計(jì)（數(shù)據(jù)采集以及屏幕與單片機(jī)信息交互）

硬件：NUCLEO-G070RB及硬件擴(kuò)展板、PH溫度采集傳感器、TOPWAY- HMT070ETD-1D

開發(fā)工具及版本：TOPWAY SGTools V9.35、STM32CuBeMx V6.4.0 、KEILMDK V5.25、PhotoShop

二、屏幕內(nèi)容設(shè)計(jì)

1、界面規(guī)劃

根據(jù)需求，需要設(shè)計(jì)三個(gè)界面

a)主界面：顯示時(shí)間及各類傳感器實(shí)時(shí)值；

b)水質(zhì)曲線顯示：顯示PH值和水溫的動(dòng)態(tài)曲線；

c)溫濕度曲線顯示：顯示環(huán)境溫濕度的動(dòng)態(tài)曲線。

2、設(shè)計(jì)資源整理

d)主界面：僅需要一個(gè)背景圖即可，其他的都可以用屏幕設(shè)計(jì)工具設(shè)計(jì)；

e)水質(zhì)曲線顯示：需要兩個(gè)圖標(biāo)和兩個(gè)坐標(biāo)軸；

f)溫濕度曲線顯示：需要兩個(gè)圖標(biāo)和兩個(gè)坐標(biāo)軸。

可以在網(wǎng)上尋找資源或者配合公司UI人員去設(shè)計(jì)，這里我在網(wǎng)上找了背景圖和圖標(biāo)，并使用PhotoShop和Word工具制作了坐標(biāo)軸。

3、界面設(shè)計(jì)

a)創(chuàng)建工程

使用TOPWAY SGTools V9.35工具創(chuàng)建工程

創(chuàng)建工程和文件夾并選擇使用的屏幕類型，這里可以根據(jù)屏幕的大小篩選可以更快選擇，這里選擇屏幕大小時(shí)可以根據(jù)實(shí)際情況選擇0°/180°（正常顯示，即1024*600）或者90°/270°（旋轉(zhuǎn)90°顯示即600*1024）。

b)導(dǎo)入素材

工程文件夾中添加兩個(gè)文件夾分別存儲(chǔ)圖標(biāo)和背景圖（看個(gè)人習(xí)慣）

在工程資源欄中，右鍵背景圖和圖標(biāo)分別添加背景和圖標(biāo)

c)選擇字庫(kù)

菜單欄中 工具-字體設(shè)置中可以選擇合適的字庫(kù)

其中字體配置1中都是一些固定的字庫(kù)，可以直接來用。

字體配置2中可以自己去創(chuàng)建自定義寬高的字體，讓開發(fā)有更多的選擇，也十分的方便，不過需要注意，生成的字庫(kù)也比較大，還是適量的添加，不然太耗屏幕本身的存儲(chǔ)了。

d)新建頁(yè)面并添加控件

按照規(guī)劃，需要新建三個(gè)頁(yè)面更換對(duì)應(yīng)的背景，添加所需的控件。

控件使用情況：

靜態(tài)字符串-用來顯示一些靜態(tài)的字符，比如標(biāo)題，變量名稱及固定符號(hào)等

日期時(shí)鐘-用來顯示時(shí)間

數(shù)字-顯示變量

表盤-直觀顯示變量范圍

進(jìn)度條-直觀顯示變量范圍

曲線-顯示變量的動(dòng)態(tài)變化過程

觸摸鍵-人機(jī)交互（調(diào)整時(shí)間，變換不同頁(yè)面等）

頁(yè)面0：

頁(yè)面1：

頁(yè)面2：

e)調(diào)整控件

調(diào)整控件可以使用工具欄中的對(duì)齊工具，可以拯救強(qiáng)迫癥患者

f)添加變量并綁定編輯

根據(jù)實(shí)際使用情況新建變量，這里只使用了16位數(shù)字變量和曲線變量

在對(duì)應(yīng)的控件屬性VP地址里綁定對(duì)應(yīng)的變量的地址，同時(shí)也可以修改顏色大小等。

例如下圖中這個(gè)進(jìn)度條顯示，可以用顏色顯示直觀顯示出PH狀況，首先需要修改方向?yàn)閺纳系较拢J(rèn)為從左到右），然后前景色1和2選為代表PH為0時(shí)的紅色和PH為14的紫色，選擇合適的間隔和步進(jìn)，綁定VP地址，設(shè)置最小值和最大值

其余的數(shù)字、表盤和曲線都綁定并編輯

g)添加觸摸鍵

添加觸摸鍵的方式有兩種，一種是直接在控件上右鍵，選擇添加觸摸鍵，如下：

另一種是直接在控件欄添加控件，自由調(diào)整大小。

這里我使用的是自由添加的模式，如下圖，主界面中時(shí)間里年月日時(shí)分秒分別添加了觸摸鍵，用來調(diào)整時(shí)間，下邊兩個(gè)區(qū)域分別添加了觸摸鍵，用來跳轉(zhuǎn)到其他界面。

在時(shí)間這邊，還需要每個(gè)添加一個(gè)數(shù)字鍵盤，并綁定變量地址，調(diào)整一下最大最小值。

這樣可以通過觸摸鍵呼叫出數(shù)字鍵盤，輸入時(shí)間，下發(fā)到單片機(jī)，再由單片機(jī)返回設(shè)置指令到屏幕，達(dá)到設(shè)置時(shí)間的效果。

也可使用TOPWAY的屏內(nèi)RTC時(shí)鐘功能, 并使用"RTC鍵盤(PIP)”替代，讓開發(fā)設(shè)計(jì)更加便捷。

跳轉(zhuǎn)界面就更簡(jiǎn)單了，可以直接跳轉(zhuǎn)到目標(biāo)頁(yè)面，在其他界面也可以添加觸摸鍵用來返回到主界面。

三、硬件設(shè)計(jì)

原理圖如下：

主要包括12V電源接口（NUCLEO板上有12V-5V-3.3V，所以就不需要再轉(zhuǎn)換了）、NUCLEO擴(kuò)展接口、水質(zhì)傳感器接口（溫度+PH）、屏幕接口、溫濕度AHT10、串口轉(zhuǎn)232和串口轉(zhuǎn)網(wǎng)口（使用的是億佰特的模塊），其中串口轉(zhuǎn)232和串口轉(zhuǎn)網(wǎng)口可以二選一，因?yàn)槠聊皇侵С?32和以太網(wǎng)口的，可以根據(jù)不同情況來切換。

PCB實(shí)物圖如下：