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

EzUI系列模塊快速使用教程提示：本教程將以EzUIV10_043_V10模塊為介紹對像；本教程的目的在于讓EzUI系列模塊用戶快速點亮模塊屏幕、掌握模塊的基本使用方法；本教程所涉及的EzUI模塊以及EzUITool工具軟件的更多細節(jié)請參考相應的手冊。目錄認識EzUIV10_043_V10模塊EzUI系列模塊與EzUITool工具軟件點亮EzUI模塊并顯示藍色背景在EzUI模塊上顯示位圖、字符串在界面中設置觸摸區(qū)域控件使用觸摸區(qū)域控件進行多界面切換使用位圖觸摸按鈕控件利用位圖觸摸按鈕控件實現(xiàn)單選按鈕效果使用數(shù)值控件實現(xiàn)數(shù)值輸入使用彈出下拉選框控件進行界面切換認識EzUIV10_043_V10模塊認識EzUIV10_043_V10模塊EzUI系列模塊是基于TFT顯示屏及觸摸屏的人機界面（HMI）顯示模塊；EzUI系列模塊內(nèi)置功能豐富的GUI系統(tǒng)，支持多種控件，幾乎不需要用戶控制器的介入控制，便可實現(xiàn)多種人機交互功能；內(nèi)置的GUI系統(tǒng)以控件為基本元素，每個控件以唯一的ID號進行標識，而GUI系統(tǒng)以界面為單元對控件及顯示內(nèi)容進行管理、服務；由EzUITool工具軟件進行資源文件（.ers）制作、編輯，資源文件包含圖片、字庫等素材，以及界面設計、界面中的控件配置、顯示指令預置等；EzUI系列模塊內(nèi)置256Mbytes的資源存儲器，用于保存資源文件，模塊將從其中讀取資源文件并對其解析、載入，最終將用戶界面呈現(xiàn)于顯示屏并進行相應的人機操作響應；認識EzUIV10_043_V10模塊用戶控制器可通過EzUI系列模塊的UART接口與模塊進行控件數(shù)據(jù)交互，或直接控制界面的顯示等；認識EzUIV10_043_V10模塊EzUIV10_043_V10：EzUI系列模塊當中的一款顯示模塊，顯示屏尺寸為4.3英寸(對角線)，EzUIV10表示EzUI系統(tǒng)版本號（即內(nèi)部GUI系統(tǒng)版本號），043表示屏幕尺寸；“_V10”表示模塊的硬件版本號。注：EzUI系列模塊的EzUI系統(tǒng)版本號將不會在實物模塊當中標識，如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）；在所生成的資源文件中，可為模塊顯示加載所需的圖片、字庫、通用控件資源，也可為模塊顯示創(chuàng)建多個顯示界面，并對這些界面進行編輯。EzUI模塊與EzUITool軟件EzUITool工具可為EzUI系列模塊生成一個資源文件，資源文件中包含有預置顯示資源以及界面數(shù)據(jù)。預置顯示資源（預置資源）主要為用戶界面所需的圖片、字庫、通用控件資源等構成；這些預置顯示資源都是整個用戶界面的各個基本材料。

界面數(shù)據(jù)即為用戶在EzUITool工具上為資源文件編輯的多個顯示界面，每個界面都有唯一的界面索引號；用戶可為每個界面預置多條普通顯示操作指令以及設置多個控件以及配置控件間的響應消息。

EzUITool工具產(chǎn)生的資源文件后綴為“.ers”，該資源文件需要預置在EzUI系列模塊當中的資源存儲器，而EzUI系列模塊在其工作時，從模塊上的資源存儲器讀取并分析資源文件。EzUI模塊與EzUITool軟件EzUITool所涉及到的文件：

“.ers”：EzUITool創(chuàng)建的資源文件?！?tmp”：EzUITool在使用時產(chǎn)生的臨時文件?！?bmp”：EzUITool可以加載的位圖文件，但要求位圖文件是Windows格式，支持24位色、8位色、4位色以及單色的位圖文件。“.hzk”：EzUITool可以加載的漢字庫文件，要求該文件的文件名前面以“單個漢字寬度X單個漢字高度”為開頭，也即24×24點的漢字庫文件名必須為：“24X24.hzk”；此外漢字庫必須為GB2312規(guī)范的一、二級漢字庫。

EzUI模塊與EzUITool軟件EzUITool所涉及到的文件：

“.asc”：EzUITool可以加載的ASCII英文字庫文件，要求該文件的文件名前面以“單個字符寬度X單個字符高度”為開頭，也即16×32點的英文字庫文件名必須為：“16X32.asc”?！?nir”：由NIS_ResourceEditTool工具制作生成的數(shù)值輸入框資源文件，屬于EzUI系列模塊當中的通用控件范疇，EzUITool可以加載該類文件，作為資源文件中的一項基本資源條目。“.sir”：由SIS_ResourceEditTool工具制作生成的字符串輸入框資源文件，屬于EzUI系列模塊當中的通用控件范疇，EzUITool可以加載該類文件，作為資源文件中的一項基本資源條目。點亮EzUI模塊并顯示藍色背景點亮EzUI模塊并顯示藍色背景找到EzUITool工具軟件，并雙擊EzUITool.exe，打開工具軟件選擇合適的配置選項，如本教程所示例的EzUI系列4.3寸模塊…..點擊“確定”，創(chuàng)建一個新的資源文件點亮EzUI模塊并顯示藍色背景新建的資源文件，尚未保存功能界面切換按鈕，按下該按鈕將可以把功能界面切換至“界面創(chuàng)建”功能界面。

新建界面工具按鈕，按下此按鈕，將可以創(chuàng)建一個新界面。在此輸入字符串，為創(chuàng)建的界面命名…點擊“確定”完成新界面的創(chuàng)建….點亮EzUI模塊并顯示藍色背景單擊選擇界面列表中剛剛創(chuàng)建的界面…功能界面切換按鈕，將會切換進入界面編輯功能界面繪圖色設置指令工具按鈕，點擊該按鈕，在打開的對話框中完成繪圖色的設置。

點擊該區(qū)域，可打開顏色選擇對話框，在其中選擇好合適的顏色即可，本例選擇藍色。完成后，點擊“確定”清屏指令工具按鈕，用戶可點擊該按鈕，將會使用該條指令之前所設置的繪圖色進行全屏清屏操作。背光設置指令工具按鈕，點擊該按鈕，為當前界面添加一條背光設置指令，相當于設置背光亮度。在打開的對話框中設置好合適的背光亮度，完成后點擊“確定”即可。保存工具按鈕，點擊該按鈕來將當前正在編輯的界面數(shù)據(jù)保存至資源文件在保存文件對話框中選擇合適的保存路徑以及文件名，點擊“保存”，即可完成資源文件的生成。點亮EzUI模塊并顯示藍色背景打開保存資源文件的文件夾，即可看到后綴為.ers的資源文件。點亮EzUI模塊并顯示藍色背景在模塊斷電的前提下,先將模塊上的JP2撥至USB模式(即資源下載模式)選擇的一端…然后給模塊供電,5V直流供電…利用USB線將模塊與電腦連接起來...點亮EzUI模塊并顯示藍色背景電腦端將會識別出一個U盤,打開該盤..TFTcfg.txt為配置文件,通常不需要改動它,然后將前面所生成的資源文件拷貝到該盤…需要注意的是,模塊上的資源存儲器(也即所識別出來的U盤)當中只可放置一個資源文件,如有其它資源文件,需將不用的文件刪除…完成后彈出U盤…點亮EzUI模塊并顯示藍色背景前面的步驟完成后,將模塊的JP2撥至正常工作模式一端,然后對模塊進行重新上電或復位,此時模塊將會顯示前面所設計的界面…點亮EzUI模塊并顯示藍色背景提示

模塊需點亮背光才可看見其中顯示,背光亮度的設置最大可為500。模塊上電或復位后,默認從模塊資源存儲器中的資源文件當中所編輯保存的索引號為0的界面開始顯示。在同一界面中的普通顯示指令(如本例中的設置繪圖模式、清屏、設置背光),在模塊切換至該界面顯示時，將會按照工具軟件中這些指令的序號，從小到大開始執(zhí)行；用戶可以償試在本例中添加一些其它的繪圖操作指令。在EzUI模塊上顯示位圖、字符串等在模塊上顯示位圖、字符串等本例將要在模塊上實現(xiàn)如下圖所示的效果：在模塊上顯示位圖、字符串等在所有操作之前，先準備好兩個文件，一為要顯示的BMP位圖文件，另一為漢字庫文件，如下所示：在模塊上顯示位圖、字符串等首先，按照前面例子所介紹的步驟，打開EzUITool工具，并新建一個資源文件，然后先將資源文件保存，名為：EzUI043_test002.ers在模塊上顯示位圖、字符串等按下中文字庫資源加載按鈕，打開一個中文字庫加載對話框，在此可完成中文字庫加載至資源文件的操作。

在文件打開對話框中，找到要加載的字庫文件，并點擊選擇它，然后點擊對話框的“打開”按鈕，以完成漢字字庫的加載…漢字字庫無誤的話，則會提示一個對話框，點擊“確定”即可。在模塊上顯示位圖、字符串等工具左則資源列表中，列出剛加載的漢字字庫，該字庫在資源文件中的索引號（也即編號）為0，漢字尺寸為32X32點陣。按下位圖資源加載按鈕，打開一個位圖加載對話框，在此可完成位圖文件加載至資源文件的操作。在文件打開對話框中，找到要加載的位圖文件，并點擊選擇它，然后點擊對話框的“打開”按鈕，以完成位圖資源的加載…在模塊上顯示位圖、字符串等功能界面切換按鈕，按下該按鈕將可以把功能界面切換至“界面創(chuàng)建”功能界面。

新建界面工具按鈕，按下此按鈕，創(chuàng)建一個名為BootUI的新界面。左則的列表中，選中所要編輯的界面，然后按下功能界面切換按鈕，切換進入界面編輯…在模塊上顯示位圖、字符串等位圖顯示指令工具按鈕，點擊該按鈕將可以打開一個位圖選擇對話框…點擊選擇所要顯示的位圖資源項…點擊確定即可…隨后會彈出位圖顯示位置設置對話框，在此可以設置要顯示的位圖左上角相對屏的原點位置的坐標，本例設置為X=0，Y=0；然后點擊“確定”即可在模塊上顯示位圖、字符串等按下字庫設置指令工具按鈕，在打開的對話框中完成字庫的選擇設置，以及字符色的設置…在左側列表中，點擊選擇所要設置的字庫…在字符色選擇的色塊中點擊，則會打開顏色設置對話框，在打開的對話框中選擇要顯示的字符的顏色，本例使用深藍色…按下字符串顯示狀態(tài)設置工具按鈕，該按鈕將會處于按下狀態(tài)，表示當前用戶可在顯示區(qū)域利用鼠標進行字符串顯示操作。在模塊上顯示位圖、字符串等12用鼠標在虛框示意的地方左上角（1）按下左鍵，然后保持鼠標按下將光標拖至右下角（2），然后釋放鼠標左鍵。該操作為確定字符串顯示的區(qū)域…在彈出的對話框中，選擇字符串區(qū)域水平對齊為“靠左”，在字符串輸入框中輸入：“EzUIV10_043_V10”在模塊上顯示位圖、字符串等再按下字庫設置指令按鈕，在打開的對話框中選擇前面加載的漢字庫，并將字符色設置為紅色…此時，字符串顯示狀態(tài)按鈕仍會處于按下狀態(tài)，表示當前仍處于字符串顯示狀態(tài)…使用前成顯示ASCII碼字符串同樣的方法，在虛框處操作，并在打開的字符串顯示對話框中輸入要顯示的漢字字符串：“風景如畫”…在模塊上顯示位圖、字符串等按下繪圖色設置指令工具按鈕，在打開的對話框中設置繪圖色為黃色，繪圖線寬為2…按下矩形框繪制狀態(tài)設置工具按鈕，該按鈕則將會處于按下狀態(tài)，表示當前用戶可在顯示區(qū)域利用鼠標進行矩形框繪制操作在虛框的左上角處按下鼠標左鍵，保持按下狀態(tài)，將光標拖至右下角處，釋放鼠標，即可完成矩形框的繪制…在模塊上顯示位圖、字符串等還需要設置背光