一、適合范圍
適合全系列大彩協(xié)議串口屏產(chǎn)品。
二、教程實(shí)現(xiàn)
2.1 準(zhǔn)備UI素材
準(zhǔn)備好相應(yīng)的美工UI,如圖2-1所示。

圖2-1 美工UI圖
2.2 建立工程
根據(jù)串口屏的實(shí)際型號(hào),在VisualHMI軟件工程管理區(qū)域選擇“新建工程” ,選擇對(duì)應(yīng)的系列和型號(hào),如圖2-2所示。

圖2-2 新建工程
本例程使用大彩M型7寸電容串口屏HMI80480M070為驗(yàn)證開(kāi)發(fā)平臺(tái)。
2.3 SysKBMax/SysKBMin
用于數(shù)字鍵盤(pán)顯示范圍限制的最大值、最小值
若數(shù)值控件配置了范圍限制,如0~100,彈出數(shù)值鍵盤(pán)將顯示限定的值,如下所示:

圖2-3 數(shù)值控件配置圖
添加2個(gè)文字控件、 2個(gè)數(shù)值控件, 如下圖2-4所示:

圖2-4 系統(tǒng)數(shù)字鍵盤(pán)配置
數(shù)值控件,用來(lái)顯示范圍限定的最大值、最小值,配置如下所示:
1.讀取地址:最小值,關(guān)聯(lián)$SysKBMin,最大值,關(guān)聯(lián)$SysKBMin
2.權(quán)限控制:?
3.條件地址:$SysKBStatus.1,1-表示數(shù)值控件配置了范圍限定
·比較:==
·值:1
·無(wú)權(quán)限時(shí):隱藏控件
文字控件,用來(lái)靜態(tài)文本顯示,配置如下所示:
1.權(quán)限控制:?
2.條件地址:$SysKBStatus.1,1-表示數(shù)值控件是否配置了范圍限定
·比較:==
·值:1
·無(wú)權(quán)限時(shí):隱藏控件
2.4 SysKBSelect
鍵盤(pán)選擇,用于英文大小寫(xiě)、數(shù)字符號(hào)、全鍵盤(pán),切換。通過(guò)設(shè)置 SysKBSelect 值,0-英文,1-數(shù)字符號(hào),2-中文,來(lái)切換“虛擬按鍵”不同的鍵值。SysKBSelect=0,英文模式(a~z、A~Z);SysKBSelect=1,字符模式(!?#123);SysKBSelect=2,中文模式。
鍵盤(pán)界面上,添加2個(gè)字設(shè)置按鈕遞增遞減,用于SysKBSelect值的修改,3個(gè)多狀態(tài)指示燈,用于SysKBSelect值的顯示,如下圖2-5所示;

圖2-5 鍵盤(pán)選擇配置圖
2個(gè)字設(shè)置按鈕,控件配置如下所示:
(1)寫(xiě)入地址:$SysKBSelect
(2)操作模式:遞增、遞減
· 步長(zhǎng):1
· 最小值:0
· 最大值:2
· 循環(huán)調(diào)節(jié):?
3 個(gè)多狀態(tài)指示燈,控件配置如下所示:
(1)讀取地址:$SysKBSelect
(2)文字狀態(tài):?
· 第一個(gè):S0~S2,依次為 abc,123,中
· 第二個(gè):S0~S2,依次為中,abc,123
· 第三個(gè):S0~S2,依次為 123,中,abc
圖2-6 多狀態(tài)指示燈控件配置圖
2.5 SysKBPinyin/SysKBHanzi
用于顯示中文輸入的拼音、 預(yù)選漢字的顯示。
2.5.1 配置
鍵盤(pán)界面,添加兩個(gè)文本控件,分別關(guān)聯(lián)SysPinying、SysKBHan,配置如下所示:

圖2-7 拼音輸入、預(yù)選漢字配置圖
2.5.2 預(yù)覽

圖2-8 拼音輸入、預(yù)選漢字預(yù)覽
2.6 SysKBText
用于顯示鍵盤(pán)錄入的數(shù)據(jù)
2.6.1 配置
鍵盤(pán)界面,添加1個(gè)文本控件,關(guān)聯(lián) SysKBText,配置下所示:

圖2-9 syskbtext 配置圖
2.6.2 預(yù)覽
彈出鍵盤(pán),輸入“123abcABC 大彩”,如下所示:

圖2-10 syskbtext預(yù)覽圖
三、虛擬按鍵
功能按鈕用途設(shè)置為虛擬按鍵時(shí),用于鍵盤(pán)的鍵值輸入、操作等。屬性如下所示:

圖3-1 虛擬按鍵屬性設(shè)置
1.按鈕用途:虛擬按鍵
2.按鍵:可選如下表所示

1. 字符:按鍵類(lèi)型為字符時(shí),可填入字符,如填入“q1” 兩個(gè)字符,當(dāng)SysKBSelect=0,字母模式時(shí),鍵碼為 q;當(dāng) SysKBSelect=1,字符模式時(shí)候,鍵碼為 1。
2. 圖庫(kù)狀態(tài):?
-
彈起圖庫(kù): 關(guān)聯(lián)圖庫(kù)圖標(biāo)索引
-
按下圖庫(kù): 關(guān)聯(lián)圖庫(kù)圖標(biāo)索引
-
裁剪: ?
3. 使用文字:?
-
將“字符”一欄填入的字符直接顯示出來(lái)
3.1 字符/Shift
字符即是點(diǎn)擊輸入的鍵值,最多可以填4個(gè)字符,多字符間的切換,可搭配“Shift”、或系統(tǒng)寄存器“SysKBSelect ”實(shí)現(xiàn)。

圖3-2 Shift 按鍵屬性設(shè)置
假設(shè)填入字符 3 個(gè):“a~^”

圖3-3 字符按鍵設(shè)置
3.1.1 字母鍵盤(pán)
若“SysKBSelect =0”時(shí),字母鍵盤(pán);“Shit =0”,此時(shí)點(diǎn)擊a,錄入為“a”;
若“SysKBSelect =0”時(shí),字母鍵盤(pán);“Shit=1”,此時(shí)點(diǎn)擊 a,鍵盤(pán)的字母全部顯示為大寫(xiě),錄入為“A”;
3.1.2 數(shù)字/符號(hào)鍵盤(pán)
若“SysKBSelect =1”時(shí),數(shù)字符號(hào)鍵盤(pán),“Shit=0",此時(shí)點(diǎn)擊 a, 錄入為“~”;
若“SysKBSelect =1”時(shí),數(shù)字/符號(hào)鍵盤(pán),“Shit=1",此時(shí)點(diǎn)擊 a,錄入為“^”;
3.1.3 中文鍵盤(pán)
若“SysKBSelect=2”時(shí),中文模式,“Shit=0",此時(shí)點(diǎn)擊a,“SysKBPinyin=a",SysKBHanzi 顯示預(yù)選漢字;
若“SysKBSelect =2”時(shí),中文模式,“Shit=1",此時(shí)點(diǎn)擊 a,鍵盤(pán)的字母全部顯示為大寫(xiě),錄入為“A”;
3.2 Left/Right
Left、Right搭配SysKBPinyin/SysKBHanz章節(jié)一起配置,用于中文輸入時(shí),在預(yù)選漢字左右翻頁(yè)選擇。
3.2.1 配置
鍵盤(pán)界面,添加2功能按鈕,選擇虛擬按鍵,分別關(guān)聯(lián)Left、Right,配置如下圖3-4所示;

圖3-4預(yù)選漢字配置圖
3.2.2 預(yù)覽
在中文鍵盤(pán),輸入 da,可有顯示“大 打 達(dá) 答 搭 ....”等字符,通過(guò)左翻頁(yè)按鈕顯示具體的字符,如下圖3-5所示;

圖3-5 預(yù)選漢字預(yù)覽圖
3.3 切換鍵盤(pán)
鍵盤(pán)畫(huà)面可以虛擬按鍵進(jìn)行切換,不同的鍵盤(pán)使用不同的布局顯示。例程中,建立3個(gè)畫(huà)面“105_abc”、“106_number”、“107_char”,并在鍵盤(pán)設(shè)置里啟用自定義的鍵盤(pán),用來(lái)鍵盤(pán)間的切換。

圖3-6 啟用自定義鍵盤(pán)
3.3.1 配置
鍵盤(pán)界面,如“中英文輸入”鍵盤(pán),添加兩個(gè)功能按鈕,配置如下圖3-7所示;

圖3-7 切換鍵盤(pán)配置圖
3.3.2 預(yù)覽

圖3-8 切換鍵盤(pán)預(yù)覽圖
3.4 其他
Enter、ESC、Clear、Delet、Space 等功能鍵,功能按鈕配置為“虛擬按鍵”,選擇對(duì)應(yīng)的功能鍵即可。
四、彈出鍵盤(pán)應(yīng)用
前文介紹, 自定義鍵盤(pán)有兩種形式, 如下所示:
1.通過(guò) SysKBSelect 切換: 如系統(tǒng)自帶全鍵盤(pán),UI 布局固定,配合“Shift”切換字符。
2.通過(guò)虛擬按鈕鍵“切換鍵盤(pán)”:如DEMO中的“105_abc”、“106_number”、“107_char”,UI布局不一樣。
4.1 SysKBSelect 切換
DEMO中在“104_all”界面中配置,樣式和全鍵盤(pán)類(lèi)似,一套 UI 圖片,配置所有鍵盤(pán)(數(shù)字字符、字母、中文輸入)布局,顯示效果如下所示;

圖4-1 中文輸入

圖4-2 字母大小寫(xiě)輸入

圖4-3 數(shù)字、字符輸入
4.2 虛擬按鍵 切換鍵盤(pán)
4.2.1 配置
1.啟用輸入: ?
2.鍵盤(pán)類(lèi)型:彈出鍵盤(pán),選擇“104_all”,如下所示:

圖4-4 切換鍵盤(pán)配置圖
4.3 圓角鍵盤(pán)(全透 PNG 背景)
若鍵盤(pán)樣式需要圓腳,且彈出鍵盤(pán)在非鍵盤(pán)區(qū)域,要有一層半透(蒙版)效果,配置如下
1.鍵盤(pán)頁(yè)面背景為透明

圖4-5 鍵盤(pán)背景設(shè)置
2.添加一個(gè)png 圖片,作為鍵盤(pán)背景

圖4-6 添加鍵盤(pán)背景
4.4 外接鍵盤(pán)應(yīng)用
外接鍵盤(pán)是指不彈出鍵盤(pán),直接在鍵盤(pán)配置頁(yè),點(diǎn)擊文本控件,顯示輸入光標(biāo),輸入鍵值即可。
4.4.1 配置
數(shù)值控件配置如下所示:
1.啟動(dòng)輸入: ?
2.鍵盤(pán)類(lèi)型:外接鍵盤(pán),如下所示;

圖4-7 外接鍵盤(pán)配置圖
4.4.2 預(yù)覽

圖4-8 外接鍵盤(pán)運(yùn)行效果圖
地址:深圳市寶安區(qū)新安街道華聯(lián)城市全景花園G座1203室
(公共交通:地鐵5號(hào)線洪浪北D出口,5號(hào)線或12號(hào)線靈芝站C1出口)
郵箱:fujq@gz-dc.com
銷(xiāo)售與技術(shù)支持:付先生 13828461018