使用nodered + scadavis实现办公室webscada

node-red安装

基础环境需要nodejs、npm,没安装的话自行安装一下,安装后查看版本号。
baseversion

  • npm全局安装node-red
npm install -g --unsafe-perm node-red
  • node-red启动
    start
  • 浏览器器中访问
    noderedui
    我这里已有3个流程,若第一次使用这里是空的。
  • uibuilder安装
    uibuilder
    uibuilder是一个可以方便的创建一个展示页面的节点,详情查看这里

创建流程

  • 添加节点
    一个注入节点、一个函数节点、一个uibuilder、一个调试节点。注入发起流程,函数进行数据处理,uibuilder展示数据效果,调试输出数据值用于效果验证,节点间建立连接。 flow3
  • 节点配置
    双击几点可打开节点配置页面,注入节点保持默认配置。
    函数节点中进行一个随机数脚本配置
    funcnode
    uibuilder节点进行页面配置
    uibuilderconfig
    添加如下代码:
<!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群获取。

效果展示

nodereduibuilderdemo

欢迎来访

  • 有问题欢迎留言或加交流qq:825121848
  • 转载请注明出处
  • 请小编喝茶~