一、項(xiàng)目背景

如上圖所示，迪文DGUS屏與單片機(jī)通過串口通信，來(lái)獲取單片機(jī)板輸入輸出狀態(tài)、AD電壓值，同時(shí)可以通過迪文DGUS屏實(shí)現(xiàn)按鍵控制控制板的輸出，并且可以進(jìn)行一些參數(shù)的設(shè)定。

二、準(zhǔn)備工作

1、 迪文4.3寸觸摸屏一個(gè)，分辨率480*272

2、 24V開關(guān)電源或可調(diào)電源 1 個(gè)

3、 界面圖片 4 張 分辨率480*272 bmp格式(一定要是bmp格式的，否則不能識(shí)別)

4、 迪文DGUS工具

5、 TF卡 1 張 （8G或以下，帶讀卡器）

6、 STC15系列控制板 1 塊

7、 USB轉(zhuǎn)RS232串口線

8、 串口助手

三、能力要求

1、 圖形界面設(shè)計(jì)，最好是會(huì)試用coreldraw、PS等設(shè)計(jì)軟件

2、 熟悉STC15系列單片機(jī)的基本使用

3、 串口助手的基本使用

4、 熟悉迪文DGUS組態(tài)軟件基本操作

5、 熟悉迪文DGUS屏的基本指令

如果你手上恰好有上述工具，同時(shí)你也具備了相應(yīng)的能力，那么，恭喜你，在看完本例程后，關(guān)于單片機(jī)跟迪文DGUS屏的應(yīng)用，你基本能獨(dú)立完成了。話不多說(shuō)，且跟著筆者的節(jié)奏，動(dòng)起你的小手來(lái)完成這個(gè)小項(xiàng)目吧。

關(guān)于這個(gè)項(xiàng)目，筆者分兩個(gè)部分進(jìn)行講解，即：DGUS工程和單片機(jī)程序，我們現(xiàn)在先做第一部分，迪文DGUS工程的設(shè)計(jì)。

首先，我們打開迪文DGUS工具，新建一個(gè)DGUS工程文件：

這時(shí)會(huì)“屏幕屬性設(shè)置”對(duì)話框，需要我們選擇屏幕尺寸以及DGUS工程存放的路徑，這里尺寸我們選擇480*272，因?yàn)槲覀冇玫氖?.3寸的DGUS屏，它的分辨率就是這個(gè)。路徑的話根據(jù)自己的實(shí)際情況選擇就好了。

這個(gè)時(shí)候，我們可以看到，新建的DGUS工程文件是空白的：

先不急著添加其他東西，我們先對(duì)DGUS工程進(jìn)行一些簡(jiǎn)單的配置，點(diǎn)擊工具欄中的“配置”選項(xiàng)，彈出以下界面：

然后，跟著上圖，從第一步到第六步依次設(shè)置就好了。其中：

l? “串口波特率”即：?jiǎn)纹瑱C(jī)跟DGUS屏通信時(shí)的波特率。

l? “串口幀高字節(jié)”、“串口幀低字節(jié)”，即：串口通信時(shí)通信質(zhì)量的幀頭高字節(jié)和低字節(jié)，關(guān)于這個(gè)幀頭，可以參考《迪文的DGUS指令說(shuō)明》文檔，里面介紹的很詳細(xì)。

l? “觸摸屏錄入?yún)?shù)后自動(dòng)上傳到串口”，這個(gè)選項(xiàng)是針對(duì)DGUS屏的觸控變量而言的，只有選中了這個(gè)參數(shù)，在對(duì)觸控變量操作的時(shí)候，DGUS屏才會(huì)立即將指令發(fā)送給單片機(jī)。

l? “初始變量由22(0x16)字庫(kù)文件決定”，這個(gè)選項(xiàng)主要是針對(duì)一些變量的初值的設(shè)定，如果不選中這個(gè)選項(xiàng)的話，那么所有變量的初值都會(huì)是0，所以，在某些場(chǎng)合下，如果需要將變量初值設(shè)置成非0的數(shù)的話，這個(gè)選項(xiàng)是必要的。

l? “運(yùn)行周期”，這個(gè)變量主要是配置DGUS屏的運(yùn)行周期，最快可以選擇80ms，大家可以根據(jù)實(shí)際需要選擇，筆者這里選擇的是120ms。

以上參數(shù)配置完畢后，我們點(diǎn)擊“輸出配置文件”即可。

配置文件成功生成后，我們可以在DGUS工程的DWIN_SET文件夾下看到多出了一個(gè)CONFIG.txt的文件，這個(gè)就是我們所謂的配置文件。這里順便說(shuō)一下，跟迪文DGUS工程相關(guān)的所有文件，都是存放在DWIN_SET文件夾中的，我們下載觸摸屏程序的時(shí)候，也只需要將整個(gè)DWIN_SET文件夾復(fù)制到SD卡就好了。

接下來(lái)，我們就要開始往DGUS工程中添加我們需要的文件了，我們將提前準(zhǔn)備好的跟項(xiàng)目相關(guān)的4張圖片復(fù)制到DWIN_SET文件夾中，這里特別需要注意的就是，圖片的分辨率一定要跟觸摸屏的分辨率一直，即，是480*272，否則顯示就會(huì)錯(cuò)亂。另外，關(guān)于迪文DGUS屏文件的命名，請(qǐng)仔細(xì)查閱《迪文DGUS屏開發(fā)指南V43》，總是這里筆者要提醒大家的就是：文件名的前綴的數(shù)字，不是隨便想怎么改就怎么改的！

接下來(lái)，我們開始往DGUS工程中添加圖片，如下圖所示，在DGUS軟件中點(diǎn)擊“增加”選項(xiàng)：

在彈出的對(duì)話框中，選擇之前我們存放圖片的DWIN_SET文件夾，全選里面的四張圖片（也可以一張一張?zhí)砑樱@里筆者選擇一次性全部添加），然后點(diǎn)擊“打開”按鍵即可添加全部圖片：

然后，我們便可以在DGUS軟件里面看到選中的四張圖片被成功添加了進(jìn)來(lái)：

至此，一個(gè)新的工程就建立好了，那么，接下來(lái)，筆者將要跟大家一起學(xué)習(xí)DGUS的幾個(gè)常用的控件。

第一個(gè)控件—“數(shù)據(jù)變量顯示”控件

首先，我們?cè)谛枰@示數(shù)字變量的地方添加一個(gè)“數(shù)據(jù)變量顯示”的控件，顧名思義，這個(gè)控件的作用就是用來(lái)顯示一些數(shù)據(jù)信息：

然后，我們需要調(diào)整好控件的大小及位置，當(dāng)然，控件的大小跟字體的大小和顯示的字體的位數(shù)也有關(guān)系，以14號(hào)字為例，顯示5位數(shù)據(jù)的話，那么字體的整體寬度就是14*5=70，字體的高度就是14*2=28，那么這個(gè)顯示控件的寬度就至少要為70，高度至少為28：

X：控件所在的X坐標(biāo)；

Y：控件所在的Y左邊;

W：控件的寬度

H：控件的高度

我們還可以給這個(gè)控件命名，同時(shí)每個(gè)變量都需要設(shè)定一個(gè)地址，每個(gè)地址的長(zhǎng)度均為兩個(gè)字節(jié)，筆者這里設(shè)置為0x0010，然后可以設(shè)置字體的大小以及顏色、對(duì)齊方式、變量類型等參數(shù)，大家先按圖中所示的參數(shù)設(shè)置即可，更多的內(nèi)容，請(qǐng)查看《迪文DGUS屏開發(fā)指南V43》。

接下來(lái)，我們用同樣的方法，添加兩個(gè)“數(shù)據(jù)變量顯示”控件，分別用來(lái)顯示AD1和AD2的電壓值，我們分別給他們分配地址為：0x000E和0x000F，如下圖所示：

至此，“數(shù)據(jù)變量顯示”控件的操作筆者就介紹完畢了。

第二個(gè)控件—“變量圖標(biāo)顯示”控件

接下來(lái)，筆者就要跟大家介紹“變量圖標(biāo)顯示”控件的應(yīng)用。在工控領(lǐng)域中，很多時(shí)候我們都需要獲得輸入、輸出的狀態(tài)，并在觸摸屏或上位機(jī)上顯示，那么這種功能如果使用迪文DGUS屏來(lái)做的話，要怎么操作呢？其實(shí)也很簡(jiǎn)單，這里我們只需要用到“變量圖標(biāo)顯示”控件，就能實(shí)現(xiàn)了。

首先，還是跟之前一樣，我們需要準(zhǔn)備兩個(gè)圖標(biāo)的bmp文件，大小為20*20像素：

接下來(lái)，我們利用“DWIN ICO生成工具”來(lái)生成一個(gè)ICO文件，也就是我們需要用到的圖標(biāo)文件，在“歡迎使用”界面中，我們可以找到“DWIN ICO生成工具”。

打開“DWIN ICO生成工具”會(huì)彈出如下對(duì)話框，我們先來(lái)操作第一步“選擇圖片文件所在的路徑”，然后我們選擇之前存放圖標(biāo)bmp文件的路徑：

點(diǎn)擊“確定”按鍵之后，我們可以看到，兩個(gè)圖標(biāo)文件被添加進(jìn)來(lái)了：

接下來(lái)，我們操作第二步“生成ICO文件”，會(huì)彈出如下對(duì)話框，然后我們點(diǎn)擊“Build ICO”按鍵：

這時(shí)，會(huì)彈出一個(gè)對(duì)話框，需要我們選擇將生成的ICO文件存放到什么位置，前面我們說(shuō)了，在下載DGUS屏程序的時(shí)候，實(shí)際上就是把DWIN_SET文件夾中的所有文件，都下載到DGUS屏中，所以，這里我們選擇還是將生成的ICO文件保存到DWIN_SET文件夾中，并將文件名保存為“42”，當(dāng)然這個(gè)名字也不是隨便取的，根據(jù)迪文手冊(cè)上的說(shuō)明，圖標(biāo)的命名是24-127之間的數(shù)字，如圖標(biāo)庫(kù)大小大于256KB，假設(shè)為257KB，那么將占用兩個(gè)字庫(kù)空間，假設(shè)我們的字庫(kù)40.ICO 大小為257KB，那么占用了40,41 兩個(gè)字庫(kù)空間，下一個(gè)圖標(biāo)庫(kù)不能寫為41.ICO，必須由42 開始：

當(dāng)出現(xiàn)以下界面的時(shí)候，就說(shuō)明我們的圖標(biāo)文件成功制作好了，然后我們點(diǎn)擊“確定”按鍵，然后再點(diǎn)“Close”按鍵，關(guān)閉對(duì)話框即可：

接下來(lái)，我們也可以預(yù)覽以下ICO文件中的內(nèi)容，我們將“DWIN ICO生成工具”的選項(xiàng)卡切換到“Preview of ICON File”界面，然后點(diǎn)擊“Open”按鍵：

接下來(lái)會(huì)彈出如下對(duì)話框，我們找到之前保存的ICO文件，然后點(diǎn)“打開”即可：

然后，我們便可以預(yù)覽到之前生成的圖標(biāo)文件里面的內(nèi)容了，另外，筆者在這里順便提一下，那就是用來(lái)制作圖標(biāo)ICO文件的bmp圖標(biāo)文件，最大尺寸不能超過255，當(dāng)然，我們?cè)谧鰻顟B(tài)顯示的時(shí)候一般圖標(biāo)bmp圖片不會(huì)超過255，但是我們?cè)谀承﹫?chǎng)合下，還可以用圖標(biāo)變量來(lái)做報(bào)警提示，這樣的話，很多人不知不覺就將圖片弄成了超過255，筆者之前就犯過這樣的錯(cuò)誤，前車之鑒啊，所以筆者在此特意提醒一下各位讀者：

圖標(biāo)文件制作好了，那我們就可以來(lái)開始用了。首先，我們找到DGUS工具中的“變量圖標(biāo)顯示”控件，將其拖動(dòng)到圖片文件的對(duì)應(yīng)圖標(biāo)顯示的位置，然后我們將控件大小設(shè)置成W:20 H:20，也就是和我們之前圖片bmp文件的大小一致。同樣，我們給這個(gè)控件命名為X00，變量地址設(shè)置為：0x0000，圖標(biāo)文件選擇我們之前生成的42.ICO，變量下限設(shè)置為0，對(duì)應(yīng)圖標(biāo)選擇為1（即，紅色），變量上限為1，對(duì)應(yīng)的圖標(biāo)為2（即，綠色），顯示模式為透明，初始值為0。這里可能有讀者對(duì)變量下限和變量上限有點(diǎn)不理解，簡(jiǎn)單說(shuō)吧，目前我們的輸入狀態(tài)只有兩種，要么是紅色，要么是綠色，在X0沒有輸入的情況下，我們可以用紅色來(lái)顯示，當(dāng)X0有信號(hào)輸入的時(shí)候，用綠色來(lái)顯示，那么，我們可以用變量的兩個(gè)值來(lái)控制圖標(biāo)的顯示，當(dāng)變量的值為0的時(shí)候，我們就讓他顯示紅色（也就是顯示圖標(biāo)1），當(dāng)變量的值為1的時(shí)候，就讓他顯示綠色（也就是顯示圖標(biāo)2），那么如果要讓他上電的時(shí)候默認(rèn)顯示紅色圖標(biāo)怎么辦呢？很簡(jiǎn)單，我們只要設(shè)置初始值為0就可以了。當(dāng)然，變量下限、變量上限、初始值這些都是可以隨意更改的，只要范圍在0~65535即可，另外這里需要特別注意一下，那就是變量下限和變量上限的差值不是隨意的，需要根據(jù)所用到的圖標(biāo)的個(gè)數(shù)來(lái)設(shè)定，等大家后面接觸的多了，自然就明白了。

接下來(lái)，我們就按照同樣的方法，把其他的圖標(biāo)變量全部添加上去就可以了：

至此，整個(gè)工程的顯示變量都已經(jīng)完成了，接下來(lái)，筆者將要跟大家繼續(xù)學(xué)習(xí)本項(xiàng)目中用到的其他幾個(gè)常用的控件。

第三個(gè)控件—“按鍵返回”控件

接下來(lái)我們就要來(lái)設(shè)置觸控變量。首先，我們先來(lái)添加最簡(jiǎn)單的—“按鍵返回”控件，很顯然，輸入端我們只需要能讀到輸入的狀態(tài)就好了，而輸出端，我們既要能讀到輸出的狀態(tài)，又要能控制某一個(gè)輸出的ON、OFF，因此，我們就需要用到了“按鍵返回”這個(gè)控件。

所謂按鍵返回，顧名思義，那就是說(shuō)，當(dāng)我們用手去觸摸這個(gè)按鍵的時(shí)候，DGUS屏的串口會(huì)有數(shù)據(jù)返回。接下來(lái)，就讓我們來(lái)嘗試添加一個(gè)“按鍵返回”的控件吧。

這里主要需要注意三個(gè)地方，第一，就是需要勾選“數(shù)據(jù)自動(dòng)上傳”選項(xiàng)；第二，就是需要給這個(gè)變量分配一個(gè)地址，避免跟之前的變量重復(fù)，這里講地址設(shè)置為0x0020；第三，就是需要設(shè)置“鍵值”，這個(gè)鍵值簡(jiǎn)單來(lái)說(shuō)，就是這個(gè)0x0020地址里面存放變量的值，也就是說(shuō)，每次觸摸這個(gè)“按鍵返回”控件的時(shí)候，DGUS屏都會(huì)通過串口將變量0x0020的值發(fā)送出來(lái)。當(dāng)然，多個(gè)按鍵的時(shí)候，每個(gè)按鍵的地址可以設(shè)置成一樣，鍵值設(shè)置成不一樣即可；或者我們將每個(gè)按鍵的地址設(shè)置成不一樣，將鍵值設(shè)置成一樣，也同樣可以。那么，我們只需要通過判斷變量的地址和變量值，來(lái)識(shí)別出此時(shí)按下的是哪一個(gè)按鍵了。關(guān)于迪文DGUS屏的指令部分，后面在講編程的時(shí)候我們?cè)谠敿?xì)解釋。

第四個(gè)控件—“基本觸控”控件

接下來(lái)，筆者將要給大家介紹本項(xiàng)目中需要用到的一個(gè)新的控件，那就是—“基本觸控”控件，這個(gè)控件也是很常用的一個(gè)控件。下面，筆者以一個(gè)觸控鍵盤為例來(lái)給大家介紹一下這個(gè)控件。

我們將一個(gè)“基本觸控”控件拖動(dòng)到數(shù)字鍵盤的“1”上面，然后來(lái)設(shè)置他的屬性。從屬性欄中我們可以看到，這個(gè)控件少了一個(gè)地址屬性，也就是說(shuō)這個(gè)“基本觸控”按鍵是不需要地址的，沒有地址，也就意味著他沒有返回值，這就是他跟前面介紹到的“按鍵返回”控件的一個(gè)最大的區(qū)別了。我們可以給觸摸控件添加一個(gè)背景，這樣，在按下去的時(shí)候，將會(huì)有一個(gè)明顯的變化，能更好的體現(xiàn)出到底有沒有按下這個(gè)按鍵。其次最關(guān)鍵的一點(diǎn)就是鍵值的設(shè)置了，關(guān)于鍵值，在DGUS軟件中就有詳細(xì)的介紹，我們只需要按照給出的值設(shè)定好就OK了：

然后，按照同樣的方法，我們把數(shù)字鍵盤所需要的所有“基本觸控”控件添加好就OK了，至此，數(shù)字鍵盤就制作成功了，在別的界面需要輸入數(shù)字的時(shí)候，就可以直接調(diào)用這個(gè)數(shù)字鍵盤了。

接下里，筆者就要介紹一下，如何調(diào)用這個(gè)數(shù)字鍵盤來(lái)進(jìn)行參數(shù)設(shè)置。那么，又有一個(gè)比較重要的控件，需要我們來(lái)學(xué)習(xí)了，那就是—“變量數(shù)據(jù)錄入”控件，這其實(shí)也是一個(gè)觸控控件。

第五個(gè)控件—“變量數(shù)據(jù)錄入”控件

這個(gè)變量的屬性還是比較多的，而且還需要用到數(shù)字鍵盤，乍一看確實(shí)有點(diǎn)頭疼，不過，在跟著筆者一步步操作后，你們會(huì)發(fā)現(xiàn)，其實(shí)，也就那么回事~

首先，我們還是需要勾選上“數(shù)據(jù)自動(dòng)上傳”選項(xiàng)，這樣的話，一旦我們輸入了數(shù)據(jù)，DGUS屏就會(huì)馬上將數(shù)據(jù)通過串口發(fā)送出來(lái)。然后，我們需要設(shè)置變量地址，這里就需要注意了，因?yàn)槲覀兪窃凇岸〞r(shí)閃爍”這個(gè)“數(shù)據(jù)變量顯示”控件上添加的“數(shù)據(jù)變量錄入”控件，也就是說(shuō)，我希望通過“數(shù)據(jù)變量錄入”這個(gè)控件來(lái)改變“定時(shí)閃爍”這個(gè)“數(shù)據(jù)變量顯示”的值，那么很顯然，這里的“數(shù)據(jù)變量錄入”控件的地址就要跟他一致，所以這里我們將這個(gè)控件的地址也設(shè)置為：0x0010，接下來(lái)的數(shù)據(jù)變量類型，這個(gè)就要根據(jù)我們所用到最大變量值來(lái)確定了，筆者這里設(shè)計(jì)的是0-99999ms可設(shè)置，那么很顯然，一個(gè)字（0-65535）的長(zhǎng)度裝不下，所以需要用到雙字，整數(shù)位為5，小數(shù)位為0，因?yàn)闆]有用到小數(shù)位。接下來(lái)，我們先不看“顯示位置”這個(gè)屬性，先把其他的設(shè)置好，顏色、字庫(kù)位置、字體大小、光標(biāo)顏色等，這里順便提下所謂的字庫(kù)，因?yàn)镈GUS屏所使用的字庫(kù)是0號(hào)字庫(kù)，所以這里默認(rèn)選擇0就好了，如果后面大家學(xué)會(huì)了自己制作字庫(kù)，那么就可以選擇自己的字庫(kù)了。然后，“輸入顯示方式”這里，我們選擇“直接顯示”，還有一種選擇就是“顯示*”，這個(gè)一般我們?cè)谟玫矫艽a輸入的時(shí)候才會(huì)選這個(gè)，輸入普通的數(shù)字，我們直接顯示就好了。

接下里，我們就來(lái)設(shè)置鍵盤，首先是鍵盤位置，因?yàn)檫@里我們的鍵盤是在別的圖片中，所以選擇“其他頁(yè)面”，然后，我們點(diǎn)擊“鍵盤設(shè)置”按鍵，在彈出的對(duì)話框中，選擇我們鍵盤所在的頁(yè)面，點(diǎn)“確定”即可：

接下來(lái)，在彈出的對(duì)話框中，我們框選出鍵盤的顯示區(qū)域，選中后，我們也可以看到鍵盤所在區(qū)域的坐標(biāo)，然后點(diǎn)擊OK：

鍵盤的區(qū)域就設(shè)置好了，接下來(lái)我們就可以設(shè)置鍵盤的顯示區(qū)域，也就是說(shuō)鍵盤要在哪個(gè)位置顯示。也許有讀者對(duì)這兩個(gè)概念有點(diǎn)不理解，那么筆者就舉個(gè)簡(jiǎn)單的例子吧，相信系統(tǒng)自帶的畫圖軟件大家都有用過吧？那么我們把鍵盤這個(gè)圖片用畫圖軟件打開，然后，我們來(lái)選擇這個(gè)鍵盤區(qū)域，這樣一個(gè)操作就相當(dāng)于是“鍵盤區(qū)域的設(shè)置”了：

接下來(lái)就是鍵盤顯示位置的設(shè)置了，入下圖所示，也就是說(shuō)，可以這個(gè)鍵盤放在位置1，或者位置2、或者位置3顯示。也就相當(dāng)于是在摳圖，然后把摳出來(lái)的這個(gè)圖放到任意一個(gè)位置，相信這么一說(shuō)的話，讀者應(yīng)該能明白吧：

這里如果能看明白的話，那么我再來(lái)看前面跳過的設(shè)置數(shù)據(jù)顯示位置的部分就跟這里是一樣的道理了：

至此，整個(gè)項(xiàng)目的DGUS工程就建好了，接下來(lái)只需要點(diǎn)擊“生成配置文件”，即可自動(dòng)生成用于下載的配置文件了，然后將整個(gè)工程保存就好了，當(dāng)然，其實(shí)在建工程的工程中，大家也要養(yǎng)成隨時(shí)保存的好習(xí)慣，否則萬(wàn)一有異常狀況出現(xiàn)，那就白忙活了哈。

在成功生成配置文件后，我們會(huì)發(fā)現(xiàn)，在DWIN_SET文件夾中多出了三個(gè)文件，即：13觸控配置文件.bin、14變量配置文件.bin和22_Config.bin。

在下一講中，筆者將會(huì)給大家介紹下載觸摸屏程序以及如何模擬調(diào)試DGUS工程，模擬調(diào)試過程中，可能會(huì)對(duì)建好的工程中的某些屬性進(jìn)行微調(diào)，以達(dá)到最佳的顯示效果，同時(shí)，也可以檢驗(yàn)我們建的工程哪里有問題。最后，筆者在此特別提醒大家，在用觸控控件的時(shí)候，千萬(wàn)不要有重疊的控件，否則，在生成配置文件的時(shí)候可能會(huì)失敗。好了，這一講就介紹到這了，如果大家喜歡的話，千萬(wàn)別吝嗇你的點(diǎn)贊還有打賞喲……