196 lines
7.3 KiB
HTML
196 lines
7.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<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>
|