GW6 web schema
Jump to navigation
Jump to search
Introduction
The schema is in SVG format
SVG editor
Any newer vector graphics editor should have SVG support.
- Inkscape Free software
- Gimp Free software
- Adobe Illustrator
- CorelDRAW
- Wikipedia: SVG Software and support in applications
WWW schema
Currently we support Static image with dynamic text.
Text field with dynamic content
- Digital values show ON/OFF.
- Analog values show floating point value (3,142).
- Integer values show 123.
To create a text field with dynamic content.
- Draw a text field on the screen with your image editor.
- Insert temporary text to see the formatting. The contents will be overwritten in the browser.
- Edit the id attribute of the text element. It must be the same as measurement objects upper(SCADA) level address.
Example
Sample SVG file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="12cm" height="10cm" viewBox="19 18 222 182" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="20.6993" y1="19.965" x2="240.245" y2="19.7203"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="60.1049" y1="19.965" x2="60.1049" y2="60.8392"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="180.79" y1="19.6923" x2="180.79" y2="60.5664"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="60.3706" y1="80.1469" x2="60.3706" y2="121.021"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="180.301" y1="80.0979" x2="180.301" y2="120.972"/>
<g>
<ellipse style="fill: #ffffff" cx="180.157" cy="128.269" rx="8.1993" ry="7.46503"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="180.157" cy="128.269" rx="8.1993" ry="7.46503"/>
</g>
<g>
<ellipse style="fill: #ffffff" cx="180.178" cy="136.808" rx="8.1993" ry="7.46503"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="180.178" cy="136.808" rx="8.1993" ry="7.46503"/>
</g>
<g>
<ellipse style="fill: #ffffff" cx="60.2483" cy="128.731" rx="8.1993" ry="7.46503"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="60.2483" cy="128.731" rx="8.1993" ry="7.46503"/>
</g>
<g>
<ellipse style="fill: #ffffff" cx="60.2692" cy="137.269" rx="8.1993" ry="7.46503"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="60.2692" cy="137.269" rx="8.1993" ry="7.46503"/>
</g>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="181.035" y1="145.252" x2="181.035" y2="186.126"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="60.2692" y1="144.734" x2="60.3706" y2="186.322"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="190.885" y1="186.315" x2="171.623" y2="186.315"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="171.331" y1="185.731" x2="183.005" y2="197.989"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="189.425" y1="186.315" x2="182.713" y2="197.405"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="70.0141" y1="186.795" x2="50.7521" y2="186.795"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="50.4603" y1="186.211" x2="62.1342" y2="198.469"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="68.5548" y1="186.795" x2="61.8423" y2="197.885"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="184.464" y1="56.4425" x2="176.584" y2="64.3224"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="176.876" y1="56.1506" x2="185.339" y2="64.9061"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="64.1775" y1="57.0696" x2="56.2976" y2="64.9495"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="56.5895" y1="56.7778" x2="65.0531" y2="65.5332"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="60.1367" y1="80.374" x2="39.1237" y2="59.361" id="1005" transform="rotate(0 60.1367 80.374)"/>
<rect style="fill:#0000ff;fill-opacity:0.05882353" width="37.853058" height="28.716112" x="35.185444" y="54.264668" id="controll_1005" onclick="top.gw6_setObject(evt)"/>
<text style="fill: #000000;text-anchor:start;font-size:12.7998;font-family:sanserif;font-style:normal;font-weight:normal" x="80.8031" y="79.4566">
<tspan x="80.8031" y="79.4566" id="1004">?</tspan>
</text>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="180.333" y1="80.2706" x2="159.32" y2="59.2576" id="1003" transform="rotate(0 180.333 80.2706)"/>
<rect style="fill:#0000ff;fill-opacity:0.05882353" width="37.853058" height="28.716112" x="152.00781" y="52.959389" id="controll_1003" onclick="top.gw6_setObject(evt)" />
<text style="fill: #000000;text-anchor:start;font-size:12.7998;font-family:sanserif;font-style:normal;font-weight:normal" x="201.206" y="79.1312">
<tspan x="201.206" y="79.1312" id="1002">?</tspan>
</text>
<text style="fill: #000000;text-anchor:start;font-size:12.7998;font-family:sanserif;font-style:normal;font-weight:normal" x="201.206" y="139">
<tspan x="201.206" y="139" id="3002">0.0V</tspan>
</text>
<text style="fill: #000000;text-anchor:start;font-size:12.7998;font-family:sanserif;font-style:normal;font-weight:normal" x="81.0249" y="139.769">
<tspan x="81.0249" y="139.769" id="3004">0.0V</tspan>
</text>
</svg>
Sample html file:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Alajaam</title>
<script type="text/javascript" src="http_martem.js"></script>
<script type="text/javascript" src="xml_martem.js"></script>
<script type="text/javascript">
var gw6_Fetch = 0;
var Pilt;
var PiltSvg;
function gw6_setObject(evt) {
var addr = evt.target.id;
var id = "0";
if(addr == "controll_1005") {
id = "1004";
addr = "1005";
} else if(addr == "controll_1003") {
id = "1002";
addr = "1003";
}
if(id != "0") {
var svgId = PiltSvg.getElementById(id);
if(svgId) {
var value = "1";
if(svgId.firstChild.data == "ON") {
value = "1";
} else if(svgId.firstChild.data == "OFF") {
value = "2";
}
var action = "operate";
var request = HTTP_MARTEM.newRequest();
request.open("POST", "gw6control", false);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("addressUp=" + addr + "&value=" + value + "&action=" + action);
if(request.status == 200) {
}
}
}
}
function gw6_objectsTableUpdate(gwXml) {
var timestamp = gwXml.getElementsByTagName("timestamp");
if(timestamp && timestamp.length) {
document.getElementById("timestamp").innerHTML = "Timestamp: " + timestamp[0].firstChild.data;
} else {
document.getElementById("timestamp").innerHTML = "Timestamp: ?";
}
var objects = gwXml.getElementsByTagName("object");
var idInvalid = 100000000000000;
for(var o = 0; o < objects.length; o++) {
var id = objects[o].getAttribute("addressUp");
if(id.length) {
} else {
id = "" + idInvalid;
idInvalid++;
}
if(id.length) {
if(objects[o].firstChild.data.length) {
var svgId = PiltSvg.getElementById(id);
if(svgId) {
if(id == "1002") {
if(objects[o].firstChild.data == "2") {
svgId.firstChild.data = "ON";
var swiId = PiltSvg.getElementById("1003");
if(swiId) {
swiId.setAttribute("transform", "rotate(45 180.333 80.2706)");
}
} else if(objects[o].firstChild.data == "1") {
svgId.firstChild.data = "OFF";
var swiId = PiltSvg.getElementById("1003");
if(swiId) {
swiId.setAttribute("transform", "rotate(0 180.333 80.2706)");
}
} else if((objects[o].firstChild.data == "0") || (objects[o].firstChild.data == "3")) {
svgId.firstChild.data = "BAD";
var swiId = PiltSvg.getElementById("1003");
if(swiId) {
swiId.setAttribute("transform", "rotate(90 180.333 80.2706)");
}
} else {
svgId.firstChild.data = objects[o].firstChild.data;
}
} else if(id == "1004") {
if(objects[o].firstChild.data == "2") {
svgId.firstChild.data = "ON";
var swiId = PiltSvg.getElementById("1005");
if(swiId) {
swiId.setAttribute("transform", "rotate(45 60.1367 80.374)");
}
} else if(objects[o].firstChild.data == "1") {
svgId.firstChild.data = "OFF";
var swiId = PiltSvg.getElementById("1005");
if(swiId) {
swiId.setAttribute("transform", "rotate(0 60.1367 80.374)");
}
} else if((objects[o].firstChild.data == "0") || (objects[o].firstChild.data == "3")) {
svgId.firstChild.data = "BAD";
var swiId = PiltSvg.getElementById("1005");
if(swiId) {
swiId.setAttribute("transform", "rotate(90 60.1367 80.374)");
}
} else {
svgId.firstChild.data = objects[o].firstChild.data;
}
} else {
svgId.firstChild.data = objects[o].firstChild.data;
}
}
}
}
}
}
function gw6_gwXmlReady(gwXml) {
if(gwXml) {
var gw = gwXml.getElementsByTagName("gw6event");
if(gw && gw.length) {
gw6_objectsTableUpdate(gwXml);
}
}
gw6_Fetch = 0;
}
function refresh() {
if(gw6_Fetch == 0) {
gw6_Fetch = 1;
var file = "/gw6event.xml?gi=true";
XML_MARTEM.loadAsync(file, gw6_gwXmlReady);
}
}
function init() {
Pilt = document.getElementById("pilt");
PiltSvg = Pilt.getSVGDocument();
setInterval("refresh()", 2000);
}
</script>
</head>
<body onload="init();">
<embed id=pilt src="alajaam-com8.svg" width=800 height=500>
<br>
<br>
<br>
<br>
<div id=timestamp>Timestamp: not set</div>
</body>
</html>
There are two control objects with SCADA addresses 1003 and 1005. Their status objects are with SCADA addresses 1002 and 1004. Analogue values are with SCADA address 3002 and 3004. To control switch positions idiom transform="rotate( ... )" is used. For control request onclick="top.gw6_setObject(evt)" is used. Function gw6_setObject looks up current value and sets new control request to device. If control request resulted in a change of position functions gw6_objectsTableUpdate updates the picture.