n
描述
用户可以创建用于 S7-CPU 的自定义网页，因此叫做“用户自定义网页”，或者使用已储存在 CPU 中的标准 CPU 网页。有三种方法可以用来更新自定义网页：n
- 通过“F5”手动更新n
- 使用 HTML 代码进行更新n
- 使用 JavaScript 进行更新
| 手动更新 | 使用 HTML 自动更新 | 使用 JavaScript 自动更新 | |
| 功能 | 按F5重新装载页面 | 在 HTML 文件的头文件定义一个更新时间 | 使用 JavaScript 更新单一变量 |
| 优势 | 无需编辑 | 定期更新 | 定期更新，仅需少量 |
| 劣势 | 不能自动更新 | 整个网页重新装载（数据有可能闪动） | 需要编写运算程序 |
表 01 n
使用 HTML 自动更新自定义网页
用户可以通过在 HTML 网页中建立条目来自动更新用户自定义网页。
在 HTML 文件的头文件中插入以下指令：n
<meta http-equiv="refresh" content="30"/>n
" content" 参数包含更新网页时间（单位是秒）。上述例子是每 30 秒更新一次网页。n
使用 JavaScript 自动更新自定义网页
在此 FAQ 中相对应的做了示例网页来展示如何使用 JavaScript 来更新数据。示例网页中有一个简单的输入选项，JavaScript 程序代码无需修改。n
使用 JavaScrip 更新数据其实是依靠嵌入在用户自定义网页中的一个小的网页实现的，依靠“inline frames”(iFrame)实现。为了从控制器获取新值，无需重新装载全部的网页，仅需要装载内联框架中的小网页。这种方式的优势在于仅仅需要来自 于控制器的少量数据即可。如果在主页中使用了很多图片，那么用这种方式不用每次更新都需要从控制器中索取这些图片数据，但是对于列出的其他两种更新 方式是必须的。通过 JavaScript 更新仅需要比较小的数据传输，这样不会对整个网络负载以及控制器循环周期产生不利影响。n
下图显示了数据更新原则。n
图. 01n
示例网页可以通过下面的链接下载。
压缩文件中有两个文件：n
- Main_Webpage.html (主页)n
- Update_Page.html (用于更新的内联框架网页)
文件“Update_Page.html”包含两个表。第一个表用来设置更新时间。在第二行中输入时间，以毫秒为单位。第二个表（第一行不用考虑）的左边 一列显示了要被更新的变量的各自的 AWP 命令。右列显示了对应的 ID 名称（IDs）用来确定何时更新主页的变量。ID 号必须唯一。n
主页的源文本包含示例页面中预定义的 IDs (VarId1, VarId2, VarId3) 。在表中，VarId1 对应一个 DIV 元素，VarId2 对应一个 SPAN 元素，VarId3 对应一个 TD 元素。为了使用一个元素用于更新，必须插入 “ID”属性并且预先定义 ID 名称。支持“ierHTML”模式的所有的 HTML 元素都适用于此种方式。n
- 打开文件“STEP_7_Update_Main_Webpage.zip”并解压到硬盘的一个路径下n
- 用 Microsoft Frontpage 打开“Update_Page.html”文件，并且在第一个表的第二行以毫秒为单位输入更新时间（例如，可以输入20000）。n
- 在第二个表中的第二行的左列，是要读取的变量输入 AWP 命令（例如，:="VarName1": ）。如果使用超过或少于3个变量（示例网页中的显示），可以按照需要删除或插入行来实现。n
- 在第二个表的右列，为插入的 AWP 指令输入要使用的IDs（例如，Varld 1）。这一设定必须是唯一的；也就是说 ID必须在主页面上仅出现一次。嵌入到“Update_Page.html”网页中的 JavaScript 程序会自动检测运行时表的大小。在主页中，在表中右列中输入的 ID 对应的 HTML 元素会被探测到。n
- 在主页中插入定义的IDs。在文件“Main_Webpage.html”已经给出了示例。大多数的 HTML 元素都可以使用。典型的 HTML 元素在“DIV”，“SPAN”或“TD”表中。添加“ID”属性并且分配 ID 名称。JavaScript 程序代码是用文件 “Update_Page.html”（包括任何使用的HTML元素）表对应的列中的内容代替了 HTML 的全部内容。最后，根据第一个表中定义的延时时间到达后， 再次执行更新操作。n
- 输入下面的HTML代码将"Update_Page.html"集成到你的页面中:
<iframe src="Update_Page.html" style="display:none;" />n - 使用 Web2PLC 工具在 TIA Portal 或 STEP7 5.5 中创建 Web DB 并且装载组态数据到 CPU 中。
注意可以利用主页面继续编写变量的写操作。n
如果变量不能更新，检查网页浏览器的错误信息。以IE浏览器为例，JavaScript 错误会在左侧底部以黄色惊叹号显示。点击并查看更详细的错误信息。n
示例
错误信息 "parent.document.getElementById(...) is zero or not an object"显示了在主页中没有找到指定 ID 号对应的元素。在这种情况下需要检查在更新页以及主页中使用的ID号。
STEP_7_Update_Main_Webpage.zip ( 1 KB ) n
更多关于web 服务器 应用的话题请参考下面的链接。n
自动更新标准网页
在 CPU 属性中使能标准 CPU 的网页自动更新。请参考下述操作。
n
| No. |
步骤 |
| 1 | 在项目视图，选 PLC 文件夹右键，在弹出菜单选中“属性”打开。 |
| 2 | 在“属性”对话框中，在“通用”选项下点击“Web 服务器”。Web 服务器属性在窗口右侧显示。 |
| 3 | 在“自动更新”选项使能“启动”（在复选框中设置）。缺省更新时间间隔10秒。用户可以根据您的需求修改时间。 n
注意 |
| 4 | 点击 OK 关闭对话框。 |
| 5 | 保存并编译您的项目。 |
| 6 | 下载项目到 CPU 。 |
表 02
通过相对路径名内嵌用户自定义网页
从 STEP 7 (TIA Portal) V12+SP1 起S7-300, S7-400, S7-1200 和 S7-1500 可以通过相对路径名内嵌用户自定义网页。n
- 在浏览器窗口打开 STEP 7 项目路径，在图.03中示意的项目路径下插入一个新文件夹。n
- 分配例如"Web pages"的名字，然后插入你的用户自定义网页到新的文件夹。
图. 03
- 打开设备组态,然后打开 CPU 属性。
- 在检视器窗口的导航区域中定位到"Web 服务器"，获得如图.04所示的"用户自定义 Web 页面"输入栏。
- 在 HTML 路径选择已创建的"Web pages"文件(input: ".Web pages")。
- 为了在网页应用开始时打开输入的 HTML 网页"Start HTML page"。
- 最后必须再一次保存并编译你的项目，并下载到 CPU 中。
图. 04
优势
- STEP 7 (TIA Portal) 项目和 HTML 文件在一个架构下。
- 用户自定义网页可以使用 STEP 7 (TIA Portal)V12 归档。
- 用户自定义网页可以使用菜单命令 "项目 > 另存为..."复制到新的路径。
- 在浏览器窗口下复制项目从一个路径到另一个路径不需要更新 HTML 路径的说明来生成新的 HTML DBs。
- 一个项目中使用相同 HTML 页面的多个控制器使用相同的 HTML 路径名。
创建环境
本 FAQ在STEP 7 (TIA Portal) V12+SP1 下创建。
附加关键字
刷新，映象再生
原创文章，作者：ximenziask，如若转载，请注明出处：https://www.zhaoplc.com/plc326917.html
微信扫一扫 
支付宝扫一扫