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

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?

 

转载于:https://www.cnblogs.com/hwlib/p/11157906.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值