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>