一、適合范圍

適合全系列大彩協議串口屏產品。

二、教程實現

2.1 準備UI素材

準備好相應的美工UI，如圖2-1所示。

.圖2-1 美工UI圖

2.2 建立工程

根據串口屏的實際型號，在VisualHMI軟件工程管理區域選擇“新建工程” ，選擇對應的系列和型號，如圖2-2所示。

圖2-2 新建工程

本例程使用大彩M型7寸電容串口屏HMI80480M070為驗證開發平臺。

2.3 SysKBMax/SysKBMin

用于數字鍵盤顯示范圍限制的最大值、最小值

若數值控件配置了范圍限制，如0~100，彈出數值鍵盤將顯示限定的值，如下所示：

圖2-3 數值控件配置圖

添加2個文字控件、 2個數值控件， 如下圖2-4所示：

圖2-4 系統數字鍵盤配置

數值控件，用來顯示范圍限定的最大值、最小值，配置如下所示：

1.讀取地址：最小值，關聯$SysKBMin,最大值，關聯$SysKBMin

2.權限控制：?

3.條件地址：$SysKBStatus.1,1-表示數值控件配置了范圍限定

·比較：==

·值：1

·無權限時：隱藏控件

文字控件，用來靜態文本顯示，配置如下所示：

1.權限控制：?

2.條件地址：$SysKBStatus.1,1-表示數值控件是否配置了范圍限定

·比較：==

·值：1

·無權限時：隱藏控件

2.4 SysKBSelect

鍵盤選擇，用于英文大小寫、數字符號、全鍵盤，切換。通過設置 SysKBSelect 值，0-英文，1-數字符號，2-中文，來切換“虛擬按鍵”不同的鍵值。SysKBSelect=0，英文模式(a~z、A~Z);SysKBSelect=1,字符模式(!?#123);SysKBSelect=2,中文模式。

鍵盤界面上，添加2個字設置按鈕遞增遞減，用于SysKBSelect值的修改，3個多狀態指示燈，用于SysKBSelect值的顯示，如下圖2-5所示；

圖2-5 鍵盤選擇配置圖

2個字設置按鈕，控件配置如下所示：

（1）寫入地址：$SysKBSelect

（2）操作模式：遞增、遞減

·步長：1

·最小值：0

·最大值：2

·循環調節：?

3 個多狀態指示燈，控件配置如下所示：

（1）讀取地址：$SysKBSelect

（2）文字狀態：?

·第一個：S0~S2，依次為 abc，123，中

·第二個：S0~S2，依次為中，abc，123

·第三個：S0~S2，依次為 123，中，abc

圖2-6 多狀態指示燈控件配置圖

2.5 SysKBPinyin/SysKBHanzi

用于顯示中文輸入的拼音、 預選漢字的顯示。

2.5.1 配置

鍵盤界面，添加兩個文本控件，分別關聯SysPinying、SysKBHan，配置如下所示：

圖2-7 拼音輸入、預選漢字配置圖

2.5.2 預覽

圖2-8 拼音輸入、預選漢字預覽

2.6 SysKBText

用于顯示鍵盤錄入的數據

2.6.1 配置

鍵盤界面，添加1個文本控件，關聯 SysKBText，配置下所示：

圖2-9 syskbtext 配置圖

2.6.2 預覽

彈出鍵盤，輸入“123abcABC 大彩”，如下所示：

圖2-10 syskbtext預覽圖

三、虛擬按鍵

功能按鈕用途設置為虛擬按鍵時，用于鍵盤的鍵值輸入、操作等。屬性如下所示：

圖3-1 虛擬按鍵屬性設置

1.按鈕用途：虛擬按鍵

2.按鍵：可選如下表所示

1. 字符：按鍵類型為字符時，可填入字符，如填入“q1” 兩個字符，當SysKBSelect=0,字母模式時，鍵碼為 q；當 SysKBSelect=1,字符模式時候，鍵碼為 1。

2. 圖庫狀態：?

彈起圖庫： 關聯圖庫圖標索引

按下圖庫： 關聯圖庫圖標索引

裁剪：?

3. 使用文字：?

將“字符”一欄填入的字符直接顯示出來

3.1 字符/Shift

字符即是點擊輸入的鍵值，最多可以填4個字符，多字符間的切換，可搭配“Shift”、或系統寄存器“SysKBSelect ”實現。

圖3-2 Shift 按鍵屬性設置

假設填入字符 3 個：“a~^”

圖3-3 字符按鍵設置

3.1.1 字母鍵盤

若“SysKBSelect =0”時，字母鍵盤；“Shit =0”，此時點擊a，錄入為“a”；

若“SysKBSelect =0”時，字母鍵盤；“Shit=1”，此時點擊 a，鍵盤的字母全部顯示為大寫，錄入為“A”；

3.1.2 數字/符號鍵盤

若“SysKBSelect =1”時，數字符號鍵盤，“Shit=0"，此時點擊 a, 錄入為“~”；

若“SysKBSelect =1”時，數字/符號鍵盤，“Shit=1"，此時點擊 a,錄入為“^”；

3.1.3 中文鍵盤

若“SysKBSelect=2”時，中文模式，“Shit=0"，此時點擊a，“SysKBPinyin=a"，SysKBHanzi 顯示預選漢字；

若“SysKBSelect =2”時，中文模式，“Shit=1"，此時點擊 a，鍵盤的字母全部顯示為大寫，錄入為“A”；

3.2 Left/Right

Left、Right搭配SysKBPinyin/SysKBHanz章節一起配置，用于中文輸入時，在預選漢字左右翻頁選擇。

3.2.1 配置

鍵盤界面，添加2功能按鈕，選擇虛擬按鍵，分別關聯Left、Right，配置如下圖3-4所示；

圖3-4預選漢字配置圖

3.2.2 預覽

在中文鍵盤，輸入 da，可有顯示“大 打 達 答 搭 ....”等字符，通過左翻頁按鈕顯示具體的字符，如下圖3-5所示；

圖3-5 預選漢字預覽圖

3.3 切換鍵盤

鍵盤畫面可以虛擬按鍵進行切換，不同的鍵盤使用不同的布局顯示。例程中，建立3個畫面“105_abc”、“106_number”、“107_char”,并在鍵盤設置里啟用自定義的鍵盤，用來鍵盤間的切換。

圖3-6 啟用自定義鍵盤

3.3.1 配置

鍵盤界面，如“中英文輸入”鍵盤，添加兩個功能按鈕，配置如下圖3-7所示；

圖3-7 切換鍵盤配置圖

3.3.2 預覽

圖3-8 切換鍵盤預覽圖

3.4 其他

Enter、ESC、Clear、Delet、Space 等功能鍵，功能按鈕配置為“虛擬按鍵”，選擇對應的功能鍵即可。

四、彈出鍵盤應用

前文介紹， 自定義鍵盤有兩種形式， 如下所示：

1.通過 SysKBSelect 切換： 如系統自帶全鍵盤，UI 布局固定，配合“Shift”切換字符。

2.通過虛擬按鈕鍵“切換鍵盤”：如DEMO中的“105_abc”、“106_number”、“107_char”，UI布局不一樣。

4.1 SysKBSelect 切換

DEMO中在“104_all”界面中配置，樣式和全鍵盤類似，一套 UI 圖片，配置所有鍵盤（數字字符、字母、中文輸入）布局，顯示效果如下所示；

圖4-1 中文輸入

圖4-2 字母大小寫輸入

圖4-3 數字、字符輸入

4.2 虛擬按鍵 切換鍵盤

4.2.1 配置

1.啟用輸入： ?

2.鍵盤類型：彈出鍵盤，選擇“104_all”,如下所示：

圖4-4 切換鍵盤配置圖

4.3 圓角鍵盤(全透 PNG 背景)

若鍵盤樣式需要圓腳，且彈出鍵盤在非鍵盤區域，要有一層半透（蒙版）效果，配置如下

1.鍵盤頁面背景為透明

圖4-5 鍵盤背景設置

2.添加一個png 圖片，作為鍵盤背景

圖4-6 添加鍵盤背景

4.4 外接鍵盤應用

外接鍵盤是指不彈出鍵盤，直接在鍵盤配置頁，點擊文本控件，顯示輸入光標，輸入鍵值即可。

4.4.1 配置

數值控件配置如下所示：

1.啟動輸入： ?

2.鍵盤類型：外接鍵盤，如下所示；

圖4-7 外接鍵盤配置圖

4.4.2 預覽

圖4-8 外接鍵盤運行效果圖