<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OctopusNet</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<script type="text/javascript" src="/menu.js"></script>
<!--  Add included scripts here -->

<!-- Add page scripts here -->
<script type="text/javascript">

var xmlhttp = new XMLHttpRequest();
var url = "/monitor.lua";

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState == 4 )
    {
      if( xmlhttp.status == 200 )
         myFunction(xmlhttp.responseText);
      else if( xmlhttp.status == 204 )
         window.setTimeout(Reload,1000);  
    }
}

function Reload() 
{
   xmlhttp.open("GET", url, true);
   xmlhttp.send();
}

function myFunction(response) {
    var Sensor = JSON.parse(response);
    var j;
    
    if( Sensor.NumSensors > 0 )
    {
       if( Sensor.NumSensors > 4 ) Sensor.NumSensors = 4;
       for( j = 0; j < Sensor.NumSensors; j += 1 )
       {
          var id = "pts"+j
          var pts = document.getElementById(id).points;
          var svgRoot = document.getElementById("svg");
          
          var i;
          var v = Sensor.SensorData[j];
          var n = v.length;
          var i0 = 0;
          if( n > 120 ) 
          {
            i0 = n - 120;
            n = 120;      
          }
          pts.clear();
          for(i = 0; i < n; i += 1)
          {    
             var pt = svgRoot.createSVGPoint();
             pt.x = (i+1) * 20;
             pt.y = v[i+i0] * 10;
             pts.appendItem(pt);
          }
       }
       window.setTimeout(Reload,10000);  
    }
    else
    {
       document.getElementById("TGraph").style.display = "none";
       document.getElementById("NoSensor").style.display = "block";
    }

}

function OnLoad()
{
  window.setTimeout(Reload,1000);  
}

</script>

</head>
<body onload="OnLoad()">

<table class="maintable" align="center">
  <colgroup>
    <col width="182px"/>
    <col width="728px"/>
  </colgroup>
  <tr><td class="maintd" colspan="2">
    <a href="http://www.digitaldevices.de"><img src="/BannerDD.jpg" alt="DD" width="910" height="130" /></a>
  </td></tr>
  <tr><td class="maintd" colspan="2">&nbsp;</td></tr>
  <tr>
    <td class="maintd"><script type="text/javascript">CreateMenu();</script></td>
    <td class="content">
      <div>
        <!-- Begin Content -->
         <!--
         <table>
            <td colspan="2" align="right">
              <div style="width: 300px">
                <form action="">
                  <input type="Button" value="Reload" onclick="Reload()" >
                </form>
              </div>
            </td>
         </table>
         -->
        <h3 align="center">Frontend Temperature</h3>
        <div id="NoSensor" align="center" style="display: none">
            </p>
            No temperature sensors available
        </div>
        

        <div id="TGraph" align="center" style="display: block">
            <svg Id="svg" width="720px" height="330px">
            <desc>Temperature</desc>
            <g transform="scale(0.277)">
               <!-- Now Draw the main X and Y axis -->
               <rect width="2400" height="1000" x="100" y="100" fill="#FFFFFF" />
               <g style="stroke-width:5; stroke:black">
               <!-- X Axis -->
                     <path d="M 100 1100 L 2500 1100 Z"/>
               <!-- Y Axis -->
                     <path d="M 100  100 L  100 1100 Z"/>
               </g>
               <!-- Now add some dashes in as a guide -->
               <g style="fill:none; stroke:#B0B0B0; stroke-width:2; stroke-dasharray:2 4;text-anchor:end;" font-size="35">
                  <path d="M 102 1100 L 2500 1100 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="1030">10</text>
                  <path d="M 102 1000 L 2500 1000 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="930">20</text>
                  <path d="M 102 900 L 2500 900 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="830">30</text>
                  <path d="M 102 800 L 2500 800 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="730">40</text>
                  <path d="M 102 700 L 2500 700 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="630">50</text>
                  <path d="M 102 600 L 2500 600 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="530">60</text>
                  <path d="M 102 500 L 2500 500 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="430">70</text>
                  <path d="M 102 400 L 2500 400 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="330">80</text>
                  <path d="M 102 300 L 2500 300 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="230">90</text>
                  <path d="M 102 200 L 2500 200 Z"/>
                  <text style="fill:black; stroke:none" x="90" y="130">100</text>
                  <text style="fill:black; stroke:none" x="100" y="60">&deg;C</text>
                  <path d="M 102 100 L 2500 100 Z"/>
               </g>
               <g style="fill:none; stroke:#B0B0B0; stroke-width:2; stroke-dasharray:2 4">
                  <path d="M 2500 1100 L 2500 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="2500" y="1125">0</text>-->
                  <path d="M 2100 1100 L 2100 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="2100" y="1125">-10</text>-->
                  <path d="M 1700 1100 L 1700 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="1700" y="1125">-20</text>-->
                  <path d="M 1300 1100 L 1300 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="1300" y="1125">-30</text>-->
                  <path d="M  900 1100 L  900 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="900" y="1125">-40</text>-->
                  <path d="M  500 1100 L  500 100 Z"/>
                  <!--<text style="fill:black; stroke:none" x="500" y="1125">-50</text>-->
                  <!--<text style="fill:black; stroke:none" x="1100" y="1140">Minutes</text>-->
               </g>
               <svg x="100" y="100" width="2400" height="1000">
                  <g transform="scale(1.0,-1.0) translate(0.0,-1000)">
                     <polyline Id="pts0" 
                        points="0 0,"
                        style="stroke:#C00000; stroke-width: 3; fill : none;"/>
                     <polyline Id="pts1" 
                        points="0 0,"
                        style="stroke:#0000C0; stroke-width: 3; fill : none;"/>
                     <polyline Id="pts2" 
                        points="0 0,"
                        style="stroke:#00C000; stroke-width: 3; fill : none;"/>
                     <polyline Id="pts3" 
                        points="0 0,"
                        style="stroke:#C000C0; stroke-width: 3; fill : none;"/>
                  </g>
               </svg>
            </g>
            </svg>
        </div>
        <!-- End Content -->
      </div>
    </td>
  </tr>
  <tr><td colspan="2">&nbsp;</td></tr>
</table>

</body>
</html>