用户界面自动生成软件的设计与实现

1、用户界面自动生成软件的设计与实现The Design and Implementation of AutomaticGenerator for User Interface毕业设计（论文）中文摘要用户界面自动生成软件的设计与实现摘 要：如今，大多数电子设备都配有相应的用户界面，而能拥有一个精良的 用户界面也已成为众多设备所追求的目标。同时，依附于人类不断革新的科技， TFT-LCD显示屏在各方面性能有越来越多的提升，渐渐走入了百姓家用电器、 工业制造控制等领域。但是普通用户想在其上设计显示出色彩逼真，内容丰富的界面并不容易。因为各个设备本身有一定的资源短板， 而且用户也不了解界面编 程设计方法

2、。因此有必要来解决普通用户（不用了解设备等是如何工作）轻松简 单的在设备TFT-LCD屏上自行设计界面的问题。本研究题目依托用户给定的指令集，借助 QT设计软件，在计算机上实现用 户自定义界面的设计。借助计算机实现对用户界面的设计、修改等功能；通过计算机的串口与用户终端通信，在设备上显示出用户自行设计的界面。本论文主要描述了本次课题的开发意义、开发的流程和所完成的功能。并着 重阐明了设计思路和具体实现手段。关键词：TFT-LCD ;界面生成；QT毕业设计（论文）外文摘要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系统需求分析 3 HYPERLINK l bookmark16 o Current Document 系统初步分析 3 HYPERLINK l bookmark18 o Current Document 流程分析 4 HYPERLINK l bookmark20 o Current Document 3系统总体设计 7 HYPERLINK l bookmark22 o Current Document 开发原则 7 HYPERLIN

9、K l bookmark24 o Current Document 系统设计要点 8 HYPERLINK l bookmark26 o Current Document 系统总体结构设计 9 HYPERLINK l bookmark28 o Current Document 4模块详细设计与实现 15 HYPERLINK l bookmark30 o Current Document 编辑绘制模块 15 HYPERLINK l bookmark32 o Current Document 翻译转换模块 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 系统功能简介 39 HYPERLINK l bookmark42 o Current Document 系统运行与操作指南 39结论 40致ft 错误！未定义书签。 HYPERLINK l bookmark44 o Current Document 参考文献 41附录（设备命令表） 421

11、引言如今，用户界面已经逐渐成为现代科技中的重点关注对象，只有拥有良好的用户界面与操作，才能吸引更多的顾客用户。现在一些高端机上，都大部分带有图形库设计，而且资源内存等相对丰富， 显示图形界面，以及对界面等进行修改操作不是什么难事。不管是开发者还是用 户，都能较好的掌握它们。然而，考虑到一些小型机器，或者说是资源比较稀少 的设备，它本身虽然可以显示界面，但不够美观，不支持界面的一些修改操作， 而且也不具备丰富的图形库。对于开发者来说，也许还能通过编程解决这个难点， 但对于用户，要让各个用户掌握硬件编程技术去修改界面无疑是困难的。因此有必要设计一个方案，来解决普通用户（不需理解机器如何工作）轻松

12、简单的完成基于TFT-LCD液晶屏界面设计问题。研究意义当今，借助于嵌入式发展在大众生活中的应用越来越广，人们的生活质量也因为有了各种高科技设备而有了普遍的提高。然而时代在进步，人们的需求也在提高。为每个电子设备设计一个精良的用 户界面以便人们轻松操作已经越发变得重要。 但现在的情况是大部分的设备，具 内部的资源，内存大小等比较稀缺， 不可能让人们像在计算机端上操作一样， 随 意的去用各种方法显示汉字，图形， 更谈不上显示五颜六色的逼真图案了。 这样 一来，显示友好的人机界面就有点困难了。就算是对于现今比较高端的单片机来说，要做到这些方面，也是十分的不容 易。这些工作不仅耗时费力，价格也不是被

13、大众所能接受的，很难做到美观大方。 而且大部分设备设计界面也需要一定的编程技术，这对普通用户来说去设计一个 自己喜欢的界面是非常困难的。所以如何做到让普通用户能在资源较少的设备上 自行设计界面这一任务就变得十分重要了。所以，为了满足此嵌入式系统的应用需求， 让大部分的普通用户自行能设计 界面。本课题设计一套满足用户自定义显示指令集的用户界面生成软件，即由计算机端绘制图形，在单片机设备上显示出来。本课题设计一个界面自动生成软件，即开发者把在计算机端上绘制的图形以 及文本内容转变成指定的十六进制命令代码传送到单片机上，然后由单片机翻译命令代码，把它还原成原始图像显示在指定的单片机设备上，如此一来，

14、则无需 用户了解如何操作硬件等设备，就可以高效简便的完成一系列的需求设计。可行性分析技术可行性分析开发者采用的开发软件为 QT系列。此课题的可用开发软件不局限于 QT, 例如MFC, Delphi等，甚至是VB都可以完成本题目。MFC即微软提供的一个类库，以C+类形式封装了许多的类库供开发人员 使用，大大减少了开发人员的工作量。Delphi也是一款以图形界面为主的开发软 件，其主要语言为Pascal但经过开发者的对比，对于 Delphi来说，它所使用的是Pascal语言，但本 课题的一大特点是要突出面向用户， 这里的面向用户不仅仅是软件使用方面，同时在开发过程中，对开发者亦是如此。QT所使用的

15、就是面向用户编程的 C+语言，而且其内部封装了许多包，集成化程度非常高，而且其设计界面封装完成度 也非常优秀，这对于Delphi来说是一大优势。对于MFC,其使用的也是C+语言，但是MFC无法完成跨平台跨系统的操 作，而QT所支持的为大部分的主流操作系统。对于本课题，其主要的一部分为绘图操作， QT中提供了大量封装好的绘图 函数，可以方便的调用，而且也提供了多种重写方法，完全能适应各个开发人员 的不同思想方法，同时 QT也支持串口编程，都有对应的封装包。综上所述，开发者认为，采用 QT开发的优势具有以下几点：.面向对象QT的高模块化得益于它优秀的机制，可重用性令人满意，对于用户来说是 非常简便

16、的，而且其编程语言对开发者来说亦是如此。.优秀的封装程度QT中的封装函数非常丰富，对完成本课题来说无疑是简便高效的。.良好的跨平台性QT的开发环境支持各种主流系统，如 Linux, Windows等。经济可行性分析开发者所要开发的软件系统的需求比较低， 加上如今的软硬件设施都十分发 达，而且所使用的拥有TFT屏的大部分设备价格亲民。所以在这些方面的支出上 不是很大。止匕外，本目标软件并不是十分的复杂难懂，开发者主要集中精力于软件方面， 硬件方面考虑较少，开发周期较短，各种支出合理，不会造成太大的负担。因此 在经济角度上是完全可行。2系统需求分析本章主要介绍了以下内容：首先对用户需求进行分析引出

17、制作此课题的意义； 其次对整个软件开发流程进行总体概括描述。系统初步分析用户需求分析当下，彩色液晶显示作为如今高科技的技术结晶，其应用得到的越来越多的 传播。同时为设备设计一个精良的界面也已成为重中之重。但由于在彩色液晶显示TFT-LCD上设计界面应用又有较严重的局限性和必要的技术知识，所以普通 用户可能无法靠自己来设计出精良的界面。目前市场上生产的智能显示器具有如下优点：循环、交替、重叠、滚屏等， 它们支持显示预制画面：所谓预制画面，就是指所有的显示内容都可分为固定部 分与变化部分，对于固定部分，可以预先在微机上进行编制，然后将其作为“预 置画面”送入机内Flash（闪存）中，在需要显示时，

18、使用简单的页面调用指令就 可直接调出显示。预置画面不但可以循环、交替、重叠显示，还可以与现场实时 数据组合显示，预置画面的使用可以减少工作中通讯传输的负担以及重复性的工 作。但抛开以上优点，其中大部分的操作都需要对设备有一定得了解以及相应的 专业知识，但对普通用户来说，掌握这几点有一定的难度。因此，设计一个画面 自动生成软件，可以使用户在不需要了解太多的硬件和编程知识下，就可以自行 对设备进行简单的图形、图像、文字的设计和传送显示，这无疑帮助用户大大降 低了操作门槛，也能让液晶显示设备更好的融入大众环境。现有系统概况计算机，平板等高端电子设备如今已经普遍融入到人们的生活中。 对于使用 这些设备

19、的用户来说，设计属于自己的界面并不困难，因为这些设备上有相当多 的资源以及足够的内存空间。即便退一步来说，使用 ARM, Cortex等系列的高 端产品，它们也都配备了图形库等资源，也能让用户完成基本的界面设计。但是考虑到仍有很多用户，以及一些有特殊需求的人群，他们使用的设备并 不具备以上优点或资源，所以想要设计出自己界面就显得有些困难了。所以现在有部公司提供画面自动生成软件给这些有需求的人群使用，但它们的设计有一些小瑕疵：即当用户完成了图像绘制后，各种指令的确能正常生成， 但用户对某个图形不满意，想要修改时，例如把某图形的颜色改变，或者调整某个图形的坐标等，这些都无法实现。开发者认为，有一定

20、的实现必要来设计一款软件， 使它不仅能完成基本的绘 制操作，而且还能对已绘制图形进行修改等操作。流程分析本课题首先要设计出一款绘图软件，能实现基本的图形绘制，以及文本输入， 然后将所绘图形与文字转换成相应的指令，传送给单片机。经过分析， 本设计系 统大致工作流程如下：开始运行此系统，本系统对应的单片机分辨率为 640 x480。用户可以进行选 择分辨率，系统提供了任意的分辨率供输入选择。在选择好后，用户进入到软件主界面，在界面的设置选项中，可以选择屏幕 背景色，QT提供了一个色板，可选择的颜色非常多。之后正式进入本系统软件，本软件有两种模式，专门画图和文本编辑的绘制 模式和专门修改图形文本属性

21、的修改模式。系统默认进入的是绘制模式，用户可以在系统界面上选择相应的图形或文本， 以及填充颜色，开始绘制所需图形和文本， 若想要对图形进行修改，则可以自行 选择进入系统的修改模式；当用户将所需要的图形或文字绘制完成时，再点击翻译命令，就能得到相对应的十六进制命令。若要对图形进行修改，则应选择修改模式进入。本系统在修改模式中有两大 特色：首先即实现了面向对象的思想编程。 用户绘制的图形，文本等都有相应的 名字和属性框与之对应，方便用户直观的观察和修改。而且对图形修改完之后， 相应的图形和十六进制命令都会自动发生变化， 开发者把这一种方法修改属性的 称为属性框法；其二是实现了一种用鼠标来拉伸，拖动

22、图形，以此来改变图形属性的方法，使得用户对图形的修改操作更加简洁明了，开发者把这种方法称为拖拽拉伸法。最后，在对绘制的图形进行修改之后，就要翻译成对应的十六进制命令。翻 译完成后，用户可以通过本软件的串口设置， 对通信参数进行设置，并完成与单 片机的数据通信，以实现在机器上显示出用户所绘的图形或文字。对此系统具体分析如下：.对于用户来说，系统界面应该是简洁明了才好，而不是一堆图标等，显得 杂乱无章。所以开发者将主要功能全部以清晰的大按钮展示，诸如绘制各种图形，转换命令，发送数据等，使得用户一目了然，而无须去寻找。而将一些小功能， 比如打开文件，复制保存图像等，放置在了菜单选项里。.对于画布白选

23、择，QT提供了 QGraphics View类，这就是为了绘制2D图 形而专有的类。在Design模式中，QGraphics View相当于一块画布，在QGraphics View上可以绘制各种用户想要的基本图形。对于开发者来说，QT提供了 Design 模式，在其中就能对画布的大小等参数进行调整。而对于用户来说，必须直观的给予用户一个调整大小（即分辨率）的控件。.当用户选择了分辨率背景色后，就可以开始绘制工作了。系统提供基本图 形，直线，矩形，圆等的绘制，其余的图形，如多边形等，因为单片机不支持它 们的命令转换，所以没有刻意去实现。而要绘制以上的图形和文本，对于 QT来 说，也非常方便，只要

24、熟悉一下几种调用方法就行：第一是绘制直线 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、一参数指定了绘制文字所在的矩形的位置，第二参数指定了文字在矩形中的对齐方式，第三参数就是所要绘制的文字，第四参数一般用不到，不用设置。.在用户绘制好图形或文本后，就要开始进行命令转换了。这是关键的一 步，如果无法转换成命令，那么对于此次课题就没什么太大的意义了，因为单片机无法识别用户具体是什么操作，也无从谈起再现画面显示了。开发者通过和用户的沟通协商，确立了本软件所要开发设计的各项功能，并且规定了这些功能所对应的命令。下面列出几个用户最为常用，也是本系统中较为重要的几个命令：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表示弧颜色；对于文本，也有相应的命令，不过在转换的时候，需要注意输入的是中 文还是英文，两种字符的转换方式也不尽相同。中文是对应的标准国标码，而西文则直接转换成ASCII码就可以。注意的是，中文是占据两个字节，而英文则只 占

27、一个字节空间。而没有提到的命令，后续会在最后附上一张附录表，以供参考。.对于已经绘制好的图形或者文本， 用户可能会不太满意想要修改一下。 但 是据开发者观察，其他的画面生成软件对这方面的支持不是特别好， 所以开发者 着重开发了属性修改模块。在该模块中，开发者设计了两种改变属性的方法：其一是拖拽拉伸法，顾名思义就是利用鼠标去拖拉图形，以此来达到位置， 大小改变的目的，开发者利用的方法就是为每个图形都设置八个点，即为8个方向，凭此八个点来监听图形的变化，并且对此8个方向进行一系列的变化计算以此来获得图形的变化其二是属性框法，这个方法相对简单，就是在对应图形的属性栏里直接修改 数值，图形就会变化了。

28、为了达到美观的要求，开发者使用了QTableWidget+SpinBoxDelegation的组合（即数值更改使用上下箭头的样式）。.绘制完图形后，翻译生成代码命令，最后一步是通过通信口去发送指令。 在这一块中，开发者主要就是调用了 QT中的QlOdevice类，它是标准的QT自 带的通信接口，满足了通信的基本要求。然后设置了一个对话框来对通信的各个 参数加以设置，如波特率，传输时延等，完成这一系列设置后，就可以开始通信 了。3系统总体设计本章主要介绍了以下几点内容：首先对本软件的开发思想和原则进行了阐述； 其次对本系统的开发所要达成的目标以及所使用的设计语言进行了说明；最后给出了系统总体结构

29、图，并分别对各个结构模块进行简单描述。开发原则本系统首先是根据用户需求特别打造的，以用户最后的评价和满意度为主。 所以面向用户，以用户的需求观点进行开发是本软件系统所追求的目标。其次面对一个完整大型项目系统的开发， 应该秉持这样的思想，即将整个系 统软件的开发过程分割成相应的小阶段。再者，每个阶段又能细分为各个小步骤。 所划分的各个阶段和步骤必须要有明确的目标。 若是这样合理安排的话，系统开 发条理更加清晰，逻辑更加分明，更易于系统的制定和开发。接着开发者在本系统中融入了模块化思想， 模块化思想即将所要开发的系统 软件划分为不尽相同的各个功能模块。划分的各个模块都能相应的实现软件的一 个特定功

30、能。各个模块间既保持独立性，但也不失一定的耦合性，以便于以后对本系统的扩充，维护等。此设计思想，可以为整个系统软件的顺利开发打下坚实 的地基。最后，开发者基于快速原形思想来完成软件的开发。快速原形法是一种重要 且实用的设计法，也是本系统设计的一个主要方法。它从用户观念出发，根据用户需求，开发者参与讨论，设计出大致蓝图，并能建立一个实验性的基础系统模 型在较短的时间内，随后根据用户的使用以及意见改进， 对实验模型进行精雕细 琢，直到满足用户，这样便形成一个稳定、理想的画图系统软件。快速原形法的方法的主要优点有：.所需解决的问题都围绕一个较小的实验模型展开， 大大方便了开发人员的 工作。.通过对实

31、验模型和用户交流，能让开发人员跟多的去挖掘潜在的问题， 从 而不断的修改，完善系统，最后完成开发。.对于系统开发来说，其效率较高。快速原型的开发周期短、开发过程灵活、 通过对用户的交流，易于修改，这对一个大型的，不太稳定的系统来说是适合的。.系统的可扩性优越，因为此方法是通过不断的提升修改来完善系统，和可扩展性相呼应，更加易于系统的扩展。系统设计要点本节首先介绍了本软件的基本开发目标， 即所要完成的基本功能；其次对所 用的开发语言的选择进行了说明；最后是对代码设计的基本要求。系统开发基本目标本系统软件实际上是一款专业的定制软件，它的开发目标是解决用户（无需 了解硬件如何工作）如何简便的在拥有

32、TFT屏的设备上自行设计界面。本系统软件拟将完成以下基本目标：.满足用户绘制图形的需求，即绘制基本图形或文本，填充颜色等操作；.对已绘制的图形可以进行属性修改操作；.将修改完成的图形翻译成设备能理解的十六进制代码命令；.设置通信参数，完成与单片机的连接，数据传输。以上目标为本软件的必要基本目标， 在此基础上，还可以进行进一步的开发 操作。软件设计语言本系统软件拟采用QT系列进行开发，QT编程所需语言需要C+编程基础。 C+语言是在广为流传经典的C语言基础上发展起来的，再继承了 C语言的各种 优势的同时，又加入了面向对象的编程思想，这使得它对于不管是开发人员， 还是用户，都有良好的亲和力。开发者

33、也对比了同样可以用来开发的 MFC或者Delphi,发现了几点不足首先是MFC,虽说它也是基于 C+封装的API,但是其无法实现跨平台特 性。而对于Delphi来说，其使用的是Pascal语言，但相对于面向对象的 C+语 言来说优势不大。系统代码设计说明进行本软件的代码编写时，遵循了以下几个原则：.确定性：在本软件中，每一行代码和每一种对象都是明确的，没有模糊的 含义。.标准性：这主要表现在对各个对象的标准命名，以准确表达出其含义与内容，方便开发人员研读改进。.合理性：软件中设计的代码和对象一一对应，有理有据。.可扩充性：考虑今后软件可能会有扩充的可能， 保留了一定的预留空间与 代码。系统总体

34、结构设计本节是此章的最后一块内容，其中包含了两个部分：首先是给出了系统的整 体结构图和功能模块图；其次是根据功能结构图上划分的模块，逐一进行描述。结构图本系统总体流程为用户在PC端上绘制图形界面，再通过串口发送给单片机, 最后在单片机的TFT屏上显示出相应的画面。具体的系统结构图如下所示：PC端TFT屏显示画面PC端读取分析数据由单片机设备图3.1系统总体结构图整个系统又由分工明确的几大模块构成。本系统功能模块结构如图3.2所示:用户界面自动生成软件编辑绘制翻译转换图 形 绘 制翻译图形并添加命令文字编辑翻译文本并添加命令通信管理属 性 框 法 修 改设 置 通 信 口 参 数开始通信结束通信

35、拖拽拉伸法修改编辑绘制翻译转换图 形 绘 制翻译图形并添加命令文字编辑翻译文本并添加命令通信管理属 性 框 法 修 改设 置 通 信 口 参 数开始通信结束通信拖拽拉伸法修改图3.2功能模块结构图系统模块设计本系统米用QT进行开发，语百为C+。本软件可划分为四大主要模块：它们分别是编辑绘制，翻译转换模块，属性 修改模块和通信管理模块。其中，开发者将编辑绘制，翻译转换，通信管理归为三大主要功能模块，是 组成本系统不可缺少的，而属性修改模块则是本系统的一大特色模块，与其他三 个模块相辅相成，很好的满足了面向对象的特点。止匕外，开发者设计了两个模式，绘制模式与修改模式，目的是能使用户更直 观的绘图与

36、修改。显然，编辑绘制模块运行于绘制模式，属性修改模块运行于修 改模式，其他两个模块则皆可运行与任意模式。系统模块的具体设计如下：.编辑绘制模块：该模块的功能主要就是让用户完成基本图形或者文字的绘 制。首先，用户进入到系统后，可以在菜单选项中选择更改分辨率和背景色，选 择适合自己的样式来进行绘制。其次， 系统默认的就是绘制模式，即允许用户绘 制图形，而暂时不允许用户修改，除非用户自行进入修改模式。选择完成后，在 画布上，用户可以开始绘制图形或文本。这里提供了直线，矩形，圆这些基本图 形，另外为了方便用户，也添加了椭圆和多边形的选项， 但是本系统对应的单片 机无对应命令。对于文本输入，则是提供了文

37、本框在画布上进行操作， 用户也可 以按照喜好来选择图形的颜色或选择文字的各种样式。最后，在本系统上也添加了清屏选项，可以将用户绘制的所有图形或文本全部清空。此模块的结构图如图3.3所示：选择画笔颜色和填充颜色选择文字样式和颜色选择分辨率选择背景色清 空 屏 幕选择画笔颜色和填充颜色选择文字样式和颜色选择分辨率选择背景色清 空 屏 幕图3.3编辑绘制模块.翻译转换模块：此模块的功能就是将用户绘制的图形或者文本， 翻译成单 片机能识别的十六进制命令。需要注意的是图形翻译方面调用不同的翻译命令就 行，但是在文本方面，必须明确输入的是否是中文还是英文，因为这两种文字在计算机中的表示是不同的，不能一概而

38、论。 最后全部绘制完成后，点击软件上的 添加命令，就可以将各个命令添加进显示表格中。此模块的结构图如图3.4所示:翻译图形并生成命令翻译转换模块翻译文本并生成命令翻 译 直 线翻译实体矩形翻译空心矩形翻译圆翻译中文文字翻译英文文字或数字翻译图形并生成命令翻译转换模块翻译文本并生成命令翻 译 直 线翻译实体矩形翻译空心矩形翻译圆翻译中文文字翻译英文文字或数字图3.4翻译转换模块.属性修改模块：该模块是本软件中很有特色的一个模块。 此模块很好的满 足了本软件的面向用户的思想，给予用户最直观的绘制体验。开发者研读了其他开发者设计的相关软件，发现在面向对象这方面做的还不 完善，无法给用户直观的体验。有

39、些微小的图标选项的含义必须得将鼠标放置在 上面才能显示，这样就已经很不方便了。 而且画出的图形，也没有对应的名字来 辨别或者能用鼠标去选中，这样的话， 一旦图形堆积起来，用户根本无法分清哪 个图形是自己想要的。再有就是他们对图形的属性修改也处理的不是很好，无法让用户直观的去修改图形，来达到一个满意的效果，但就其他方面来说，这些软件还是很优秀的。在这个模块中，顾名思义，就是对已绘制图形或文本进行属性修改。用户进入修改模式，在该模式中，禁止了用户的绘制操作，转而允许用户对 画布上的图形或文字做各种修改。为此， 开发者嵌入了一个属性框，以便直观的 展示用户各个图形的数据。着重要讲解的就是在修改模式中

40、，开发者设计了两种修改的方法，第一种是 拖拽拉伸法，也就是允许用户选中某个已经在画布上绘制好的图形， 直接用鼠标 拖拽可以改变图形的位置坐标，也可以用鼠标对图形进行拉伸缩放 ，以此来改变 图形的大小。第二种方法就是属性框法，也就是在选中图形的属性框中直接修改数值，比如直线就是修改起点，终点的位置，圆就是修改半径，以及各种颜色等；这两种方法修改图形或文本的属性， 都能实时的在属性框中观察到，而且修 改完后，相应的翻译命令也会跟着改变，可以说很好的满足了面向对象的需求。属性修改模块的结构如图3.5所示：鼠 标 拖 拽 图 形改 变 位 置 坐 标鼠 标 拉 伸 缩 放 图 形改 变 大 小拖拽拉伸

41、法属性框法属性修改模块鼠 标 拖 拽 图 形改 变 位 置 坐 标鼠 标 拉 伸 缩 放 图 形改 变 大 小拖拽拉伸法属性框法属性修改模块属性框中直接修改图形属性图3.5属性修改模块.通信管理模块：此模块主要就是实现计算机与所需单片机的数据通信与传输。本项目采用的均为标准的 RS232通信方式。其数据格式标准为：1个起始位（低电平），8个数据位（低位在前，高位在后），1个停止位（高电平）。各个参数也必须在通信前进行设置，如波特率，数据位数，奇偶校验，传输时延等，否则无法正常通信。该模块结构如图 3.6所示：通信管理模块设置串 口参数结 束 通 信开 始 通 信结 束 通 信图3.6通信管理模

42、块4模块详细设计与实现本章就本软件四大模块展开，分别对四大模块的设计与实现由简到详进行描 述。编辑绘制模块本节主要描述编辑绘制模块的功能与详细实现思路。编辑绘制模块功能需求编辑绘制模块是本软件三大功能模块之一。本系统模块应有四大功能需求：即首先可以进行分辨率，屏幕背景色的选择；其次可以完成文本的编辑；然后可以进行基本图形的绘制，如直线，矩形等，还可以选择它们的颜色；最后是可以 进行清屏操作。编辑绘制模块功能图编辑绘制模块的功能图如图4.1所示：指定矩形区域的文本输入，并可以选择文本样式等编辑绘制模块对各种基本图形的绘制操作指定矩形区域的文本输入，并可以选择文本样式等编辑绘制模块提供任意分辨率，

43、背景色的选择对屏幕上的各种内容进行清空图4.1编辑绘制模块功能编辑绘制模块详细设计本模块主要功能是进行各种基本图形的绘制，绘图全程操作都是基于鼠标事 件来绘制图形，且运行于绘制模式下。总体上来说，绘图就是依靠鼠标的三个事件来完成，即鼠标按下事件；鼠标 移动事件；鼠标松开事件。.鼠标按下事件在此事件中，主要完成了以下 4步过程：(1)判断用户选择的是何种绘图图形，其思想就是设置一个字符 Text,和 本软件的图形选择按钮相关联，当用户按下按钮选择了某个图形，则会判断按钮 中的文本为何种图形，然后可以再在调色板中选择图形颜色；(2)记录下起始点坐标，即图形从哪个位置开始绘制；(3)添加新的图形It

44、em项目到相应的集合中。例如直线的话，就是归到直 线集合中，第一条直线就取名为line0,以此类推，这样做的目的就是为了实现 面向对象，能使用户分辨自己选择的是哪个图形；(4)发送信号给属性框，让其做出相应的Item项目更新，也就是在属性框 中添加绘制的图形各种属性信息；(5)对于各个图形，都提供了是否实心还是空心的选项， 即用了 bool型变 量，并调用bool isSolid=widget-isSolid()来判断。但对于命令翻译来说，只有矩 形用得到，若选择实心，则填充整个图形，若选择空心，则填充边界；其流程图如下所示：实心空心图实心空心图4.2 绘制图形流程图其主要代码如下(以选择直线

45、为例)：QString text= widget-groupTool-checkedButton()-text();判断何种图形 bool isSolid=widget-isSolid();/ 是否空心还是实心if(text=QTEXT(直线)/选择直线，执行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);发射信号，让其添加进属性框其运行效果如下图所示:II图4.3绘制直线并添加进属性框* 汨网口小鹏编由审II图4.3绘制直线并添加进属性框* 汨网口小鹏编由审图4.4绘制

47、空心矩形并添加进属性框TH； iif mTMTH； iif mTM图4.5绘制实心矩形并添加进属性框.鼠标移动事件此事件负责的主要功能是根据当前工具和起始坐标，计算出图像的外界矩形,并以之修改形状。具体的来说就是：(1)先用Sw让chCase语句来判断用户绘制的是哪一种图形；(2)若为直线，则调用 SetLine函数来捕获坐标，若是其他图形，则调用 SetRect函数，即它们的外接矩形，来捕获坐标。因为除了直线，其余的图形的 绘制都是根据外接矩形来绘制的；(3)根据坐标的变化，来改变图形；其主要代码如下：switch(this-currentTool)分支选择 (case Line:/直线QG

48、raphicsLineItem*item=this-lines.last();item-setLine(QLineF(QPointF(0,0),event-scenePos()-startPointF);/ 调用 SetLine 函数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();调用 SetRect函数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:/多边形自带调整break;case Text:/文本矩形框自带调整break;.鼠标松开事件该事件在只有使用多边形工具的时候才用到，因为在 QT中，绘制多边形，是在画布上点击鼠标，并且松开后，系统才开始绘制多边形的一个点集。具体完成的操作如下：(1)获取当前多边形对象；(2)为其添加点集；(3)发送信号提醒属性框更新。其实现

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中提供了此类封装函数。其主要思想就是

53、在画布上调用文本编 辑函数，用到了 QLineEdit类，具提供了单行文字的编辑功能，即提供了一个 矩形框，用户可以在其中输入文字。若想使用多行编辑，则可以使用QTextEdit来创建对象，进行编辑。文本编辑的具体操作如下：(1)选择文字编辑；(2)在鼠标点击的地方生成一个QLineEdit,(生成的矩形框高度和宽度都是由用户选择的的字体设置决定的)；(3)编辑完成后(焦点离开，或者按下enter键)，添加真正的QGraphicsSimpleText 对象。(4)其运行效果如图4.7:鼻脑享(4)其运行效果如图4.7:鼻脑享图4.7文本编辑本模块中的第三个部分就是提供分辨率和背景色给用户选择。

54、用户进入系统后，可以在菜单设置中选择画布大小来改变分辨率，提供了任 意分辨率的修改。也可以选择任意颜色来作为背景色。其思想就是在菜单选项中添加一个画布大小，一个背景色选项，然后为这个选项添加一个触发器,可以触发setSceneRect函数，即分辨率设置函数,以及QColorDialog函数，即调色板函数。这两个是 QT自带的函数。但为了让画布使 用这些函数，必须创建画布QGraphicsScene的对象来调用它们，否则是没有效果 的。其具体操作如下：(1)点击菜单设置中的画布大小；(2)设置分辨率。其运行结果如图4.8 :|r ERSWt M工”图4.8.分辨率,背景色的选择本模块的最后一个功

55、能，也就是清屏功能，其实现的原理就是移除所有的图 形，文本的Item项目，并且清除它们的属性信息。其实现代码如下：this-scene-clear();/青除画布上的 Item, this 指代画布 int nRow=ui-itemProperties-rowCount();for(int i=0;iitemProperties-removeRow(0);其运行效果如下图：iDK图4.9清屏后画面4.2翻译转换模块本节主要描述翻译转换模块的功能与详细实现步骤。翻译转换模块功能需求翻译转换模块是本软件三大功能模块之一。本系统模块的主要需求是完成对 文本，图形的翻译操作，最后点击添加命令，能将命令

56、显示到屏幕上。翻译转换模块功能图翻译转换模块的功能图如图4.10所示：图4.10 翻译转换模块功能翻译转换模块之详细设计首先第一个部分是图形翻译功能，此模块的功能是将绘制的图形翻译成与之 对应的十六进制代码，只有这样才能让单片机识别。在此功能中，绘制的图形已经记录在了属性表格中， 只要将属性表中对应的 图形属性提取出来，并且转换成指令就可以了。其具体步骤如下：.从框中提取所需的属性；.转换成十六进制代码；具体的提取翻译方法就是在用户绘制的图形中，当用户选中一个图形后， 并且按下添加命令按钮后，根据图形的文本属性和索引号判断选中的是哪一个图 形，然后每个图形都有其对应的属性，比如直线就是起点，终

57、点坐标，颜色；矩 形就是就是左上角，右下角坐标色等， 创建一个对应图形的属性对象，用该对象 去提取所需的属性。之后就是将所提取的数据直接转换成十六进制就行了，并且加上识别的标 志，比如1B 46是直线，1B 41是实心矩形等。最后设计了一个添加命令按钮，点击按钮，将转换完的数据用 ui对象（即 设计模式中创建的实例）指向，添加到设计的 TextEdit （即文本显示框）中就会 在系统屏幕上显示出命令。在此，开发者主要实现了以下几条命令的翻译:伯 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、加的文本翻译成与之对应 的十六进制代码，以此让单片机识别。其完成的步骤如下：(1)从属性框中提取文本；(2)判断是中文还是英文；(3)翻译成命令。其大致步骤和翻译图形差不多，就是翻译的对象改成了文本，要遵循文本的 翻译规则。其实现流程图如下图：图4.15文本翻译流程其思路就是在文本属性框中，首先创建文本的对象从属性框中提取出文本的颜色，以及文本的长度，因为这些参数都已经在绘制的时候保存在属性框中了。转换为对应的十六进制，若文字最高位为 1,则判断为中文，其余的则为西文。值得注意的是汉字文本占据两个字节, 而西文只占据一个字节,在计算长度 的时候是需要注意的，以免计算错误。1B61 ND打印字符