人机界面的作用主要两类，第一：显示机器的工作状态；第二：对机器参数的设置。

简而言之，第一类主要是负责将机器的参数通过显示器显示出来，由于这些参数可能需要实时刷新，主要用到变量来实现，机器的主板通过串口线针对各项参数的变量，利用查找变量地址更改变量的值来达到实时刷新参数的目的，针对这种功能是不需要制作登录界面的，数据只是被动的显示在液晶屏上的。

第二类的功能，是通过修改界面对应的参数来更改机器的各项参数，而这个功能对参数的更改需要很谨慎，因为这些参数可能是与机器或设备的工作模式或性能息息相关的，最好是仅供懂设备的技术员或工程师才能够有权限去设置才行，为了达到这个目的，就需要用的接下来将会介绍的 登录界面了。

顾名思义，登录界面肯定是需要对账号密码进行验证的，而只有通过验证才能够保证对机器设备调整参数的准确性，避免普通员工对设备的误操作导致设备运行状态偏差，而产生大量的不良等情况。那一般情况下HMI的登录界面会利用连机来制作，也就是通过人机界面输入账号密码，通过串口将输入的账号密码传送给主机或后台，利用主机或后台对账号密码进行验证，而只有验证通过了，主机或后台就会发送一条跳转指令，才会跳转到设置界面。这其实就是利用了智能TFT液晶模块——市面上大多叫串口屏，也有被称作指令屏，的指令集功能来实现的。

而我现在需要介绍给大家的是另外一种登录方式，那就是脱机登录界面的制作，用的是深圳市拓普微科技开发有限公司的智能TFT液晶模块来做的，做这个界面可是花了我三四天的时间，来之不易呀，也要感谢拓普微科技开发有限公司的技术支持给予我及时到位的帮助，废话不多说直接开干：（提示这种方式只能有一个账号密码，因为没有联机）

第一步，先建立背景图及页面，然后设置基本控件：数字变量，字符变量，触摸控件等等：关键操作间如下：

 其中在建文本输入框的触摸区域边界操作方法如下：好处是制作出来的触摸区域等于数字变量框的大小；

第二步，建立所需变量，这里需要解释下，由于Editor只支持对数字变量进行监控，所以我选择了用ID来替代账号；这里需要涉及的变量为 存ID 一个数字变量，存密码一个数字变量，另一个标记变量（用来做第一变量验证通过的标记），为了方便关联，可利用重命名的方法来标记变量的作用，注：密码对应的变量不能让人看到故设置了掩码“*”；

第三步，配置ID输入触摸屏呼叫为“数字键盘”，配置Password输入触摸屏呼叫为“密码键盘”，记住VP地址必须关联对应的“数字变量”及“文字变量”，这样键盘输出的值才能正确的被现实出来！

第四步，ID,及Password 验证制作，这个地方是最伤脑筋的，不要问我为什么，直接跟着我操作就可以了，这里也是我花时间最多的地方：设定验证ID: 1000(位数取决于用的变量，我们就简单点)；Password：1234；

    1．  先创建三个VPK空间如图：

2．  定义LOGIN 触控区域功能：

3．  定义第一个“虚拟键”的功能：验证密码是否输入正确，其中监视值即为密码，其余设置是密码正确后做一个标记，最后一栏“标题/值”值可以自己任意定的。

4．  定义第二个“虚拟键”的功能：

5．  定义第三个“虚拟键”的功能：

第五步，将模块通过USB口连接电脑，使用将工程下载到模块里：

到此大功告成，检验下效果：

NG的ID,Password是无法跳转到第二页的，输入正确ID，Password可以正常登录如下图。

下方为TOPWAY TML Graphics Editor 2017  V1.43的下载地址：

 http://bbs.gongkong.com/d/201809/771121_1.shtml

下方为Editor 的使用说明书的下载地址：

http://www.gongkong.com/download/201809/95452.html

http://bbs.gongkong.com/d/201809/770359_1.shtml