SVG組態WEB的使用說明
作者：舜通智能 來源：www.std-e-cards.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;
};
