用户自定义页面优化指南

S7-1200 Web服务器除了提供标准Web页面还支持用户自定义页面，可以使用Web浏览器访问自由设计的CPUWeb页面。可使用各种HTML编写器（例如Microsoft Frontpage、Notepad++、Dreamweaver CS5等）创建符合W3C（万维网联盟）标准的自定义页面，并借助AWP（Automation Web Programming）命令实现自定义页面和CPU数据之间的接口。

本文以Dreamweaver CS5软件创建一个用于读写CPU变量的Web页面为例，介绍创建自定义页面的实现过程，如图7-73所示。

图7-73 创建自定义Web页面流程

①使用HTML编辑器创建Web页面，并在Web页面中使用AWP命令。

②自定义Web页面中可包含多个源文件，如∗.html、∗.gif、∗.css、∗.js等。

③使用TIA博途软件组态自定义Web页面，并调用“WWW”指令。

④将组态和程序下载到CPU。

⑤通过IE浏览器访问自定义Web页面。

1.使用Dreamweaver CS5创建HTML网页

使用DreamweaverCS5创建HTML空白网页，并在页面头文件中为页面标题命名为“Reading and Writing”。由于AWP命令文件需要使用UTF-8编码，因此还需要在头文件中，将网页的字符集属性设置为UTF-8编码。另外，用户自定义Web页面不会自动刷新，可根据需求，选择是否编写用来刷新页面的HTML程序。如果希望整个页面自动进行刷新，可将<metahttp-equiv=“Refresh”content=“10”/>命令行添加到HTML头文件，其中“10”表示两次刷新间隔的时间为10s。Web页面的头文件如图7-74所示。

图7-74 自定义Web页面头文件

注意：

有三种方法可以用来刷新自定义Web网页：

1）通过“F5”手动刷新。该方法无需编辑，但是网页数据不能自动更新。

2）使用HTML自动刷新（参考图7-74所使用方法）。该方法简单有效，但需要将整个网页重新装载，会增加网络和CPU负载，干扰用户输入数据，数据有时还会出现闪动。

3）使用JavaScript控制数据和页面的更新。JavaScript更新可以做到比较小的数据传输，这样不会对整个网络和CPU负载产生不利影响，但需要编写更新程序。

2.Web页面中读取PLC变量

在自定义Web页面时，可通过语法“：=<Varname>：”方式读取PLC变量，<Varname>可以是PLC变量表中定义的变量，也可以是数据块变量。

本例，在Web页面中插入一个表格，用于读取PLC变量，表格第一列内填入了PLC变量名称，第二列填入了HTML代码中的PLC变量名，如图7-75所示。

图7-75 Web页面读取PLC变量

3.在Web页面写入PLC变量

当自定义Web页面时，可以向CPU写入数据。首先需要使用AWP指令定义可被写入的PLC变量，然后使用HTTPPOST命令，将数据写入到相应的PLC变量中。

AWP命令“<！--AWP_In_Variable Name=‘<Varname1>’-->”用来定义Web页面中需要写入的PLC变量，<Var-name>可以是PLC变量表中定义的变量，也可以是数据块变量。本例在HTML文件开始位置中，定义了4个可被Web页面写入的PLC变量，如图7-76所示。

在Web页面，一般采用HTTP POST方法，将数据写入到PLC变量中。典型用法是在Web页面中，通过执行“插入﹥表单﹥文本域”和“插入﹥表单﹥按钮”来实现的。本例在Web页面中插入一个表格，用于写入PLC变量，表格第一列内填入了PLC变量名称，第二列内插入了“文本域”，第三列内插入了“按钮”，如图7-77所示。

图7-76 定义可被Web页面写入的PLC变量

图7-77 Web页面写入PLC变量

注意：(https://www.xing528.com)

•使用“文本域”和“按钮”，通过POST方法将数据写入到PLC变量时，需要将“文本域”和“按钮”组合在同一个“表单”内。

•“文本域”的名称需要修改为PLC变量名称。

4.添加用于Web页面读写的变量

使用TIA博途软件创建Web服务器项目，将CPU 1217C作为新设备添加到项目中。在“PLC变量表”中，添加数据类型为Bool的变量“testBit”和数据类型为Byte的变量“test-Byte”；在数据块中添加全局数据块“Web2Plc”，并在数据块中添加数据类型为Bool的变量“testBit”和数据类型为Byte的“testByte”，如图7-78所示。

图7-78 在PLC变量表和数据块中添加变量

5.组态自定义Web页面

在设备视图巡视窗口中，为CPU属性作如下设置：

•为以太网接口添加子网，并设置IP地址（192.168.0.217）和子网掩码（255.255.255.0）；

•在“Web服务器”设置界面上使能“在此设备的所有模块上激活Web服务器”，然后在“用户管理”中为用户分配访问权限，“调用用户自定义网页”和“写入用户自定义的网页”的权限需要被选择；

•“用户自定义页面”设置界面组态如图7-79所示。

图7-79 组态“用户自定义页面”

①浏览到指定Web应用程序的HTML资源目录，选择默认页面并为应用程序命名。

②为Web Control DB和片段DB分配合适的DB编号。

③单击“生成块”，创建WebControl DB和Web片段DB。

注意：

本例是在STEP7项目目录中，新建一个“Webpages”目录用于存储Web应用程序的HTML源代码。采用该种存储方式的优势如下：

•用户自定义的Web页面可与STEP7项目一同归档。

•TIA博途软件采用“项目>另存为”，可将Web资源目录一同复制到新路径中。

6.调用“WWW”指令

要通过标准Web页面访问用户定义的Web页面，在程序中必须执行“WWW”指令。“WWW”指令用于初始化CPU的Web服务器并同步用户自定义Web页面，在“WWW”指令中，CTRL_DB参数需要与步骤5中“用户自定义页面”中的“WebDB号”一致，该指令的调用如图7-80所示。

7.保存、编译项目并将组态和程序下载到CPU。

8.访问自定义Web页面

通过IE浏览器访问Web服务器，在标准Web页面左侧导航菜单中，选择“客户页面”。在“客户页面”中，单击“应用程序主页”，Web服务器将跳转到自定义Web页面。在自定义Web页面中，可对PLC变量进行读写操作，如图7-81所示。

图7-80 调用“WWW”指令

图7-81 访问自定义页面

示例程序请参见随书光盘中的例程目录《Webserver》。