用戶界面自動生成軟件的設(shè)計與實現(xiàn)

1、用戶界面自動生成軟件的設(shè)計與實現(xiàn)The Design and Implementation of AutomaticGenerator for User Interface畢業(yè)設(shè)計（論文）中文摘要用戶界面自動生成軟件的設(shè)計與實現(xiàn)摘 要：如今，大多數(shù)電子設(shè)備都配有相應(yīng)的用戶界面，而能擁有一個精良的 用戶界面也已成為眾多設(shè)備所追求的目標。同時，依附于人類不斷革新的科技， TFT-LCD顯示屏在各方面性能有越來越多的提升，漸漸走入了百姓家用電器、 工業(yè)制造控制等領(lǐng)域。但是普通用戶想在其上設(shè)計顯示出色彩逼真，內(nèi)容豐富的界面并不容易。因為各個設(shè)備本身有一定的資源短板， 而且用戶也不了解界面編 程設(shè)計方法

2、。因此有必要來解決普通用戶（不用了解設(shè)備等是如何工作）輕松簡 單的在設(shè)備TFT-LCD屏上自行設(shè)計界面的問題。本研究題目依托用戶給定的指令集，借助 QT設(shè)計軟件，在計算機上實現(xiàn)用 戶自定義界面的設(shè)計。借助計算機實現(xiàn)對用戶界面的設(shè)計、修改等功能；通過計算機的串口與用戶終端通信，在設(shè)備上顯示出用戶自行設(shè)計的界面。本論文主要描述了本次課題的開發(fā)意義、開發(fā)的流程和所完成的功能。并著 重闡明了設(shè)計思路和具體實現(xiàn)手段。關(guān)鍵詞：TFT-LCD ;界面生成；QT畢業(yè)設(shè)計（論文）外文摘要The Design and Implementation of Automatic Generator for UserIn

3、terfaceAbstract: Nowadays,most electronic devices are equipped with user interface,and can have a good user interface is becoming an aim for them to get.Meanwhile,relying on the continuous innovation of science and technology, TFT-LCD ,in the most aspects of performance has increased dramatically, b

4、ut its price is gradually declining, And now it is going into people household appliances, industrial manufacturing control and other fields.But it is difficult for ordinary users to design and display the interface with rich contents and vivid colors. Because each device has some certain disadvanta

5、ges,andusers do not know the programming methods of the interface as well.So it is necessary to help the ordinary users (do not need to know how the device works) to design their own interface easily and simply.This study relys on the user-defined sets of instruction to complete the design of user-d

6、efined interface in the computer. Using computers to design and revise the user interface ,and realize the communaction between computers and users by the RSC232 to upload and display the users interface in other devices.This paper mainly describes the development significance ,development process a

7、nd how to work out the functions of this topic. And especially elaborates the idea of design and the implement methods of this software.Keywords:TFT-LCD ； Interface generation QT TOC o 1-5 h z HYPERLINK l bookmark8 o Current Document 1引言 1 HYPERLINK l bookmark10 o Current Document 研究意義 1 HYPERLINK l

8、 bookmark12 o Current Document 可行性分析 2 HYPERLINK l bookmark14 o Current Document 2系統(tǒng)需求分析 3 HYPERLINK l bookmark16 o Current Document 系統(tǒng)初步分析 3 HYPERLINK l bookmark18 o Current Document 流程分析 4 HYPERLINK l bookmark20 o Current Document 3系統(tǒng)總體設(shè)計 7 HYPERLINK l bookmark22 o Current Document 開發(fā)原則 7 HYPERLIN

9、K l bookmark24 o Current Document 系統(tǒng)設(shè)計要點 8 HYPERLINK l bookmark26 o Current Document 系統(tǒng)總體結(jié)構(gòu)設(shè)計 9 HYPERLINK l bookmark28 o Current Document 4模塊詳細設(shè)計與實現(xiàn) 15 HYPERLINK l bookmark30 o Current Document 編輯繪制模塊 15 HYPERLINK l bookmark32 o Current Document 翻譯轉(zhuǎn)換模塊 25 HYPERLINK l bookmark34 o Current Document 屬性

10、修改模塊 30 HYPERLINK l bookmark36 o Current Document 通信管理模塊 37 HYPERLINK l bookmark38 o Current Document 5用戶使用手冊 39 HYPERLINK l bookmark40 o Current Document 系統(tǒng)功能簡介 39 HYPERLINK l bookmark42 o Current Document 系統(tǒng)運行與操作指南 39結(jié)論 40致ft 錯誤！未定義書簽。 HYPERLINK l bookmark44 o Current Document 參考文獻 41附錄（設(shè)備命令表） 421

11、引言如今，用戶界面已經(jīng)逐漸成為現(xiàn)代科技中的重點關(guān)注對象，只有擁有良好的用戶界面與操作，才能吸引更多的顧客用戶?，F(xiàn)在一些高端機上，都大部分帶有圖形庫設(shè)計，而且資源內(nèi)存等相對豐富， 顯示圖形界面，以及對界面等進行修改操作不是什么難事。不管是開發(fā)者還是用 戶，都能較好的掌握它們。然而，考慮到一些小型機器，或者說是資源比較稀少 的設(shè)備，它本身雖然可以顯示界面，但不夠美觀，不支持界面的一些修改操作， 而且也不具備豐富的圖形庫。對于開發(fā)者來說，也許還能通過編程解決這個難點， 但對于用戶，要讓各個用戶掌握硬件編程技術(shù)去修改界面無疑是困難的。因此有必要設(shè)計一個方案，來解決普通用戶（不需理解機器如何工作）輕松

12、簡單的完成基于TFT-LCD液晶屏界面設(shè)計問題。研究意義當今，借助于嵌入式發(fā)展在大眾生活中的應(yīng)用越來越廣，人們的生活質(zhì)量也因為有了各種高科技設(shè)備而有了普遍的提高。然而時代在進步，人們的需求也在提高。為每個電子設(shè)備設(shè)計一個精良的用 戶界面以便人們輕松操作已經(jīng)越發(fā)變得重要。 但現(xiàn)在的情況是大部分的設(shè)備，具 內(nèi)部的資源，內(nèi)存大小等比較稀缺， 不可能讓人們像在計算機端上操作一樣， 隨 意的去用各種方法顯示漢字，圖形， 更談不上顯示五顏六色的逼真圖案了。 這樣 一來，顯示友好的人機界面就有點困難了。就算是對于現(xiàn)今比較高端的單片機來說，要做到這些方面，也是十分的不容 易。這些工作不僅耗時費力，價格也不是被

13、大眾所能接受的，很難做到美觀大方。 而且大部分設(shè)備設(shè)計界面也需要一定的編程技術(shù)，這對普通用戶來說去設(shè)計一個 自己喜歡的界面是非常困難的。所以如何做到讓普通用戶能在資源較少的設(shè)備上 自行設(shè)計界面這一任務(wù)就變得十分重要了。所以，為了滿足此嵌入式系統(tǒng)的應(yīng)用需求， 讓大部分的普通用戶自行能設(shè)計 界面。本課題設(shè)計一套滿足用戶自定義顯示指令集的用戶界面生成軟件，即由計算機端繪制圖形，在單片機設(shè)備上顯示出來。本課題設(shè)計一個界面自動生成軟件，即開發(fā)者把在計算機端上繪制的圖形以 及文本內(nèi)容轉(zhuǎn)變成指定的十六進制命令代碼傳送到單片機上，然后由單片機翻譯命令代碼，把它還原成原始圖像顯示在指定的單片機設(shè)備上，如此一來，

14、則無需 用戶了解如何操作硬件等設(shè)備，就可以高效簡便的完成一系列的需求設(shè)計?？尚行苑治黾夹g(shù)可行性分析開發(fā)者采用的開發(fā)軟件為 QT系列。此課題的可用開發(fā)軟件不局限于 QT, 例如MFC, Delphi等，甚至是VB都可以完成本題目。MFC即微軟提供的一個類庫，以C+類形式封裝了許多的類庫供開發(fā)人員 使用，大大減少了開發(fā)人員的工作量。Delphi也是一款以圖形界面為主的開發(fā)軟 件，其主要語言為Pascal但經(jīng)過開發(fā)者的對比，對于 Delphi來說，它所使用的是Pascal語言，但本 課題的一大特點是要突出面向用戶， 這里的面向用戶不僅僅是軟件使用方面，同時在開發(fā)過程中，對開發(fā)者亦是如此。QT所使用的

15、就是面向用戶編程的 C+語言，而且其內(nèi)部封裝了許多包，集成化程度非常高，而且其設(shè)計界面封裝完成度 也非常優(yōu)秀，這對于Delphi來說是一大優(yōu)勢。對于MFC,其使用的也是C+語言，但是MFC無法完成跨平臺跨系統(tǒng)的操 作，而QT所支持的為大部分的主流操作系統(tǒng)。對于本課題，其主要的一部分為繪圖操作， QT中提供了大量封裝好的繪圖 函數(shù)，可以方便的調(diào)用，而且也提供了多種重寫方法，完全能適應(yīng)各個開發(fā)人員 的不同思想方法，同時 QT也支持串口編程，都有對應(yīng)的封裝包。綜上所述，開發(fā)者認為，采用 QT開發(fā)的優(yōu)勢具有以下幾點：.面向?qū)ο驫T的高模塊化得益于它優(yōu)秀的機制，可重用性令人滿意，對于用戶來說是 非常簡便

16、的，而且其編程語言對開發(fā)者來說亦是如此。.優(yōu)秀的封裝程度QT中的封裝函數(shù)非常豐富，對完成本課題來說無疑是簡便高效的。.良好的跨平臺性QT的開發(fā)環(huán)境支持各種主流系統(tǒng)，如 Linux, Windows等。經(jīng)濟可行性分析開發(fā)者所要開發(fā)的軟件系統(tǒng)的需求比較低， 加上如今的軟硬件設(shè)施都十分發(fā) 達，而且所使用的擁有TFT屏的大部分設(shè)備價格親民。所以在這些方面的支出上 不是很大。止匕外，本目標軟件并不是十分的復(fù)雜難懂，開發(fā)者主要集中精力于軟件方面， 硬件方面考慮較少，開發(fā)周期較短，各種支出合理，不會造成太大的負擔。因此 在經(jīng)濟角度上是完全可行。2系統(tǒng)需求分析本章主要介紹了以下內(nèi)容：首先對用戶需求進行分析引出

17、制作此課題的意義； 其次對整個軟件開發(fā)流程進行總體概括描述。系統(tǒng)初步分析用戶需求分析當下，彩色液晶顯示作為如今高科技的技術(shù)結(jié)晶，其應(yīng)用得到的越來越多的 傳播。同時為設(shè)備設(shè)計一個精良的界面也已成為重中之重。但由于在彩色液晶顯示TFT-LCD上設(shè)計界面應(yīng)用又有較嚴重的局限性和必要的技術(shù)知識，所以普通 用戶可能無法靠自己來設(shè)計出精良的界面。目前市場上生產(chǎn)的智能顯示器具有如下優(yōu)點：循環(huán)、交替、重疊、滾屏等， 它們支持顯示預(yù)制畫面：所謂預(yù)制畫面，就是指所有的顯示內(nèi)容都可分為固定部 分與變化部分，對于固定部分，可以預(yù)先在微機上進行編制，然后將其作為“預(yù) 置畫面”送入機內(nèi)Flash（閃存）中，在需要顯示時，

18、使用簡單的頁面調(diào)用指令就 可直接調(diào)出顯示。預(yù)置畫面不但可以循環(huán)、交替、重疊顯示，還可以與現(xiàn)場實時 數(shù)據(jù)組合顯示，預(yù)置畫面的使用可以減少工作中通訊傳輸?shù)呢摀约爸貜?fù)性的工 作。但拋開以上優(yōu)點，其中大部分的操作都需要對設(shè)備有一定得了解以及相應(yīng)的 專業(yè)知識，但對普通用戶來說，掌握這幾點有一定的難度。因此，設(shè)計一個畫面 自動生成軟件，可以使用戶在不需要了解太多的硬件和編程知識下，就可以自行 對設(shè)備進行簡單的圖形、圖像、文字的設(shè)計和傳送顯示，這無疑幫助用戶大大降 低了操作門檻，也能讓液晶顯示設(shè)備更好的融入大眾環(huán)境?，F(xiàn)有系統(tǒng)概況計算機，平板等高端電子設(shè)備如今已經(jīng)普遍融入到人們的生活中。 對于使用 這些設(shè)備

19、的用戶來說，設(shè)計屬于自己的界面并不困難，因為這些設(shè)備上有相當多 的資源以及足夠的內(nèi)存空間。即便退一步來說，使用 ARM, Cortex等系列的高 端產(chǎn)品，它們也都配備了圖形庫等資源，也能讓用戶完成基本的界面設(shè)計。但是考慮到仍有很多用戶，以及一些有特殊需求的人群，他們使用的設(shè)備并 不具備以上優(yōu)點或資源，所以想要設(shè)計出自己界面就顯得有些困難了。所以現(xiàn)在有部公司提供畫面自動生成軟件給這些有需求的人群使用，但它們的設(shè)計有一些小瑕疵：即當用戶完成了圖像繪制后，各種指令的確能正常生成， 但用戶對某個圖形不滿意，想要修改時，例如把某圖形的顏色改變，或者調(diào)整某個圖形的坐標等，這些都無法實現(xiàn)。開發(fā)者認為，有一定

20、的實現(xiàn)必要來設(shè)計一款軟件， 使它不僅能完成基本的繪 制操作，而且還能對已繪制圖形進行修改等操作。流程分析本課題首先要設(shè)計出一款繪圖軟件，能實現(xiàn)基本的圖形繪制，以及文本輸入， 然后將所繪圖形與文字轉(zhuǎn)換成相應(yīng)的指令，傳送給單片機。經(jīng)過分析， 本設(shè)計系 統(tǒng)大致工作流程如下：開始運行此系統(tǒng)，本系統(tǒng)對應(yīng)的單片機分辨率為 640 x480。用戶可以進行選 擇分辨率，系統(tǒng)提供了任意的分辨率供輸入選擇。在選擇好后，用戶進入到軟件主界面，在界面的設(shè)置選項中，可以選擇屏幕 背景色，QT提供了一個色板，可選擇的顏色非常多。之后正式進入本系統(tǒng)軟件，本軟件有兩種模式，專門畫圖和文本編輯的繪制 模式和專門修改圖形文本屬性

21、的修改模式。系統(tǒng)默認進入的是繪制模式，用戶可以在系統(tǒng)界面上選擇相應(yīng)的圖形或文本， 以及填充顏色，開始繪制所需圖形和文本， 若想要對圖形進行修改，則可以自行 選擇進入系統(tǒng)的修改模式；當用戶將所需要的圖形或文字繪制完成時，再點擊翻譯命令，就能得到相對應(yīng)的十六進制命令。若要對圖形進行修改，則應(yīng)選擇修改模式進入。本系統(tǒng)在修改模式中有兩大 特色：首先即實現(xiàn)了面向?qū)ο蟮乃枷刖幊獭?用戶繪制的圖形，文本等都有相應(yīng)的 名字和屬性框與之對應(yīng)，方便用戶直觀的觀察和修改。而且對圖形修改完之后， 相應(yīng)的圖形和十六進制命令都會自動發(fā)生變化， 開發(fā)者把這一種方法修改屬性的 稱為屬性框法；其二是實現(xiàn)了一種用鼠標來拉伸，拖動

22、圖形，以此來改變圖形屬性的方法，使得用戶對圖形的修改操作更加簡潔明了，開發(fā)者把這種方法稱為拖拽拉伸法。最后，在對繪制的圖形進行修改之后，就要翻譯成對應(yīng)的十六進制命令。翻 譯完成后，用戶可以通過本軟件的串口設(shè)置， 對通信參數(shù)進行設(shè)置，并完成與單 片機的數(shù)據(jù)通信，以實現(xiàn)在機器上顯示出用戶所繪的圖形或文字。對此系統(tǒng)具體分析如下：.對于用戶來說，系統(tǒng)界面應(yīng)該是簡潔明了才好，而不是一堆圖標等，顯得 雜亂無章。所以開發(fā)者將主要功能全部以清晰的大按鈕展示，諸如繪制各種圖形，轉(zhuǎn)換命令，發(fā)送數(shù)據(jù)等，使得用戶一目了然，而無須去尋找。而將一些小功能， 比如打開文件，復(fù)制保存圖像等，放置在了菜單選項里。.對于畫布白選

23、擇，QT提供了 QGraphics View類，這就是為了繪制2D圖 形而專有的類。在Design模式中，QGraphics View相當于一塊畫布，在QGraphics View上可以繪制各種用戶想要的基本圖形。對于開發(fā)者來說，QT提供了 Design 模式，在其中就能對畫布的大小等參數(shù)進行調(diào)整。而對于用戶來說，必須直觀的給予用戶一個調(diào)整大?。捶直媛剩┑目丶?。.當用戶選擇了分辨率背景色后，就可以開始繪制工作了。系統(tǒng)提供基本圖 形，直線，矩形，圓等的繪制，其余的圖形，如多邊形等，因為單片機不支持它 們的命令轉(zhuǎn)換，所以沒有刻意去實現(xiàn)。而要繪制以上的圖形和文本，對于 QT來 說，也非常方便，只要

24、熟悉一下幾種調(diào)用方法就行：第一是繪制直線 drawLine(const QPoint &p1,const QPoint p2)；第二是繪制矩形 drawRect(const QPoint & topLeft, const QPoint & bottomRight);第三是繪制圓 drawEllipse(const QRectF &rectangle);第四是繪制文本 drawText(const QRectF &rectangle, int flags, const QString &text, QRectF *boundingRect = Q_NULLPTR)；對于繪制文本這個方法來說，其第

25、一參數(shù)指定了繪制文字所在的矩形的位置，第二參數(shù)指定了文字在矩形中的對齊方式，第三參數(shù)就是所要繪制的文字，第四參數(shù)一般用不到，不用設(shè)置。.在用戶繪制好圖形或文本后，就要開始進行命令轉(zhuǎn)換了。這是關(guān)鍵的一 步，如果無法轉(zhuǎn)換成命令，那么對于此次課題就沒什么太大的意義了，因為單片機無法識別用戶具體是什么操作，也無從談起再現(xiàn)畫面顯示了。開發(fā)者通過和用戶的溝通協(xié)商，確立了本軟件所要開發(fā)設(shè)計的各項功能，并且規(guī)定了這些功能所對應(yīng)的命令。下面列出幾個用戶最為常用，也是本系統(tǒng)中較為重要的幾個命令：1B 46 X1,Y1,X2,Y2,C:此命令為畫一條直線，其中(X1,Y1)表示起點，(X2,Y2)表示終點；C為直線

26、顏色；1B 5A X1,Y1,X2,Y2,C:此命令為畫一個空心矩形，其中(X1,Y1)表示左上角坐標，(X2,Y2)表示右下角坐標，C為矩形框顏色；1B 41 X1,Y1,X2,Y3c該此命令為畫一個實心矩形，其中(X1,Y1)表示左上角坐標,(X2,Y2)表示右下角坐標，C為填充顏色；1B 59 X,Y,R,C:該此命令為畫一個圓，其中(X,Y)表示圓心，R表示半徑，C表示弧顏色；對于文本，也有相應(yīng)的命令，不過在轉(zhuǎn)換的時候，需要注意輸入的是中 文還是英文，兩種字符的轉(zhuǎn)換方式也不盡相同。中文是對應(yīng)的標準國標碼，而西文則直接轉(zhuǎn)換成ASCII碼就可以。注意的是，中文是占據(jù)兩個字節(jié)，而英文則只 占

27、一個字節(jié)空間。而沒有提到的命令，后續(xù)會在最后附上一張附錄表，以供參考。.對于已經(jīng)繪制好的圖形或者文本， 用戶可能會不太滿意想要修改一下。 但 是據(jù)開發(fā)者觀察，其他的畫面生成軟件對這方面的支持不是特別好， 所以開發(fā)者 著重開發(fā)了屬性修改模塊。在該模塊中，開發(fā)者設(shè)計了兩種改變屬性的方法：其一是拖拽拉伸法，顧名思義就是利用鼠標去拖拉圖形，以此來達到位置， 大小改變的目的，開發(fā)者利用的方法就是為每個圖形都設(shè)置八個點，即為8個方向，憑此八個點來監(jiān)聽圖形的變化，并且對此8個方向進行一系列的變化計算以此來獲得圖形的變化其二是屬性框法，這個方法相對簡單，就是在對應(yīng)圖形的屬性欄里直接修改 數(shù)值，圖形就會變化了。

28、為了達到美觀的要求，開發(fā)者使用了QTableWidget+SpinBoxDelegation的組合（即數(shù)值更改使用上下箭頭的樣式）。.繪制完圖形后，翻譯生成代碼命令，最后一步是通過通信口去發(fā)送指令。 在這一塊中，開發(fā)者主要就是調(diào)用了 QT中的QlOdevice類，它是標準的QT自 帶的通信接口，滿足了通信的基本要求。然后設(shè)置了一個對話框來對通信的各個 參數(shù)加以設(shè)置，如波特率，傳輸時延等，完成這一系列設(shè)置后，就可以開始通信 了。3系統(tǒng)總體設(shè)計本章主要介紹了以下幾點內(nèi)容：首先對本軟件的開發(fā)思想和原則進行了闡述； 其次對本系統(tǒng)的開發(fā)所要達成的目標以及所使用的設(shè)計語言進行了說明；最后給出了系統(tǒng)總體結(jié)構(gòu)

29、圖，并分別對各個結(jié)構(gòu)模塊進行簡單描述。開發(fā)原則本系統(tǒng)首先是根據(jù)用戶需求特別打造的，以用戶最后的評價和滿意度為主。 所以面向用戶，以用戶的需求觀點進行開發(fā)是本軟件系統(tǒng)所追求的目標。其次面對一個完整大型項目系統(tǒng)的開發(fā)， 應(yīng)該秉持這樣的思想，即將整個系 統(tǒng)軟件的開發(fā)過程分割成相應(yīng)的小階段。再者，每個階段又能細分為各個小步驟。 所劃分的各個階段和步驟必須要有明確的目標。 若是這樣合理安排的話，系統(tǒng)開 發(fā)條理更加清晰，邏輯更加分明，更易于系統(tǒng)的制定和開發(fā)。接著開發(fā)者在本系統(tǒng)中融入了模塊化思想， 模塊化思想即將所要開發(fā)的系統(tǒng) 軟件劃分為不盡相同的各個功能模塊。劃分的各個模塊都能相應(yīng)的實現(xiàn)軟件的一 個特定功

30、能。各個模塊間既保持獨立性，但也不失一定的耦合性，以便于以后對本系統(tǒng)的擴充，維護等。此設(shè)計思想，可以為整個系統(tǒng)軟件的順利開發(fā)打下堅實 的地基。最后，開發(fā)者基于快速原形思想來完成軟件的開發(fā)?？焖僭畏ㄊ且环N重要 且實用的設(shè)計法，也是本系統(tǒng)設(shè)計的一個主要方法。它從用戶觀念出發(fā)，根據(jù)用戶需求，開發(fā)者參與討論，設(shè)計出大致藍圖，并能建立一個實驗性的基礎(chǔ)系統(tǒng)模 型在較短的時間內(nèi)，隨后根據(jù)用戶的使用以及意見改進， 對實驗?zāi)Ｐ瓦M行精雕細 琢，直到滿足用戶，這樣便形成一個穩(wěn)定、理想的畫圖系統(tǒng)軟件?？焖僭畏ǖ姆椒ǖ闹饕獌?yōu)點有：.所需解決的問題都圍繞一個較小的實驗?zāi)Ｐ驼归_， 大大方便了開發(fā)人員的 工作。.通過對實

31、驗?zāi)Ｐ秃陀脩艚涣?，能讓開發(fā)人員跟多的去挖掘潛在的問題， 從 而不斷的修改，完善系統(tǒng)，最后完成開發(fā)。.對于系統(tǒng)開發(fā)來說，其效率較高?？焖僭偷拈_發(fā)周期短、開發(fā)過程靈活、 通過對用戶的交流，易于修改，這對一個大型的，不太穩(wěn)定的系統(tǒng)來說是適合的。.系統(tǒng)的可擴性優(yōu)越，因為此方法是通過不斷的提升修改來完善系統(tǒng)，和可擴展性相呼應(yīng)，更加易于系統(tǒng)的擴展。系統(tǒng)設(shè)計要點本節(jié)首先介紹了本軟件的基本開發(fā)目標， 即所要完成的基本功能；其次對所 用的開發(fā)語言的選擇進行了說明；最后是對代碼設(shè)計的基本要求。系統(tǒng)開發(fā)基本目標本系統(tǒng)軟件實際上是一款專業(yè)的定制軟件，它的開發(fā)目標是解決用戶（無需 了解硬件如何工作）如何簡便的在擁有

32、TFT屏的設(shè)備上自行設(shè)計界面。本系統(tǒng)軟件擬將完成以下基本目標：.滿足用戶繪制圖形的需求，即繪制基本圖形或文本，填充顏色等操作；.對已繪制的圖形可以進行屬性修改操作；.將修改完成的圖形翻譯成設(shè)備能理解的十六進制代碼命令；.設(shè)置通信參數(shù)，完成與單片機的連接，數(shù)據(jù)傳輸。以上目標為本軟件的必要基本目標， 在此基礎(chǔ)上，還可以進行進一步的開發(fā) 操作。軟件設(shè)計語言本系統(tǒng)軟件擬采用QT系列進行開發(fā)，QT編程所需語言需要C+編程基礎(chǔ)。 C+語言是在廣為流傳經(jīng)典的C語言基礎(chǔ)上發(fā)展起來的，再繼承了 C語言的各種 優(yōu)勢的同時，又加入了面向?qū)ο蟮木幊趟枷?，這使得它對于不管是開發(fā)人員， 還是用戶，都有良好的親和力。開發(fā)者

33、也對比了同樣可以用來開發(fā)的 MFC或者Delphi,發(fā)現(xiàn)了幾點不足首先是MFC,雖說它也是基于 C+封裝的API,但是其無法實現(xiàn)跨平臺特 性。而對于Delphi來說，其使用的是Pascal語言，但相對于面向?qū)ο蟮?C+語 言來說優(yōu)勢不大。系統(tǒng)代碼設(shè)計說明進行本軟件的代碼編寫時，遵循了以下幾個原則：.確定性：在本軟件中，每一行代碼和每一種對象都是明確的，沒有模糊的 含義。.標準性：這主要表現(xiàn)在對各個對象的標準命名，以準確表達出其含義與內(nèi)容，方便開發(fā)人員研讀改進。.合理性：軟件中設(shè)計的代碼和對象一一對應(yīng)，有理有據(jù)。.可擴充性：考慮今后軟件可能會有擴充的可能， 保留了一定的預(yù)留空間與 代碼。系統(tǒng)總體

34、結(jié)構(gòu)設(shè)計本節(jié)是此章的最后一塊內(nèi)容，其中包含了兩個部分：首先是給出了系統(tǒng)的整 體結(jié)構(gòu)圖和功能模塊圖；其次是根據(jù)功能結(jié)構(gòu)圖上劃分的模塊，逐一進行描述。結(jié)構(gòu)圖本系統(tǒng)總體流程為用戶在PC端上繪制圖形界面，再通過串口發(fā)送給單片機, 最后在單片機的TFT屏上顯示出相應(yīng)的畫面。具體的系統(tǒng)結(jié)構(gòu)圖如下所示：PC端TFT屏顯示畫面PC端讀取分析數(shù)據(jù)由單片機設(shè)備圖3.1系統(tǒng)總體結(jié)構(gòu)圖整個系統(tǒng)又由分工明確的幾大模塊構(gòu)成。本系統(tǒng)功能模塊結(jié)構(gòu)如圖3.2所示:用戶界面自動生成軟件編輯繪制翻譯轉(zhuǎn)換圖 形 繪 制翻譯圖形并添加命令文字編輯翻譯文本并添加命令通信管理屬 性 框 法 修 改設(shè) 置 通 信 口 參 數(shù)開始通信結(jié)束通信

35、拖拽拉伸法修改編輯繪制翻譯轉(zhuǎn)換圖 形 繪 制翻譯圖形并添加命令文字編輯翻譯文本并添加命令通信管理屬 性 框 法 修 改設(shè) 置 通 信 口 參 數(shù)開始通信結(jié)束通信拖拽拉伸法修改圖3.2功能模塊結(jié)構(gòu)圖系統(tǒng)模塊設(shè)計本系統(tǒng)米用QT進行開發(fā)，語百為C+。本軟件可劃分為四大主要模塊：它們分別是編輯繪制，翻譯轉(zhuǎn)換模塊，屬性 修改模塊和通信管理模塊。其中，開發(fā)者將編輯繪制，翻譯轉(zhuǎn)換，通信管理歸為三大主要功能模塊，是 組成本系統(tǒng)不可缺少的，而屬性修改模塊則是本系統(tǒng)的一大特色模塊，與其他三 個模塊相輔相成，很好的滿足了面向?qū)ο蟮奶攸c。止匕外，開發(fā)者設(shè)計了兩個模式，繪制模式與修改模式，目的是能使用戶更直 觀的繪圖與

36、修改。顯然，編輯繪制模塊運行于繪制模式，屬性修改模塊運行于修 改模式，其他兩個模塊則皆可運行與任意模式。系統(tǒng)模塊的具體設(shè)計如下：.編輯繪制模塊：該模塊的功能主要就是讓用戶完成基本圖形或者文字的繪 制。首先，用戶進入到系統(tǒng)后，可以在菜單選項中選擇更改分辨率和背景色，選 擇適合自己的樣式來進行繪制。其次， 系統(tǒng)默認的就是繪制模式，即允許用戶繪 制圖形，而暫時不允許用戶修改，除非用戶自行進入修改模式。選擇完成后，在 畫布上，用戶可以開始繪制圖形或文本。這里提供了直線，矩形，圓這些基本圖 形，另外為了方便用戶，也添加了橢圓和多邊形的選項， 但是本系統(tǒng)對應(yīng)的單片 機無對應(yīng)命令。對于文本輸入，則是提供了文

37、本框在畫布上進行操作， 用戶也可 以按照喜好來選擇圖形的顏色或選擇文字的各種樣式。最后，在本系統(tǒng)上也添加了清屏選項，可以將用戶繪制的所有圖形或文本全部清空。此模塊的結(jié)構(gòu)圖如圖3.3所示：選擇畫筆顏色和填充顏色選擇文字樣式和顏色選擇分辨率選擇背景色清 空 屏 幕選擇畫筆顏色和填充顏色選擇文字樣式和顏色選擇分辨率選擇背景色清 空 屏 幕圖3.3編輯繪制模塊.翻譯轉(zhuǎn)換模塊：此模塊的功能就是將用戶繪制的圖形或者文本， 翻譯成單 片機能識別的十六進制命令。需要注意的是圖形翻譯方面調(diào)用不同的翻譯命令就 行，但是在文本方面，必須明確輸入的是否是中文還是英文，因為這兩種文字在計算機中的表示是不同的，不能一概而

38、論。 最后全部繪制完成后，點擊軟件上的 添加命令，就可以將各個命令添加進顯示表格中。此模塊的結(jié)構(gòu)圖如圖3.4所示:翻譯圖形并生成命令翻譯轉(zhuǎn)換模塊翻譯文本并生成命令翻 譯 直 線翻譯實體矩形翻譯空心矩形翻譯圓翻譯中文文字翻譯英文文字或數(shù)字翻譯圖形并生成命令翻譯轉(zhuǎn)換模塊翻譯文本并生成命令翻 譯 直 線翻譯實體矩形翻譯空心矩形翻譯圓翻譯中文文字翻譯英文文字或數(shù)字圖3.4翻譯轉(zhuǎn)換模塊.屬性修改模塊：該模塊是本軟件中很有特色的一個模塊。 此模塊很好的滿 足了本軟件的面向用戶的思想，給予用戶最直觀的繪制體驗。開發(fā)者研讀了其他開發(fā)者設(shè)計的相關(guān)軟件，發(fā)現(xiàn)在面向?qū)ο筮@方面做的還不 完善，無法給用戶直觀的體驗。有

39、些微小的圖標選項的含義必須得將鼠標放置在 上面才能顯示，這樣就已經(jīng)很不方便了。 而且畫出的圖形，也沒有對應(yīng)的名字來 辨別或者能用鼠標去選中，這樣的話， 一旦圖形堆積起來，用戶根本無法分清哪 個圖形是自己想要的。再有就是他們對圖形的屬性修改也處理的不是很好，無法讓用戶直觀的去修改圖形，來達到一個滿意的效果，但就其他方面來說，這些軟件還是很優(yōu)秀的。在這個模塊中，顧名思義，就是對已繪制圖形或文本進行屬性修改。用戶進入修改模式，在該模式中，禁止了用戶的繪制操作，轉(zhuǎn)而允許用戶對 畫布上的圖形或文字做各種修改。為此， 開發(fā)者嵌入了一個屬性框，以便直觀的 展示用戶各個圖形的數(shù)據(jù)。著重要講解的就是在修改模式中

40、，開發(fā)者設(shè)計了兩種修改的方法，第一種是 拖拽拉伸法，也就是允許用戶選中某個已經(jīng)在畫布上繪制好的圖形， 直接用鼠標 拖拽可以改變圖形的位置坐標，也可以用鼠標對圖形進行拉伸縮放 ，以此來改變 圖形的大小。第二種方法就是屬性框法，也就是在選中圖形的屬性框中直接修改數(shù)值，比如直線就是修改起點，終點的位置，圓就是修改半徑，以及各種顏色等；這兩種方法修改圖形或文本的屬性， 都能實時的在屬性框中觀察到，而且修 改完后，相應(yīng)的翻譯命令也會跟著改變，可以說很好的滿足了面向?qū)ο蟮男枨?。屬性修改模塊的結(jié)構(gòu)如圖3.5所示：鼠 標 拖 拽 圖 形改 變 位 置 坐 標鼠 標 拉 伸 縮 放 圖 形改 變 大 小拖拽拉伸

41、法屬性框法屬性修改模塊鼠 標 拖 拽 圖 形改 變 位 置 坐 標鼠 標 拉 伸 縮 放 圖 形改 變 大 小拖拽拉伸法屬性框法屬性修改模塊屬性框中直接修改圖形屬性圖3.5屬性修改模塊.通信管理模塊：此模塊主要就是實現(xiàn)計算機與所需單片機的數(shù)據(jù)通信與傳輸。本項目采用的均為標準的 RS232通信方式。其數(shù)據(jù)格式標準為：1個起始位（低電平），8個數(shù)據(jù)位（低位在前，高位在后），1個停止位（高電平）。各個參數(shù)也必須在通信前進行設(shè)置，如波特率，數(shù)據(jù)位數(shù)，奇偶校驗，傳輸時延等，否則無法正常通信。該模塊結(jié)構(gòu)如圖 3.6所示：通信管理模塊設(shè)置串 口參數(shù)結(jié) 束 通 信開 始 通 信結(jié) 束 通 信圖3.6通信管理模

42、塊4模塊詳細設(shè)計與實現(xiàn)本章就本軟件四大模塊展開，分別對四大模塊的設(shè)計與實現(xiàn)由簡到詳進行描 述。編輯繪制模塊本節(jié)主要描述編輯繪制模塊的功能與詳細實現(xiàn)思路。編輯繪制模塊功能需求編輯繪制模塊是本軟件三大功能模塊之一。本系統(tǒng)模塊應(yīng)有四大功能需求：即首先可以進行分辨率，屏幕背景色的選擇；其次可以完成文本的編輯；然后可以進行基本圖形的繪制，如直線，矩形等，還可以選擇它們的顏色；最后是可以 進行清屏操作。編輯繪制模塊功能圖編輯繪制模塊的功能圖如圖4.1所示：指定矩形區(qū)域的文本輸入，并可以選擇文本樣式等編輯繪制模塊對各種基本圖形的繪制操作指定矩形區(qū)域的文本輸入，并可以選擇文本樣式等編輯繪制模塊提供任意分辨率，

43、背景色的選擇對屏幕上的各種內(nèi)容進行清空圖4.1編輯繪制模塊功能編輯繪制模塊詳細設(shè)計本模塊主要功能是進行各種基本圖形的繪制，繪圖全程操作都是基于鼠標事 件來繪制圖形，且運行于繪制模式下?？傮w上來說，繪圖就是依靠鼠標的三個事件來完成，即鼠標按下事件；鼠標 移動事件；鼠標松開事件。.鼠標按下事件在此事件中，主要完成了以下 4步過程：(1)判斷用戶選擇的是何種繪圖圖形，其思想就是設(shè)置一個字符 Text,和 本軟件的圖形選擇按鈕相關(guān)聯(lián)，當用戶按下按鈕選擇了某個圖形，則會判斷按鈕 中的文本為何種圖形，然后可以再在調(diào)色板中選擇圖形顏色；(2)記錄下起始點坐標，即圖形從哪個位置開始繪制；(3)添加新的圖形It

44、em項目到相應(yīng)的集合中。例如直線的話，就是歸到直 線集合中，第一條直線就取名為line0,以此類推，這樣做的目的就是為了實現(xiàn) 面向?qū)ο?，能使用戶分辨自己選擇的是哪個圖形；(4)發(fā)送信號給屬性框，讓其做出相應(yīng)的Item項目更新，也就是在屬性框 中添加繪制的圖形各種屬性信息；(5)對于各個圖形，都提供了是否實心還是空心的選項， 即用了 bool型變 量，并調(diào)用bool isSolid=widget-isSolid()來判斷。但對于命令翻譯來說，只有矩 形用得到，若選擇實心，則填充整個圖形，若選擇空心，則填充邊界；其流程圖如下所示：實心空心圖實心空心圖4.2 繪制圖形流程圖其主要代碼如下(以選擇直線

45、為例)：QString text= widget-groupTool-checkedButton()-text();判斷何種圖形 bool isSolid=widget-isSolid();/ 是否空心還是實心if(text=QTEXT(直線)/選擇直線，執(zhí)行4步過程 this-currentTool=Line;QGraphicsLineItem*lineItem=this-addLine(0,0,0,0,QPen(widget-color);/ 記錄初 始點lineItem-setAcceptedMouseButtons(Qt二LeftButton);lineItem-setFlag(QGr

46、aphicsItem:ItemIsMovable);lineItem-setFlag(QGraphicsItem二ItemIsSelectable);this-lines.append(lineItem);/歸入直線集合lineItem-moveBy(event-scenePos().x(),event-scenePos().y();emit newLineAdded(lineItem,this-lines.size()-1);發(fā)射信號，讓其添加進屬性框其運行效果如下圖所示:II圖4.3繪制直線并添加進屬性框* 汨網(wǎng)口小鵬編由審II圖4.3繪制直線并添加進屬性框* 汨網(wǎng)口小鵬編由審圖4.4繪制

47、空心矩形并添加進屬性框TH； iif mTMTH； iif mTM圖4.5繪制實心矩形并添加進屬性框.鼠標移動事件此事件負責的主要功能是根據(jù)當前工具和起始坐標，計算出圖像的外界矩形,并以之修改形狀。具體的來說就是：(1)先用Sw讓chCase語句來判斷用戶繪制的是哪一種圖形；(2)若為直線，則調(diào)用 SetLine函數(shù)來捕獲坐標，若是其他圖形，則調(diào)用 SetRect函數(shù)，即它們的外接矩形，來捕獲坐標。因為除了直線，其余的圖形的 繪制都是根據(jù)外接矩形來繪制的；(3)根據(jù)坐標的變化，來改變圖形；其主要代碼如下：switch(this-currentTool)分支選擇 (case Line:/直線QG

48、raphicsLineItem*item=this-lines.last();item-setLine(QLineF(QPointF(0,0),event-scenePos()-startPointF);/ 調(diào)用 SetLine 函數(shù)emit newLineAdded(item,this-lines.size()-1);break;case Rectangle:/慶巨形QGraphicsRectItem*item=this-rectangles.last();item-setRect(QRectF(0,0,(event-scenePos()-startPointF).x(),(event-sc

49、enePos( )-startPointF).y().normalized();調(diào)用 SetRect函數(shù)emit newRectangleAdded(item,this-rectangles.size()-1);break;case Circle:圓QGraphicsEllipseltem*讓em=this-circles.last();floatr=powf( (event-scenePos().x()-startPointF.x()*(event-scenePos().x()-startPoi ntF.x()+(event-scenePos().y()-startPointF.y()*(e

50、vent-scenePos().y()-startPointF.y(),0.5);item-setRect(0,0,2*r,2*r);item-setPos(2*startPointF-event-scenePos();emit newCircleAdded(item,this-circles.size()-1);break;case 曰lipse:/橢圓QGraphicsEllipseItem*item=this-ellipses.last();item-setRect(0,0,2*(event-scenePos().x()-startPointF.x(),2*(event-scenePos

51、( ).y()-startPointF.y();item-setPos(2*startPointF-event-scenePos();emit newEllipseAdded(item,this-ellipses.size()-1);break;case Polygon:/多邊形自帶調(diào)整break;case Text:/文本矩形框自帶調(diào)整break;.鼠標松開事件該事件在只有使用多邊形工具的時候才用到，因為在 QT中，繪制多邊形，是在畫布上點擊鼠標，并且松開后，系統(tǒng)才開始繪制多邊形的一個點集。具體完成的操作如下：(1)獲取當前多邊形對象；(2)為其添加點集；(3)發(fā)送信號提醒屬性框更新。其實現(xiàn)

52、的代碼如下：QGraphicsPolygonItem*item=this-polygons.last();ygonF polygon=item-polygon();/獲取對象 polygon.appenQPold( item-mapFromScene(event-scenePos();添力口點集item-setPolygon(polygon);emit newPolygonAdded(item,this-polygons.size()-1);儂射信號其運行效果如圖4.6:圖4.6繪制多邊形本模塊中的第二個部分，就是文本的編輯，這一功能相對來說就簡單。因為QT中提供了此類封裝函數(shù)。其主要思想就是

53、在畫布上調(diào)用文本編 輯函數(shù)，用到了 QLineEdit類，具提供了單行文字的編輯功能，即提供了一個 矩形框，用戶可以在其中輸入文字。若想使用多行編輯，則可以使用QTextEdit來創(chuàng)建對象，進行編輯。文本編輯的具體操作如下：(1)選擇文字編輯；(2)在鼠標點擊的地方生成一個QLineEdit,(生成的矩形框高度和寬度都是由用戶選擇的的字體設(shè)置決定的)；(3)編輯完成后(焦點離開，或者按下enter鍵)，添加真正的QGraphicsSimpleText 對象。(4)其運行效果如圖4.7:鼻腦享(4)其運行效果如圖4.7:鼻腦享圖4.7文本編輯本模塊中的第三個部分就是提供分辨率和背景色給用戶選擇。

54、用戶進入系統(tǒng)后，可以在菜單設(shè)置中選擇畫布大小來改變分辨率，提供了任 意分辨率的修改。也可以選擇任意顏色來作為背景色。其思想就是在菜單選項中添加一個畫布大小，一個背景色選項，然后為這個選項添加一個觸發(fā)器,可以觸發(fā)setSceneRect函數(shù)，即分辨率設(shè)置函數(shù),以及QColorDialog函數(shù)，即調(diào)色板函數(shù)。這兩個是 QT自帶的函數(shù)。但為了讓畫布使 用這些函數(shù)，必須創(chuàng)建畫布QGraphicsScene的對象來調(diào)用它們，否則是沒有效果 的。其具體操作如下：(1)點擊菜單設(shè)置中的畫布大??；(2)設(shè)置分辨率。其運行結(jié)果如圖4.8 :|r ERSWt M工”圖4.8.分辨率,背景色的選擇本模塊的最后一個功

55、能，也就是清屏功能，其實現(xiàn)的原理就是移除所有的圖 形，文本的Item項目，并且清除它們的屬性信息。其實現(xiàn)代碼如下：this-scene-clear();/青除畫布上的 Item, this 指代畫布 int nRow=ui-itemProperties-rowCount();for(int i=0;iitemProperties-removeRow(0);其運行效果如下圖：iDK圖4.9清屏后畫面4.2翻譯轉(zhuǎn)換模塊本節(jié)主要描述翻譯轉(zhuǎn)換模塊的功能與詳細實現(xiàn)步驟。翻譯轉(zhuǎn)換模塊功能需求翻譯轉(zhuǎn)換模塊是本軟件三大功能模塊之一。本系統(tǒng)模塊的主要需求是完成對 文本，圖形的翻譯操作，最后點擊添加命令，能將命令

56、顯示到屏幕上。翻譯轉(zhuǎn)換模塊功能圖翻譯轉(zhuǎn)換模塊的功能圖如圖4.10所示：圖4.10 翻譯轉(zhuǎn)換模塊功能翻譯轉(zhuǎn)換模塊之詳細設(shè)計首先第一個部分是圖形翻譯功能，此模塊的功能是將繪制的圖形翻譯成與之 對應(yīng)的十六進制代碼，只有這樣才能讓單片機識別。在此功能中，繪制的圖形已經(jīng)記錄在了屬性表格中， 只要將屬性表中對應(yīng)的 圖形屬性提取出來，并且轉(zhuǎn)換成指令就可以了。其具體步驟如下：.從框中提取所需的屬性；.轉(zhuǎn)換成十六進制代碼；具體的提取翻譯方法就是在用戶繪制的圖形中，當用戶選中一個圖形后， 并且按下添加命令按鈕后，根據(jù)圖形的文本屬性和索引號判斷選中的是哪一個圖 形，然后每個圖形都有其對應(yīng)的屬性，比如直線就是起點，終

57、點坐標，顏色；矩 形就是就是左上角，右下角坐標色等， 創(chuàng)建一個對應(yīng)圖形的屬性對象，用該對象 去提取所需的屬性。之后就是將所提取的數(shù)據(jù)直接轉(zhuǎn)換成十六進制就行了，并且加上識別的標 志，比如1B 46是直線，1B 41是實心矩形等。最后設(shè)計了一個添加命令按鈕，點擊按鈕，將轉(zhuǎn)換完的數(shù)據(jù)用 ui對象（即 設(shè)計模式中創(chuàng)建的實例）指向，添加到設(shè)計的 TextEdit （即文本顯示框）中就會 在系統(tǒng)屏幕上顯示出命令。在此，開發(fā)者主要實現(xiàn)了以下幾條命令的翻譯:伯 46X1 V1 X2Y2C畫線僅Lyl上較始點坐標蟋止點坐標匚顏色 xly 1 sitemProperties-item(0,0)-text();if

58、(str.startsWith(line)/ 何種圖形int index=str.mid(4).toInt();/ 索引QGraphicsLineItem*item=this-scene-lines.at(index);QString str=QString(1B 46 %1 %2 %3 %4 %5)直線命令.arg( QString二number(int)item-scenePos().x(),16).arg( QString二number(int)item-scenePos().y(),16).arg( QString二number(int)(item-scenePos().x()+ite

59、m-line().p2().x(),16).arg( QString二number(int)(item-scenePos().y()+item-line.arg(QString:number(item-pen().color().value(),16);Jstr.prepend(QString(line%1: ).arg(index);/提取所需屬性ui-orders_textEdit-appendPlainText(str.append( n);/傣力口至 5 顯示 框中其運行效果如下幾圖所示：圖4.12翻譯直線圖4.13翻譯矩形圖4.14翻譯圓形第二個部分是文本翻譯功能，此模塊的功能是將添

60、加的文本翻譯成與之對應(yīng) 的十六進制代碼，以此讓單片機識別。其完成的步驟如下：(1)從屬性框中提取文本；(2)判斷是中文還是英文；(3)翻譯成命令。其大致步驟和翻譯圖形差不多，就是翻譯的對象改成了文本，要遵循文本的 翻譯規(guī)則。其實現(xiàn)流程圖如下圖：圖4.15文本翻譯流程其思路就是在文本屬性框中，首先創(chuàng)建文本的對象從屬性框中提取出文本的顏色，以及文本的長度，因為這些參數(shù)都已經(jīng)在繪制的時候保存在屬性框中了。轉(zhuǎn)換為對應(yīng)的十六進制，若文字最高位為 1,則判斷為中文，其余的則為西文。值得注意的是漢字文本占據(jù)兩個字節(jié), 而西文只占據(jù)一個字節(jié),在計算長度 的時候是需要注意的，以免計算錯誤。1B61 ND打印字符