使用浏览器访问PLC的自定义网页

liuian 2024-12-04 13:45 123 浏览

在日常使用西门子S7-1200系列PLC时，需要查看PLC内部数据，通常都是用触摸屏或者上位机监控，或者直接使用博途在线查看。但是当遇到触摸屏或者上位软件未关联的变量，且本机未安装博途的情况，问题就会比较复杂了，通常需要重新配置上位机参数，或者借助第三方工具，甚至需要重新安装博途来解决。这时候，如果在PLC程序设计的时候，启用了Web服务器，问题就会比较简单了。

首先，使用博途打开PLC源代码，选中CPU模块，点击右键，点击属性，弹出设置界面，在”常规“窗口左侧列表框中选择”Web服务器“，勾选"在此设备的所有模块上激活Web服务器"，同时取消“仅允许通过HTTPS访问”。重新编译后下载。

打开计算机上的网页浏览器，在地址栏输入http://ww.xx.yy.zz（此处为PLC的实际IP地址，如192.168.1.10，所有符号为英文状态输入），打开 S7-1200的标准 Web 页面，如下图所示。

变量状态页面可以查看任何 CPU 中的 I/O 或者存储器数据，可以输入绝对地址（例如：MB0、I0.0、Q1.0等）、PLC 变量名或者数据块中的变量。可以选择显示的数据类型的格式；可以显示或者更改当前值。如下图所示。

到此为止，基本已经解决了之前遇到的问题，但是，进一步探索后，会发现“Web服务器”还有更强大的功能，可以创建融入 PLC 数据的特定的 HTML 页面。

选择一款HTML编辑器，如Microsoft Frontpage，Dreamweaver或VScode等，创建用户定义的 Web 页面，使用AWP 命令包含在 HTML 代码的 HTML 注释中（AWP 命令是西门子提供用于访问 CPU 信息的固定命令集）。

如需显示变量，语法为 :=<Varname>: ，Varname为 PLC 变量，使用双引号将变量名称括起来即可，如下图所示。

<p>Actual Value: :="VarName1":</p>

如需写入变量，则首先需要在HTML注释中添加。

<!-- AWP_In_Variable Name='"VarName1"' -->

然后添加输入框和确认按钮等元素即可。

<input type="text" id="value1" name='"VarName1"' size="5">
<input type="submit" value="Set a new Value" style="width: 200px">

页面编辑完成后，打开博途，在 Web 服务器的"用户自定义页面"中进行配置。注意需要点击生成块方可生效。

执行 WWW 指令，在主程序直接调用，也可通过程序逻辑可控制何时启用自定义页面。

用户定义的 Web 页面块后和其它的程序块一样，将成为程序的一部分，按照正常过程将下载到 CPU即可。再次打开浏览器，输入PLC的IP地址后，即可看到用户编写的HTML页面。由于采用了标准的HTML协议，用户自定义的页面也可以使用处于同一网段下的手机访问，如果局域网配置了VPN，甚至可以通过外网，远程操作，因此，为了防止 PLC 被恶意攻击，或者出现未经授权的操作，官方还是建议勾选“仅允许通过 HTTPS 访问”。

一个典型的HTML页面示例

<!-- AWP_In_Variable Name='"VarName1"' -->

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Web page demo - Login - Main page</title>
		<!-- Via "<link...>" a CSS file is referenced which contains all information on the optical design of the web -->
		<!-- <link rel="stylesheet" type="text/css" href="/CSS/S7Web.css"> -->  <!-- S7Web.css is used in S7-1500 CPUs and S7-1200 FW2.2 -->
	</head>
	<body onload="loginCheck()">  <!-- check login with each refresh of the website -->

		<!-- example for write value to CPU -->
		<form method="post" action="" onsubmit="">
			<p> </p>
			<p>
			<input type="text" id="value1" name='"VarName1"' size="5">
			<input type="submit" value="Set a new Value" style="width: 200px">
			</p>
		</form>

		<p>Actual Value: :="VarName1":</p>

		<!-- BEGIN Login Area -->
		<iframe id="WebserverIFrame" name="WebserverIFrameName" src="/Portal/Portal.mwsl" style="display:none"></iframe>

		<!-- area for login -->
		<div id="loginBox" class="Login_Area"></div>	<!-- "Login_Area" is defined in S7Web.css for S7-1500 CPUs and S7-1200 FW2.2-->

<!-- function for check login -->
<script type="text/javascript">

function loginCheck() {
	var iFrameElement = document.getElementById('WebserverIFrame');
	var loginForm = iFrameElement.contentWindow.document.getElementById('loginForm'); //S7-1200 FW4.0
	if (loginForm == null) {
		loginForm = iFrameElement.contentWindow.document.getElementById('Login_Area_Form'); //S7-1200 FW2.2 and S7-1500 FW1.5
	}
	if(loginForm) {
		loginForm.setAttribute("data-ajax", "false");
		document.getElementById('loginBox').innerHTML = loginForm.parentNode.innerHTML;
		document.getElementsByName("Redirection")[0]["value"] = window.location.href.split("?")[0];
	}

	var logoutForm = iFrameElement.contentWindow.document.getElementById('logoutForm'); //S7-1200 FW4.0
	if(logoutForm == null) {
		logoutForm = iFrameElement.contentWindow.document.getElementById('logout_form'); //S7-1200 FW2.2
	}
	if(logoutForm == null) {
		logoutForm = iFrameElement.contentWindow.document.getElementById('Logout_Area_Form'); //S7-1500 FW1.5
	}
	if(logoutForm) {
		logoutForm.setAttribute("data-ajax", "false");
		document.getElementById('loginBox').innerHTML = logoutForm.parentNode.innerHTML;
		document.getElementsByName("Redirection")[0]["value"] = window.location.href.split("?")[0]; // use the current webpage as redirection - remove additonal post values attached by "?" if necessary
	}
}
</script>
<!-- END Login Area -->

	</body>

</html>

（来源于西门子官方文档）

合理利用Web服务器，结合前端开发技术，可以将自定义页面设计成组态界面，替代组态软件和触摸屏，将逻辑代码和操作界面全部下载存储到PLC，只需要浏览器，即可实现任意客户端对PLC设备的操控。

meta content