GW6 web schema

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.

1. 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.
2. 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>