西门子 webserver 用户自定义页面 传递变量给js问题

如何将西门子PLC webserver功能中html文件的变量传递给js文件使用

问题描述

	最近合作公司要求我们提供一份软著的材料，原先在触摸屏硬件上的程序已经要么做过软著或着准备做软著，所以只能另外写一个，借此机会，直接用西门子PLC自带的websever功能做一个人机交互。  

在使用过程中，因为需要用到一些图像，使用了canvas，该图像上还需要显示一些变量值，这就要求js文件在绘制图像时取得变量值，问题也是这时候遇到的。
西门子的websever功能实际采用的是一个模板，也就是一些功能只要按西门子提供的格式要求编写，下载到PLC运行时，PLC会将按格式要求编写的文本替换掉，来执行对应的指令。比如读取变量的格式：

:=<Varname>:

假如我有一个PLC内数据块内的变量

在HTML中的实际写法为

:="HMI".压缩工程量[0]:

对，开头解为都是英文冒号，中间先是等号，然后数据块名称，和变量名称。注意这里的数据块名称。
问题就在这里，这个不是HTML里的元素，不能通过DOM元素的方式document.getElementById等访问。

解决方法

1. 建别名
在西门子提供的变量写法中提供别名的方式----AWP指令，需在hmtl中提前声明

<!-- AWP_Out_Variable Name='tankPressure' Use='"HMI".压缩工程量[0]' -->

注意在 “<！–”后有1个空格，“–>”前也有1个空格，其他的大小写及空格也许严格按照此规范来写。

2. 建立HMTL标签

<input id="tankPressure" value=":=tankPressure:" type="text" style="display: none">

这样就可以在js中通过

var tankPressure = document.getElementById("tankPressure");

来进行访问了。
注：可以将input的display属性设置为none，这样就可以不用在页面中显示input了