<!-- FSWebServer - Example Index Page Copyright (c) 2015 Hristo Gochkov. All rights reserved. This file is part of the WebServer library for Arduino environment. This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA --> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>ESP Monitor</title> <script type="text/javascript" src="graphs.js"></script> <script type="text/javascript"> var heap,temp,digi; var reloadPeriod = 1000; var running = false; function loadValues(){ if(!running) return; var xh = new XMLHttpRequest(); xh.onreadystatechange = function(){ if (xh.readyState == 4){ if(xh.status == 200) { var res = JSON.parse(xh.responseText); heap.add(res.heap); temp.add(res.analog); digi.add(res.gpio); if(running) setTimeout(loadValues, reloadPeriod); } else running = false; } }; xh.open("GET", "/all", true); xh.send(null); }; function run(){ if(!running){ running = true; loadValues(); } } function onBodyLoad(){ var refreshInput = document.getElementById("refresh-rate"); refreshInput.value = reloadPeriod; refreshInput.onchange = function(e){ var value = parseInt(e.target.value); reloadPeriod = (value > 0)?value:0; e.target.value = reloadPeriod; } var stopButton = document.getElementById("stop-button"); stopButton.onclick = function(e){ running = false; } var startButton = document.getElementById("start-button"); startButton.onclick = function(e){ run(); } // Example with 10K thermistor //function calcThermistor(v) { // var t = Math.log(((10230000 / v) - 10000)); // t = (1/(0.001129148+(0.000234125*t)+(0.0000000876741*t*t*t)))-273.15; // return (t>120)?0:Math.round(t*10)/10; //} //temp = createGraph(document.getElementById("analog"), "Temperature", 100, 128, 10, 40, false, "cyan", calcThermistor); temp = createGraph(document.getElementById("analog"), "Analog Input", 100, 128, 0, 1023, false, "cyan"); heap = createGraph(document.getElementById("heap"), "Current Heap", 100, 125, 0, 30000, true, "orange"); digi = createDigiGraph(document.getElementById("digital"), "GPIO", 100, 146, [0, 4, 5, 16], "gold"); run(); } </script> </head> <body id="index" style="margin:0; padding:0;" onload="onBodyLoad()"> <div id="controls" style="display: block; border: 1px solid rgb(68, 68, 68); padding: 5px; margin: 5px; width: 362px; background-color: rgb(238, 238, 238);"> <label>Period (ms):</label> <input type="number" id="refresh-rate"/> <input type="button" id="start-button" value="Start"/> <input type="button" id="stop-button" value="Stop"/> </div> <div id="heap"></div> <div id="analog"></div> <div id="digital"></div> </body> </html>