基于BS的工业组态应用 - 物联网行业 - 恒远物联 官网
网站链接:
当前位置: 比特棋牌游戏 > 技术中心  > 物联网行业

基于BS的工业组态应用

物联网在工业控制应用越来越多;但在工业监控上组态图给人直观方便而占有很大比例。今天就讲一个javascrpt在网页上实现组态组态图

第一步:页面引用Jtopo插件


第二步:页面中准备一块画布   <canvas id="canvasArea" ></canvas>;我们就可以开始在上面绘制组态图了。


第三步:创建一个舞台(画布就是一个表演舞台)

 var  stage = new JTopo.Stage(“canvasArea”); // 创建一个舞台对象

比特棋牌游戏var  scene = new JTopo。Scene(stage); // 创建一个场景对象

 scene。background ="/images/canvas-bg。jpg";  //场景的背景图

scene。mode = "edit";  //设置节点可编辑

第三步:添加监控节点

比特棋牌游戏 //添加节点

 function AddNode (imgurl, name) {

        

        var node = new JTopo.Node(name);         

比特棋牌游戏        node。setBound(500, 500); //位置

        node。setImage(img, true);

          scene.add(node);  //加入场景

       return node;

    }


var node1=  AddNode("/image/demo1.png","阀门");

//效果如下 可反复调用添加余下节点

image.png


第四步:绑定显示节点文本,实际上就是设置更新节点text文本信息


node1.text="压力:0.00 Pa";

//node1.alarm="超压报警"



现在将舞台保存成JSON吧,Jtopo是可以通过JSON还原舞台的。下面自己写的返回JSON字符串的函数。

//返回Json

    function GetJson  (stage) {

比特棋牌游戏        if (stage == null) {

            return "";

        }

        var str = "{";

        console.log(stage);


        $。each(stage, function (index, o) {

            

            if (o == undefined || typeof o == "function") {

                return true;

            }

            if (typeof o == "object" && index != "childs") {

                return true;

            }            

            str += "'" + index + "':";

            if (index == "childs") {

                str += "[";

                str += createchilds(o);

                str += "]";

            } else {

                typeof o == "string" ? str += "'" + o + "'" : str += o;

            }

            str += ",";

        });

        str = str。substring(0, str。length - 1);

        str += "}";

     

        return str;


比特棋牌游戏        function createchilds(child) {

            var str = "";

            $.each(child, function (index, obj) {

                str += "{";

                $.each(obj, function (i, o) {

                    if (o == undefined || typeof o == "function") {

                        return true;

                    }

                    if (typeof o == "object" && (i != "childs" && i != "_background")) {


                        return true;

比特棋牌游戏                    }    

                    if (i == "childs") {

                        str += "'" + i + "':";

                        str += "[";

                        str += createchilds(o);

                        str += "]";

                    } else if (i == "_background") {

                        str += "'background':";

                        str += "'" + o。src + "'";

比特棋牌游戏                    } else {

                        str += "'" + i + "':";

比特棋牌游戏                        typeof o == "string" ? str += "'" + o + "'" : str += o;

                    }

                    str += ",";

                });

                str = str.substring(0, str.length - 1);

                str += "},";

            });

            str = str。substring(0, str。length - 1);

            return str;


        }


    }


var json=GetJson (stage );

//还原

var  stage = JTopo。createStageFromJson(json, "canvasArea");


最后看看效果吧

image.png

相关技术

  • 你了解物联网卡吗?

    物联网卡就是由三大运营商(移动、联通、电信)提供,基于物联网专网,用来满足智能硬件的联网、管理,以及集团公司的移动信息化应用需求的流量卡。

  • 物联网的概念及特征

    一丶什么是物联网物联网这个概念,在美国早在2000年就提出来了。当时叫传感网。其定义是:通过射频识别(RFID)、红外感应器、全球定位系统、激光扫描器等信息传感设备,按约定的协议,把任何物品通过物联网域名相连接,进行信息交换和通信,以实现智能化识别、定位、跟踪…

  • 物联网核心问题是什么?

    怎样收集、传输和分析数据是物联网最关心问题

  • 是什么阻碍我们部署物联网?

    尽管物联网产业普遍欣欣向荣态势,但物联网的另一个方面往往被上述描述掩盖。事实上,到今天绝大部分的物联网项目很多都失败了。

DTU(11) RTU(11) 物联网(11) MBUS(10) HERY(6) 4G全网通(5) 智慧工地(3) PLC(2) RS485(2) RS232(1) DI(1) DO(1) AI(1) AO(1) 集中器(1) 采集器(1) 抄表(1) GPRS(1) GPRS2G(1) 智慧水务(1) 5G(1) MQTT(1) HTTP(1) IOT(1) SCADA(1) NBIOT(1) WiFi(0) BLE(0) PWM(0) 污水处理(0)
咨询反馈
扫码关注

恒远物联 微信公众号

返回顶部
比特棋牌下载 比特棋牌 秒速时时彩 聚发彩票注册 秒速时时彩 9号福彩网 大发棋牌下载 9号福彩网 大发棋牌 秒速时时彩