使用nodered + scadavis实现办公室webscada
node-red安装
基础环境需要nodejs、npm，没安装的话自行安装一下，安装后查看版本号。
- npm全局安装node-red
npm install -g --unsafe-perm node-red
- node-red启动
- 浏览器器中访问
我这里已有3个流程，若第一次使用这里是空的。 - uibuilder安装
uibuilder是一个可以方便的创建一个展示页面的节点，详情查看这里
创建流程
- 添加节点
一个注入节点、一个函数节点、一个uibuilder、一个调试节点。注入发起流程，函数进行数据处理，uibuilder展示数据效果，调试输出数据值用于效果验证，节点间建立连接。
- 节点配置
双击几点可打开节点配置页面，注入节点保持默认配置。
函数节点中进行一个随机数脚本配置
uibuilder节点进行页面配置
添加如下代码：
<!doctype html>
<html>
<head>
<script src="https://scadavis.io/synoptic/synopticapi.js"></script>
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!--<script src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>-->
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<script src="./uibuilderfe.js"></script><!-- //dev version -->
<!--<script src="./uibuilderfe.min.js"></script> //prod version -->
</head>
<body>
<script>
var office = new scadavis({
container: "div1",
iframeparams: 'frameborder="0" height="490" width="553"',
svgurl: "http://localhost:8028/scadavis/displayfiles/office.svg"
});
office.zoomTo(0.65);
uibuilder.start();
uibuilder.onChange('msg', function (newVal){
console.log(newVal);
office.storeValue("TAG1", newVal.payload);
office.updateValues();
})
</script>
</body>
</html>
上面的office.svg参考这里，需要科学方法才能访问，所以我放到了本地，无法访问需要的朋友可以加qq群获取。
效果展示
欢迎来访
- 有问题欢迎留言或加交流qq:825121848
- 转载请注明出处
- 请小编喝茶~
