实验14 设置密码实验

1. 实验背景

串口屏在工业或者其他特殊应用场景中，厂家或者用户需要对特定界面设置密码进行锁定，以防止关键数据被篡改，或者设备被不合理的使用。三易串口屏全系列支持用户对界面设置密码。

2. 实验目的

  • 通过不同控件的配合使用来锁定界面

  • 输入正确密码跳转到指定界面

  • 输入错误密码则出现警告信息

3. 实验准备

3.1 串口屏及相关配套工具

  • 串口屏：本实验以SANY-WQ-S43-01-C为例

  • 上位机：PC和VisualPIX软件

  • 下载工具：Type-c数据线

3.2 素材准备

  • 视频：播放一段开机视频

  • 图片：让页面背景变得好看

3.3 控件功能介绍

  • 视频：播放开机动画，播放完成自动跳转到首页

  • 滚动文本：在界面上方滚动提示信息

  • 文本：显示文字信息以及作为密码输入框

  • 按钮：判断密码对错，并执行对应脚本

  • 键盘：输入密码

  • 定时器：当输入错误密码时，定时事件触发，界面弹出密码错误的警告信息

4. 实验过程

4.1 创建工程

打开vp软件

  1. 选择新建项目

  2. 选择尺寸

  3. 选择型号

  4. 选择显示方向

  5. 创建名称

  6. 选择路径

  7. 确定

4.2 导入素材

  • 图片素材导入

  • 视频素材导入

  • 新建字库：根据显示的字符高度，字体不同来设置不同的字库

这里的操作不做详细解释，如需了解请查看对应教程

4.3 设置开机视频

  1. 拖入一个视频控件至page0界面

  2. 调整视频控件大小为480 x 272坐标为X=0，Y=0（视频格式MP4格式，转换方式可查看视频控件教程）

  3. 点击界面在界面下方加载页面写入脚本：video0.psts=1;//视频开始播放

  4. 点击视频控件在下方播放完成写入脚本：showpage(1);//视频播放完成跳转到界面1

4.4 设置密码锁定界面

  1. 设置页面背景为图片，图片内容为素材图片（这一步只是为了美观，可以忽略~）

  2. 拖入滚动文本提示”请输入密码”

  3. 拖入文本框显示”请输入密码”

  4. 拖入一个文本用来输入密码

  5. 拖入按钮，用来核对密码

  6. 拖入一个文本框显示”密码错误”

4.5 建立字库

  • 作用：建立包含对应字体的字库，用来显示控件的字符内容

  • 字符种类：支持简体中文，繁体中文，ascii码，拉丁文，希伯来文等一百多种语言文字

  • 用法：

  1. 在原有字库上修改：

(1) Vp左下角，素材库选中字体栏，双击字库弹出操作框

  1. 选择字体（输入中文时必须选择中文字体）

  2. 风格：普通或者加粗

  3. 抗锯齿：字体清晰度要求高时，非必要字符不要选择，抗锯齿高会导致字库占存大

  4. 高度：字体大小

  5. 字符选择工具：点击可以系统性选择不同文字符号

  6. 字符集：字库所含字符会在这里显示，可根据需求输入或删减字符

  7. 转换：点击转换确认修改字库

  8. 建立新字库

A. 利用字符集建立字库

  1. 点击”工具”

  2. 点击”取字模”

  3. 进入字库操作界面

  1. 选择字体

  2. 选择风格：普通或加粗

  3. 抗锯齿：字体清晰度

  4. 高度：字体大小

  5. 字符集选择指定

  6. 点击字符选择工具

  7. 选择字符类别

  8. 选择字符集打√

  9. 点击确定

  10. 点击转换

  11. 选择字库文件存储路径：建议保存在vp工程文件源文件夹内，方便整理

  12. 给字库取个名字，点击保存

  13. 左下角蓝色转换条读满显示转换成功

  1. 点击yes按钮，将字库导入工程，此时就可在字库素材库中看到添加的字库了，如果要修改可以按上文方法修改

  2. 点击要显示字符的控件

  3. 在右侧属性栏中txt或者其他表示内容的属性中输入字符

  4. 找到font属性右侧下拉选择指定的字库

  5. 添加完成

B. 输入指定字符建立字库

  1. 字体

  2. 风格

  3. 抗锯齿

  4. 高度

  5. 指定字符:此处可以输入指定字符，包括但不限于繁体

  6. 转换

  7. 剩下的步骤同上文11-18

4.6 新建键盘控件

  1. Vp左下角素材库选择”键盘”

  2. 点击添加素材

  3. 跳出一个选择框这里我们选择数字。不同输入场景下选择对应键盘

  1. 选中之后会跳转到编辑键盘界面这里可以不用操作直接点击转换这样一个新的键盘字库就会在素材库生成

A. 使用方法一：控件直接调用，使用方法简单粗暴

  1. 选中文本控件

  2. 右侧属性栏kbld属性选择刚刚新建的键盘素材

  3. 完成调用（这种使用方法非常方便，当点击文本控件时，输入的值可以直接显示在文本控件里面）

B. 使用方法二：通过脚本调用键盘控件

  1. 左侧控件栏拖入一个键盘控件将位置放在界面之外，这样没有调用的时候键盘控件就不会在界面显示

  2. 在文本控件属性栏kbld属性”显示的键盘”选无

  3. 在文本控件按下或弹起事件写上脚本将键盘的位置移到界面上显示

keyboard3.x=20;//键盘x坐标等于0

  1. 在键盘的输入完成事件中写入脚本将键盘内容显示到文本控件上并且隐藏键盘

text2.txt=keyboard3.txt; //键盘输入的内容，赋值给文本控件
keyboard3.x=-480;//隐藏键盘

  1. 在键盘的输入取消时间写入脚本 隐藏键盘

keyboard3.x=-480;//隐藏键盘

4.7 控件介绍

控件名称

控件属性

功能

Keyboard3

可见 键盘

输入密码字符

Scrolltxet

可见 滚动文本

滚动显示提示框

Textbox

可见 文本框

显示提示文字

Text2

可见 文本

密码输入框，可勾选mask隐藏字符

Button

可见 按钮

按钮谈起时间写入脚本，判断密码是否正确并且执行相应动作

Text5

可见 文本

显示提示信息，配合定时器一起使用，当输入密码错误时弹到界面显示

Timer7

不可见 定时器

配合文本，当密码错误是显示提示信息

Var8

不可见 变量

配合定时器使用

4.8 逻辑实现

  1. 点击文本控件弹出键盘

    脚本：

keyboard3.x=20;//调用键盘

  1. 键盘输入字符或者取消输入

输入完成：

text2.txt=keyboard3.txt;//将键盘输入文本内容赋给文本控件
keyboard3.x=-480;//隐藏键盘

输入取消：

keyboard3.x=-480;//隐藏键盘

  1. 点击按钮执行密码匹配

    脚本：

if(text2.txt=="4567")//判断文本内容是否与预设密码字符一至于
{
    showPage(2);//执行翻页操作
    text2.txt=" ";//清空文本
}
else
{
    timer7.en=1;//定时器开显示提示信息
    text2.txt=" ";//清空文本
}

  1. 定时器提示信息，提示文本闪烁两次然后隐藏

    脚本：

//定时器间隔1秒，提示框间隔一秒弹出两次然后隐藏
if(var8.val==0)//定时器开始变量初始值为0
{
    text5.x=150;
    text5.y=60;//弹出提示文本
    var8.val++;//变量累加
}
else if(var8.val==1)//第二秒秒
{
    text5.x=500;
    text5.y=1;//隐藏文本
    var8.val++;//变量累加
}
else if(var8.val==2)//第三秒
{
    text5.x=150;
    text5.y=60;//弹出提示框
    var8.val++;//变量累加
}
else
{
    text5.x=500;
    text5.y=1;//隐藏提示框
    var8.val=0;//变量归零
    timer7.en=0;//关闭定时器
}

5. 实验结果

  1. 当输入正确密码”2345”界面解锁进去第二个界面

  2. 当输入其他字符，弹出提示框，提示框闪烁两次后消失，密码输入框清零