<!DOCTYPE html>
<html> 
    <head> 
        <title>ILC Test</title> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">    
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        
        <script type="text/javascript">
            var xmlReqList;
            // Function creates from Array of variables an XML file in WebVisit format
            function createGetHTTPlist(list)
            {
                var xhttpsend="<body><version>1.0</version><client>IMasterPhoenix5_14_05</client><client_ver>5.14.0501</client_ver><item_list_size>";
                var item_list=list.length;
                var i;
                xhttpsend = xhttpsend + item_list ;
                xhttpsend = xhttpsend + "</item_list_size><item_list></item_list></body>";
                xmlReq=loadXMLString(xhttpsend);
                for (i in list){
                    newel=xmlReq.createElement("i");
                    x=xmlReq.getElementsByTagName("item_list");
                    x[0].appendChild(newel);
                    newel=xmlReq.createElement("n");
                    newtext=xmlReq.createTextNode(list[i]);
                    newel.appendChild(newtext);
                    x=xmlReq.getElementsByTagName("i");
                    x[i].appendChild(newel);
                }
                return(xmlDoc);
            }
        
            //Create from String an XML file with browser detection
            function loadXMLString(txt)
            {
            if (window.DOMParser)
              {
              parser=new DOMParser();
              xmlDoc=parser.parseFromString(txt,"text/xml");
              }
            else // Internet Explorer
              {
              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              xmlDoc.async="false";
              xmlDoc.loadXML(txt);
              }
            return xmlDoc;
            }
        
            // Send the xHTTPRequest to the server in the browser adress
            function fhttprequest(xmlReqList)
            {
                if (window.XMLHttpRequest)
                  {
                    xhttp=new XMLHttpRequest();
                    xhttp.open("POST","http://192.168.0.11/cgi-bin/ILRReadValues.exe",true);
                    xhttp.send(xmlReqList);
                    if (window.XMLHttpRequest){
                        xhttp.onreadystatechange = function() {
                        if(this.readyState == 4) {
                            GetData(this);
                            }
                        }
                    }
                  }
                else // Internet Explorer 5/6
                  {
                    msXHTTP = new ActiveXObject("Microsoft.XMLHTTP");//Msxml2.XMLHTTP.3.0");
                    msXHTTP.onreadystatechange = doHttpReadyStateChange;
                    msXHTTP.open("POST","http://192.168.0.11/cgi-bin/ILRReadValues.exe",true);
                    msXHTTP.send(xmlReqList);
                  }
            }
            // Only need for old IExplorer Get Event new data
            function doHttpReadyStateChange() {
               if (xhttp.readyState == 4) {
                  GetData(this);
               }
            }
            function fuGetData() {
                // Create List of variables and convert by function "createGetHTTPlist" into xml
                xmlList = createGetHTTPlist(["@GV.PLC_SYS_TICK_CNT","@GV.ONBOARD_OUTPUT_BIT0"]);
                // Send xml request
                fhttprequest(xmlList);
            }
        
            //Is executed if the confirmation from the webserver is recived
            function GetData(xhttp){
                xmlDoc=xhttp.responseXML; //Convert respnse into xml document
    
                document.getElementById("idPlcSysTickCnt").innerHTML = xmlDoc.getElementsByTagName("v")[0].childNodes[0].nodeValue; //Get first variable value
                document.getElementById("OnboardInput1").innerHTML = xmlDoc.getElementsByTagName("v")[1].childNodes[0].nodeValue;
            }
        
            function SetData(vValue){
    
                if (window.XMLHttpRequest)
                  {
                  xhttpSet1=new XMLHttpRequest();
                  }
                else // Internet Explorer 5/6
                  {
                  xhttpSet1=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                 var command="http://192.168.0.11/cgi-bin/writeVal.exe?" + "@GV.ONBOARD_OUTPUT_BIT0" + "+" + vValue
                xhttpSet1.open("GET",command,false);
    
                xhttpSet1.send(command);
            }
            </script>
    </head> 
    <body> 
        <div data-role="page"  data-theme="a">
            <div data-role="header"></div><!-- Ende header -->
            <div data-role="content">
                <h2>ILC Test</h2>
                <button id="btnSetOnboardOutput1ON" data-icon="refresh" data-iconpos="right">Set onboard output 1: ON</button>
                <button id="btnSetOnboardOutput1OFF" data-icon="refresh" data-iconpos="right">Set onboard output 1: OFF</button>
                <button id="btnGetValues" data-icon="refresh" data-iconpos="right">Get Values</button>
                <br/><br/>
                <a>PLC SysTick Cnt = </a><a id="idPlcSysTickCnt"></a></br>
                <a>Onboard Input 1= </a><a id="OnboardInput1"></a></br>
            </ div ><!-- Ende content --> 
        </ div ><!-- Ende page -->
        
        <script type="text/javascript">
            //Events
            $('#btnSetOnboardOutput1ON').mousedown(function(e){ e.preventDefault();SetData(1)});
            $('#btnSetOnboardOutput1OFF').mousedown(function(e){ e.preventDefault();SetData(0)});
            $('#btnGetValues').mousedown(function(e){ e.preventDefault();fuGetData()});
        </script>
    </body>    
</html>