QTouch跨平台软件_通讯管理机_电力监控_能源管理系统 — 武汉舜通智能
电力云能效平台
智能光伏平台
QTOUCH组态软件,跨平台自动化软件专家
您当前位置:主页 > 新闻案例 > 最新案例 >

SVG组态WEB的使用说明

作者:舜通智能 来源:www.sitcsys.com 发布时间:2017-10-12 热度:0

  一、 QTouch安装与使用
 
  1.1 QTouch下载
 
  QTouch软件的下载可以通过官网地址下载http://sitcsys.com
 
  下载路径:下载与演示 -> QTouch组态软件 -> QTouch通用版(2.2.5)
 
  1.2 QTouch安装
 
  软件下载完成后,运行安装程序包,完成软件的安装。安装过程较简单,具体安装步骤不再此赘述。
 
  1.3 QTouch绘制系统
 
  软件安装完成之后,双击桌面快捷方式打开软件,即可进入QTouch组态软件。组态软件界面依次分为:菜单栏、工具栏、工程菜单栏(左树形)、信息视图、状态栏。在工程菜单栏中可以找到“画面”,此项即为绘制系统。
 
  由于QTouch项目是以工程为单位进行管理,在进入绘制系统前,需要先创建工程。依次选择执行如下操作:
 
  
 
  单击工具栏“新建”按钮,在弹出的“运行系统”对话框中配置:“工程路径”,配置完成之后 ,单击“确定”按钮即可。
 
  以上步骤执行完成后,单击“工程菜单栏”中的“画面”按钮,在随后出现的“信息视图”窗口中,右建弹出快捷菜单,如下图所示:
 
  
 
  
 
  选择“新建”,则会在“信息视图”中新添加一个 ,此即为新增加的页面。选中新增加的页面,并双击图标,即可进入绘制系统界面。绘制系统界面如下图所示:
 
  
 
  二、 绘制画面
 
  2.1 基本控件
 
  QTouch绘制系统提供了基本图元、基本控件、扩展控件和用户控件四类。目前在SVG转换中,只提供了基本图元。使用基本图元可以满足80%监控系统的需求。其中基本控件包括:矩形、直线、箭头、椭圆、圆角矩形、折线、多边形、文字和组合动画。如下图所示:
 
  
 
  2.2 属性配置
 
  QTouch绘制系统内的所有图元都提供了相对应的属性设置,包括:背景、大小、鼠标动作、线形、字体、位置、快捷键等。在绘制系统中添加图元后,使用“选择工具”选中图元,就可以看到属性编辑器,如下图所示:
 
  
 
  2.3 图元与数据关联
 
  选中图元,在“属性编辑”器中,单击“实时关联”按钮,在弹出的“关联设置”中配置所需关联的数据点即可。注:QTocuh绘制系统已经开放变量关联数据接口,用户可根据自己数据采集系统中的数据点标识进行数据关联。在经过QTouch转为SVG时,会在图元附属信息中包含该图标数据点标识字段,为WEB端加载和刷新图元关联数据提供对应关系。
 
  
 
  三、 WEB系统加载SVG
 
  3.1 SVG加载与刷新
 
  现下所有的浏览器基本都支持SVG图元的加载,在WEB系统中前端可直接使用Frame控件加载SVG。SVG加载完成后,用户的WEB系统可根据自己的业务逻辑按条件控制SVG显示与隐藏,放大与缩小。
 
  SVG图元数据刷新的方式有多种,为达到实时数据刷新的目的,可以使用websocket、mqtt等多种通信方式,具体通信过程由用户系统自行商定。QTouch提供基于Mqtt的完整通信解决方案。
 
  加载SVG代码片段如下,用户也可以访问开源中国,搜索QTouch开源组态软件获取完整的Demo代码,地址:http://120.27.140.246
 
  function getsvg(mqtt_value) {
 
  if (!!window.ActiveXObject || "ActiveXObject" in window)
 
  {
 
  var arr = JSON.parse(mqtt_value);
 
  var linedata = arr.lines[0].data;
 
  var stationid = arr.istation;
 
  }else{
 
  var arr = $.parseJSON(mqtt_value);//将json数据转换为数据
 
  var linedata = arr['lines'][0]['data'];
 
  var stationid = arr['istation'];
 
  }
 
  if(sid == stationid)
 
  {
 
  //更改svg数据
 
  svg1 = document.getElementById("realView").getSVGDocument();
 
  svg1.documentElement.style.cursor="pointer";
 
  //刷值
 
  var texts = svg1.getElementsByTagName('text');
 
  $.each(texts,function(i,item) {
 
  if(item.childNodes.length > 0)
 
  {
 
  if (!!window.ActiveXObject || "ActiveXObject" in window)
 
  {
 
  var objectid = item.childNodes[3].childNodes[3].attributes['ObjectID'].value;
 
  //获取图元上的ObjectID
 
  $.each(linedata,function(l,ltem) {
 
  if(ltem['index'] == objectid && objectid >=0)
 
  {
 
  item.childNodes[1].textContent = ltem['value']//当收到的index等于ObjectID的时候给其赋值
 
  }
 
  });
 
  }else
 
  {
 
  var objectid = item.children[1].children[1].attributes['ObjectID'].value;
 
  $.each(linedata,function(l,ltem) {
 
  if(ltem['index'] == objectid && objectid >=0)
 
  {
 
  item.children[0].textContent = ltem['value']
 
  }
 
  });
 
  }
 
  }
 
  });
 
  }
 
  3.2 放大缩小控制
 
  为更加丰富SVG在WEB系统中的体验效果,QTouch在转为SVG时已将放大、缩小等操作内置其中,代码片断如下。完整的代码请访问开源中国,搜索“QTouch开源组态软件”。
 
  var SVGDocument = null;
 
  var SVGRoot = null;
 
  var TrueCoords = null;
 
  var GrabPoint = null;
 
  var BackDrop = null;
 
  var DragTarget = null;
 
  var width = 800;
 
  var height = 400;
 
  var gridLength = 20;
 
  var scale = 1;
 
  var svgPanel = null;
 
  function Init(evt){
 
  SVGDocument = evt.target.ownerDocument;
 
  SVGRoot = SVGDocument.documentElement;
 
  TrueCoords = SVGRoot.createSVGPoint();
 
  GrabPoint = SVGRoot.createSVGPoint();
 
  BackDrop = SVGDocument.getElementById("BackDrop");
 
  svgPanel = SVGDocument.getElementById("testdrag");
 
  if(document.addEventListener){
 
  document.addEventListener('DOMMouseScroll',scrollZoom,false);
 
  }
 
  window.onmousewheel=document.onmousewheel=scrollZoom;
 
  document.documentElement.style.overflowY = 'hidden'; //???????
 
  }
 
  function scrollZoom(e){
 
  e=e || window.event;
 
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
 
  e.wheelDelta>0 || e.detail >0?zoom(0.9,e):zoom(1.1,e);
 
  }else{
 
  e.wheelDelta>0 || e.detail >0?zoom(1.1,e):zoom(0.9,e);
 
  }
 
  }
 
  function zoom(num,e){
 
  scale *= num;
 
  var sb = getMousePos(e);
 
  var sbx = sb.x;
 
  var sby = sb.y;
 
  svgPanel.setAttribute("transform-origin","0 0");
 
  svgPanel.setAttribute("transform","scale("+scale+"),translate(-"+sbx+",-"+sby+")");
 
  }
 
  function Grab(evt){
 
  var targetElement = svgPanel;
 
  if (BackDrop != targetElement){
 
  DragTarget = targetElement;
 
  DragTarget.parentNode.appendChild(DragTarget);
 
  DragTarget.setAttributeNS(null, "pointer-events", "none");
 
  var transMatrix = DragTarget.getCTM();
 
  GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
 
  GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
 
  }
 
  };
 
  function getMousePos(event) {
 
  var e = event || window.event;
 
  return {'x':e.clientX,'y':e.clientY}
 
  }
 
  function Drag(evt){
 
  GetTrueCoords(evt);
 
  if (DragTarget){
 
  var newX = TrueCoords.x - GrabPoint.x;
 
  var newY = TrueCoords.y - GrabPoint.y;
 
  DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + "),scale("+scale+")");
 
  }
 
  };
 
  function Drop(evt){
 
  if (DragTarget){
 
  var targetElement = svgPanel;
 
  DragTarget.setAttributeNS(null, "pointer-events", "all");
 
  if ("Folder" == targetElement.parentNode.id){
 
  targetElement.parentNode.appendChild( DragTarget );
 
  }
 
  else{}
 
  DragTarget = null;
 
  }
 
  };
 
  function GetTrueCoords(evt){
 
  var newScale = SVGRoot.currentScale;
 
  var translation = SVGRoot.currentTranslate;
 
  TrueCoords.x = (evt.clientX - translation.x)/newScale;
 
  TrueCoords.y = (evt.clientY - translation.y)/newScale;
 
  };

推荐阅读
  • 104与QTouch通讯测试

    QTouch工程上位机(pc)104主从站的建立 一.从站的建立 1).通讯方式:采用modbus...

  • 智能电力监控典型案例

    ...

  • SmartDAQ通讯管理机解决方案

    SmartDAQ 通讯管理机 解决方案 SmartDAQ通讯管理机可以与4-6台主机同时进行通信...

  • 中联药业高压配电监控系统项目

    中联药业高压配电监控系统项目:使用串口服务器将各个微机测控保护装置采集的数...

  • 柱上开关在配网系统中的远程电力监控方案

    柱上开关在配网系统中的远程电力监控方案 1 概述 户外柱上智能永磁真空用户分界...

  • 智能化网络企业能耗管理平台解决方案

    智能化网络企业能耗管理平台解决方案 本系统目标将大能耗企业的用电管理水平提...

  • 热门资讯
    QTouch组态软件下载
    地址:武汉市东湖高新区慧谷时空大厦8层 电话:027-87601615 传真:027-87601615   产品网站  工控网官网
    技术讨论区:www.q-touch.com.cn 市场:chensou#126.com 技术支持:zhangaoxiang_sitc#126.com QQ: 客 服 一
    Copyright@2006-2017 武汉舜通智能科技有限公司 ShunTong Intelligent Co.,Ltd,All Right Reserverd
    武汉舜通智能