EzUITool用户手册_V10 简单实用触摸屏ui设计

版权声明

北京铭正同创科技有限公司保留对此文件修改的权利且不另行通知。北京铭正同创科技有限公司所提供的信息相信为正确且可靠的信息, 但并不保证本文件中绝无错误。请于向北京铭正同创科技有限公司提出订单前, 自行确定所使用的相关技术文件及产品规格为最新版本。若因贵公司使用本公司的文件或产品, 而涉及第三人之专利或著作权等知识产权的应用时, 则应由贵公司负责取得同意及授权，关于所述同意及授权, 非属本公司应为保证的责任。

目 录

1 工具简介 (5)

1.1 EzUITool工具简介 (5)

1.2 EzUITool与EzUI系列模块 (5)

1.3 EzUITool工具涉及文件介绍 (6)

1.4 有关字库的要求 (6)

1.5 一个资源文件中可加载的资源项个数 (6)

2 EzUITool软件界面 (7)

2.1 EzUITool编辑界面 (8)

3 资源加载功能界面 (9)

3.1 工具栏 (9)

3.2 操作示例 (10)

3.2.1 加载ASCII字库 (10)

3.2.2 加载其它资源 (11)

3.2.3 资源数据显示区操作 (12)

4 界面创建功能界面 (14)

4.1 工具栏 (14)

4.2 操作示例 (15)

4.2.1 创建新界面 (15)

4.2.2 资源数据显示区中的操作 (15)

5 普通显示操作指令编辑功能界面 (17)

5.1 工具栏 (17)

5.2 设置背光及清屏 (19)

5.3 绘制直线 (20)

5.4 资源数据显示区操作 (22)

5.5 位图显示 (23)

5.6 字符串显示 (25)

5.7 通用控件资源设置 (27)

5.8 保存界面数据 (28)

5.9 编辑其它界面 (28)

6 界面控件设置功能界面 (30)

6.1 工具栏 (30)

6.2 触摸区域控件的设置 (31)

6.3 配置控件消息 (34)

6.4 其它控件的设置 (38)

6.4.1 位图触摸按钮控件设置 (38)

6.4.2 数值控件设置 (39)

6.4.3 字符串控件设置 (40)

6.4.4 弹出下拉选框控件设置 (40)

6.4.5 进度条控件设置 (41)

6.4.6 波形控件设置 (42)

6.4.7 位图动画控件设置 (44)

6.5 修改已设置控件及控件消息 (45)

7 技术支持 (47)

7.1 联系方式 (48)

北京铭正同创科技有限公司

https://www.wendangku.net/doc/3c12028470.html, mzdesign@https://www.wendangku.net/doc/3c12028470.html,

51 工具简介

1.1 EzUITool 工具简介

EzUITool 是为EzUI 系列模块而设计的一款资源整合、界面编辑、控件配置的工具软件，用户可使用该工具完成基本的显示界面设计，以及配置各个显示界面的显示内容、控件配置，以及控件之间的消息响应机制。

1.2 EzUITool 与EzUI 系列模块

EzUITool 工具可以生成一个资源文件，而资源文件中包含有预置显示资源以及界面数据。预置显示资源主要为用户界面所需的图片、字库、通用控件资源等构成；这些预置显示资源都是整个用户界面的各个基本材料。

界面数据即为用户在EzUITool 工具上为资源文件编辑的多个显示界面，每个界面都有唯一的界面索引号；用户可为每个界面预置多条普通显示操作指令以及设置多个控件以及配置控件间的响应消息。 EzUITool 工具产生的资源文件后缀为“.ers ”，该资源文件需要预置在EzUI 系列模块当中的资源存

储器，而EzUI 系列模块在其工作时，从模块上的资源存储器读取并分析资源文件，将会按照资源文件中所编辑的界面进行显示、响应。

EzUITool 资源制作的流程示意如下：

1.3EzUITool工具涉及文件介绍

EzUITool将会涉及到一些文件，在此统一进行说明。

z“.ers”：EzUITool创建的资源文件。

z“.tmp”： EzUITool在使用时产生的临时文件。

z“.bmp”： EzUITool可以加载的位图文件，但要求位图文件是Windows格式，支持24位色、8位色、4位色以及单色的位图文件。

z“.hzk”： EzUITool可以加载的汉字库文件，要求该文件的文件名前面以“单个汉字宽度X单个汉字高度”为开头，也即24×24点的汉字库文件名必须为：“24X24.hzk”；此外汉字库必须

为GB2321规范的一、二级汉字库。

z“.asc”： EzUITool可以加载的ASCII英文字库文件，要求该文件的文件名前面以“单个字符宽度X单个字符高度”为开头，也即16×32点的英文字库文件名必须为：“16X32.asc”。

z “.big”： EzUITool版本可以加载Big5繁体中文字库，文件名要求与”.hzk”一样，只是Big5字库仅限于部分模块支持其显示功能。

z“.nir”：由NIS_ResourceEditTool工具制作生成的数值输入框资源文件，属于EzUI系列模块当中的通用控件范畴，EzUITool可以加载该类文件，作为资源文件中的一项基本资源条目。

z“.sir”：由SIS_ResourceEditTool工具制作生成的字符串输入框资源文件，属于EzUI系列模块当中的通用控件范畴，EzUITool可以加载该类文件，作为资源文件中的一项基本资源条目。

1.4有关字库的要求

字库（也就是字模的集全）的数据采用了与一般的单色点阵LCD一样的数据组成方式，即字模当中的一个位代表LCD显示中的一个像素点，取点方式为从左到右，自上到下的顺序。对于这点，ASCII码英文字库的字模和中文字库中的字模要求一样。

字模采用了以Byte为单位的位流结构，即当一行取点不为8的整数倍时，补齐数据至8位，无用位填零。

字库文件的命名请按照上节中的要求，否则无法正常加载。

而ASCII英文字库的字符个数为256个。

1.5一个资源文件中可加载的资源项个数

EzUITool工具一个资源文件中的最多资源项（即子项资源）可支持最多400个资源项。

而一个资源文件当中，允许创建最多150个界面。

2EzUITool软件界面

双击“EzUITool.exe”，可打开新建资源文件配置对话框，如下图的界面：

EzUITool工具是基于文档的软件结构，所以在打开软件主体之前，需要将软件对应上一个新建的或已存在的资源文件；在此，用户可以配置一个新建的资源文件选项，包含资源文件最大容量、显示屏X、Y轴点数。

在新建资源文件对话框中按下“确定”按钮后，即可进入软件的主界面，如下图所示：

EzUITool工具的主界面主要包含四大部份的内容，分别是：

z主菜单；

z工具栏；

z显示预览区；

z资源数据显示区。

2.1EzUITool编辑界面

EzUITool工具软件是集资源整合、界面编辑于一体的工具软件，用户可在软件当中为EzUI系列模块的资源文件加载位图、字库等资源，也可为模块编辑界面，并为界面设置控件、配置控件消息；为实现以上功能，EzUITool工具划分了不同的功能界面，分别如下：

z资源加载功能界面；

z界面创建功能界面；

z界面普通显示操作指令编辑功能界面；

z界面控件设置功能界面。

在不同的功能界面当中，EzUITool工具的工具栏以及资源数据显示区将会提供不同的显示及功能。

3资源加载功能界面

在用户打开EzUITool工具软件后，并新建一个资源文件之后，EzUITool将进入资源加载界面，用户可以在工具栏以及工具软件右则的资源数据显示区完成所有的资源加载操作。

下图为一个新建的资源文件在资源加载界面的示意图：

图中红色框内为主菜单区域，蓝色框内为工具栏区域，黄色框内为显示预览区域，绿色框内为资源数据显示区。

3.1工具栏

资源加载界面的工具栏如下图所示：

：工具栏中的第一项为新建资源文件的工具按钮，用户如点击该按钮，则会打开新建资源文件对话框，在此可以打开如EzUITool工具软件时弹出的“新建资源配置对话框”，可完成新建资源文件的操作。

：工具栏中第二项为打开资源文件工具按钮，用户可点击该按钮，打开一个已经保存了的资源文件（后缀为：”.ers”）。

：工具栏中的第三项为资源文件保存工具按钮，用户可点击该按钮，完成保存资源文件的操作；如要保存的资源文件为新建的资源文件，则会弹出保存文件对话框，用户可在该对话框中完成要保存的文件的路径、文件名的设置。

：工具栏的第四项为资源加载界面选择按钮，在资源加载界面当中，该按钮会保持按下状态，

若用户切换编辑界面，则该按钮才会弹起。

：工具栏中第五项为功能界面切换按钮，按下该按钮将可以把功能界面切换至“界面创建”功能界面。

：工具栏中第六项为字库资源加载按钮，用户可按下该按钮打开一个字库文件加载对话框，在此可完成字库加载至资源文件的操作；可完成ASCII字库的加载。

：工具栏中的第七项为中文字库资源加载按钮，用户可按下该按钮打开一个中文字库加载对话框，在此可完成中文字库加载至资源文件的操作。

：工具栏中的第八项为位图资源加载按钮，用户可按下该按钮打开一个位图加载对话框，在此可完成位图文件加载至资源文件的操作。

：工具栏中的第九项为通用控件资源的加载按钮，用户可按下该按钮打开一个通用控件资源的加载对话框，在此可完成“数值输入框资源”或“字符串输入框资源”文件加载至资源文件的操作。

：工具栏中的第十项为资源项删除按钮，用户可按下该按钮以删除在资源数据显示区中选中的资源项。

：工具栏中的最后四项为视图放大设置工具按钮，用户可按下相应的按钮对“显示预览”区的显示放大倍数进行设置。

3.2操作示例

接下来将以操作示例来介绍资源加载功能界面的使用方式，以及在此界面中各区块的显示说明及操作介绍。

3.2.1加载ASCII字库

在资源加载功能界面当中，按下工具栏中的“”按钮，则会打开一个ASCII字库加载对话框，如下图所示：

在打开的对话框中，选择一个要加载入资源文件的ASCII字库资源文件，在此将加载一个24X48点阵的ASCII字库文件，选择好后点击对话框中的“打开”按钮，工具软件会弹出一个提示对话框，以提示用户加载的ASCII字库文件的属性，如下图所示。

用户只需点击“确定”按钮即可，而后，资源加载功能界面当中的“资源数据显示区”将会把所加载进资源文件的资源项显示出来，如下图所示：

z默认ASCII字体：在此可设置模块上电后默认选择的ASCII西文字库，其下拉选框中的备选项会根据用户加载入资源文件的ASCII字库资源而变化；

z默认汉字库：在此可设置模块上电后默认选择的中文字库；其下拉选框中的备选项会根据用户加载入资源文件的中文字库资源而变化；

z资源文件空间占用情况：EzUITool工具以进度条的形式呈现出当前资源文件的空间使用情况；

z资源项列表：在此，将会把加载入资源文件的各资源项以列表的形式呈现，用户在操作资源项时（如设置字库、显示位图等），需要知道这些资源项在资源文件中的编号，也即资源索引号。

3.2.2加载其它资源

将中文字库资源、位图资源以及通用控件资源的加载与ASCII字库的加载方法相类似，用户只需在

工具框中按下相应的按钮，如：、、；在此，假设加载一个16X16的中文汉字库、一个数值输入框资源（后缀”.nir”）、一个字符输入框资源（后缀为”.sir”），以及一个位图文件。

而加载位图文件资源时，稍有特殊的地方，EzUITool会将位图文件进行预处理，如使用图像压缩的方式可将位图资源的大小改变，则会提示用户是否使用压缩方式对位图文件进行加载；例如要加载一个如下图所示的位图文件：

上图中，图片大部分区域使用同样的颜色，EzUITool则会自动判别该文件的压缩情况，并在加载时

提示用户是否使用压缩方式，如下图所示：

如图中所示，要加载的位图如使用原始数据取模，则会占用24336字节的空间，而使用横压缩数据取模方式，则会占用6488字节的空间；一般情况下，建议用户使用“原始数据取模”。

在完成所假设的资源项的加载后，资源加载功能界面中的资源数据显示区会显示如下：

3.2.3资源数据显示区操作

在资源数据显示区中，可以进行一些操作，以方便用户对资源的加载、删除以及查看资源项。

资源数据显示区中的资源项列表，可以由用户使用鼠标左键单击的方式进行选择某一项资源项，而在当用户加载资源前，如资源数据显示区中，某一项资源处于选择状态，则其后的资源加载操作，将会在该被选择项的资源项之前加入新加载的资源项，后面（包含之前被选择的资源项）的资源项则会依次往后推移。

而用户在资源数据显示区中，点击无效列表项（即该位置无有效资源项）时，则可取消资源项的选择。

如某项资源项处于被选择状态，则可通过点击工具栏中的“”删除工具按钮，对所选资源项进行删除操作。

而用户可以通过鼠标左键双击某一项资源项的方式，来对某一项资源项进行查看，此时，该资源项的内容将会在资源加载功能界面中的显示区域进行取样显示。如点击刚才所加载的第0项资源（ASCII字库），则在显示区域中的显示如下图所示：

如双击第2项资源项（位图资源），则在显示区域中的显示如下图所示：

4界面创建功能界面

在资源加载功能界面当中，按下工具栏中的“”工具按钮，则或将功能界面切换至“界面创建”

功能界面；而在“界面创建”功能界面当中，如按下“”工具按钮，可返回至“资源加载”功能界面。

在前面的资源文件当中，按下工具按钮后，切换至“界面创建”功能界面，如下图所示：

4.1工具栏

EzUITool工具软件在“界面创建”功能界面当中的工具栏如下图所示：

：工具栏中的前三项与资源加载功能界面中的一样。

：工具栏中第四项为功能界面切换按钮，按下该按钮将可以把功能界面切换至“资源加载”功能界面。

：工具栏中的第五项为界面创建功能界面选择按钮，在界面创建功能界面当中，该按钮会保持按下状态，若用户切换编辑界面，则该按钮才会弹起。

：工具栏中的第六项为功能界面切换按钮，将会切换进入界面编辑功能界面（默认进入界面的普通显示指令操作编辑界面），用户需要资源数据显示区中选择好要编辑的界面后，方可按下该按钮，才可进入相应界面的编辑。

：工具栏中的第七项为新建界面工具按钮，按下此按钮，将可以创建一个新界面。

：工具栏中的第八项为资源项删除按钮，用户可按下该按钮以删除在资源数据显示区中选中的界面项。

4.2操作示例

假设当前打开的资源文件为前面操作示例所完成的资源文件，此时切换至“界面创建”功能界面后，在工具软件的右侧资源数据显示区中，显示当前资源文件中无界面项。

4.2.1创建新界面

点击工具栏中的“”工具按钮，则打开一个新建界面对话框，如下图所示：

用户可以对话框中为新建的界面命名，例如输入“Boot UI”，则按下“确定”按钮后，在资源数据显示区中，可显示出当前资源文件所有的界面信息，如下图所示：

z编号：即界面的索引编号，用户在使用EzUI系列模块时，模块上电后，将会默认从索引号为0的界面开始启动显示；

z显示：该数据显示界面中预置的普通显示操作指令的数量；

z控件：该数据显示界面中所设置的控件数量；

z响应：该数据显示界面中所配置的控件消息的数量；

4.2.2资源数据显示区中的操作

按前面所述的方法，再创建两个界面，分别是“Work UI1”和“Work UI2”，此时，资源数据显示区中的显示如下：

相当于目前的资源文件当中，存在3个空的界面。

而用户可在资源数据显示区中对这些界面进行操作，当用户使用鼠标左键单击列表中的某一项时，可以将该界面处于选择状态；此时若再创建新界面，则新建的界面将会从该选择的界面前面插入，该选择的界面以及其之后的界面将会依次往后推移。

当有某一个界面处于选择状态时，可按下工具栏中的“”删除按钮，将该界面删除。

而使用鼠标左键双击某一个界面项，则可在显示区域中将该界面的显示效果呈现出来。

而当某一界面项处于选择状态时，用户可按下工具栏中的“”工具按钮，从而进入该界面的编辑，默认是进入该界面的普通显示操作指令编辑界面。

5普通显示操作指令编辑功能界面

在前面的资源文件打开的前提下，并且处于“界面创建”功能界面当中，此时若在资源数据显示区

中，选中第0项（即索引号为0）的界面，按下工具栏中的“”工具按钮，则进入该界面的编辑，默认进入该界面的普通显示操作编辑功能界面。由于该界面之前处于一个空界面的状态，则EzUITool的界面切换至如下图所示：

5.1工具栏

在普通显示操作指令编辑功能界面当中，工具栏如下图所示：

：工具栏中的第一项为保存工具按钮，用户可点击该按钮来将当前正在编辑的界面数据保存至资源文件。

：工具栏中的第二项为保存并退出工具按钮，用户点击该按钮，将会保存当前所编辑的界面数据，然后退出界面编辑，返回至界面创建功能界面。

：工具栏中的第三项为退出工具按钮，点击该按钮将会返回至界面创建功能界面；需要注意的是，点击该按钮退出界面编辑时，不会保存当前所编辑的界面数据。

：工具栏中的第四项为界面切换工具按钮，该按钮的作用为切换至界面控件设置功能界面。

：工具栏中的第五项为背光设置指令工具按钮，用户可点击该按钮，为当前界面添加一条背光设置指令，相当于设置背光亮度。

：工具栏中的第六项为清屏指令工具按钮，用户可点击该按钮，将会使用该条指令之前所设置的

绘图色进行全屏清屏操作。

：工具栏中的第七项为绘图色设置指令工具按钮，用户可点击该按钮，在打开的对话框中完成绘图色的设置，以及绘图线宽的设置。

：工具栏中的第八项为直线绘制状态设置工具按钮，用户如按下该按钮后，该按钮则将会处于按

下状态，即表示当前用户可在显示区域利用鼠标进行直线绘制操作；直线绘制状态将会保持至别的绘图操作按钮被按下，也即切换到别的绘图操作状态。

：工具栏中的第九项为矩形框绘制状态设置工具按钮，用户如按下该按钮后，该按钮则将会处于

按下状态，即表示当前用户可在显示区域利用鼠标进行矩形框绘制操作；矩形框绘制状态将会保持至别的绘图操作按钮被按下，也即切换到别的绘图操作状态。

：工具栏中的第十项为实心矩形绘制状态设置工具按钮，用户如按下该按钮后，该按钮则将会

处于按下状态，即表示当前用户可在显示区域利用鼠标进行实心矩形绘制操作。

：工具栏中的第十一项为字库设置指令工具按钮，用户可点击该按钮，在打开的对话框中完成字库的选择设置，以及字符色的设置

：工具栏中的第十二项为字符串显示状态设置工具按钮，用户如按下该按钮后，该按钮则将会处于按下状态，即表示当前用户可在显示区域利用鼠标进行字符串显示操作。

：工具栏中的第十三项为位图显示指令工具按钮，点击该按钮将可以打开一个位图选择对话框，用户将可以设置要显示的位图的位置以及要显示的位图资源（前提为已加载入资源文件）。

：工具栏中的第十四项为数值输入框资源配置按钮，点击该按钮将可以在打开对话框中完成输入框资源的选择、配置，EzUI系列模块要求用户如要使用数值控件的弹出数值输入对话框的功能，需要在界面当中对数值输入框资源进行配置。

：工具栏中的第十五项为字符串输入框资源配置按钮，点击该按钮将可以在打开对话框中完成输入框资源的选择、配置，EzUI系列模块要求用户如要使用字符串控件的弹出字符串输入对话框的功能，需要在界面当中对字符串输入框资源进行配置。

：工具栏中的第十六项为删除按钮，用户可按该按钮以对资源数据显示区当中处于选择状态的普通显示操作指令进行删除操作。

：工具栏中的第十七项为区域修改工具，用户可按该按钮以对资源数据显示区中处于选择状态的普通显示操作指令进行区域修改操作。

5.2设置背光及清屏

在之前创建的资源文件的索引号为0的界面中，用户可以利用工具栏的操作指令工具按钮来实现基本的显示操作，如绘制直线、矩形等；但EzUI系列模块是基于TFT显示屏的显示模块，当背光亮度较暗或背光不点亮时，是无法看到屏上的显示的，所以通常在界面当中，首先要对背光进行设置以及一些必要的基本显示操作，如清屏等。

在普通显示操作指令编辑功能界面中，点击工具栏中的“”工具按钮，则会打开一个背光设置对话框，如下图所示：

在对话框中，可以拖曳进度条来设置背光的亮度，点击“确定”即可完成为界面添加一条背光设置指令，添加完后，在界面的右则资源数据显示区中，将会显示当前所添加的显示操作指令的情况，如下图：

在设置完背光后，可以操作对屏幕显示清屏的操作，但首先要确定清屏的颜色，所以，首先点击工

具栏中的“”绘图色设置工具按钮，则会打开一个对话框，可在其中完成绘图色的设置以及绘图线宽的设置，如下图所示：

在对话框中，可在“设置绘图线宽”的下拉选框中选择要设置的绘图线宽，只不过，绘图线宽只对绘制直线、绘制矩形框起作用，在此可忽略不去修改它的设置；而用户可点击“设置绘图颜色”右则的区域，则会打开一个颜色选择对话框，在其中可完成颜色的选择；在此，选择蓝色作为绘图色。设置完成后，点击“确定”按钮，则界面右则的资源数据显示区中的指令情况如下图所示：

此时，再点击工具栏中的“”清屏工具按钮，则会将显示区域以之前设置的绘图色进行清屏，并在资源数据显示区中添加清屏的指令（实际上是由绘制实心矩形的指令实现的），如下图所示：

5.3绘制直线

在绘制直线或者绘制矩形框、实心矩形之类的绘图操作前，需要先确定绘图色以及绘图线宽；而在之前，已经设置过一次绘图色了，只不过该设置是为了实现清屏操作，在此如希望绘制直线或其它绘图操作时以其它的颜色进行绘制，则需要在绘图操作之前，再进行绘图色的设置操作。

接下来，将要绘制一条线宽为3像素点的红色直线；首先要点击工具栏中的“”绘图色设置工具按钮，在打开的绘图色设置对话框中设置如下：

点击确定，则资源数据显示区中的当前指令情况如下图所示：