使用浏览器访问PLC的自定义网页(plc远程访问)
zhezhongyun 2025-05-03 17:44 8 浏览
在日常使用西门子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设备的操控。
相关推荐
- 关于CSS伪类&伪元素的一些知识——CSS学习之路
-
最近两天接触到了CSS伪类和伪元素之间的关系,伪类和伪元素在css代码中使用:做标识符,同来识别元素。我倒是理解,可是为什么时常见到一会用一个冒号,一会用两个,然后就感觉很迷糊了,于是就有了这一篇文章...
- CSS中before 和after的用法
-
CSS有两个说不上常用的伪类:before和:after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。一基本语法在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这...
- CSS 样式总翻车?5 个实战技巧让布局效率暴增 200%!
-
前端工程师们,是不是经常遇到这种崩溃瞬间?精心设计的CSS样式,一到不同浏览器就“变形走样”,或是响应式布局怎么调都达不到预期效果,改来改去不仅浪费时间,还容易产生一堆冗余代码。别慌!今天带来...
- 微信小程序入门教程之二:页面样式
-
这个系列的上一篇教程,教大家写了一个最简单的Helloworld微信小程序。但是,那只是一个裸页面,并不好看。今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页...
- 网格不迷路:用 CSS 网格生成器打造完美布局
-
前言你是否曾因写错grid-template-areas而捶键盘?是否在面对千层嵌套的复杂布局时,瞬间怀疑人生,甚至思考要不要转行去卖奶茶?别慌,CSS网格生成器闪亮登场,像拼乐高一样,帮你轻松...
- MFC转QT:Qt高级特性 - 样式表
-
Qt样式表概述Qt样式表(QtStyleSheets)是基于CSS的样式系统,允许开发者以类似于Web前端的方式定制Qt应用程序的外观。这一特性极大地简化了Qt应用的界面定制,提供了比MFC更强大...
- 什么是CSS?
-
CSS是一种用来描述网页样式的语言,它可以控制HTML元素的颜色、大小、位置、布局等外观效果。CSS的全称是层叠样式表(CascadingStyleSheets),它的基本语法由选择器和...
- 从零开始学习网站CSS布局
-
CSS是前端开发中的重要技术之一,而CSS布局则是CSS技术中最基础的一部分。学习CSS布局是Web开发者的必修课,也是掌握CSS技能的基石。CSS布局指的是如何使用CSS定位和排版HTML元素。CS...
- CSS3 渐变类型及其语法
-
线性渐变:CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下background:linear-gra...
- 五大顶级CSS性能优化工具,值得程序员一试!
-
为什么Web页面的加载速度如此重要?在这个信息化的时代,如果一个网站的加载时间过长,大部分用户会极其不耐烦地选择“关掉”!这让辛辛苦苦熬夜敲代码的程序员们情何以堪,不管网站功能如何强大,用户根本都没来...
- get css中的clamp()函数,好用到起飞
-
CSS中有大量令人惊叹的属性和特性,但似乎没有人谈论的是clamp函数。这个函数让我们可以对任何CSS属性执行min-width,max-width,和之类的操作。CSSclamp语法cl...
- Google Chrome终于支持CSS Variables了
-
这篇文章要报道的并不是“新闻”,因为W3C早已开始着手CSS变量(又称‘自定义属性’)方面的工作。而作为CSS4非正式标准的一部分,Mozilla早在Firefox版本号还是29的时候就已经支持它了。...
- CSS3 过渡与动画
-
在现代网页设计中,平滑的过渡和生动的动画效果已成为提升用户体验不可或缺的元素。CSS3为我们提供了强大的transition和animation属性,让开发者能够轻松实现各种视觉效果。本文将...
- css基础篇11--表格样式
-
目标表格边框合并表格边框的间距设置表格标题位置的设置表格可以说是网页必备的元素之一,但是原生的表格样式都是很丑,列如表格加入边框的默认情况下,单元格与单元格之间有一定的空隙;设置单元格边框间距等等,都...
- WebDriver-工具辅助生成XPath语法和CSS语法
-
1.FireBug插件1.1生成XPath语法打开Firefox浏览器FireBug插件,单击插件左上角的鼠标箭头,再单击页面上需要定位的元素,在元素行上右击弹出快捷菜单,选择“复制XPath”,将会...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)