|
|
|
|
<!--
|
|
|
|
|
FSWebServer - Example Index Page
|
|
|
|
|
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
|
|
|
|
|
This file is part of the ESP8266WebServer 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>
|
|
|
|
|
<p style="padding-top:15px;text-align:center">
|
|
|
|
|
<a href="/_ac"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" border="0" title="AutoConnect menu" alt="AutoConnect menu"/></a>
|
|
|
|
|
</p>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
