基于TOPWAY液晶屏的水質(zhì)檢測儀設計

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

一、項目簡(jiǎn)介

1、需求分析：

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

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

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

2、項目流程：

1）屏幕內容設計（主要設計屏幕的顯示內容和控件使用）

2）硬件設計（電源、傳感器接口、屏幕接口）

3）軟件設計（數據采集以及屏幕與單片機信息交互）

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

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

二、屏幕內容設計

1、界面規劃

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

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

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

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

2、設計資源整理

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

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

f)溫濕度曲線(xiàn)顯示：需要兩個(gè)圖標和兩個(gè)坐標軸。

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

3、界面設計

a)創(chuàng )建工程

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

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

b)導入素材

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

在工程資源欄中，右鍵背景圖和圖標分別添加背景和圖標

c)選擇字庫

菜單欄中 工具-字體設置中可以選擇合適的字庫

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

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

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

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

控件使用情況：

靜態(tài)字符串-用來(lái)顯示一些靜態(tài)的字符，比如標題，變量名稱(chēng)及固定符號等

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

數字-顯示變量

表盤(pán)-直觀(guān)顯示變量范圍

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

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

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

頁(yè)面0：

頁(yè)面1：

頁(yè)面2：

e)調整控件

調整控件可以使用工具欄中的對齊工具，可以拯救強迫癥患者

f)添加變量并綁定編輯

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

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

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

其余的數字、表盤(pán)和曲線(xiàn)都綁定并編輯

g)添加觸摸鍵

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

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

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

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

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

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

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

三、硬件設計

原理圖如下：

主要包括12V電源接口（NUCLEO板上有12V-5V-3.3V，所以就不需要再轉換了）、NUCLEO擴展接口、水質(zhì)傳感器接口（溫度+PH）、屏幕接口、溫濕度AHT10、串口轉232和串口轉網(wǎng)口（使用的是億佰特的模塊），其中串口轉232和串口轉網(wǎng)口可以二選一，因為屏幕是支持232和以太網(wǎng)口的，可以根據不同情況來(lái)切換。

PCB實(shí)物圖如下：