<!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"> </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">°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"> </td></tr>
</table>
</body>
</html>