如何为精智屏制作一个自定义登录框

1 引言

　　大家都知道，西门子面板自带的登录对话框是相当的简陋，对于那些对界面美观要求较高的同学来说总是感觉不舒服，想着怎么去替换它。

图一 面板自带的登录对话框

　　笔者也在群里看到过好几个同学在问如何制作自定义的登录对话框。趁着中午的空闲间隙，就琢磨着也来做一个，正好也为我们HwGCF/HwBaiscLib里的精智面板部分添加一个自定义登录框。

　　HwGCF/HwBaiscLib里面的TIA WinCC Professional已经实现了自定义登录对话框，它是这个样子的。

图二 HwGCF中的WinCC Pro登录窗口

　　上面的登录界面其实还是比较简单。相比于现在流行的半扁平化风格还是显得不够美观。参考现在流行的PC端及移动端UI设计，我决定选择以Windows 10里面的UWP风格为蓝本进行设计。

2 画面与布局

　　首先我们打开精智面板项目，在“画面管理/弹出画面”目录下添加一个新画面，命名为“Login”。

图三 添加画面Login

　　在登录画面的“属性/布局”中设置窗口的宽度和高度分别为1280和250。背景颜色设置为绿色，色标为RGB(51, 153,1 02)。

图四 调整画面布局

　　再分别拖两个I/O域、静态文本控件和按钮到窗口里，调整他们的属性和布局，效果参见下图所示。

图五 为窗口添加图形元素

3 变量与函数

　　在精智屏的变量表里添加两个类型为“WString”的内部变量用于保存用户名和密码。

图六 添加内部变量

　　变量“_UserName”绑定到窗口里用于输入用户名的I/O域。

图七 绑定变量_UserName

　　变量“_Password”绑定到窗口里用于输入密码的I/O域。

图八 绑定变量_Password

　　完成了变量绑定后我们在按钮“YES”的点击事件中调用系统函数“登录”。同时在登录完成后自动关闭该窗口，所以还需要在该事件中调用“显示弹出画面”函数。

图九 按钮点击事件里调用系统函数

　　至于窗口中的按钮“CANCEL”，在其点击事件中调用函数“显示弹出画面”关闭该登录窗口即可，不再赘述。

4 效果展示

　　完成了登录窗口制作后，我们可以在点击画面模板中的登录按钮时调用该窗口画面。

图十 调用自定义的登录窗口

　　注意上图中的X、Y坐标值，一般登录窗口显示在屏幕的最中间比较美观。保存项目并启动仿真，点击画面右下角的“登录”按钮，我们就可以看到下面的效果。输入正确的用户名和密码即可完成登录，参见下面的视频。

https://v.qq.com/x/page/q08961axa5r.html?

 

 

HwLib(慧兰博)技术团队专注于高端自动化技术，如果您对我们的技术教程感兴趣的话，可以X宝上搜索店铺“hwlib”或者“慧兰博”

关于HwLib(慧兰博)技术团队的更多信息：http://www.hwlib.com.cn

 

HwLib(慧兰博)技术团队技术资料：

(百度网盘)：

https://pan.baidu.com/s/1cInKRSJIRcKQHylV3gafmw
提取码：0s3j

 

(坚果云):
https://www.jianguoyun.com/p/DR20ZAEQq_K3CBivk5kD

 

或者登录官网下载:www.hwlib.com.cn

 

HwLib(慧兰博)公众号

专注于工业自动化高端编程应用

 

 HwLib(慧兰博)微信号