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?