<!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>