EzUI系列模块快速使用教程-Part1

EzUI系列模块快速使用教程提示：本教程将以EzUIV10_043_V10模块为介绍对像；本教程的目的在于让EzUI系列模块用户快速点亮模块屏幕、掌握模块的基本使用方法；本教程所涉及的EzUI模块以及EzUITool工具软件的更多细节请参考相应的手册。目录认识EzUIV10_043_V10模块EzUI系列模块与EzUITool工具软件点亮EzUI模块并显示蓝色背景在EzUI模块上显示位图、字符串在界面中设置触摸区域控件使用触摸区域控件进行多界面切换使用位图触摸按钮控件利用位图触摸按钮控件实现单选按钮效果使用数值控件实现数值输入使用弹出下拉选框控件进行界面切换认识EzUIV10_043_V10模块认识EzUIV10_043_V10模块EzUI系列模块是基于TFT显示屏及触摸屏的人机界面（HMI）显示模块；EzUI系列模块内置功能丰富的GUI系统，支持多种控件，几乎不需要用户控制器的介入控制，便可实现多种人机交互功能；内置的GUI系统以控件为基本元素，每个控件以唯一的ID号进行标识，而GUI系统以界面为单元对控件及显示内容进行管理、服务；由EzUITool工具软件进行资源文件（.ers）制作、编辑，资源文件包含图片、字库等素材，以及界面设计、界面中的控件配置、显示指令预置等；EzUI系列模块内置256Mbytes的资源存储器，用于保存资源文件，模块将从其中读取资源文件并对其解析、载入，最终将用户界面呈现于显示屏并进行相应的人机操作响应；认识EzUIV10_043_V10模块用户控制器可通过EzUI系列模块的UART接口与模块进行控件数据交互，或直接控制界面的显示等；认识EzUIV10_043_V10模块EzUIV10_043_V10：EzUI系列模块当中的一款显示模块，显示屏尺寸为4.3英寸(对角线)，EzUIV10表示EzUI系统版本号（即内部GUI系统版本号），043表示屏幕尺寸；“_V10”表示模块的硬件版本号。注：EzUI系列模块的EzUI系统版本号将不会在实物模块当中标识，如EzUIV10_043_V10模块上，仅标识为：EzUIVXX_043_V10。认识EzUIV10_043_V10模块EzUIV10_043_V10模块硬件接口J1GNDRev1UART_RXUART_TXResetVcc(Input5V)用户输入5V直流电源给模块供电用户与模块通讯接口:TTL电平的UART认识EzUIV10_043_V10模块EzUIV10_043_V10模块硬件接口模式选择开关，可将模块设置为正常模式或资源下载模式。USBMiniB型插口，用于模块与电脑连接。EzUI系列模块与EzUITool工具软件EzUI模块与EzUITool软件EzUITool工具软件为配合EzUI系列模块的界面编辑软件，用户可利用该软件生成EzUI系列模块使用的资源文件（.ers）；在所生成的资源文件中，可为模块显示加载所需的图片、字库、通用控件资源，也可为模块显示创建多个显示界面，并对这些界面进行编辑。EzUI模块与EzUITool软件EzUITool工具可为EzUI系列模块生成一个资源文件，资源文件中包含有预置显示资源以及界面数据。预置显示资源（预置资源）主要为用户界面所需的图片、字库、通用控件资源等构成；这些预置显示资源都是整个用户界面的各个基本材料。

界面数据即为用户在EzUITool工具上为资源文件编辑的多个显示界面，每个界面都有唯一的界面索引号；用户可为每个界面预置多条普通显示操作指令以及设置多个控件以及配置控件间的响应消息。

EzUITool工具产生的资源文件后缀为“.ers”，该资源文件需要预置在EzUI系列模块当中的资源存储器，而EzUI系列模块在其工作时，从模块上的资源存储器读取并分析资源文件。EzUI模块与EzUITool软件EzUITool所涉及到的文件：

“.ers”：EzUITool创建的资源文件。“.tmp”：EzUITool在使用时产生的临时文件。“.bmp”：EzUITool可以加载的位图文件，但要求位图文件是Windows格式，支持24位色、8位色、4位色以及单色的位图文件。“.hzk”：EzUITool可以加载的汉字库文件，要求该文件的文件名前面以“单个汉字宽度X单个汉字高度”为开头，也即24×24点的汉字库文件名必须为：“24X24.hzk”；此外汉字库必须为GB2312规范的一、二级汉字库。

EzUI模块与EzUITool软件EzUITool所涉及到的文件：

“.asc”：EzUITool可以加载的ASCII英文字库文件，要求该文件的文件名前面以“单个字符宽度X单个字符高度”为开头，也即16×32点的英文字库文件名必须为：“16X32.asc”。“.nir”：由NIS_ResourceEditTool工具制作生成的数值输入框资源文件，属于EzUI系列模块当中的通用控件范畴，EzUITool可以加载该类文件，作为资源文件中的一项基本资源条目。“.sir”：由SIS_ResourceEditTool工具制作生成的字符串输入框资源文件，属于EzUI系列模块当中的通用控件范畴，EzUITool可以加载该类文件，作为资源文件中的一项基本资源条目。点亮EzUI模块并显示蓝色背景点亮EzUI模块并显示蓝色背景找到EzUITool工具软件，并双击EzUITool.exe，打开工具软件选择合适的配置选项，如本教程所示例的EzUI系列4.3寸模块…..点击“确定”，创建一个新的资源文件点亮EzUI模块并显示蓝色背景新建的资源文件，尚未保存功能界面切换按钮，按下该按钮将可以把功能界面切换至“界面创建”功能界面。

新建界面工具按钮，按下此按钮，将可以创建一个新界面。在此输入字符串，为创建的界面命名…点击“确定”完成新界面的创建….点亮EzUI模块并显示蓝色背景单击选择界面列表中刚刚创建的界面…功能界面切换按钮，将会切换进入界面编辑功能界面绘图色设置指令工具按钮，点击该按钮，在打开的对话框中完成绘图色的设置。

点击该区域，可打开颜色选择对话框，在其中选择好合适的颜色即可，本例选择蓝色。完成后，点击“确定”清屏指令工具按钮，用户可点击该按钮，将会使用该条指令之前所设置的绘图色进行全屏清屏操作。背光设置指令工具按钮，点击该按钮，为当前界面添加一条背光设置指令，相当于设置背光亮度。在打开的对话框中设置好合适的背光亮度，完成后点击“确定”即可。保存工具按钮，点击该按钮来将当前正在编辑的界面数据保存至资源文件在保存文件对话框中选择合适的保存路径以及文件名，点击“保存”，即可完成资源文件的生成。点亮EzUI模块并显示蓝色背景打开保存资源文件的文件夹，即可看到后缀为.ers的资源文件。点亮EzUI模块并显示蓝色背景在模块断电的前提下,先将模块上的JP2拨至USB模式(即资源下载模式)选择的一端…然后给模块供电,5V直流供电…利用USB线将模块与电脑连接起来...点亮EzUI模块并显示蓝色背景电脑端将会识别出一个U盘,打开该盘..TFTcfg.txt为配置文件,通常不需要改动它,然后将前面所生成的资源文件拷贝到该盘…需要注意的是,模块上的资源存储器(也即所识别出来的U盘)当中只可放置一个资源文件,如有其它资源文件,需将不用的文件删除…完成后弹出U盘…点亮EzUI模块并显示蓝色背景前面的步骤完成后,将模块的JP2拨至正常工作模式一端,然后对模块进行重新上电或复位,此时模块将会显示前面所设计的界面…点亮EzUI模块并显示蓝色背景提示

模块需点亮背光才可看见其中显示,背光亮度的设置最大可为500。模块上电或复位后,默认从模块资源存储器中的资源文件当中所编辑保存的索引号为0的界面开始显示。在同一界面中的普通显示指令(如本例中的设置绘图模式、清屏、设置背光),在模块切换至该界面显示时，将会按照工具软件中这些指令的序号，从小到大开始执行；用户可以偿试在本例中添加一些其它的绘图操作指令。在EzUI模块上显示位图、字符串等在模块上显示位图、字符串等本例将要在模块上实现如下图所示的效果：在模块上显示位图、字符串等在所有操作之前，先准备好两个文件，一为要显示的BMP位图文件，另一为汉字库文件，如下所示：在模块上显示位图、字符串等首先，按照前面例子所介绍的步骤，打开EzUITool工具，并新建一个资源文件，然后先将资源文件保存，名为：EzUI043_test002.ers在模块上显示位图、字符串等按下中文字库资源加载按钮，打开一个中文字库加载对话框，在此可完成中文字库加载至资源文件的操作。

在文件打开对话框中，找到要加载的字库文件，并点击选择它，然后点击对话框的“打开”按钮，以完成汉字字库的加载…汉字字库无误的话，则会提示一个对话框，点击“确定”即可。在模块上显示位图、字符串等工具左则资源列表中，列出刚加载的汉字字库，该字库在资源文件中的索引号（也即编号）为0，汉字尺寸为32X32点阵。按下位图资源加载按钮，打开一个位图加载对话框，在此可完成位图文件加载至资源文件的操作。在文件打开对话框中，找到要加载的位图文件，并点击选择它，然后点击对话框的“打开”按钮，以完成位图资源的加载…在模块上显示位图、字符串等功能界面切换按钮，按下该按钮将可以把功能界面切换至“界面创建”功能界面。

新建界面工具按钮，按下此按钮，创建一个名为BootUI的新界面。左则的列表中，选中所要编辑的界面，然后按下功能界面切换按钮，切换进入界面编辑…在模块上显示位图、字符串等位图显示指令工具按钮，点击该按钮将可以打开一个位图选择对话框…点击选择所要显示的位图资源项…点击确定即可…随后会弹出位图显示位置设置对话框，在此可以设置要显示的位图左上角相对屏的原点位置的坐标，本例设置为X=0，Y=0；然后点击“确定”即可在模块上显示位图、字符串等按下字库设置指令工具按钮，在打开的对话框中完成字库的选择设置，以及字符色的设置…在左侧列表中，点击选择所要设置的字库…在字符色选择的色块中点击，则会打开颜色设置对话框，在打开的对话框中选择要显示的字符的颜色，本例使用深蓝色…按下字符串显示状态设置工具按钮，该按钮将会处于按下状态，表示当前用户可在显示区域利用鼠标进行字符串显示操作。在模块上显示位图、字符串等12用鼠标在虚框示意的地方左上角（1）按下左键，然后保持鼠标按下将光标拖至右下角（2），然后释放鼠标左键。该操作为确定字符串显示的区域…在弹出的对话框中，选择字符串区域水平对齐为“靠左”，在字符串输入框中输入：“EzUIV10_043_V10”在模块上显示位图、字符串等再按下字库设置指令按钮，在打开的对话框中选择前面加载的汉字库，并将字符色设置为红色…此时，字符串显示状态按钮仍会处于按下状态，表示当前仍处于字符串显示状态…使用前成显示ASCII码字符串同样的方法，在虚框处操作，并在打开的字符串显示对话框中输入要显示的汉字字符串：“风景如画”…在模块上显示位图、字符串等按下绘图色设置指令工具按钮，在打开的对话框中设置绘图色为黄色，绘图线宽为2…按下矩形框绘制状态设置工具按钮，该按钮则将会处于按下状态，表示当前用户可在显示区域利用鼠标进行矩形框绘制操作在虚框的左上角处按下鼠标左键，保持按下状态，将光标拖至右下角处，释放鼠标，即可完成矩形框的绘制…在模块上显示位图、字符串等还需要设置背光