GW6 web schema: Difference between revisions

From Phobos Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 251: Line 251:


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.
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.
== Example XML Files ==
File with General Interrogation only:
<pre>
<?xml version="1.0" encoding="ISO-8859-1"?>
<gw6event>
<object type="AI" addressUp="2001" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object>
<object type="AI" addressUp="2009" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object>
<object type="AI" addressUp="2010" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object>
<queryHandle>17</queryHandle>
<timestamp>2012-08-29 09:45:11.253</timestamp>
</gw6event>
</pre>

Revision as of 06:53, 29 August 2012

Introduction

The schema is in SVG format

SVG editor

Any newer vector graphics editor should have SVG support.

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>

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.

Example XML Files

File with General Interrogation only:

<?xml version="1.0" encoding="ISO-8859-1"?>
<gw6event>
<object type="AI" addressUp="2001" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object>
<object type="AI" addressUp="2009" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object>
<object type="AI" addressUp="2010" isInvalid="false" isNotTopical="false" noTime="true" isOverflow="false">0</object> 
<queryHandle>17</queryHandle>
<timestamp>2012-08-29 09:45:11.253</timestamp>
</gw6event>