大彩讲堂：VisualHMI软件如何自定义键盘

一、适合范围

适合全系列大彩协议串口屏产品。
 

 

二、教程实现

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 外接键盘运行效果图