基于15001200 PLC的webserver---用户自定义页面

1. 创建html页面

页面需要包含字符集信息：<meta http-equiv="content-type" content="text/html; charset=utf-8">
包含AWP命令的html文件，大小限制为64KB
最简单的页面自动刷新:<meta http-equiv="Refresh" content="10">

2. AWP指令

AWP 命令公式中”“之前的空格，对于命令的正确编译至关重要。疏漏空格字符可能导致编译器无法生成正确代码。这种情况下，编译器不会显示错误。
读取变量：:=<Varname>:：
- M,Q,I:直接使用"变量符号名"
- DB：规则为"DB名".变量名
  1
  2
  3
  "test_MB" :="test_MB": "test_MW" :="test_MW": "web_test2_优化".b :="web_test2_优化".b:
读取特殊变量（从PLC读取并传给HTTP响应头）：
- type对应特殊变量的类型
- type1：HEADER
- type2:COOKIE_VALUE
- type3:COOKIE_EXPIRES
- name对应HEADER或COOKIE的名称
  1
  2

写入变量：，方括号 [ ] 中包含的项为可选项。

能被写入的变量事先要激活从 HMI/OPC UA/Web API 可访问和从 HMI/OPC UA/Web API 可写
配合POST命令写入，添加表单<form action="" method="post"> </form>，添加文本域<input name="PLC变量名" type="text" /> ：，添加按钮<input name="" type="submit" value="" /> ：。

案例如下，要写入的变量先在最前面声明出来：

<!-- AWP_In_Variable Name='"test_MB"' -->
<!-- AWP_In_Variable Name='"test_MW"' -->
<!-- AWP_In_Variable Name='"web_test2_优化".b' -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://wwww.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5"/>
<title>1200_RD_WR</title>
</head>
<body>
<p><strong>数据读取</strong></p>
  <p>"test_MB" :="test_MB":</p>
  <p>"test_MW" :="test_MW":</p>
  <p>"web_test2_优化".b :="web_test2_优化".b:</p>

<p><strong>数据写入</strong></p>
<form action="" method="post">
<input name='"test_MB"' type="text" />
<input name="" type="submit" value="set" />
</form>
<form action="" method="post">
<input name='"test_MW"' type="text" />
<input name="" type="submit" value="set" />
</form>
<form action="" method="post">
<input name='"web_test2_优化".b' type="text" />
<input name="" type="submit" value="set" />
</form>
</body>
</html>

预览效果：

更多例子：

<!-- AWP_In_Variable Name='"AWP_test".byte_var' -->
<!-- AWP_In_Variable Name='"AWP_test".word_var' -->
<!-- AWP_In_Variable Name='"AWP_test".bool_var' -->
<!-- AWP_In_Variable Name='"AWP_test".int_var' -->
<!-- AWP_Start_Struct Name='"AWP_test".my_struct' -->
:="AWP_test".my_struct.byte_var:
:="AWP_test".my_struct.word_var:
:="AWP_test".my_struct.bool_var:
<!-- AWP_End_Struct -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://wwww.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5"/>
<title>1200_RD_WR</title>
</head>
<body>
<p><strong>数据读取</strong></p>
  <p>show byte :="AWP_test".byte_var:</p>
  <p>show word :="AWP_test".word_var:</p>
  <p>show bool :="AWP_test".bool_var:</p>
  <p>show struct :="AWP_test".my_struct.byte_var:</p>

<p><strong>数据写入</strong></p>
<form action="" method="post">
<input name='"AWP_test".byte_var' type="text" />
<input name="" type="submit" value="set" />
</form>
<form action="" method="post">
<input name='"AWP_test".word_var' type="text" />
<input name="" type="submit" value="set" />
</form>
<form action="" method="post">
<input name='"AWP_test".bool_var' type="text" />
<input name="" type="submit" value="set" />
</form>
<form action="" method="post">
  <input name='"AWP_test".int_var' type="text" />
  <input name="" type="submit" value="set" />
  </form>
  <!-- AWP_In_Variable Name='"AWP_test".my_struct.byte_var' -->
  <form action="" method="post">
    <input name='"AWP_test".my_struct.byte_var' type="text" />
    <input name="" type="submit" value="set" />
    </form>
</body>
</html>

预览效果

3. 组态

组态用户自定义，选html文件所在目录，选默认打开的html页面，生成块。
生成的块属于占用程序资源，成为程序的一部分

通过WWW指令来让标准web页面可以访问web页面（如果想要通过程序控制何时web页面可见，则可以通过用户程序控制www块的调用）

// call www
// #TmpWWWreturnInt=0，无错误
// #TmpWWWreturnInt=16#00yx，相关位的请求处于等待状态
// #TmpWWWreturnInt=16#803a，未装载DB
// #TmpWWWreturnInt=16#8081，DB类型格式或版本错误
// #TmpWWWreturnInt=16#80C1，资源不足以用于初始化web
#TmpWWWreturnInt:=WWW(333);

只能在 CPU 处于停止模式时下载用户定义的网页程序块（正常下载硬件组态时候PLC就处于停止模式）
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

4. 拓展应用

用bool量控制图形

//图片1url: Images.Lamp00.png
//图片2url: Images.Lamp01.png
//用Bool变量来替换Lamp0x后面的这个x，0的时候就是Lamp00.png，1的时候就是Lamp01.png
//这个:="TestFinished":就是从PLC回读到一个bool量
<img src='Images/Lamp0:="TestFinished":.png' />

基于json做html中的变量刷新

建立json文件，注意不是.json的json文件，而是一个json结构的.html文件，实测过，用.json文件写如下结构会报错的。

//这是读PLC数据的结构
{
    "Device1":":="Bootstrap_DB".Device1:",
    "Device2":":="Bootstrap_DB".Device2:",
    "Device3":":="Bootstrap_DB".Device3:",
    "Temperature":":="Bootstrap_DB".Temperature:",
    "Humidity":":="Bootstrap_DB".Humidity:",
    "Pressure":":="Bootstrap_DB".Pressure:",
    "Tag1":":="Bootstrap_DB".Tag1:"
}

需要从html输入到plc的文件，另外再建立一个.html文件，作为写入给PLC的数据

<!-- AWP_In_Variable Name='"Bootstrap_DB".Device1' -->:="Bootstrap_DB".Device1:
<!-- AWP_In_Variable Name='"Bootstrap_DB".Device2' -->:="Bootstrap_DB".Device2:
<!-- AWP_In_Variable Name='"Bootstrap_DB".Device3' -->:="Bootstrap_DB".Device3:
<!-- AWP_In_Variable Name='"Bootstrap_DB".Tag1' -->:="Bootstrap_DB".Tag1:

jquery实现数据读出和写入是通过对应id寻找到要显示或者要输入的变量

//开始之前，还有一点需要在html文件中做一下修改，就是要给每一个在页面中需要显示或者输入的元素给定一个唯一的id值，因为Js脚本是通过id值找到页面中的元素的，例如第一行的温度，就需要在html文件中温度的元素处给定一个id值，这里给定的id值是Temperature，每一个元素的id值必须唯一

<li class="nav-item">
  <button type="button" class="btn btn-primary">
    温度 <span class="badge badge-light" id="Temperature">0</span>
  </button>
</li>

// 通过之前定义的id值访问到网页中温度的元素，之后用data替换元素中的text，这段代码就这个意思
$.getJSON("IO_Output.html", function (data) {
				$('#Temperature').text(data
					.Temperature);
});

在head中引入外部java script调用脚本的语句

1	`<script type="text/javascript" src="src/js/jquery-2.0.2.min.js"></script>`

js做一个1000ms刷新的时钟，$表示这是jquery方法，setInterval()方法用来做延时

<script type="text/javascript">
	$(document).ready(function () {
		$.ajaxSetup({
			cache: false
		});
		setInterval(function () {
			
      //放入代码
			
			});
		}, 1000);
	});
</script>

把功能代码放到时钟里面去，这里的#表示对应的html元素的id，js就是通过这种方式对应元素

<script type="text/javascript">
	$(document).ready(function () {
		$.ajaxSetup({
			cache: false
		});
		setInterval(function () {
			$.getJSON("IO_Output.html", function (data) {
				$('#Temperature').text(data
					.Temperature);
				$('#Humidity').text(data
					.Humidity);
				$('#Pressure').text(data
					.Pressure);
				$('#Temperature_t').text(data
					.Temperature);
				$('#Humidity_t').text(data
					.Humidity);
				$('#Pressure_t').text(data
					.Pressure);
				$('#tag1').text(data
					.Tag1);	
			});
		}, 1000);
	});
</script>

控制PLC的某一个bool量，这里的”IO_Input.html”是上面建立的输入给PLC的数据结构.html文件。

//首先还是需要在按钮的元素中给定一个唯一的id值，这个id值device1ON，id值一定要有意义，不然元素太多根本记不清哪个id对应的什么东西 
<button class="btn btn btn-success" id="device1ON">ON</button>
//之后需要在脚本中等待鼠标的点击动作，当这个元素上有click的事件发生，就执行POST的动作，把val的值赋给PLC的变量，这里是Bootstrap_DB".Device1
$("#device1ON").click(function () {
			url = "IO_Input.html";
			name = '"Bootstrap_DB".Device1';
			val = 1;
			sdata = escape(name) + '=' + val;
			$.post(url, sdata, function (result) {});
	});
//页面中的所有按钮都可以这样处理，下面这段脚本就实现了PLC中一个布尔量的开和关
<script type="text/javascript">
	$(document).ready(function () {
		$.ajaxSetup({
			cache: false
		});
    $("#device1ON").click(function () {
			url = "IO_Input.html";
			name = '"Bootstrap_DB".Device1';
			val = 1;
			sdata = escape(name) + '=' + val;
			$.post(url, sdata, function (result) {});
		});
		$("#device1OFF").click(function () {
			url = "IO_Input.html";
			name = '"Bootstrap_DB".Device1';
			val = 0;
			sdata = escape(name) + '=' + val;
			$.post(url, sdata, function (result) {});
		});
	}); 
</script>

数值写入PLC

//这个和按下按钮控制变量的实现机制是一样的，只不过需要有个输入框，输入框也需要有一个唯一的id值
<input class="form-control" type="text" placeholder="输入任意值" id="setValue">
和按钮触发的代码唯一不同的是，val变量处不能给定1或者0，而是要从输入框元素中获取，当然还是靠id值找到输入框
$("#setWrite").click(function () {
			url = "IO_Input.html";
			name = '"Bootstrap_DB".Tag1';
			val = $('input[id=setValue]').val();
			sdata = escape(name) + '=' + val;
			$.post(url, sdata, function (result) {});
		});

图形显示

//再来说一种，有些时候希望一个Bool变量不是单纯的在网页端显示1或者0，而是能用图形来进行显示，这个也是可以实现的，当然首先还是你要给img元素一个唯一的id值
<img id="Lamp3" src='image/Lamp00.png' alt="">
//那怎么替换图片呢，自然是通过改变src属性的值就可以，可以通过在脚本里面判断一个与图片相关的变量的值，当这个值变化是，对应的图片的src属性也跟着变化，这段代码就是判断按钮按下后，灯泡变量
if (data.Device3 == true) {
		$("#Lamp3").attr("src",'image/Lamp01.png')
}

参考官网1200 网页发布

Front-end application > web server

#html #webserver #1500 1200 PLC

基于15001200 PLC的webserver---用户自定义页面

http://example.com/2024/07/21/基于15001200 PLC的webserver---用户自定义页面/

作者

xiao cuncun

发布于

2024年7月21日

许可协议

WinForm下实现子窗体上一篇

python读写json文件下一篇